/* The Horizon Living mega-menu header (feat/horizon-megamenu-nav).
 *
 * Authored to the Horizon brand: the site's own tokens (Avenir/Lora, the
 * sunrise palette), NOT the framework's product look. The behaviour and ARIA
 * come from the @pirouz-ca/ui-primitives disclosure; the surface is here.
 *
 * Global rather than scoped because the panel is portaled to document.body by
 * the primitive, so a component-scoped rule would never reach it.
 *
 * PLACEHOLDER visual treatment for Lisa's sign-off: colours, spacing and the
 * panel layout are hers to adjust; everything reads from the --horizon-* tokens
 * so a change is a value, not a rebuild.
 */

:root {
  /* 68px on a phone, 88px from 640 up. The bar grew on 5 October 2026 for a
     larger mark (Jose: "go with the taller bar and a noticeably bigger logo,
     and adjust the opening image to suit"). chrome-metrics.ts publishes the
     RENDERED height as --horizon-nav-height, so the hero and the journey's
     pinned heading follow it rather than a number written here. */
  --horizon-menubar-height: 4.25rem;
  scroll-padding-top: calc(var(--horizon-menubar-height) + 1.5rem);
}

/* --- Skip link: first focusable element, off-canvas until focused --- */
.horizon-nav__skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--horizon-font-body, system-ui, sans-serif);
  font-size: 1.125rem;
  color: var(--horizon-cta-text, #ffffff);
  background: var(--horizon-cta-fill, #2f4a5a);
  text-decoration: none;
  border-bottom-right-radius: 0.5rem;
  transform: translateY(-110%);
  transition: transform 150ms ease;
}
.horizon-nav__skip:focus {
  transform: translateY(0);
}
.horizon-nav__skip:focus-visible {
  outline: 3px solid var(--horizon-deep, #2f4a5a);
  outline-offset: 3px;
}

/* --- The bar ---
 *
 * RE-GROUNDED TO SANDSTONE (HZN-208). The Atlas makes Sandstone or white the
 * PRIMARY background and Early Morning Sunlight the SECONDARY. The bar is the
 * one surface present on every screen at every scroll position, so a Sunlight
 * bar put the secondary tone on the largest permanent surface the site has.
 *
 * RE-MEASURED RATHER THAN CARRIED OVER, because re-grounding changes the ground
 * under every pairing in this file. Deep Horizon on Sandstone is 8.25, where on
 * Sunlight it was 8.70: the bar spends 0.44 of a ratio that has 1.25 to spare
 * over the 7.0 floor. Every label, outline and focus ring below is Deep Horizon
 * and is held to 8.25.
 *
 * THE SEA GLASS HAIRLINE IS KEPT AND IS NOT LOAD BEARING, which is stated
 * because the number invites the opposite conclusion. Sea Glass on Sandstone
 * measures 1.55 and on Sunlight measured 1.63, so it did not clear a 3.0
 * boundary before this change either. It is a decorative join, not a control
 * boundary and not a state: the bar is told apart from the page by its sticky
 * behaviour and its content, and nothing a visitor must perceive depends on
 * seeing this line. If it is ever asked to separate the bar, it cannot, and the
 * fix is Deep Horizon at 8.25 rather than a heavier Sea Glass. */
.horizon-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--horizon-sandstone, #f6f0e8);
  border-bottom: 1px solid var(--horizon-sea-glass, #b7c7c6);
}
.horizon-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--horizon-menubar-height);
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.horizon-nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding-block: 0.5rem;
  border-radius: 0.25rem;
}
.horizon-nav__brand:focus-visible {
  outline: 3px solid var(--horizon-deep, #2f4a5a);
  outline-offset: 4px;
}
/*
 * THE MARK IS AS LARGE AS THE BAR ALLOWS, 1 October 2026 (operator: "as
 * prominent as the design constraints permit"). 2.5rem became 3.25rem, 40px to
 * 52px, which takes "THE HORIZON" from hard to read to legible.
 *
 * TWO CEILINGS, MEASURED ON THE LIVE PAGE WITH THE MARK ENLARGED IN STEPS:
 *  - HEIGHT. The bar stays exactly 77px up to a 56px mark (52px at 640 wide);
 *    at 60px it grows, and the bar's rendered height is load bearing:
 *    chrome-metrics.ts publishes it and the hero places Lisa's type against it.
 *  - WIDTH, the tighter one. Each px of height is 2.76px of width, and the
 *    breakpoints below were fitted to the 40px mark with no slack. At 56px a
 *    1024 tablet's row has 0px to spare; at 52px it has 11px. Hence 52.
 * Phones keep their smaller steps below: their row is already width-bound.
 */
/*
 * NOTICEABLY BIGGER, 5 October 2026. Lisa asked for a larger logo and Jose
 * chose the taller bar: 52px became 72px (+38 per cent) from 640 up, and the
 * bar went from 77px to 88px to hold it with the same 8px above and below.
 * The width ceiling the note above describes moved with it: the six-item row
 * was re-measured and the menu now takes over below the new fit width (see
 * the fall-away rule further down).
 */
.horizon-nav__logo {
  display: block;
  width: auto;
  height: 4.5rem;
}
@media (min-width: 640px) {
  :root {
    --horizon-menubar-height: 5.5rem;
  }
}

.horizon-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.5vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.horizon-nav__item {
  position: relative;
}

/* --- Top-level links and triggers --- */
.horizon-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 3rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--horizon-font-body, system-ui, sans-serif);
  /* Slightly smaller than body, and never wrapped to a second line on desktop
     (operator ruling 2026-09-02): a top-level label sits on one line. */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--horizon-deep, #2f4a5a);
  text-decoration: none;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}
/* THE UNDERLINE IS THE HOVER, AND THE FILL IS ATMOSPHERE. Named the right way
   round because the number says so: the fill is now Early Morning Sunlight on a
   Sandstone bar, 1.05, and it was Sandstone on a Sunlight bar, also 1.05. A
   warm tint at 1.05 has never been perceptible and cannot carry a state. The
   underline is what a visitor sees, and it is non-chromatic. */
.horizon-nav__link:hover {
  background: var(--horizon-sunlight, #fdf6ea);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
/* THE INK HOLDS ON HOVER AND FOCUS, and it did not. The site-wide `a:hover,
   a:focus-visible` (globals.css) paints links #9ad9f3, and as an element plus
   a pseudo-class it outranks this file's single class, so a hovered label went
   pale sky blue on Sandstone: about 1.5, measured on the live bar 3 October
   2026, against a 7.0 floor. A phone keeps :hover after a tap, which is how
   the new Menu control showed it. Restated here at two classes; the action's
   own hover fill below still wins by coming later at the same weight, and the
   dark bar's colours outrank both. */
.horizon-nav__link:hover,
.horizon-nav__link:focus-visible,
.horizon-nav__menu-toggle:hover,
.horizon-nav__menu-toggle:focus-visible {
  color: var(--horizon-deep, #2f4a5a);
}
.horizon-nav__link:focus-visible {
  outline: 3px solid var(--horizon-deep, #2f4a5a);
  outline-offset: 3px;
}
/* THE OPEN TRIGGER'S STATE IS NOW DRAWN, NOT TINTED, AND THAT IS A DEFECT THIS
   RE-GROUNDING WOULD OTHERWISE HAVE CREATED. The open panel's trigger was
   marked with a Sandstone fill, which on a Sunlight bar measured 1.05 and on
   the Sandstone bar measures 1.00: the same colour as the bar, so the mark
   would have disappeared entirely rather than merely been faint. State on this
   platform has measured 1.24 with every text suite green, which is exactly this
   shape of failure.

   So the state gets a 2px Deep Horizon underline at 8.25 against the bar, well
   over the 3.0 a non-text state mark needs. The Sunlight fill stays as
   atmosphere and is not the carrier. The rotating chevron and `aria-expanded`
   are unchanged and remain the other two carriers; this adds a third that does
   not depend on noticing a rotation. */
.horizon-nav__item--has-panel[data-open] .horizon-nav__link--trigger {
  background: var(--horizon-sunlight, #fdf6ea);
  box-shadow: inset 0 -2px 0 0 var(--horizon-deep, #2f4a5a);
}

/* A GHOST PILL (HZN-187): outlined, no fill.
 *
 * The debrief asks for buttons that invite rather than intrude, and the sector
 * peer studied for this refactor carries its primary action the same way. What
 * a solid fill was doing is done by other means rather than dropped: the pill
 * keeps the 3rem target and the generous inline padding, the outline is 2px
 * rather than a hairline, the label keeps the Atlas subhead cut with caps and
 * tracking so it still reads as an action and not a reading link, the focus
 * ring inherited from .horizon-nav__link is untouched, and hover and focus fill
 * it solid so a pointer still gets a definite answer.
 *
 * MEASURED IN ROLE, on the Early Morning Sunlight bar it is actually drawn on:
 * Deep Horizon label 8.70, Deep Horizon outline 8.70 against a 3.0 boundary
 * floor, and the filled hover state 8.70 the other way round. The solid form it
 * replaces was 9.34, so this spends 0.64 of a ratio that has 1.70 to spare.
 *
 * The border replaces .horizon-nav__link's transparent 2px, so the pill does
 * not change size when it gains its outline. */
.horizon-nav__link--primary {
  padding-inline: 1.5rem;
  font-family: var(--horizon-font-subhead, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: var(--horizon-subhead-tracking, 0.05em);
  color: var(--horizon-deep, #2f4a5a);
  background: transparent;
  border-color: var(--horizon-deep, #2f4a5a);
  border-radius: 999px;
}
.horizon-nav__link--primary:hover,
.horizon-nav__link--primary:focus-visible {
  background: var(--horizon-cta-fill, #2f4a5a);
  color: var(--horizon-cta-text, #ffffff);
  text-decoration: none;
}

/* Chevron: a CSS caret, rotates when the panel is open. Motion is disabled
   both by the data-reduced flag the island sets and by the media query. */
.horizon-nav__chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-15%);
  transition: transform 200ms ease;
}
.horizon-nav__item--has-panel[data-open] .horizon-nav__chevron {
  transform: rotate(225deg) translateY(-15%);
}
.horizon-nav__chevron[data-reduced] {
  transition: none;
}

/* --- The mega-panel (portaled to <body>): a full-width band under the bar --- */
/* THE PANEL IS SANDSTONE FOR THE SAME REASON THE BAR IS: it is a continuation
   of the chrome, not a band in the page, and the Atlas puts the primary ground
   under it. Deep Horizon on it is 8.25 for every label and descriptor below. */
.horizon-nav__panel {
  position: fixed;
  top: var(--horizon-menubar-height);
  left: 0;
  right: 0;
  z-index: 9;
  background: var(--horizon-sandstone, #f6f0e8);
  border-bottom: 1px solid var(--horizon-sea-glass, #b7c7c6);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--horizon-deep, #2f4a5a) 55%, transparent);
  animation: horizon-nav-panel-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes horizon-nav-panel-in {
  from {
    opacity: 0;
    transform: translate3d(0, -0.5rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.horizon-nav__panel-inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1rem, 3vw, 2rem);
}
.horizon-nav__group-heading {
  font-family: var(--horizon-font-subhead, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: var(--horizon-subhead-tracking, 0.05em);
  font-size: 0.9rem;
  color: var(--horizon-deep, #2f4a5a);
  margin: 0 0 0.75rem;
}
.horizon-nav__group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.horizon-nav__panel-link {
  display: block;
  padding: 0.75rem 0.9rem;
  border-radius: 0.6rem;
  text-decoration: none;
  color: var(--horizon-deep, #2f4a5a);
  transition: background-color 160ms ease;
}
/* Sunlight, so the hover tint is not the ground it sits on. 1.05 against the
   panel, which is atmosphere and not the affordance; the panel link's
   affordance is its focus ring at 8.25 and its pointer cursor. */
.horizon-nav__panel-link:hover {
  background: var(--horizon-sunlight, #fdf6ea);
}
.horizon-nav__panel-link:focus-visible {
  outline: 3px solid var(--horizon-deep, #2f4a5a);
  outline-offset: 2px;
}
.horizon-nav__panel-label {
  display: block;
  font-family: var(--horizon-font-heading, Georgia, serif);
  font-size: 1.2rem;
  line-height: 1.3;
}
/* FULL STRENGTH, AND THE DIMMED VERSION WAS A LIVE FAILURE THAT NO GUARD COULD
   SEE. This descriptor was Deep Horizon at 82%, which composites to #546974 on
   Sunlight and measured 5.36, and to #536874 on Sandstone at 5.15. Both are
   under the 7.0 floor this page holds everywhere else, and one of them is under
   AAA on any reading. It survived because the repository's ban on dimmed text
   greps `.astro` components and this file is in public/, copied verbatim.

   Hierarchy here comes from SIZE and from the label above it, as it does in
   every band on the site. atlas-ground.test.ts now sweeps dist/ for this
   pattern, so the public/ blind spot is closed rather than this one instance
   being fixed. */
.horizon-nav__panel-descriptor {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--horizon-font-body, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--horizon-deep, #2f4a5a);
}

/* --- HZN-66 fall-away, superseded below 1070px by the menu (Round 5 item 4) --- */

/*
 * THE FALL-AWAY HAPPENS WHERE THE LINKS STOP FITTING, WHICH IS 884, NOT 639.
 * HZN-209.
 *
 * The reading links fall away; the primary action and the persistent Sign in
 * stay, one tap from anywhere. A 65+ visitor never has to recognize an icon to
 * find the action. That design is unchanged. What changed is WHERE it triggers.
 *
 * AT 639 THE ROW DID NOT FIT AND THE PAGE SCROLLED SIDEWAYS. Measured in
 * Chromium against the shipped build, page scrollWidth minus clientWidth with
 * all five items shown:
 *
 *   clientWidth 625  overflows by 221px
 *               685              167px
 *               753              105px   <- iPad portrait, BOOK A CALL clipped
 *               805               57px      mid-word, Sign in off-screen
 *               845               21px
 *               865                3px
 *               885                0      <- first width measured clean
 *
 * So the links were shown from 640 up and did not fit until 885, and every
 * width in between scrolled the whole document horizontally. 884 is the
 * conservative edge of that boundary: 865 overflowed, 885 was clean, nothing
 * between them was measured, so the unmeasured band falls away rather than
 * being assumed to fit.
 *
 * THIS RULE CANNOT CHANGE THE NAV'S HEIGHT, and that is deliberate rather than
 * incidental. chrome-metrics.ts publishes the nav's RENDERED height into
 * --horizon-nav-height, which HorizonHero.astro and hero-block.ts use to place
 * Lisa's type stack over the footage. Hiding items from a single-line flex row
 * leaves the row's height at its min-height, so nothing here reaches the hero.
 * A wrapping nav WOULD reach it, which is why the narrow overflow below is
 * solved with horizontal padding rather than flex-wrap.
 */
/*
 * THE CEILING MOVED FROM 884 TO 946 WHEN LISA'S LABELS ARRIVED, and the band
 * above it had to be tightened to keep it there.
 *
 * Her bar (9 September 2026) is four reading links, one button and Sign in:
 * "Life at The Horizon | Your Home | The Neighbourhood | Our Story | Connect
 * with Us | Sign in". That is one more item than before and much longer words
 * than before. At its natural spacing the row needs 1067px of content, against
 * the 885 the old five short labels needed, so EVERY WIDTH FROM 885 TO 1099
 * showed all six and scrolled the page sideways. Measured in a browser over
 * the built page, page scrollWidth minus clientWidth:
 *
 *   innerWidth  890   192px over   <- a 1024 laptop is inside this band
 *               950   138px
 *              1010    84px
 *              1080    20px
 *              1100     0
 *
 * THE FIX IS NOT A SMALLER FONT. Squeezing the labels to fit at 885 needs
 * roughly 14.8px type, and this is a seniors' community: the base rule's own
 * comment sets 1rem deliberately and the 65+ bar (HZN-66) is the reason. So the
 * type is untouched at every width, and the room comes from the space AROUND
 * it: link padding-inline and the row gap, in the band between the ceiling and
 * the width where the roomy desktop spacing fits on its own.
 *
 * With that band in place all six fit from innerWidth 947 up, at the full 16px,
 * so the ceiling sits at 946 and the sideways scroll is gone. The links now
 * fall away between 885 and 946 where they used to survive, which is the price
 * of the longer labels and is a band no phone and no laptop is in.
 *
 * MEASURED IN innerWidth, WHICH IS WHAT A MEDIA QUERY READS. Not clientWidth,
 * which is ~15px narrower here because it excludes the scrollbar. A ceiling
 * written from a clientWidth measurement drops the links about 15px early, and
 * early is the direction that ships the collision.
 */
/*
 * MOVED FOR THE 52px MARK (1 October 2026): 947-1099 became 990-1139. Measured
 * in innerWidth with the mark at 52px and all six items shown: tightened, the
 * row fits from 981 (980 overflows by 1px); at natural spacing it fits from
 * 1133 (1132 by 1px). Both edges carry about 8px of margin over the measured
 * fit, for the reason the phone rule below gives: a pixel or two is inside the
 * variation between platforms' font metrics.
 */
/*
 * MOVED FOR THE 72px MARK (5 October 2026): 990-1139 became 1070-1219, and
 * the menu now takes over below 1070. Swept in a browser over the built page
 * with the mark at 72px, row end against the content box: tightened, the row
 * runs into its padding by 24px at 1030 and 6px at 1050 and fits from 1060;
 * at natural spacing it overflows the page by 34px at 1140 and fits from
 * 1210. Both edges keep the same ~10px margin the 52px fit kept.
 */
@media (min-width: 1070px) and (max-width: 1219px) {
  .horizon-nav__link {
    padding-inline: 0.45rem;
  }
  .horizon-nav__list {
    gap: 0.35rem;
  }
}

/* ==================================================================== *
 * THE MENU BELOW 1070px (990px until the 72px mark, 5 October). Round 5 item 4 (Jose, 3 October 2026): "On
 * mobile there is currently no navigation". The reading links used to
 * fall away here and nothing replaced them; now the nav list becomes a
 * panel under the bar, opened by a control labelled "Menu" in words.
 * See HorizonNav.tsx for why it is one list and why it needs no script.
 *
 * THE PANEL IS POSITIONED, NOT IN THE ROW. The header is sticky and so
 * is the containing block; the panel hangs from its bottom edge. The
 * bar's own height is untouched by opening it, which is what keeps
 * --horizon-nav-height (chrome-metrics.ts) and the hero stack still.
 *
 * From 1070px up none of this applies: the menu control and the bar's copy
 * of the action are not drawn, and the list is the flat bar it was.
 * ==================================================================== */
.horizon-nav__menu-toggle,
.horizon-nav__quick {
  display: none;
}

@media (max-width: 1069px) {
  .horizon-nav__inner {
    justify-content: flex-start;
  }
  .horizon-nav__brand {
    margin-inline-end: auto;
  }

  /* A word beside the icon, a 48px target, and the same Deep Horizon
     outline as the action (8.25 on Sandstone). */
  .horizon-nav__menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    font-family: var(--horizon-font-body, system-ui, sans-serif);
    font-size: 1.0625rem;
    line-height: 1;
    color: var(--horizon-deep, #2f4a5a);
    text-decoration: none;
    border: 2px solid var(--horizon-deep, #2f4a5a);
    border-radius: 0.5rem;
    background: transparent;
  }
  .horizon-nav__menu-toggle:focus-visible {
    outline: 3px solid var(--horizon-deep, #2f4a5a);
    outline-offset: 3px;
  }
  .horizon-nav__menu-icon {
    display: inline-grid;
    gap: 4px;
    width: 1.125rem;
  }
  .horizon-nav__menu-icon > span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  /* Open, the three bars become a cross, so the same control reads as the
     way out. aria-expanded carries the state for a screen reader. */
  .horizon-nav[data-menu-open] .horizon-nav__menu-icon > span:nth-child(1),
  .horizon-nav:has(.horizon-nav__links:target) .horizon-nav__menu-icon > span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .horizon-nav[data-menu-open] .horizon-nav__menu-icon > span:nth-child(2),
  .horizon-nav:has(.horizon-nav__links:target) .horizon-nav__menu-icon > span:nth-child(2) {
    opacity: 0;
  }
  .horizon-nav[data-menu-open] .horizon-nav__menu-icon > span:nth-child(3),
  .horizon-nav:has(.horizon-nav__links:target) .horizon-nav__menu-icon > span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* The panel. Sandstone, as the bar is: it is chrome, not a band. */
  .horizon-nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--horizon-menubar-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--horizon-sandstone, #f6f0e8);
    border-bottom: 1px solid var(--horizon-sea-glass, #b7c7c6);
    box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--horizon-deep, #2f4a5a) 55%, transparent);
  }
  .horizon-nav[data-menu-open] .horizon-nav__links,
  .horizon-nav__links:target {
    display: block;
  }
  .horizon-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 40rem;
    margin-inline: auto;
    padding: 0.5rem clamp(1rem, 3vw, 2rem) 1.5rem;
  }
  .horizon-nav__item {
    border-bottom: 1px solid var(--horizon-sea-glass, #b7c7c6);
  }
  .horizon-nav__item[data-primary] {
    border-bottom: 0;
    padding-block: 1.25rem 0.25rem;
  }
  /* Larger than the desktop bar's 1rem: a list of five on a phone has the
     room, and this is the one place on a phone these names appear. */
  .horizon-nav__link {
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.75rem 0.25rem;
    font-size: 1.25rem;
    white-space: normal;
    border-radius: 0.25rem;
  }
  .horizon-nav__link--primary {
    justify-content: center;
    padding-inline: 1.5rem;
    font-size: 1.0625rem;
    border-radius: 999px;
  }
  /* The bar's copy of the action is a pill in a row, not a panel row. Hidden
     here at the SAME specificity as the tablet rule that shows it: the panel
     row rule above (`.horizon-nav__link { display: flex }`) also matches this
     element, and on its own it put the pill on every phone, widening a 390
     screen's row to 482px (measured 3 October 2026). */
  .horizon-nav__quick.horizon-nav__link {
    display: none;
    width: auto;
    min-height: 3rem;
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
    white-space: nowrap;
  }
}

/* TABLETS: the action stays in the bar, one tap away, so the panel does not
   repeat it. Measured to fit beside the 52px mark and Menu from 640 up. */
@media (min-width: 640px) and (max-width: 1069px) {
  .horizon-nav__quick.horizon-nav__link {
    display: inline-flex;
  }
  .horizon-nav__item[data-primary] {
    display: none;
  }
}

/*
 * PHONES: THE LOGO AND MENU, AND THE LOGO AT 44px. Round 5 item 3 (Jose,
 * 3 October 2026): "The logo in the top left is too small on mobile". It
 * was 20 to 22px tall, squeezed to make room for the action and Sign in
 * in one row; both now live in the panel, so the mark gets the room.
 *
 * 44px is the largest that leaves the bar's height alone: the brand link
 * adds 0.5rem above and below, 60px in all, under the row's 68px
 * min-height at phone widths. 2.76px of width per px of height makes it
 * about 121px wide, which leaves Menu ample room at 320.
 */
@media (max-width: 639px) {
  /* 56px since 5 October 2026, up from 44px, WITHOUT a taller bar. Jose asked
     whether the file carries empty margin to trim: measured, it does not (the
     SVG's drawing fills its viewBox to within 1 to 2 per cent; the reversed
     PNG to within 0.6). The room came from the brand link's own cushion
     instead, 8px above and below to 6px: 56 + 12 = 68, the phone bar. */
  .horizon-nav__logo {
    height: 3.5rem;
  }
  .horizon-nav__brand {
    padding-block: 0.375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .horizon-nav__skip,
  .horizon-nav__link,
  .horizon-nav__menu-icon > span {
    transition: none;
  }
  .horizon-nav__panel {
    animation: none;
  }
}

/* ==================================================================== *
 * THE BAR ON DEEP HORIZON, AT THE FOOT OF THE PAGE. HZN-269, from
 * Jose's round one feedback, item 5: "once a visitor scrolls into the
 * footer, the top navigation bar should switch to the dark deep horizon
 * navy treatment to match the footer background".
 *
 * WHY THIS IS NOT A COLOUR SWAP. Recolouring the bar inverts every
 * pairing in it at once, and three of them invert into invisibility
 * rather than merely into a different colour. Each one below was
 * computed before it was written, floor 7.0 for text and 3.0 for a
 * boundary or a state mark:
 *
 *   the logotype        #334d5c and #344d5d are BAKED INTO the light
 *                       mark's fills: 1.05 on Deep Horizon. The bar
 *                       would lose the client's name entirely. The
 *                       reversed file the client supplied is a single
 *                       flat #F5EFE9 and measures 8.19, so the mark is
 *                       swapped rather than recoloured, which is not
 *                       ours to do in any case.
 *   the hover fill      Early Morning Sunlight, which on a dark bar
 *                       would sit under Early Morning Sunlight text:
 *                       1.00. Invisible text, not a faint state.
 *   the filled CTA      Deep Horizon fill on a Deep Horizon bar: 1.00.
 *                       The pill would vanish on hover, which is the
 *                       one moment it must not.
 *
 * SO THE WASH IS 6 PER CENT AND NOT MORE, and that boundary is already
 * known in this repository: SiteFooter.astro found it for the logo slot
 * on the same ground. Early Morning Sunlight at 6% over Deep Horizon
 * composites to #3B5463 and the label on it measures 7.42; at 8% the
 * ground is #3F5866 and the label falls to 6.98, under the floor. The
 * wash itself is 1.17 against the bar, which is imperceptible, and that
 * is correct: it is atmosphere. The UNDERLINE is the hover, exactly as
 * the light bar's comment says, and it is non-chromatic.
 *
 * NOTHING HERE TOUCHES THE BAR'S HEIGHT. chrome-metrics.ts publishes
 * the nav's RENDERED height into --horizon-nav-height, and
 * HorizonHero.astro and hero-block.ts place Lisa's type stack against
 * it. A rule here that changed padding, min-height or wrapping would
 * move her headline at the top of the page as a side effect of a colour
 * change at the bottom of it. Colour, border colour and which of the
 * two marks is drawn: nothing else. nav-dark-ground.test.ts asserts it.
 * ==================================================================== */

/* Exactly one mark is ever drawn. Light is the default so the bar is
   correct before any script runs. */
.horizon-nav__logo--reversed { display: none; }
.horizon-nav[data-on-dark] .horizon-nav__logo--light { display: none; }
.horizon-nav[data-on-dark] .horizon-nav__logo--reversed { display: block; }

.horizon-nav[data-on-dark] {
  background: var(--horizon-deep, #2f4a5a);
}

/* 8.70. */
.horizon-nav[data-on-dark] .horizon-nav__link {
  color: var(--horizon-sunlight, #fdf6ea);
}

/* The wash at 6%, label 7.42 on it. The underline carries the state. */
.horizon-nav[data-on-dark] .horizon-nav__link:hover {
  background: color-mix(in srgb, var(--horizon-sunlight, #fdf6ea) 6%, transparent);
}

/* 8.70 against the bar, over the 3.0 a focus ring needs. Deep Horizon
   here would be 1.00: the ring would exist and be unseeable. */
.horizon-nav[data-on-dark] .horizon-nav__link:focus-visible,
.horizon-nav[data-on-dark] .horizon-nav__brand:focus-visible {
  outline-color: var(--horizon-sunlight, #fdf6ea);
}

/* The open trigger's mark, inverted: a 2px Early Morning Sunlight inset
   underline at 8.70 where the light bar uses Deep Horizon at 8.25. */
.horizon-nav[data-on-dark] .horizon-nav__item--has-panel[data-open] .horizon-nav__link--trigger {
  background: color-mix(in srgb, var(--horizon-sunlight, #fdf6ea) 6%, transparent);
  box-shadow: inset 0 -2px 0 0 var(--horizon-sunlight, #fdf6ea);
}

/* THE PANEL AND THE MENU CONTROL FOLLOW THE BAR. The links above turn
   Early Morning Sunlight; on the Sandstone panel that would be 1.05, so the
   panel takes Deep Horizon with them (8.70) and the control inverts with the
   pill. Colour only, as everything in this block. */
@media (max-width: 1069px) {
  .horizon-nav[data-on-dark] .horizon-nav__links {
    background: var(--horizon-deep, #2f4a5a);
    border-bottom-color: var(--horizon-deep, #2f4a5a);
  }
  .horizon-nav[data-on-dark] .horizon-nav__item {
    border-bottom-color: color-mix(in srgb, var(--horizon-sunlight, #fdf6ea) 30%, transparent);
  }
  .horizon-nav[data-on-dark] .horizon-nav__menu-toggle,
  .horizon-nav[data-on-dark] .horizon-nav__menu-toggle:hover {
    color: var(--horizon-sunlight, #fdf6ea);
    border-color: var(--horizon-sunlight, #fdf6ea);
  }
  .horizon-nav[data-on-dark] .horizon-nav__menu-toggle:focus-visible {
    outline-color: var(--horizon-sunlight, #fdf6ea);
  }
}

/* The ghost pill: label 8.70, outline 8.70. */
.horizon-nav[data-on-dark] .horizon-nav__link--primary {
  color: var(--horizon-sunlight, #fdf6ea);
  border-color: var(--horizon-sunlight, #fdf6ea);
}

/* Filled the other way round, so hover still gives a definite answer:
   Deep Horizon on an Early Morning Sunlight fill, 8.70. */
.horizon-nav[data-on-dark] .horizon-nav__link--primary:hover,
.horizon-nav[data-on-dark] .horizon-nav__link--primary:focus-visible {
  background: var(--horizon-sunlight, #fdf6ea);
  color: var(--horizon-deep, #2f4a5a);
}