/* ==========================================================================
   WOLFE & HOOVER -- CANONICAL NAV/FOOTER COMPONENT CSS  (wh-nav.css, v1 2026-09-27)
   Only var(--wh-*) tokens are used here (wh-system.css is not edited by this file).

   Self-contained on purpose: most pages already load wh-system.css, which defines the
   --wh-* tokens and base .wh-topbar/.wh-footer/.wh-btn/.wh-wrap rules, so this file is
   mostly redundant-but-harmless there. A few pages (currently only /weather/) don't load
   wh-system.css at all because it would fight their own fixed-viewport app layout; those
   pages carry a small inline <style> with just the token subset the canonical nav needs
   (see the comment at the top of weather/index.html's <head>), and this file supplies the
   actual component rules so the nav renders correctly standalone.

   Load this file LAST in <head> (pages-dist.py does this automatically) so its rules win
   over any page-specific CSS that predates the canonical nav, in particular the SEO
   session's assets/content.css, which hides the nav links under 720px -- that pattern is
   superseded here: every public page shows a horizontally scrollable link row on narrow
   screens instead of hiding navigation.
   ========================================================================== */

.wh-skip{position:absolute;left:var(--wh-s3,12px);top:-60px;z-index:100;background:var(--wh-charcoal,var(--wh-charcoal-2,#3A3F4F));color:#fff;padding:var(--wh-s3,12px) var(--wh-s4,16px);border-radius:var(--wh-radius-sm,6px);text-decoration:none}
.wh-skip:focus{top:var(--wh-s3,12px)}

.wh-wrap{width:100%;max-width:var(--wh-maxw,1120px);margin:0 auto;padding:0 var(--wh-s5,24px)}

/* ---- Header band ---- */
.wh-topbar{position:sticky;top:0;z-index:50;background:var(--wh-charcoal-2,#4A4D5C);color:#fff;border-bottom:3px solid var(--wh-gold,#B9B288)}
.wh-topbar .wh-wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--wh-s3,12px);min-height:64px;flex-wrap:wrap;row-gap:var(--wh-s2,8px);padding-top:var(--wh-s2,8px);padding-bottom:var(--wh-s2,8px)}
.wh-topbar a{color:#fff;text-decoration:none}
.wh-topbar .wh-logo{display:block;height:36px;width:auto}

.wh-topbar-right{display:flex;align-items:center;gap:var(--wh-s3,12px);min-width:0;flex:1 1 auto;justify-content:flex-end}

/* ---- Nav links: never hidden on narrow screens -- horizontal scroll instead of a hamburger.
   High specificity (3 classes) so this wins over content.css's `.wh-topbar nav a:not(.wh-btn)`
   mobile hide rule and over home.css's `.wh-topbar .wh-navlinks{display:none}` legacy rule,
   regardless of stylesheet load order. */
.wh-topbar .wh-topbar-right .wh-navlinks{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:var(--wh-s4,16px);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-width:0;flex:1 1 auto}
.wh-topbar .wh-topbar-right .wh-navlinks::-webkit-scrollbar{display:none}
.wh-topbar .wh-topbar-right .wh-navlinks .wh-navlink{display:inline-flex!important;flex:none;color:#fff;font-weight:600;font-size:var(--wh-fs-sm,.9375rem);text-decoration:none;padding:6px 0;white-space:nowrap;border-bottom:2px solid transparent}
.wh-topbar .wh-topbar-right .wh-navlinks .wh-navlink:hover{color:var(--wh-gold,#B9B288)}
.wh-topbar .wh-topbar-right .wh-navlinks .wh-navlink[aria-current="page"]{color:var(--wh-white,#fff);border-bottom-color:var(--wh-gold,#B9B288)}

/* ---- Buttons used in the nav (Book / Call). Redundant with wh-system.css's .wh-btn on
   pages that load it; the only place this matters standalone is /weather/. */
.wh-topbar .wh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--wh-s2,8px);min-height:var(--wh-tap,44px);padding:0 var(--wh-s4,16px);border-radius:var(--wh-radius,10px);border:2px solid transparent;font:700 var(--wh-fs-sm,.9375rem)/1 var(--wh-font-body,inherit);letter-spacing:.02em;white-space:nowrap;flex:none}
.wh-topbar .wh-btn--primary{background:var(--wh-primary,var(--wh-red,#BB2649));color:var(--wh-on-primary,#fff)}
.wh-topbar .wh-btn--primary:hover{background:var(--wh-primary-hover,var(--wh-red-deep,#9C1E3C));color:#fff}
.wh-topbar .wh-btn svg{width:18px;height:18px;flex:none}
.wh-topbar :focus-visible{outline:3px solid var(--wh-focus,#1F6FEB);outline-offset:2px;border-radius:4px}

/* 360px phones: logo + Call collapse to a compact row, the scrollable link row wraps under it. */
@media (max-width:480px){
  .wh-topbar .wh-btn--primary span:not(.wh-nowrap){display:none}
  .wh-topbar .wh-topbar-right{gap:var(--wh-s2,8px)}
  .wh-topbar .wh-btn{padding:0 var(--wh-s3,12px)}
  /* v1.1 2026-09-28: the Call button may shrink but never push past the screen edge
     (iOS text size, wider system fonts on pages without the webfont, notch insets). */
  .wh-topbar .wh-wrap{padding-left:max(var(--wh-s4,16px),env(safe-area-inset-left));padding-right:max(var(--wh-s4,16px),env(safe-area-inset-right))}
  .wh-topbar .wh-topbar-right a[href^="tel:"]{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden}
  /* Book leads the scrolling row on phones so it is always visible */
  .wh-topbar .wh-topbar-right .wh-navlinks .wh-btn--primary{order:-1}
  /* fade the right edge of the scrolling link row so it reads as scrollable */
  .wh-topbar .wh-topbar-right .wh-navlinks{flex:1 1 0;padding-right:var(--wh-s5,24px);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}
@media (max-width:359px){
  .wh-topbar .wh-topbar-right a[href^="tel:"] svg{display:none}
  .wh-topbar .wh-btn{font-size:.875rem}
}

/* ---- Footer (only needed standalone the same way; harmless alongside wh-system.css) ---- */
.wh-footer{background:var(--wh-night,#262634);color:var(--wh-hairline,#D5DBE2);padding:var(--wh-s7,48px) 0 calc(var(--wh-s9,96px) + env(safe-area-inset-bottom));font-size:var(--wh-fs-sm,.9375rem)}
.wh-footer a{color:var(--wh-cloud,#F0EEE9);text-decoration:none}
.wh-footer a:hover{color:var(--wh-gold,#B9B288)}
.wh-footer .wh-kicker{color:var(--wh-gold,#B9B288);text-transform:uppercase;letter-spacing:.18em;font-weight:700;font-size:.8125rem}
.wh-footer :is(p,small){color:var(--wh-hairline,#D5DBE2)}
