/* ==========================================================================
   Masthead + mobile overlay.

   Two tiers: a utility rail carrying the register's status and the two ways to
   reach the desk, and a main bar with brand, navigation and CTA. The rail
   retracts on scroll so it costs nothing past the first screen.

   The JS keys off `data-` attributes (data-masthead / data-disclosure /
   data-overlay), not off class names, so restyling here cannot silently break
   the behaviour the way the previous class-coupled build could.

   Breakpoint: the bar switches to the overlay at 1023px — lower than the
   previous 1279px because the navigation is now bounded at six items plus a
   "More" panel, instead of however many the assigned menu happens to hold.
   ========================================================================== */

:root {
  --ifc-paper: #f7f4ec;
  --ifc-paper-50: #ffffff;
  --ifc-paper-100: #f0ecdf;
  --ifc-paper-200: #e4dece;
  --ifc-paper-300: #8c8069;
  --ifc-ink: #23201a;
  --ifc-ink-muted: #635c50;
  --ifc-accent: #0e4f4a;
  --ifc-accent-700: #0a3e3a;
  --ifc-rail-h: 38px;
  --ifc-bar-h: 74px;
}

/* --- Skip link ------------------------------------------------------------ */

/* Clipped rather than parked at `left: -9999px`. The old trick leaves a real
   box far outside the canvas, which shows up in any honest overflow audit and
   can drag the scroll origin in RTL. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 1200;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  overflow: visible;
  clip-path: none;
  border-radius: 999px;
  background: var(--ifc-accent);
  color: var(--ifc-paper);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* --- Shell ---------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  background: var(--ifc-paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.masthead.is-scrolled {
  border-bottom-color: rgba(35, 32, 26, 0.1);
  box-shadow: 0 10px 30px -22px rgba(35, 32, 26, 0.4);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* --- Tier 1 · utility rail ------------------------------------------------ */

.masthead__rail {
  height: var(--ifc-rail-h);
  overflow: hidden;
  background: var(--ifc-accent);
  color: var(--ifc-paper);
  transition: height 0.3s ease;
}

/* Retracts once the page starts moving. Height rather than display so it
   animates, and `overflow: hidden` stops the contents spilling mid-way. */
.masthead.is-scrolled .masthead__rail {
  height: 0;
}

.masthead__rail .masthead__inner {
  height: var(--ifc-rail-h);
  justify-content: space-between;
}

.masthead__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ifc-paper);
}

/* A quiet "this is live" marker. Static under reduced motion. */
.masthead__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ifc-paper);
  opacity: 0.9;
  animation: ifc-pulse 2.6s ease-in-out infinite;
}

@keyframes ifc-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1); }
}

.masthead__reach {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Full band height so the hit area is the whole rail rather than the 18px the
   text alone occupies. The rail is hidden below 1024px, so these are only ever
   pointer targets — which is the only reason they sit under 44px at all. */
.masthead__reach a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ifc-rail-h);
  font-size: 12px;
  font-weight: 500;
  color: rgba(247, 244, 236, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

.masthead__reach a:hover {
  color: var(--ifc-paper);
}

.masthead__reach i {
  font-size: 14px;
}

/* --- Tier 2 · main bar ---------------------------------------------------- */

.masthead__bar .masthead__inner {
  height: var(--ifc-bar-h);
}

/* --- Brand ---------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  text-decoration: none;
}

/* The supplied logo is a stacked lockup — icon over two lines of type — so it
   needs more height than a horizontal wordmark would. At 40px the second line
   fell under 9px and stopped being readable; 52px inside a 74px bar keeps it
   legible without crowding the nav. The rail retracts on scroll, so this is the
   tallest the bar ever has to carry. */
.brand__logo {
  display: block;
  width: auto;
  height: 52px;
}

@media (max-width: 480px) {
  /* Narrow phones give the burger and the CTA priority over logo size. */
  .brand__logo {
    height: 44px;
  }
}

/* Horizontal lockup — wordmark, hairline, descriptor. The stacked version read
   as two unrelated lines once the type sizes diverged. */
.brand__mark {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand__name {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--ifc-ink);
  white-space: nowrap;
}

.brand__name em {
  font-style: normal;
  color: var(--ifc-accent);
}

.brand__rule {
  width: 1px;
  height: 22px;
  background: var(--ifc-paper-200);
}

.brand__tagline {
  max-width: 11ch;
  font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ifc-ink-muted);
}

/* --- Navigation ----------------------------------------------------------- */

.nav {
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--ifc-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav__link:hover {
  background: rgba(14, 79, 74, 0.07);
  color: var(--ifc-accent);
}

/* Current page carries a rule under the label rather than a filled pill: a
   solid block mid-bar reads as a button, not as "you are here". */
.nav__link.is-current {
  color: var(--ifc-accent);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--ifc-accent);
  border-radius: 2px;
}

.nav__more[aria-expanded="true"] {
  background: rgba(14, 79, 74, 0.07);
  color: var(--ifc-accent);
}

.nav__more[aria-expanded="true"] .ti-chevron-down {
  transform: rotate(180deg);
}

/* One chevron treatment for both kinds of disclosure: the "More" button and any
   nav item that owns a submenu. They behave the same way to a reader, so they
   should not look different — a parent item with six children previously had no
   marker at all and read as an ordinary link. */
.nav__more .ti-chevron-down,
.nav__link[aria-haspopup] .ti-chevron-down {
  font-size: 14px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.nav__item:hover > .nav__link[aria-haspopup] .ti-chevron-down,
.nav__item:focus-within > .nav__link[aria-haspopup] .ti-chevron-down {
  transform: rotate(180deg);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nav__more .ti-chevron-down,
  .nav__link[aria-haspopup] .ti-chevron-down {
    transition: none;
  }
}

/* --- Disclosure panels ---------------------------------------------------- */

.nav__panel,
.nav__sub {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--ifc-paper-50);
  border: 1px solid var(--ifc-paper-200);
  border-radius: 14px;
  box-shadow: 0 22px 44px -26px rgba(35, 32, 26, 0.45);
}

/* Bridges the 10px gap above the panel, and fills its rounded corners.

   The panel is offset from the item for visual separation, but that offset is
   outside `.nav__item`, so moving the pointer down into the panel crossed dead
   space, dropped `:hover`, and closed the panel before it could be reached. The
   gap has to look empty and behave as part of the item.

   It spans the panel's whole box rather than just the gap, because the 14px
   corner radius leaves the four corner pixels outside the panel's own hit area —
   entering along the left edge still fell through them. Covering the full box
   removes the class of problem instead of the instance.

   `z-index: -1` puts it behind the panel's links, so it can never take a click
   from one, and it only exists while the panel is displayed. */
.nav__sub::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12px;
  right: 0;
  bottom: 0;
  left: 0;
}

/* The `hidden` attribute is only `display: none` in the UA stylesheet, so any
   author `display` beats it. Without this the More panel renders permanently
   open while `panel.hidden` reports true — the DOM says closed, the screen says
   otherwise, and no behavioural test catches it. */
.nav__panel[hidden] {
  display: none;
}

.nav__sub {
  left: 0;
  right: auto;
  display: none;
}

/* Keyboard reaches submenus without a click handler; pointer users get the
   same panel via :hover on the item. */
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub {
  display: flex;
}

.nav__panellink,
.nav__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ifc-ink);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav__panellink:hover,
.nav__sublink:hover {
  background: rgba(14, 79, 74, 0.07);
  color: var(--ifc-accent);
}

.nav__panellink.is-current,
.nav__sublink.is-current {
  color: var(--ifc-accent);
  font-weight: 600;
}

/* --- CTA ------------------------------------------------------------------ */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ifc-accent);
  color: var(--ifc-paper);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cta:hover {
  background: var(--ifc-accent-700);
}

.cta--bar {
  flex-shrink: 0;
  margin-left: 16px;
}

.cta--block {
  width: 100%;
  min-height: 52px;
  font-size: 15px;
}

/* --- Burger --------------------------------------------------------------- */

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.burger__box {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
}

.burger__line,
.burger__box::before,
.burger__box::after {
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ifc-ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.burger__line { top: 0; }
.burger__box::before { content: ""; top: -7px; }
.burger__box::after  { content: ""; top: 7px; }

.burger[aria-expanded="true"] .burger__line { opacity: 0; }
.burger[aria-expanded="true"] .burger__box::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- Focus ---------------------------------------------------------------- */

.masthead a:focus-visible,
.masthead button:focus-visible,
.overlay a:focus-visible,
.overlay button:focus-visible {
  outline: 2px solid var(--ifc-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.masthead__rail a:focus-visible {
  outline-color: var(--ifc-paper);
}

/* --- Mobile overlay ------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  background: var(--ifc-paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Clears the bar, plus the safe area on notched phones. */
  padding: calc(var(--ifc-bar-h) + env(safe-area-inset-top, 0px)) 0 env(safe-area-inset-bottom, 0px);
}

.overlay[hidden] {
  display: none;
}

.overlay__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 24px 40px;
}

.overlay__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ifc-paper-200);
}

.overlay__list > li {
  border-bottom: 1px solid var(--ifc-paper-200);
}

.overlay__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 0;
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--ifc-ink);
  text-decoration: none;
}

.overlay__link.is-current {
  color: var(--ifc-accent);
}

.overlay__sub {
  margin: 0 0 10px;
  padding: 0 0 0 16px;
  list-style: none;
  border-left: 2px solid var(--ifc-paper-200);
}

.overlay__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--ifc-ink-muted);
  text-decoration: none;
}

.overlay__foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.overlay__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  color: var(--ifc-ink-muted);
  text-decoration: none;
}

.overlay__mail i {
  color: var(--ifc-accent);
  font-size: 16px;
}

.overlay__status {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--ifc-paper-200);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ifc-ink-muted);
}

/* Locks the page behind the sheet. */
body.nav-open {
  overflow: hidden;
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (max-width: 1180px) {
  .masthead__inner { gap: 16px; padding: 0 24px; }
  .nav__link { padding: 8px 9px; font-size: 13px; }
  .cta--bar { margin-left: 8px; padding: 12px 16px; }
  .brand__rule, .brand__tagline { display: none; }
}

@media (max-width: 1023px) {
  .masthead__rail { display: none; }
  .masthead__inner { padding: 0 20px; }
  .nav, .cta--bar { display: none; }
  .burger { display: inline-flex; }
  .brand__rule, .brand__tagline { display: block; }
  .brand__tagline { max-width: none; }
}

@media (max-width: 420px) {
  .brand__rule, .brand__tagline { display: none; }
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .masthead,
  .masthead__rail,
  .nav__link,
  .cta,
  .burger__line,
  .burger__box::before,
  .burger__box::after,
  .nav__more .ti-chevron-down {
    transition: none;
  }

  .masthead__pulse {
    animation: none;
    opacity: 0.9;
  }
}