/*
 * Clear Path — responsive layer.
 * The theme is built entirely with inline style="" attributes and (aside from the
 * article template) has no breakpoints. Rather than rewrite every inline style, this
 * sheet layers mobile/tablet behavior on top by matching the exact, repeated inline
 * style substrings. Desktop (>=769px) is untouched — every rule is inside a max-width
 * media query. Overrides use !important because inline styles outrank normal rules.
 *
 * Breakpoints: <=768 (tablet/large-phone), <=560 (phone), <=380 (small phone).
 */

/* ============================================ FIXED NAV, SOLID ON SCROLL
 * Nav is position:fixed (set inline in header.php) so hero photos can bleed
 * up underneath it edge-to-edge. Transparent by default over the hero;
 * header.php's scroll listener adds .cp-nav--solid past a small threshold,
 * which this rule turns into a solid navy bar + soft shadow so nav links
 * stay readable once the user has scrolled past the hero photo. */
.cp-nav {
  background: rgba(10,43,73,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.cp-nav.cp-nav--solid {
  background: #0A2B49;
  box-shadow: 0 2px 18px rgba(0,0,0,0.25);
}
/* Since the nav is now fixed (removed from normal flow), give the mobile
   dropdown links a matching solid backdrop when open so they aren't
   transparent over page content beneath them. */
@media (max-width: 999px) {
  .cp-nav:has(.cp-navtoggle-cb:checked) {
    background: #0A2B49;
  }
}

/* ---- global guards ---- */
* { box-sizing: border-box; }
img, svg, video { max-width: 100%; }
html, body { overflow-x: clip; }

/* ============================================ EXPERIENCE HERO — solid navy bg,
 * right photo bleeds edge-to-edge (viewport right) and top-to-bottom of the hero
 * band, flush under the fixed nav. Left column keeps normal padding/vertical
 * centering. Photo column has no intrinsic height, so it must stretch via the
 * parent grid row (align-items:stretch, set inline) + height:100% on the column,
 * with the <img> itself covering that box. */
.cp-exp-hero-photo {
  position: relative;
  width: 100%;
  min-height: 560px;
}
.cp-exp-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ============================================ HERO BACKGROUND PHOTOGRAPHY
 * Faded + blurred, full-bleed CRE photo behind a hero band. Content is lifted
 * above it; a navy scrim guarantees white-text contrast. Applied to heroes
 * carrying class="cp-hero" with a clearpath_hero_bg() layer as first child. */
.cp-hero { position: relative; }
.cp-hero > :not(.cp-herobg) { position: relative; z-index: 1; }
.cp-herobg {
  /* left: 50vw (not 50%) is the fix — 50% is relative to THIS hero box's own
     width, which only spans the full viewport on heroes with no max-width
     (e.g. Home). Heroes with a max-width constraint (BOV/Advisory) sit at a
     narrower, left-flush box, so left:50% computed from that box and the
     photo missed the right side of the screen. 50vw is a fixed viewport
     fraction regardless of the hero box's own width, so this now works
     the same on every hero shape. Found + fixed 2026-08-18. */
  position: absolute; top: 0; bottom: 0; left: 50vw; width: 100vw; margin-left: -50vw;
  z-index: 0; overflow: hidden; pointer-events: none;
}
.cp-herobg .cp-herobg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.cp-herobg .cp-herobg-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,43,73,0.80) 0%, rgba(10,43,73,0.68) 45%, rgba(10,43,73,0.84) 100%);
}
/* Left-to-right variant: use when the photo has empty/plain space on the
   right and its subject mass sits toward the left-to-center, OR (more
   commonly here) dark-left/light-right for text sitting on the left against
   open sky. Applied per-photo via clearpath_hero_bg($slug, $ltr=true). */
.cp-herobg .cp-herobg-scrim--ltr {
  background: linear-gradient(90deg, rgba(10,43,73,0.92) 0%, rgba(10,43,73,0.68) 45%, rgba(10,43,73,0.38) 100%);
}

/* ============================================================= TABLET / PHONE (<=768) */
@media (max-width: 768px) {

  /* Horizontal padding: every "padding: <v> 64px[...]" section -> tighten sides only,
     preserving each element's own vertical rhythm. "px 64px" is padding-exclusive here. */
  [style*="px 64px"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* Experience hero: stacked layout collapses the grid to 1fr (existing rule below),
     so restore left/right padding on the copy column (it had 0 on the right for the
     desktop bleed) and cap the photo to a sane mobile height instead of the desktop
     560px min-height / full-hero-stretch. */
  .cp-exp-hero-copy { padding: 56px 22px 40px !important; }
  .cp-exp-hero-photo { min-height: 320px !important; }

  /* Full-bleed-ish bands that used "margin: 0 64px" */
  [style*="margin: 0 64px"] { margin-left: 20px !important; margin-right: 20px !important; }

  /* Nav bar padding */
  .cp-nav { padding: 18px 22px !important; }
  /* Footer padding is caught by the "px 64px" rule above (30px 64px -> 30px 22px). */

  /* ---- Stack the proportional multi-column grids ---- */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 0.8fr 1.2fr"],
  [style*="grid-template-columns: 0.65fr 1.35fr"],
  [style*="grid-template-columns: 1.15fr 0.85fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 180px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Two short-label grids read better as 2-up than a long single column:
     capabilities (gap: 14px 28px) and client names (gap: 0 40px). */
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 14px 28px"],
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 0 40px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Tighten the large inter-column gaps once stacked (64px vertical gap is too much). */
  [style*="gap: 64px"] { gap: 30px !important; }
  [style*="gap: 0 64px"] { gap: 0 30px !important; }

  /* Experience stat strip: kill vertical dividers when stacked, use a bottom rule. */
  [style*="border-right: 1px solid rgba(242,241,234,0.18)"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(242,241,234,0.18) !important;
  }
  /* Remove the trailing divider on the last stacked stat + reset its left padding. */
  [style*="padding: 34px 28px 32px 0"],
  [style*="padding: 34px 28px 32px 32px"],
  [style*="padding: 34px 0 32px 32px"] {
    padding: 26px 0 !important;
  }

  /* Timeline: date + body no longer side-by-side; add breathing room. */
  [style*="grid-template-columns: 180px 1fr"] { gap: 8px !important; }

  /* ---- Fluid type: clamp the big desktop sizes down, capped at the desktop value ---- */
  [style*="font-size: 64px"] { font-size: clamp(34px, 8.8vw, 64px) !important; }
  [style*="font-size: 58px"] { font-size: clamp(33px, 8.2vw, 58px) !important; }
  [style*="font-size: 56px"] { font-size: clamp(32px, 8vw, 56px) !important; }
  [style*="font-size: 52px"] { font-size: clamp(31px, 7.6vw, 52px) !important; }
  [style*="font-size: 44px"] { font-size: clamp(34px, 7vw, 44px) !important; }
  [style*="font-size: 42px"] { font-size: clamp(28px, 6.6vw, 42px) !important; }
  [style*="font-size: 40px"] { font-size: clamp(27px, 6.4vw, 40px) !important; }
  [style*="font-size: 38px"] { font-size: clamp(26px, 6.2vw, 38px) !important; }
  [style*="font-size: 34px"] { font-size: clamp(27px, 6vw, 34px) !important; }
  [style*="font-size: 32px"] { font-size: clamp(25px, 5.6vw, 32px) !important; }
  [style*="font-size: 30px"] { font-size: clamp(24px, 5.4vw, 30px) !important; }

  /* Readability floor: bump sub-12px display text to 12px (WCAG-ish legibility). */
  [style*="font-size: 11px"] { font-size: 12px !important; }

  /* Hero CTA button rows -> full-width stacked, tappable. */
  [style*="display: flex; gap: 18px; justify-content: center"],
  [style*="display: flex; gap: 18px; margin-top: 40px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  [style*="display: flex; gap: 18px; justify-content: center"] > a,
  [style*="display: flex; gap: 18px; margin-top: 40px"] > a {
    text-align: center !important;
  }

  /* Give every primary/secondary button a comfortable tap height. */
  a[href^="mailto:"][style*="padding: 16px"],
  a[style*="padding: 16px 34px"],
  a[style*="padding: 16px 36px"],
  a[style*="padding: 15px 34px"],
  a[style*="padding: 15px 32px"],
  a[style*="padding: 14px 28px"] { display: inline-block; }

  /* Image bands: trim tall fixed heights so they don't dominate a phone screen. */
  [style*="height: 320px"] { height: 220px !important; }
}

/* ============================================================= PHONE (<=560) */
@media (max-width: 560px) {
  /* Collapse the two short-label grids to a single column on true phones. */
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 14px 28px"],
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 0 40px"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero top padding: mobile nav is the same fixed height as desktop, so mirror the
     desktop top-padding bump here too (scaled down for the tighter mobile canvas)
     rather than collapsing back to the old cramped value. Matches every hero's new
     top-padding value (140/136/128px) set inline across the templates. */
  [style*="padding: 140px 64px 80px"] { padding-top: 84px !important; padding-bottom: 52px !important; }
  [style*="padding: 136px 64px"] { padding-top: 80px !important; }
  [style*="padding: 128px 0 80px 64px"] { padding-top: 80px !important; }

  /* Proof-line stat row: tidy wrap. */
  [style*="padding: 46px 64px"] { gap: 14px 26px !important; }
}

/* ============================================================= MOBILE NAV (hamburger)
 * Breakpoint is 999px, NOT 768px, and that is deliberate. The desktop nav link row
 * needs ~975px to sit beside the logo; below 1000px it wrapped to a second full-width
 * row and pushed the header from 84px to 118px tall. That broke every iPad portrait
 * and small laptop window. Audit 2026-07-30 measured the wrap at 769/800/850/900/950/975
 * and clean at 1000, so the hamburger now covers the whole 769-999 band.
 * Keep this in sync if nav items are ever added: more links = a higher required width. */
/* The toggle checkbox is visually hidden but must remain FOCUSABLE and exposed to
 * assistive tech, so it is stretched over the label rather than being given
 * aria-hidden or display:none. It carries aria-expanded/aria-controls (synced by the
 * small script in header.php) because a CSS checkbox hack cannot announce its own state.
 * Do NOT re-add aria-hidden here: aria-hidden on a focusable control is an explicit
 * ARIA violation and was a defect found by audit 2026-07-30.
 * POSITIONING: it must track the LABEL, not a hardcoded offset. A first attempt used
 * `right: 22px; top: 10px`, which only lined up under 769px because the nav padding
 * changes from 28px/48px to 18px/22px at that breakpoint — at 999px the box drifted off
 * the icon to 32% overlap. Wrapping the label in a relative context and stretching the
 * checkbox to inset:0 keeps them locked together at every width. */
.cp-navtoggle { display: none; }
.cp-navtoggle-wrap { display: none; position: relative; }
.cp-navtoggle-cb { position: absolute; opacity: 0; margin: 0; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer; }
@media (min-width: 1000px) { .cp-navtoggle-wrap, .cp-navtoggle-cb { display: none; } }

/* Visible focus ring. Chrome's default blue outline is very low contrast on the navy
 * header, so every focusable element gets the green treatment instead. */
.cp-nav a:focus-visible,
.cp-footer a:focus-visible,
.cp-navtoggle-cb:focus-visible { outline: 3px solid #9CCB55; outline-offset: 3px; }
.cp-navtoggle-wrap:has(.cp-navtoggle-cb:focus-visible) { outline: 3px solid #9CCB55; outline-offset: 2px; }

@media (max-width: 999px) {
  /* NOTE: .cp-nav is position:fixed (set inline in header.php) so it stays
     pinned on mobile too, matching desktop scroll behavior. It was
     `position: relative` here previously, which predates the fixed-nav
     change and would have made the mobile nav scroll away — the dropdown's
     own positioning context now comes from the fixed ancestor, so this
     override is no longer needed and was removed 2026-08-18. */

  /* Show the hamburger; hide the desktop link row by default. */
  .cp-navtoggle-wrap {
    display: inline-flex !important;
    width: 44px; height: 44px; margin: -8px 0;
  }
  .cp-navtoggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    cursor: pointer; color: #F2F1EA;
  }
  .cp-navtoggle svg { display: block; }
  .cp-navtoggle .cp-icon-close { display: none; }

  .cp-navlinks {
    display: none !important;
    width: 100%;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    white-space: normal !important;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(242,241,234,0.14);
  }
  .cp-navlinks a {
    width: 100%;
    /* 14px (not 13px) so the box clears the 44px WCAG 2.5.5 / Apple HIG tap minimum;
       at 13px it measured 42px. Gap is 6px so adjacent hit regions stay distinct. */
    padding: 14px 2px !important;
    font-size: 15px !important;
    letter-spacing: 0.06em;
  }
  /* The "request a proposal" pill in the nav -> full-width accent button on mobile. */
  .cp-navlinks a[href^="mailto:"] {
    margin-top: 6px;
    border-bottom: none !important;
    background: #9CCB55;
    color: #0A2B49 !important;
    text-align: center;
    padding: 14px 2px !important;
    font-weight: 700;
  }

  /* Checkbox-hack toggle: when checked, reveal the links + flip the icon.
     NOTE the selectors changed 2026-07-30 when the input+label were wrapped in
     .cp-navtoggle-wrap for positioning. .cp-navlinks is no longer a SIBLING of the
     input, so it is reached with :has() on the nav; the icon flip stays a sibling
     selector but now scopes inside the wrap. */
  .cp-nav:has(.cp-navtoggle-cb:checked) .cp-navlinks { display: flex !important; }
  .cp-navtoggle-cb:checked ~ .cp-navtoggle .cp-icon-open { display: none; }
  .cp-navtoggle-cb:checked ~ .cp-navtoggle .cp-icon-close { display: block; }
}

/* ============================================================= FOOTER (mobile) */
@media (max-width: 768px) {
  .cp-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    text-align: left;
  }
  /* Footer nav row: wrap + real tap padding so each link clears 40px vertically. */
  .cp-footer-links {
    flex-wrap: wrap !important;
    gap: 4px 22px !important;
    width: 100%;
    margin: 4px 0 6px !important;
  }
  .cp-footer-links a {
    padding: 12px 0 !important;
    display: inline-block;
    font-size: 13px !important;
  }
  .cp-footer-contact { line-height: 1.7; }
}

/* Insights section headers (enlarged 2026-08-14): scale down on small screens */
@media (max-width: 600px) {
  .cp-insights-section-label { font-size: 28px !important; margin-top: 60px !important; }
}