@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — SITE HEADER
   "Midnight Brass", layer 5 of 5.  Loads LAST.
   --------------------------------------------------------------------------
   Load order:
     1. style.css                    <- legacy child theme
     2. skagit-design-system.css     <- tokens, base, focus, reduced motion
     3. skagit-components.css        <- component skins  (§2 = header base)
     4. skagit-responsive.css        <- breakpoint layer (§C.1 = header ≤64em)
     5. skagit-buttons.css           <- button system
     6. skagit-header.css            <- THIS FILE

   THIS FILE EXTENDS skagit-components.css §2 — it does not replace it. The
   night ground, the brass seam, the fluted ribbing, the pill and dropdown
   skins all still come from there. What is added here is everything that was
   missing: a real logo lockup, a sticky + scrolled state, a drawer that fits
   a phone, a dropdown that cannot push the page sideways, the contact details
   restored on tablets, and a defined relationship with the booking bar
   underneath.

   TWO DEPENDENCIES, DO NOT DELETE THEM
     • skagit-components.css §18 NOTE 3 neutralises `style.css`
       (`.site-header.modern-header { background: linear-gradient(…) !important }`).
       Without it the legacy mid-blue shows through the night ground's radial
       highlights. This file relies on that block and does not repeat it.
     • skagit-components.css §18 NOTE 2 resets `.mobile-drawer-header
       .drawer-close-btn` out of the global navy `<button>` rule. Same deal.

   BREAKPOINT NOTE
   The drawer/desktop switch is `1024px` **in px, not em**, because that is
   how `style.css` defines it and the two must agree exactly or the drawer
   and the desktop nav can both be live (or both dead) for a band of widths
   under browser zoom. skagit-responsive.css §C.1 uses `64em` for the same
   switch; at the default 16px root they are identical, but see the report —
   unifying them is a recommended follow-up.

   Verified range: 360px → 2560px. No horizontal overflow at any width.
   !important count: 1 — the single declaration in §3.1. It is itemised there
   and in AGENT-HEADER-REPORT.md.
   ========================================================================== */


/* ==========================================================================
   0. HEADER TOKENS
   ========================================================================== */
:root {
  /* Nominal sticky-header height on phones. Used for `scroll-padding-top` so
     an in-page anchor is not parked underneath the sticky bar. Kept as a flat
     value rather than a measurement because CSS cannot measure. */
  --sk-header-h: 66px;

  /* One source of truth for the drawer width — the scrim offset is derived
     from it, so the two can never disagree the way they do in style.css
     (which hard-codes `left: 320px` next to `width: 85%; max-width: 320px`,
     so on any viewport under 377px the scrim starts past the drawer's real
     right edge and leaves a dead strip beside it).
     The third term is what keeps a dismiss target beside the drawer at 320px. */
  --sk-drawer-w: min(86vw, 340px, calc(100vw - 3rem));
}

.site-header.modern-header {
  --sk-header-seam: rgba(212, 175, 55, 0.55);
  --sk-header-seam-lit: rgba(212, 175, 55, 0.92);
}


/* ==========================================================================
   1. THE SHELL
   ========================================================================== */

/* A soft top sheen. `.header-pattern` (the fluted ribbing) is force-hidden by
   style.css below 1024px, so the header loses all texture on phones —
   exactly where it is most visible. `::before` is unclaimed by both style.css
   and skagit-components.css (which only uses `::after`), so the texture can
   be re-established at every width without touching `display`. */
.site-header.modern-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--sk-tex-flute),
                    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%,
                                            rgba(255, 255, 255, 0) 42%);
  background-size: 9px 100%, 100% 100%;
  opacity: 0.85;
}

/* ---- 1.1 Sticky on phones and tablets ----------------------------------
   RATIONALE. On desktop the site already has a designed scrolled state: the
   `.sno-sticky-subnav` bar (fixed, revealed by the footer.php script past
   300px of scroll). That bar never appeared below 1024px, which left phone
   users with no persistent navigation at all — once the header scrolled away,
   the only route to another page was to scroll back to the top. So the header
   itself becomes the persistent element below 1024px.

   >>> THE SUBNAV IS GONE. <<< It was removed from the markup, and its CSS with
   it; header.php records why. The header's stickiness below 1024px is kept on
   its own merits -- it is now the only persistent navigation at any width --
   but nothing here is working around a second bar any more. (The old reason
   desktop was excluded: making both sticky stacked two bars at `top: 0`, and
   the header at z-index 9999 buried the subnav at z-index 900.)

   `position: sticky` survives here only because skagit-design-system.css uses
   `overflow-x: clip` (not `hidden`) on html/body — `clip` does not create a
   scroll container, `hidden` does and would silently kill this. */
@media (max-width: 1024px) {
  .site-header.modern-header {
    position: sticky;
    top: 0;
  }

  /* An in-page anchor must not land underneath the sticky bar. */
  html { scroll-padding-top: calc(var(--sk-header-h) + 0.75rem); }
}


/* ==========================================================================
   2. TOP BAR — THE LOCKUP
   --------------------------------------------------------------------------
   Below 1024px: flex, logo left, burger right. The standard, and the only
   arrangement that cannot break at 360px.

   From 1025px: a THREE-COLUMN GRID, `1fr auto 1fr`. The previous flex
   `space-between` centred the logo only by accident — it sat wherever the
   contact pills and the utilities cluster happened to leave it, and the gas
   badge is much wider than two pills, so the wordmark was pushed
   left of centre by ~60px on every page. With the grid the wordmark is
   optically centred regardless of what the side clusters weigh.
   ========================================================================== */

.header-top-bar .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--sk-space-xs);
  width: 100%;
  max-width: var(--sk-container);
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
}

@media (min-width: 1025px) {
  .header-top-bar .container-fluid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sk-space-sm);
    padding-block: var(--sk-space-3xs);
  }

  /* Explicit placement, because auto-placement would shuffle the wordmark out
     of the centre column the moment a cluster is hidden. */
  .header-top-bar .header-contact   { grid-column: 1; justify-self: start; }
  .header-top-bar .site-branding    { grid-column: 2; justify-self: center; }
  .header-top-bar .header-utilities { grid-column: 3; justify-self: end; }
  /* `.menu-toggle` is display:none above 1024px, so it never contends for
     column 3 with `.header-utilities`; below 1024px the reverse is true. */
  .header-top-bar .menu-toggle      { grid-column: 3; justify-self: end; }
}


/* ==========================================================================
   3. CONTACT PILLS
   --------------------------------------------------------------------------
   The file's ONLY !important lives in §3.1. Everything else is specificity.
   ========================================================================== */

.header-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* the overflow safety net for the 1fr track */
  gap: var(--sk-space-2xs);
  min-width: 0;
}

.contact-pill { max-width: 100%; }

/* Last-resort truncation so a long address can never widen the grid track. */
.contact-pill span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 1025–1199px is the tightest desktop band: the gas badge is ~244px wide, the
   wordmark ~300px, and both pills together are ~410px. Drop the address pill
   there; the phone number is the one that earns its place. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .header-top-bar .header-contact .contact-pill:nth-child(n + 2) { display: none; }
}

/* ---- 3.1 Restore contact details on tablets -----------------------------
   style.css declares
       .header-contact, .header-utilities, .header-pattern { display: none !important }
   inside `@media (max-width: 1024px)`. Hiding the *utilities* there is right —
   the gas badge is re-rendered in the footer by footer.php. Hiding the
   *contact* cluster is not: a casino resort's phone number is a conversion
   surface, and between 600px and 1024px there is room for it beside the
   wordmark. It is the only phone-facing route to "call to book" that does not
   require reaching the footer.

   THE ONLY !important IN THIS FILE. An !important declaration can only be beaten by another
   !important declaration — specificity does not help — so `display` must be
   restated the same way. The selector is escalated to `.site-header
   .header-contact` (0,2,0) so it also beats the legacy (0,1,0) on the normal
   cascade, which keeps the intent legible.

   Below 600px the cluster stays hidden: the header is logo + burger there and
   must remain so. */
@media (min-width: 600px) and (max-width: 1024px) {
  .site-header .header-contact { display: flex !important; }

  /* Phone only until there is room for the address too. */
  .site-header .header-contact .contact-pill:nth-child(n + 2) { display: none; }

  .site-header .header-contact .contact-pill {
    padding: 0.42rem 0.8rem;
    font-size: var(--sk-fs-xs);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .site-header .header-contact .contact-pill:nth-child(n + 2) { display: inline-flex; }
}


/* ==========================================================================
   4. BRANDING
   The wordmark is a white PNG on a dark ground, so it needs a shadow to sit
   in the space rather than float on it, and a real hit area for the focus
   ring to wrap.
   ========================================================================== */

.site-branding {
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-branding a {
  display: inline-flex;
  align-items: center;
  padding: 2px;                       /* gives the focus ring somewhere to sit */
  border-radius: var(--sk-radius-sm);
  max-width: 100%;
}

/* Sized per breakpoint rather than globally: skagit-responsive.css §C.1
   already sets a mobile height inside `@media (max-width: 64em)`, and this
   file loads after it, so an unscoped height here would silently win at every
   width and undo that. */
@media (max-width: 1024px) {
  .site-header .header-logo {
    height: clamp(34px, 7.5vw, 46px);
    width: auto;
    max-width: 100%;
  }
}

@media (min-width: 1025px) {
  .site-header .header-logo {
    height: clamp(52px, 3.1vw, 78px);
    width: auto;
    max-width: 100%;
  }
}


/* ==========================================================================
   5. UTILITIES CLUSTER  (gas badge + socials)
   ========================================================================== */

.header-utilities {
  display: flex;
  align-items: center;
  gap: var(--sk-space-sm);
  min-width: 0;
}

.header-socials {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}


/* ==========================================================================
   6. THE BURGER
   --------------------------------------------------------------------------
   style.css already paints this well — transparent, 1px gold border, gold
   glyph — and it does so with `!important` on background/border/color, so
   repainting it would cost three more `!important` declarations for a
   marginal gain. Instead the hover fill is delivered as a huge INSET
   box-shadow, which no legacy rule touches, so the gold wash costs nothing.
   ========================================================================== */

@media (max-width: 1024px) {
  .site-header .menu-toggle {
    width: 48px;                       /* 45px in style.css; 48 clears the   */
    height: 48px;                      /* WCAG 2.2 AA target comfortably     */
    flex: 0 0 auto;
    border-radius: var(--sk-radius-sm);
    transition: box-shadow var(--sk-dur-base) var(--sk-ease-out),
                transform var(--sk-dur-fast) var(--sk-ease-out);
  }

  /* `inset 0 0 0 3rem` floods the 48px box with the gold wash and honours the
     border radius. Contrast is unaffected: the glyph stays --sk-gold-500 and
     the wash is only 18% gold over the night ground. */
  .site-header .menu-toggle:hover,
  .site-header .menu-toggle:focus-visible {
    box-shadow: inset 0 0 0 3rem rgba(212, 175, 55, 0.18);
  }

  .site-header .menu-toggle:active { transform: scale(0.94); }

  /* While the drawer is open the burger is behind the scrim; suppress its
     hover so it cannot flicker under the overlay. */
  body.mobile-menu-active .site-header .menu-toggle { box-shadow: none; }
}


/* ==========================================================================
   7. PRIMARY NAVIGATION  (≥1025px)
   ========================================================================== */

@media (min-width: 1025px) {
  .main-navigation {
    position: relative;
    z-index: var(--sk-z-base);
    background: rgba(4, 16, 28, 0.34);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.16);
  }

  .nav-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: var(--sk-container);
    min-width: 0;
    margin-inline: auto;
    padding-inline: var(--sk-gutter);
  }

  .header-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ---- 7.1 Dropdown overflow guard -------------------------------------
     `.sub-menu` is `left: 0` on every item. On the last one or two items of a
     centred menu a 240px panel opens past the right edge of the viewport.
     `html { overflow-x: clip }` stops the scrollbar, but "no scrollbar" here
     means "the last dropdown is clipped and half of it is unreachable".
     Flipping the tail items to right-aligned fixes it properly.
     `:nth-last-child` is used rather than a class so it needs no PHP. */
  .header-menu > li:nth-last-child(-n + 2) > .sub-menu {
    left: auto;
    right: 0;
  }

  /* A second-level panel would open outward from an already right-aligned
     parent; keep it inside too. */
  .header-menu > li:nth-last-child(-n + 2) .sub-menu .sub-menu {
    left: auto;
    right: 100%;
  }

  .header-menu .sub-menu { max-width: calc(100vw - 2rem); }

  /* The dropdown is the one place the header can look expensive for free: a
     brass top edge on a lifted navy panel. Drawn as a pseudo-element, NOT as
     `border-image` — border-image silently disables `border-radius`, and
     skagit-components.css §2.4 gives this panel `--sk-radius-md` corners and
     `overflow: hidden`. The pseudo-element is clipped by that same
     `overflow: hidden`, so it follows the rounded corners for free. */
  .header-menu .sub-menu::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--sk-grad-brass);
    pointer-events: none;
    z-index: 1;
  }

  /* Keyboard users get the dropdown on focus, not only on hover — this is
     already in skagit-components.css §2.4 via `:focus-within`; restated here
     only so a future edit to this file cannot quietly drop it. */
  .header-menu li:focus-within > .sub-menu { display: block; }
}


/* ==========================================================================
   8. MOBILE DRAWER  (≤1024px)
   --------------------------------------------------------------------------
   style.css builds the drawer at line 575 as `width: 85%; max-width: 320px;
   height: 100vh`, with a scrim whose offset (`left: 320px`) is hard-coded to
   that max-width — so the moment the drawer is narrower than 320px (any
   viewport under 377px, i.e. every small phone) the scrim starts 320px from
   the left and leaves a dead strip beside the drawer. Both now derive from
   one token.
   ========================================================================== */

@media (max-width: 1024px) {
  .site-header .main-navigation {
    display: flex;
    flex-direction: column;
    width: var(--sk-drawer-w);
    max-width: none;              /* the token already clamps; style.css
                                     hard-caps at 320px, which would leave the
                                     scrim offset stranded above ~395px */
    height: 100vh;
    height: 100dvh;               /* dvh: no gap under a mobile URL bar */
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--sk-grad-night);
    border-right: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 8px 0 44px rgba(4, 16, 28, 0.6);
    overscroll-behavior: contain;
  }

  /* Scrim derived from the same token, so it always starts exactly where the
     drawer ends. */
  .site-header .main-navigation::before {
    left: var(--sk-drawer-w);
    width: calc(100vw - var(--sk-drawer-w));
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(4, 16, 28, 0.62);
    -webkit-backdrop-filter: blur(4px) saturate(1.2);
    backdrop-filter: blur(4px) saturate(1.2);
  }

  /* Drawer header pinned, menu scrolls. skagit-responsive.css §C.1 sizes the
     scroller as `height: calc(100% - 82px)`, which assumes a drawer header of
     exactly 82px and breaks if the logo or padding ever changes. Flex removes
     the assumption. */
  .site-header .mobile-drawer-header {
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--sk-space-sm);
    padding: var(--sk-space-sm) var(--sk-space-md);
    border-bottom: 1px solid rgba(212, 175, 55, 0.28);
  }

  .site-header .nav-wrapper {
    flex: 1 1 auto;
    display: block;
    height: auto;
    min-height: 0;
    max-width: 100%;
    padding-inline: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .site-header .drawer-logo {
    height: clamp(32px, 8vw, 40px);
    width: auto;
    background: none;
  }

  /* A brass rule closing the bottom of the menu list, so the drawer has a
     designed floor rather than trailing off. */
  .site-header .header-menu {
    padding-block: var(--sk-space-2xs) var(--sk-space-2xl);
  }

  .site-header .header-menu > li > a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* The accordion parent, once open, is marked `.submenu-open` by the
     footer.php script. Give it a visible open state beyond the colour change
     that style.css already applies on :focus. */
  .site-header .header-menu > li > a.submenu-open {
    background: rgba(212, 175, 55, 0.1);
  }

  .site-header .header-menu .sub-menu li a { min-height: 44px; display: flex; align-items: center; }
}


/* ==========================================================================
   9. SCROLLED STATE  (progressive enhancement, ≤1024px)
   --------------------------------------------------------------------------
   Scroll-driven CSS animations. Where they are unsupported the header is
   simply a sticky header — nothing is lost, nothing is broken, and no
   JavaScript is required (this file cannot add any: footer.php is not mine).

   Only compositable/paint-only properties are touched — a box-shadow and a
   transform. Nothing animates `height` or `padding`, so the header never
   changes size mid-scroll and the content underneath never jumps.

   Wrapped in `prefers-reduced-motion: no-preference`, so reduced-motion users
   get the static sticky header and never the scrubbed one.
   ========================================================================== */

@keyframes sk-header-settle {
  from {
    box-shadow: 0 1px 0 var(--sk-header-seam),
                0 10px 34px rgba(4, 16, 28, 0.34);
  }
  to {
    box-shadow: 0 1px 0 var(--sk-header-seam-lit),
                0 14px 42px rgba(4, 16, 28, 0.62);
  }
}

@keyframes sk-header-logo-settle {
  from { transform: scale(1); }
  to   { transform: scale(0.86); }
}

@supports (animation-timeline: scroll()) {
  @media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .site-header.modern-header {
      animation-name: sk-header-settle;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 180px;
    }

    .site-header.modern-header .header-logo {
      transform-origin: left center;
      animation-name: sk-header-logo-settle;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 180px;
    }
  }
}


/* ==========================================================================
   10. WHAT SITS DIRECTLY UNDERNEATH
   --------------------------------------------------------------------------
   On the home page the booking bar is the header's floor: header (night
   gradient) → brass hairline → booking bar (sapphire gradient). They must
   read as one continuous piece of furniture, not two bands with a seam of
   page background between them.

   The seam itself is already correct and is NOT touched here: the header
   casts `box-shadow: 0 1px 0 rgba(212,175,55,0.55)` — a brass hairline 1px
   below its own bottom edge — which lands directly on the booking bar's top
   edge. Adding a second hairline from the booking bar would read as a 2px
   mistake. What is missing is the gap-closing and the rim light.
   ========================================================================== */

.site-main > .skagit-booking-wrapper:first-child { margin-top: 0; }

/* A 1px top rim light, brightest at the centre, so the sapphire band reads as
   lit from the header above rather than butted against it. Clipped to the
   wrapper by its own `overflow: hidden` (skagit-components.css §12). */
.site-main > .skagit-booking-wrapper:first-child::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, 0.2) 50%,
              rgba(255, 255, 255, 0) 100%);
}

/* Anchored jumps to the booking bar must clear the sticky header. */
.skagit-booking-wrapper { scroll-margin-top: calc(var(--sk-header-h) + 0.75rem); }

/* ---- 10.1 The desktop scrolled state -----------------------------------
   >>> DELETED, AND THE SECTION NUMBER IS KEPT AS A HEADSTONE. <<< This held a
   brass floor for `.sno-sticky-subnav`, the desktop scrolled bar. That bar was
   removed from the markup and its CSS with it, which left this as an empty
   `@media (min-width: 1025px) {}` -- a block that parsed, shipped, and styled
   nothing. header.php records why the bar went.

   The accessibility finding that used to be recorded here is worth keeping
   even though the code is gone: the collapsed bar was hidden ONLY by
   `transform: translateY(-100%)` on a `position: fixed` element, so its 8
   links stayed focusable and in the tab order. A keyboard user tabbing off the
   header hit eight controls whose focus ring rendered above the viewport, and
   because the element was fixed the browser could not scroll it into view, so
   focus simply vanished (WCAG 2.4.3, 2.4.7). If a slide-away bar is ever
   reintroduced, hide it with `visibility: hidden` alongside the transform. */


/* ==========================================================================
   11. OVERFLOW SAFETY
   --------------------------------------------------------------------------
   The header is the single likeliest source of horizontal overflow on this
   site: a fixed-width drawer, a 244px gas badge, a nowrap phone number, an
   absolutely positioned dropdown and a logo whose intrinsic width is unknown
   to CSS. Each is constrained.
   ========================================================================== */

.site-header.modern-header,
.header-top-bar,
.header-top-bar .container-fluid,
.nav-wrapper {
  max-width: 100%;
  min-width: 0;
}

/* Menu labels can be arbitrarily long editorial strings. */
.header-menu > li > a,
.header-menu .sub-menu li a { overflow-wrap: break-word; }

/* 360px floor: the tightest supported width. */
@media (max-width: 25em) {
  .header-top-bar .container-fluid { gap: var(--sk-space-2xs); }
  .site-header .menu-toggle { width: 44px; height: 44px; }
  .site-header .header-logo { height: clamp(30px, 9vw, 38px); }
}

/* 2560px: the container is already capped by --sk-container (1840px at
   ≥2200px). Only the nav band's ground needs to keep reading as a band rather
   than as a stripe across an empty plain. */
@media (min-width: 2200px) {
  .main-navigation { box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.22); }
}


/* ==========================================================================
   12. FOCUS  (do not weaken)
   --------------------------------------------------------------------------
   The ring is inherited unchanged from skagit-design-system.css §3: a 3px
   --sk-gold-500 outline at 2px offset plus a halo ring immediately outside
   it. Layer 1 already flips that halo to white inside `.site-header`,
   `.main-navigation` and the other dark grounds, which is what keeps it legible
   on the night ground.

   Nothing here sets `outline: none`. The only additions are (a) a small
   resting radius on the square chrome so the ring traces the shape rather
   than snapping from square to rounded at the moment of focus, and (b)
   lifting the focused element so its halo paints over its neighbours instead
   of under them. The pill-shaped controls already carry `--sk-radius-pill`
   from skagit-components.css §2 and are deliberately left alone.
   ========================================================================== */

.site-header .header-menu > li > a { border-radius: var(--sk-radius-xs); }

.site-header a:focus-visible,
.site-header button:focus-visible {
  position: relative;
  z-index: var(--sk-z-raised);
}

/* The drawer's own scroller must not clip a focused item's ring. The ring is
   drawn with `outline`, which is never clipped by `overflow`, but the halo is
   a box-shadow, which is — so give the scroller a little inline breathing
   room rather than switching the halo off. */
@media (max-width: 1024px) {
  .site-header .nav-wrapper { padding-block: 2px; }
}


/* ==========================================================================
   13. REDUCED MOTION
   skagit-design-system.css §5 is the global kill switch and already lists
   `.contact-pill:hover` and `.header-logo:hover`. These are the header
   transforms it cannot see, because they are introduced by this file.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* No !important needed. `button.menu-toggle:active` (style.css) is
     (0,2,1) and carries no !important; `.site-header .menu-toggle:active` is
     (0,3,0) and wins on specificity alone. */
  .site-header .menu-toggle:active,
  .site-header.modern-header .header-logo { transform: none; }

  /* Belt and braces for §9. The global kill switch collapses
     `animation-duration`, but a scroll-driven animation ignores duration
     entirely — progress comes from the scroll position — so the NAME has to
     go. §9 is already gated behind `prefers-reduced-motion: no-preference`;
     this is the second lock. */
  .site-header.modern-header,
  .site-header.modern-header .header-logo { animation-name: none; }
}


/* ==========================================================================
   14. FORCED COLORS (Windows High Contrast)
   Gradients and translucent fills are discarded there, so the header would
   collapse into one undifferentiated block. Give every band a real edge.
   ========================================================================== */
@media (forced-colors: active) {
  .site-header.modern-header { border-bottom: 1px solid CanvasText; }
  .site-header.modern-header::before,
  .site-header.modern-header::after,
  .header-pattern { display: none; }

  .main-navigation { border-top: 1px solid CanvasText; }
  .header-menu .sub-menu { border: 1px solid CanvasText; }
  .contact-pill,
  .header-socials a,
  .menu-toggle { border: 1px solid ButtonBorder; }
}


/* ==========================================================================
   15. PRINT
   skagit-responsive.css already hides the header for print with !important
   (it has to — several of these are shown with !important below 1024px).
   Nothing to add; noted so the next person does not go looking.
   ========================================================================== */

/* ==========================================================================
   FOOTER GAS BADGE — always visible
   The Bow Hill Gas & Food Mart price badge used to appear in the header top
   bar and, briefly, in the sticky subnav. The top bar was decluttered and the
   subnav removed, so the footer block is now its single home -- but that block
   was built mobile-only (.footer-mobile-gas), which would have made the badge
   vanish entirely on desktop.
   ========================================================================== */
.footer-gas--always {
  display: block;
}

@media (min-width: 1025px) {
  .footer-gas--always {
    display: flex;
    justify-content: center;
    padding-block: var(--sk-space-md, 1.5rem);
  }
}


/* ==========================================================================
   MOBILE QUICK BAR — Promotions and the Resort Calendar, one tap
   ==========================================================================
   Below 600px the header is wordmark + burger by design (§3.1), which put the
   two pages guests come here for three taps away. This strip sits inside the
   sticky header so it stays reachable down a long page.

   Hidden from 1025px up: the full navigation is on screen there and these
   would be duplicates. It is rendered by header.php rather than from a nav
   menu so it cannot be removed from Appearance -> Menus -- see the note in
   header.php for why that matters for the calendar specifically.

   Height is ~44px so both targets clear the 44px comfortable-touch size; the
   footer work in July settled that a 24px minimum is the floor, not the goal.
   ========================================================================== */
.skagit-mobilebar {
  display: flex;
  align-items: stretch;
  gap: 1px;                                  /* the divider, drawn by the gap */
  background: rgba(212, 175, 55, 0.28);      /* shows through as a hairline   */
  border-top: 1px solid rgba(212, 175, 55, 0.22);
}

.skagit-mobilebar__link {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-inline: 0.5rem;
  background: var(--sk-navy-900, #06192B);   /* header stays dark: the bulb
                                                rail and the white wordmark
                                                both depend on it            */
  color: var(--sk-gold-500, #D4AF37);
  font-size: var(--sk-fs-sm, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, color 140ms ease;
}

.skagit-mobilebar__link i { font-size: 1em; }

/* :active rather than :hover — this bar only exists on touch, where a hover
   state sticks after the tap and reads as a stuck button. */
.skagit-mobilebar__link:active {
  background: var(--sk-navy-800, #08243D);
  color: #F2DC91;
}

.skagit-mobilebar__link:focus-visible {
  outline: 3px solid var(--sk-gold-500, #D4AF37);
  outline-offset: -3px;
}

@media (min-width: 1025px) {
  .skagit-mobilebar { display: none; }
}


/* ==========================================================================
   HOVER COLOUR ON THE MOBILE QUICK BAR
   ==========================================================================
   skagit-design-system.css declares, unscoped:

       a:hover { color: var(--sk-link-hover); }        (0,1,1)

   `--sk-link-hover` is `--sk-navy-700` (#0B3D68), a dark navy picked for links
   on WHITE. `.skagit-mobilebar__link` sets its gold at (0,1,0), which the
   global outranks, so hovering a tab repainted it dark blue on the #06192B
   ground -- about 1.5:1, which reads as a purple smudge. That was the report,
   and the omission was mine: the bar shipped with :active and :focus-visible
   but no :hover.

   >>> THE REST OF THE HEADER WAS ALREADY CORRECT -- I CHECKED, AND MY FIRST
   ANSWER WAS WRONG. <<< A grep for `:hover` and `color:` on the SAME LINE
   reported that none of the eight dark-surface components set a hover colour.
   They do; the declarations are simply on the following line. skagit-megamenu.css
   sets `--sk-hdr-link-on` (#FFFFFF) for the nav items, quick links and nav
   utilities, `.contact-pill:hover` is gold-200, the dropdown is gold-200, and
   the footer is gold-300. Anything whose base colour is set with two classes
   (e.g. `.site-header .sk-mega-feature__cta`, (0,2,0)) already outranks the
   global (0,1,1) and was never affected either.

   So this is deliberately ONE rule. An earlier version of this block also
   restyled the nav, quick links, contact pill and nav utilities to white:
   that was redundant everywhere and actively wrong on the contact pill, where
   (0,2,1) would have overridden its correct gold-200. Match a component's own
   hover rule before adding one; do not blanket a container.

   Specificity is doubled to (0,2,1) so it beats the global (0,1,1) outright
   rather than tying with it and leaving the winner to stylesheet load order.
   White on --sk-navy-900 is 17.8:1, and the resting state is already gold, so
   gold-on-gold would give almost no feedback.
   ========================================================================== */
.skagit-mobilebar .skagit-mobilebar__link:hover {
  color: #FFFFFF;
}