/* Core Clinical Trials — site chrome (header + footer), Michelle's v5 design.
   Lifted verbatim from core-homepage_5.html so every page wears the same chrome, instead of the
   v5 homepage carrying its own while the other pages kept the previous navbar.

   Revised to the client's implementation spec of 2026-09-07 (§2): one header CTA (the ghost
   "Talk to Clinical Ops" button and its rules are gone), visible hover / focus / current-page
   states on every chrome control, and the nav collapses to the burger at 1180px — measured, not
   guessed: the six spec labels (Network · Capabilities · Therapeutic Areas · Sponsors & CROs ·
   Physicians & Sites · Leadership) need ~693px at the ≤1360px sizing, which with the lockup,
   the CTA, gaps and gutters is ~1127px of bar. Collapsing at 1180px leaves ~50px of slack for
   OS font-metric differences and guarantees nothing wraps or overlaps at 1024px, where the spec
   tests. Phones (≤760px) show logo + menu control only; the CTA is the opened menu's last item.

   EVERYTHING here is scoped under .hdr / .ft on purpose. The two design systems share class
   names — .btn, .nav, .hero, .wrap, .small, .eyebrow, .sec-head, .ta — and the custom properties
   --ink, --blue, --line and --maxw are declared with DIFFERENT values in style.css. Loading v5's
   CSS globally would silently restyle every existing page body. Scoping keeps v5 chrome and the
   current page designs side by side until the full redesign lands.

   Note the variables below sit on .hdr/.ft rather than :root for the same reason: custom
   properties inherit, so the chrome subtree gets v5 values while the rest of the document keeps
   style.css's. This also lets the rules stay byte-identical to the source (they reference
   var(--ink) etc.), so re-syncing from a future export stays a copy-paste.

   Loaded by layouts/public.blade.php AFTER style.css. */

.hdr,
.ft {
  --ink: #0B1B35;
  --ink-2: #0F274C;
  --blue: #2E86DE;
  --blue-lt: #4AA2F0;
  --cta: #EF6A02;          /* Pia's header CTA orange (sampled off 1-V3) */
  --cta-dk: #D95F00;
  --paper-2: #F5F8FC;
  --paper-3: #EDF2F9;
  --line: #DFE7F1;
  --line-2: #C9D6E6;
  --muted: #55668A;
  --muted-2: #7A88A3;
  --maxw: 1440px;
  --gutter: clamp(20px, 2.9vw, 42px);
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);

  font-family: var(--sans);
  box-sizing: border-box;
}

.hdr *,
.hdr *::before,
.hdr *::after,
.ft *,
.ft *::before,
.ft *::after { box-sizing: border-box }

.hdr a,
.ft a { color: inherit; text-decoration: none }

.hdr svg,
.ft svg { max-width: 100%; display: block }

/* Anchor targets on the homepage sit under the sticky header. Global (not chrome-scoped)
   because it applies to the page body, and harmless on pages with no [id] sections. */
section[id] { scroll-margin-top: 86px }

/* --- Buttons (chrome only) -------------------------------- */
.hdr .btn,
.ft .btn {
  --bg: var(--cta); --fg: #fff; --bd: var(--cta);
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  padding: 14px 22px; border-radius: 9px; cursor: pointer; line-height: 1.2;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 1px 2px rgba(8, 24, 53, .12);
}
.hdr .btn svg, .ft .btn svg { transition: transform .25s var(--ease) }
.hdr .btn:hover, .ft .btn:hover { --bg: var(--cta-dk); --bd: var(--cta-dk); transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(239, 106, 2, .55) }
.hdr .btn:hover svg, .ft .btn:hover svg { transform: translateX(3px) }
.hdr .btn:focus-visible, .ft .btn:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px }
.hdr .btn--sm, .ft .btn--sm { padding: 14px 22px; font-size: 15px }

/* --- Header ----------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
.hdr.is-stuck { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(8, 24, 53, .5) }
.hdr__in { display: flex; align-items: center; gap: 20px; height: 74px; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter) }
.hdr .logo, .ft .logo { display: flex; align-items: center; gap: 11px; flex: none }
.hdr .logo:focus-visible, .ft .logo:focus-visible { outline: 2px solid var(--cta); outline-offset: 4px; border-radius: 4px }

/* The lockup is a single PNG cut from Pia's final artwork (FIN063026) at 4x. Sized by HEIGHT
   with width:auto so the 3.01:1 aspect can never distort; the intrinsic width/height attributes
   on the tag reserve the space, so the header does not reflow while the image decodes.
   48px keeps the "core" wordmark at ~17px — the size the old live-text lockup rendered it. */
.hdr .logo__img { height: 48px; width: auto; display: block }
.ft .logo__img--ft { height: 44px; width: auto; display: block }

/* Kept for any markup still rendering the lockup as live text (the visual editor's canvas, and
   older page revisions restored from Change history). */
.hdr .logo__txt, .ft .logo__txt { display: flex; flex-direction: column; line-height: 1 }
.hdr .logo__name, .ft .logo__name { font-family: var(--display); font-weight: 700; font-size: 17.5px; letter-spacing: -.028em; color: var(--ink) }
.hdr .logo__tag, .ft .logo__tag { font-size: 8.4px; letter-spacing: .19em; text-transform: uppercase; color: var(--muted-2); margin-top: 4px; font-weight: 600 }

/* .nav is style.css's site header too — scoping is what keeps the two apart. */
/* Centred between the lockup and the CTA, as Pia's header draws it. */
.hdr .nav { display: flex; align-items: center; gap: 4px; margin-inline: auto }
.hdr .nav a { white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); padding: 9px 14px; border-radius: 8px; transition: background .18s, color .18s }
.hdr .nav a:hover { background: var(--paper-3) }
.hdr .nav a:focus-visible { outline: 2px solid var(--cta); outline-offset: 1px; background: var(--paper-3) }
.hdr .nav a.is-current { background: var(--paper-3); color: var(--ink); box-shadow: inset 0 -2px 0 var(--cta) }

/* Dropdown (a root item with children — Capabilities, 2026-09-08). Opens on hover
   and on keyboard focus anywhere inside; chrome-v5.js adds the touch and Escape
   behaviour and keeps aria-expanded honest. The ::before strip bridges the 6px gap
   between trigger and panel so the pointer can travel down without closing it. */
.hdr .nav__item { position: relative; display: flex; align-items: center }
/* The trigger is a <button>, styled exactly like the sibling links. */
.hdr .nav .nav__trigger {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer;
  font: inherit; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  padding: 9px 14px; border-radius: 8px; transition: background .18s, color .18s;
}
.hdr .nav .nav__trigger:hover, .hdr .nav__item.is-open .nav__trigger { background: var(--paper-3) }
.hdr .nav .nav__trigger:focus-visible { outline: 2px solid var(--cta); outline-offset: 1px; background: var(--paper-3) }
.hdr .nav .nav__trigger.is-current { background: var(--paper-3); box-shadow: inset 0 -2px 0 var(--cta) }
.hdr .nav__chev { width: 12px; height: 12px; flex: none; transition: transform .18s var(--ease) }
.hdr .nav__item:hover .nav__chev, .hdr .nav__item:focus-within .nav__chev, .hdr .nav__item.is-open .nav__chev { transform: rotate(180deg) }
.hdr .nav__sub {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; display: none;
  min-width: 232px; padding: 8px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; box-shadow: 0 16px 38px rgba(11, 27, 53, .14);
}
.hdr .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px }
.hdr .nav__item:focus-within .nav__sub, .hdr .nav__item.is-open .nav__sub { display: block }
/* Hover opens only where hover exists; on a touch screen the panel is JS-driven
   (first tap opens, second follows the link), so a sticky emulated :hover must
   not pre-empt that. */
@media (hover: hover) { .hdr .nav__item:hover .nav__sub { display: block } }
/* Escape: hidden even while the pointer or focus is still inside (chrome-v5.js). */
.hdr .nav__item.is-dismissed .nav__sub { display: none }
/* Three-class selectors so the ≤1360px `.hdr .nav a` override cannot restyle these. */
.hdr .nav .nav__sub a { display: block; white-space: normal; padding: 10px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink) }
.hdr .nav .nav__sub a:hover, .hdr .nav .nav__sub a:focus-visible { background: var(--paper-3) }
.hdr .nav .nav__sub a.is-current { background: var(--paper-3); box-shadow: inset 3px 0 0 var(--cta) }
.hdr .nav__sub-desc { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--muted) }
.hdr__cta { display: flex; align-items: center; gap: 10px; flex: none }

.hdr .burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 9px; cursor: pointer; align-items: center; justify-content: center }
.hdr .burger:hover { border-color: var(--line-2); background: var(--paper-2) }
.hdr .burger:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px }
.hdr .burger span { display: block; width: 18px; height: 1.6px; background: var(--ink); position: relative; transition: .25s var(--ease) }
.hdr .burger span::before, .hdr .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.6px; background: var(--ink); transition: .25s var(--ease) }
.hdr .burger span::before { top: -5.5px }
.hdr .burger span::after { top: 5.5px }
.hdr .burger[aria-expanded="true"] span { background: transparent }
.hdr .burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg) }
.hdr .burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg) }

/* Opened mobile menu: the nav items, then the CTA as the final, full-width item. */
.hdr .mnav { display: none; border-top: 1px solid var(--line); background: #fff; padding: 10px var(--gutter) 26px }
.hdr .mnav a { display: block; padding: 14px 0; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--line) }
.hdr .mnav a:hover { color: var(--blue) }
.hdr .mnav a:focus-visible { outline: 2px solid var(--cta); outline-offset: -2px; border-radius: 6px }
/* Current page: a marker after the label (plus aria-current), so it does not rely on colour alone. */
.hdr .mnav a.is-current::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cta); margin-left: 10px; vertical-align: middle }
/* display:flex outranks `.hdr .mnav a { display:block }` so the label actually centres. */
.hdr .mnav .btn { display: flex; width: 100%; justify-content: center; margin-top: 20px; border-bottom: 0 }
.hdr .mnav .btn:hover { color: #fff }
.hdr.is-open .mnav { display: block }
/* Mobile dropdown group: the row is a button (tap shows the pages), the pages
   indent beneath it. Same 44px hit height as the burger. */
.hdr .mnav__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px;
  padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0;
  font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer;
}
.hdr .mnav__toggle:hover { color: var(--blue) }
.hdr .mnav__toggle:focus-visible { outline: 2px solid var(--cta); outline-offset: -2px; border-radius: 6px }
.hdr .mnav__toggle.is-current span::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-radius: 50%; background: var(--cta); vertical-align: middle }
.hdr .mnav__chev { width: 16px; height: 16px; flex: none; transition: transform .18s var(--ease) }
.hdr .mnav__toggle[aria-expanded="true"] .mnav__chev { transform: rotate(180deg) }
.hdr .mnav__sub { display: none; padding: 2px 0 6px 18px; border-bottom: 1px solid var(--line) }
.hdr .mnav__group.is-open .mnav__sub { display: block }
.hdr .mnav__sub a { padding: 12px 0; font-size: 16px; border-bottom: 0 }

/* --- Footer ----------------------------------------------- */
.ft { background: #050F22; color: #8FA3C2; font-size: 14px }
.ft__in {
  max-width: var(--maxw); margin-inline: auto; padding: clamp(52px, 6vw, 80px) var(--gutter) 34px;
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 54px);
}
.ft__brand p { margin: 0; margin-top: 20px; max-width: 38ch; line-height: 1.6; color: #8FA3C2 }
.ft__addr { margin-top: 20px; font-size: 13.2px; line-height: 1.7; color: #6D80A0 }
.ft__addr a { transition: color .2s }
.ft__addr a:hover { color: #fff }
.ft h4 { font-family: var(--mono); font-size: 10.4px; letter-spacing: .15em; text-transform: uppercase; color: #fff; font-weight: 500; margin: 0 0 16px }
.ft ul { margin: 0; padding: 0; display: grid; gap: 11px }
.ft li { list-style: none }
.ft li a { font-size: 14.2px; transition: color .2s }
.ft li a:hover { color: #fff }
.ft a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px }
.ft__bar {
  max-width: var(--maxw); margin-inline: auto; padding: 22px var(--gutter) 46px; border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; font-size: 12.4px; color: #5D7092;
}
.ft .logo__name { color: #fff }
.ft .logo__tag { color: #6D80A0 }

/* --- Responsive (chrome rules only) ----------------------- */
@media (max-width: 1360px) {
  .hdr .nav a, .hdr .nav .nav__trigger { padding: 9px 9px; font-size: 14px }
}
/* Collapse point — see the file header for the measurement behind 1180px. */
/* 1200, not 1180, since the Capabilities chevron (2026-09-08): the six labels
   plus the chevron no longer clear the CTA at 1181-1190px with a scrollbar. */
@media (max-width: 1200px) {
  .hdr .nav { display: none }
  .hdr .burger { display: flex }
  /* The centered nav's auto margins are what push the CTA right on desktop;
     with the nav hidden the cluster needs its own push to the top-right corner. */
  .hdr__cta { margin-left: auto }
}
@media (max-width: 1120px) {
  .ft__in { grid-template-columns: 1fr 1fr }
}
@media (max-width: 760px) {
  .hdr__in { height: 66px; gap: 10px }
  /* <picture> already swaps in the tagline-free artwork here; this just scales it down. */
  .hdr .logo__img { height: 40px }
  .hdr .logo__tag { display: none }
  .hdr .logo { gap: 9px }
  .hdr .logo svg { width: 30px; height: 30px }
  .hdr .logo__name { font-size: 15px }
  /* Phone bar is logo + menu control only; the CTA is the opened menu's final item. */
  .hdr__cta .btn { display: none }
  .ft__in { grid-template-columns: 1fr }
}