/* ============================================================
   SITE-WIDE THEME OVERLAY — Shenandoah-inspired
   Applied on every non-home page to unify with the new home design.
   Loaded AFTER base.css and style.css so it wins the cascade.
   ============================================================ */

:root {
  --sh-accent: #399ad1;         /* CEI light blue */
  --sh-accent-hover: #2887bd;
  --sh-accent-soft: rgba(57, 154, 209, 0.14);
  --sh-accent-tint: #a8d6ee;    /* eyebrow on dark */
  --sh-accent-tint-2: #cfe6f5;  /* eyebrow on darker */
  --sh-navy: #0a1e40;
  --sh-navy-2: #0e2a55;
  --sh-blue-mid: #12467d;
}

/* ============================================================
   1. HEADER — solid navy across every page (not just home)
   Replicates the home-page override targeted at [data-page="home"]
   Applies to any page NOT flagged data-page="home"
   ============================================================ */
body:not([data-page="home"]) .header {
  background: var(--sh-navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}
body:not([data-page="home"]) .header .nav-link,
body:not([data-page="home"]) .header .logo-text,
body:not([data-page="home"]) .header .brand-name,
body:not([data-page="home"]) .header .theme-toggle,
body:not([data-page="home"]) .header .mobile-menu-toggle {
  color: #ffffff !important;
}
body:not([data-page="home"]) .header .nav-link {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
}
body:not([data-page="home"]) .header .nav-link.active,
body:not([data-page="home"]) .header .nav-link[aria-current="page"] {
  color: #ffffff !important;
}
body:not([data-page="home"]) .header .nav-link.active::after {
  background: var(--sh-accent) !important;
}
/* Nav caret */
body:not([data-page="home"]) .header .nav-caret {
  color: rgba(255, 255, 255, 0.75) !important;
}
/* Convert the "Request a Quote" primary button into a light-blue pill */
body:not([data-page="home"]) .header .btn-primary {
  background: var(--sh-accent) !important;
  border-color: var(--sh-accent) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
  box-shadow: 0 6px 18px rgba(57, 154, 209, 0.35) !important;
}
body:not([data-page="home"]) .header .btn-primary:hover {
  background: var(--sh-accent-hover) !important;
  border-color: var(--sh-accent-hover) !important;
}
/* Adjust logo image so it reads on navy */
body:not([data-page="home"]) .header .logo-svg,
body:not([data-page="home"]) .header .logo-img {
  filter: brightness(0) invert(1) !important;
}

/* Mobile nav on dark header */
body:not([data-page="home"]) .mobile-nav {
  background: var(--sh-navy) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body:not([data-page="home"]) .mobile-nav-link {
  color: #ffffff !important;
}

/* ============================================================
   2. SUBHERO — Shenandoah-style dark photo band
   ============================================================ */
body:not([data-page="home"]) .subhero {
  background: var(--sh-navy) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  padding-block: clamp(7rem, 14vw, 11rem) clamp(3.5rem, 7vw, 5.5rem) !important;
  position: relative;
  overflow: hidden;
  min-height: 52vh;
  display: flex;
  align-items: center;
}
/* Photo backdrop layer — set --hero-img on the <section> element */
body:not([data-page="home"]) .subhero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-img, none);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Dark navy overlay — sits on top of the photo, under the copy */
body:not([data-page="home"]) .subhero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(10, 30, 64, 0.92) 0%,
      rgba(10, 30, 64, 0.80) 42%,
      rgba(10, 30, 64, 0.42) 78%,
      rgba(10, 30, 64, 0.62) 100%
    );
  z-index: 1;
  pointer-events: none;
}
/* Fallback: pages with no photo variable get the old navy gradient */
body:not([data-page="home"]) .subhero:not([style*="--hero-img"])::before {
  background:
    radial-gradient(ellipse at top right, rgba(57, 154, 209, 0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--sh-navy) 0%, var(--sh-navy-2) 55%, var(--sh-blue-mid) 100%);
}
body:not([data-page="home"]) .subhero > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

body:not([data-page="home"]) .subhero-title {
  font-family: 'Satoshi', 'General Sans', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 0.98 !important;
  color: #ffffff !important;
  font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem) !important;
  max-width: 22ch !important;
  margin-bottom: 1.25rem !important;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
body:not([data-page="home"]) .subhero-lede {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.15rem !important;
  max-width: 62ch !important;
  line-height: 1.55 !important;
  font-weight: 300 !important;
}
body:not([data-page="home"]) .breadcrumb {
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  font-size: 0.72rem !important;
}
body:not([data-page="home"]) .breadcrumb a { color: rgba(255, 255, 255, 0.85) !important; }
body:not([data-page="home"]) .breadcrumb a:hover { color: var(--sh-accent-tint) !important; }
body:not([data-page="home"]) .breadcrumb .sep { color: rgba(255, 255, 255, 0.4) !important; }

/* Kicker/eyebrow inside subhero — orange→light-blue tint */
body:not([data-page="home"]) .subhero .eyebrow,
body:not([data-page="home"]) .subhero .kicker,
body:not([data-page="home"]) .subhero .section-kicker {
  color: var(--sh-accent-tint) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.24em !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
}

/* ============================================================
   3. SECTION TITLES — uppercase Satoshi, accent bar above
   ============================================================ */
body:not([data-page="home"]) .section-title {
  font-family: 'Satoshi', 'General Sans', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.005em !important;
  line-height: 1.02 !important;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem) !important;
  position: relative;
  padding-top: 1rem;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
/* small accent bar above section titles */
body:not([data-page="home"]) .section-title::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--sh-accent);
  margin-bottom: 1rem;
  border-radius: 2px;
}
/* When a section-title sits inside a dark band, keep the bar but text white */
body:not([data-page="home"]) .section-dark .section-title,
body:not([data-page="home"]) .cta-band .section-title { color: #ffffff !important; }

/* Section eyebrows/kickers */
body:not([data-page="home"]) .section .eyebrow,
body:not([data-page="home"]) .section .kicker,
body:not([data-page="home"]) .section-kicker {
  color: var(--sh-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.24em !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  margin-bottom: 0.9rem !important;
  display: inline-block;
}

body:not([data-page="home"]) .section-lede {
  font-size: 1.1rem !important;
  line-height: 1.55 !important;
  color: var(--color-text-muted) !important;
  font-weight: 300 !important;
}

/* ============================================================
   4. CARDS — service, value, project cards
   Give them the Shenandoah-style photo-first navy overlay treatment
   ============================================================ */
body:not([data-page="home"]) .service-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--color-border) !important;
  background: #fff !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  box-shadow: 0 4px 14px rgba(10, 30, 64, 0.06);
}
body:not([data-page="home"]) .service-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 40px rgba(10, 30, 64, 0.16) !important;
}
body:not([data-page="home"]) .service-card-media {
  aspect-ratio: 4 / 3 !important;
  overflow: hidden;
}
body:not([data-page="home"]) .service-card-media img {
  transition: transform 0.5s ease !important;
}
body:not([data-page="home"]) .service-card:hover .service-card-media img {
  transform: scale(1.05) !important;
}
body:not([data-page="home"]) .service-card-body {
  padding: 1.75rem 1.5rem !important;
}
body:not([data-page="home"]) .service-card-body h3,
body:not([data-page="home"]) .service-card-body .service-card-title {
  font-family: 'Satoshi', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  font-size: 1.15rem !important;
  line-height: 1.15 !important;
  color: var(--sh-navy) !important;
  margin: 0 0 0.6rem !important;
}
body:not([data-page="home"]) .service-card-link {
  color: var(--sh-accent) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  font-size: 0.8rem !important;
}
body:not([data-page="home"]) .service-card-link:hover {
  color: var(--sh-accent-hover) !important;
}

/* Value cards (About page) */
body:not([data-page="home"]) .value {
  border-radius: 16px !important;
  padding: 2rem 1.75rem !important;
  border: 1px solid var(--color-border) !important;
  background: #ffffff !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
body:not([data-page="home"]) .value:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(10, 30, 64, 0.10);
}
body:not([data-page="home"]) .value-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--sh-accent) 0%, var(--sh-blue-mid) 100%) !important;
  color: #fff !important;
}
body:not([data-page="home"]) .value h3 {
  font-family: 'Satoshi', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  font-size: 1.05rem !important;
  color: var(--sh-navy) !important;
  margin-bottom: 0.6rem !important;
}

/* Project cards */
body:not([data-page="home"]) .project {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: var(--sh-navy) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
body:not([data-page="home"]) .project:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
body:not([data-page="home"]) .project-title,
body:not([data-page="home"]) .project h3 {
  font-family: 'Satoshi', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  font-size: 1.15rem !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
}
body:not([data-page="home"]) .project-body,
body:not([data-page="home"]) .project-desc,
body:not([data-page="home"]) .project p {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
}
body:not([data-page="home"]) .project-tag,
body:not([data-page="home"]) .project .tag,
body:not([data-page="home"]) .project-category,
body:not([data-page="home"]) .project-meta {
  color: var(--sh-accent-tint) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
}

/* Project stat block — the strong value + label pair under each project card */
body:not([data-page="home"]) .project-stat strong,
body:not([data-page="home"]) .project-stat b {
  color: #ffffff !important;
  font-family: 'Satoshi', sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.01em !important;
  display: block;
  margin-bottom: 0.1rem;
}
body:not([data-page="home"]) .project-stat span,
body:not([data-page="home"]) .project-stat small {
  color: rgba(255, 255, 255, 0.75) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
  font-size: 0.68rem !important;
}
/* Force any remaining muted text inside project cards to legible tint */
body:not([data-page="home"]) .project small,
body:not([data-page="home"]) .project .muted,
body:not([data-page="home"]) .project-body small {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ============================================================
   5. CTA BAND — photo background + navy overlay + blue pill
   ============================================================ */
body:not([data-page="home"]) .cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sh-navy) 0%, var(--sh-navy-2) 50%, var(--sh-blue-mid) 100%) !important;
  border-radius: 20px !important;
  padding: clamp(3rem, 6vw, 5rem) !important;
  box-shadow: 0 24px 60px rgba(10, 30, 64, 0.25) !important;
}
body:not([data-page="home"]) .cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 30%, rgba(57, 154, 209, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(57, 154, 209, 0.14) 0%, transparent 40%);
  pointer-events: none;
}
body:not([data-page="home"]) .cta-band > * { position: relative; z-index: 1; }
body:not([data-page="home"]) .cta-band h2 {
  font-family: 'Satoshi', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.005em !important;
  line-height: 1.02 !important;
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem) !important;
  color: #ffffff !important;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
body:not([data-page="home"]) .cta-band p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.05rem !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
}
body:not([data-page="home"]) .cta-band .btn,
body:not([data-page="home"]) .cta-band .btn-primary,
body:not([data-page="home"]) .cta-band .btn-accent {
  background: var(--sh-accent) !important;
  border-color: var(--sh-accent) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.9rem 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.84rem !important;
  box-shadow: 0 10px 24px rgba(57, 154, 209, 0.35) !important;
}
body:not([data-page="home"]) .cta-band .btn:hover,
body:not([data-page="home"]) .cta-band .btn-primary:hover,
body:not([data-page="home"]) .cta-band .btn-accent:hover {
  background: var(--sh-accent-hover) !important;
  border-color: var(--sh-accent-hover) !important;
  transform: translateY(-1px);
}

/* ============================================================
   6. BUTTONS site-wide — the primary CTA becomes a light-blue pill
   (applies to inline .btn-primary anywhere outside the header/CTA)
   ============================================================ */
body:not([data-page="home"]) .section .btn-primary,
body:not([data-page="home"]) main .btn-primary {
  background: var(--sh-accent) !important;
  border-color: var(--sh-accent) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.85rem 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.82rem !important;
  box-shadow: 0 8px 20px rgba(57, 154, 209, 0.30) !important;
}
body:not([data-page="home"]) .section .btn-primary:hover,
body:not([data-page="home"]) main .btn-primary:hover {
  background: var(--sh-accent-hover) !important;
  border-color: var(--sh-accent-hover) !important;
  transform: translateY(-1px);
}
body:not([data-page="home"]) .section .btn-ghost,
body:not([data-page="home"]) main .btn-ghost {
  border-radius: 999px !important;
  padding: 0.85rem 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.82rem !important;
  border: 1.5px solid var(--sh-navy) !important;
  color: var(--sh-navy) !important;
}

/* ============================================================
   7. FAQ (About page) — sharpen navy question / blue accent
   ============================================================ */
body:not([data-page="home"]) .faq details summary,
body:not([data-page="home"]) .faq-question,
body:not([data-page="home"]) .accordion-question {
  color: var(--sh-navy) !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em;
}
body:not([data-page="home"]) .faq-icon,
body:not([data-page="home"]) .accordion-icon {
  color: var(--sh-accent) !important;
}

/* ============================================================
   8. CONTACT FORM — light-blue focus / send button
   ============================================================ */
body:not([data-page="home"]) .form-input:focus,
body:not([data-page="home"]) .form-textarea:focus,
body:not([data-page="home"]) .form-select:focus,
body:not([data-page="home"]) input:focus,
body:not([data-page="home"]) textarea:focus,
body:not([data-page="home"]) select:focus {
  border-color: var(--sh-accent) !important;
  box-shadow: 0 0 0 3px var(--sh-accent-soft) !important;
  outline: none !important;
}
body:not([data-page="home"]) .contact-form button[type="submit"],
body:not([data-page="home"]) .form-submit,
body:not([data-page="home"]) form button.btn-primary {
  background: var(--sh-accent) !important;
  border-color: var(--sh-accent) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 1rem 2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body:not([data-page="home"]) .contact-form button[type="submit"]:hover,
body:not([data-page="home"]) .form-submit:hover {
  background: var(--sh-accent-hover) !important;
  border-color: var(--sh-accent-hover) !important;
}

/* Contact info left column labels */
body:not([data-page="home"]) .contact-info h3,
body:not([data-page="home"]) .contact-info .contact-label {
  font-family: 'Satoshi', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 0.78rem !important;
  color: var(--sh-accent) !important;
  font-weight: 700 !important;
}

/* ============================================================
   9. FOOTER — grounded dark footer replaces light one
   ============================================================ */
body:not([data-page="home"]) .footer {
  background: var(--sh-navy) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body:not([data-page="home"]) .footer h4,
body:not([data-page="home"]) .footer .footer-title,
body:not([data-page="home"]) .footer .footer-heading {
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}
body:not([data-page="home"]) .footer a {
  color: rgba(255, 255, 255, 0.75) !important;
}
body:not([data-page="home"]) .footer a:hover {
  color: var(--sh-accent-tint) !important;
}
body:not([data-page="home"]) .footer p {
  color: rgba(255, 255, 255, 0.7) !important;
}
body:not([data-page="home"]) .footer .footer-bottom,
body:not([data-page="home"]) .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
/* Footer logo: place on a white pill so the color logo reads cleanly on dark navy */
body:not([data-page="home"]) .footer .footer-brand .brand-logo,
body:not([data-page="home"]) .footer-logo img,
body:not([data-page="home"]) .footer .footer-logo-svg {
  background: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  filter: none !important;
  box-sizing: content-box !important;
}
/* Home page footer is light — no pill needed there */
body[data-page="home"] .footer .footer-brand .brand-logo {
  background: transparent;
}

/* ============================================================
   10. GHOST WATERMARK — soften on dark footer
   ============================================================ */
body:not([data-page="home"]) .brand-watermark,
body:not([data-page="home"]) .ghost-watermark {
  color: rgba(255, 255, 255, 0.03) !important;
}

/* ============================================================
   11. Base body / text colors on subpages — keep light theme
   but ensure section backgrounds alternate more clearly
   ============================================================ */
body:not([data-page="home"]) .section:nth-of-type(even):not(.section-dark):not(.section-tinted) {
  background: #f6f8fb;
}

/* Explicit "section-dark" opt-in for any page that wants a Shenandoah dark band */
body:not([data-page="home"]) .section-dark {
  background: var(--sh-navy) !important;
  color: #ffffff !important;
  padding-block: clamp(4rem, 8vw, 6rem) !important;
}
body:not([data-page="home"]) .section-dark .section-title,
body:not([data-page="home"]) .section-dark h2,
body:not([data-page="home"]) .section-dark h3 { color: #ffffff !important; }
body:not([data-page="home"]) .section-dark p,
body:not([data-page="home"]) .section-dark li { color: rgba(255, 255, 255, 0.85) !important; }