/* ===========================================================================
   Shared site header — ONE component, three skins.

   Used by every layout (base.njk, landing.njk, resort-page.njk) so the
   hamburger menu, the brand lockup and the nav links exist on every page and
   only have to be fixed in one place. Each layout picks a skin:

     .site-header--default   white bar + search  (base.njk: calculator, about,
                                                  contact, shops, states …)
     .site-header--plain     white bar, no search (resort, town, Browse All)
     .site-header--hero      transparent, overlaid on the hero (homepage)

   The skins only change colour, background and which optional parts show. The
   box model, the breakpoint and the hamburger are shared, so mobile behaviour
   is identical everywhere by construction.

   Lives in its own file rather than site.css because landing.njk does not load
   site.css and must not start doing so.
   ========================================================================= */

.site-header{ position: relative; z-index: 20; }.site-header .bar{ display: flex; align-items: center; gap: 12.8px; height: 54.4px; }/* ---- brand lockup ---- */
.site-header .logo{
  display: inline-flex; align-items: center; gap: 9.6px;
  font-weight: 700; font-size: 14.4px; letter-spacing: -.01em;
  text-decoration: none; color: var(--ink, #16181B); white-space: nowrap;
  min-width: 0;                      /* never forces the row wider than the bar */
}.site-header .logo img{ width: 30.4px; height: auto; display: block; flex: none; }.site-header .logo svg{ color: var(--blue, #1B3A5B); }/* ---- desktop nav (hidden until the hamburger retires at 980px) ---- */
.site-header .nav{ display: none; margin-left: auto; gap: 20.8px; }.site-header .nav a{
  text-decoration: none; font-weight: 500; font-size: 12px;
  color: var(--ink-2, #2E3237); padding: 6.4px 0;
  border-bottom: 2px solid transparent;
}.site-header .nav a:hover,
.site-header .nav a[aria-current="page"]{ border-color: var(--accent, #C23B22); color: var(--ink, #16181B); }/* ---- hamburger ---- */
.site-header .menu{ margin-left: auto; position: relative; flex: none; }.site-header .menu summary{
  list-style: none; cursor: pointer; width: 35.2px; height: 35.2px;
  border: 1px solid var(--line, #E2E0D9); border-radius: 799.2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper, #fff); color: var(--ink, #16181B);
}.site-header .menu summary::-webkit-details-marker{ display: none; }.site-header .menu summary:focus-visible{ outline: 2px solid var(--blue, #1B3A5B); outline-offset: 2px; }.site-header .menu-panel{
  position: absolute; right: 0; top: 41.6px;
  background: var(--paper, #fff); border: 1px solid var(--line, #E2E0D9);
  border-radius: var(--r-m, 12.8px); box-shadow: var(--shadow, 0 11.2px 32px rgba(27,58,91,.18));
  padding: 6.4px; min-width: 168px; display: flex; flex-direction: column;
  z-index: 30;
}.site-header .menu-panel a{ padding: 9.6px 11.2px; border-radius: 8px; text-decoration: none; font-weight: 500; color: var(--ink, #16181B); }.site-header .menu-panel a:hover{ background: var(--snow, #F7F6F2); }/* ---- header search (default skin only) ---- */
.site-header .hsearch{ display: none; position: relative; flex: 1; max-width: 336px; margin-left: 19.2px; }.site-header .hsearch .i{ position: absolute; left: 11.2px; top: 50%; transform: translateY(-50%); color: var(--muted, #595F66); }.site-header .hsearch input{
  width: 100%; height: 35.2px; border: 1px solid var(--line, #E2E0D9); border-radius: 799.2px;
  background: var(--paper, #fff); padding: 0 12.8px 0 33.6px; font: inherit; font-size: 12px; color: var(--ink, #16181B);
}.site-header .hsearch input:focus{ outline: none; border-color: var(--blue, #1B3A5B); box-shadow: 0 0 0 2.4px rgba(27,58,91,.15); }/* Desktop: real nav appears, hamburger and search swap over. */
@media (min-width: 980px){
  .site-header .nav { display: flex; }
  .site-header .menu { display: none; }
  .site-header--default .hsearch { display: block; }
  .site-header .logo img { width: 35.2px; }
}/* ===== skin: plain (resort / town / Browse All) ========================== */
.site-header--plain{ background: var(--rz-paper, #fff); border-bottom: 1px solid var(--rz-line, #E2E0D9); }.site-header--plain .bar{ min-height: 54.4px; height: auto; }.site-header--plain .logo{ font-size: 14.4px; font-weight: 600; letter-spacing: -.012em; color: var(--rz-ink, #16181B); }.site-header--plain .nav a{ font-size: 11.6px; color: var(--rz-muted, #595F66); }.site-header--plain .nav a:hover{ color: var(--rz-ink, #16181B); }/* ===== skin: hero (homepage) ============================================
   Overlaid on the hero image, so it takes no layout height and inherits no
   background. White artwork and type; the hamburger gets a translucent dark
   pill so it stays visible over a bright sky. */
.site-header--hero{
  position: absolute; top: 0; left: 0; right: 0;
  background: none; border: 0;
  z-index: 10;
}.site-header--hero .bar{ height: 60.8px; }/* The wordmark is navy, not white: over the pale sunset sky the white type
   was hard to read. The mark itself swaps to the dark asset in header.njk.
   The nav links and the hamburger keep their white/translucent treatment. */
.site-header--hero .logo{ color: var(--lp-navy, #0D2135); font-weight: 600; letter-spacing: -.012em; }.site-header--hero .logo span{ font-size: 15.2px; }.site-header--hero .nav a{ color: rgba(255,255,255,.88); font-size: 13.6px; font-weight: 500; }.site-header--hero .nav a:hover,
.site-header--hero .nav a[aria-current="page"]{ color: #fff; border-color: rgba(255,255,255,.6); }.site-header--hero .nav a:focus-visible{ outline: 2px solid #fff; outline-offset: 2.4px; border-radius: 2.4px; }.site-header--hero .menu summary{
  background: rgba(16,24,34,.42); border-color: rgba(255,255,255,.42); color: #fff;
  backdrop-filter: blur(4.8px); -webkit-backdrop-filter: blur(4.8px);
}.site-header--hero .menu summary:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }@media (min-width: 980px){.site-header--hero .bar{ height: 83.2px; }.site-header--hero .logo img{ width: 35.2px; }.site-header--hero .logo span{ font-size: 16.8px; }.site-header--hero .nav{ gap: 25.6px; }
}/* ===== mobile gutters =====================================================
   The bar uses the layout's own .wrap/.lp-wrap gutter where there is one; on
   the hero skin there is no .wrap, so set the gutter here. */
.site-header--hero .bar{ padding-left: var(--lp-gutter, 16px); padding-right: var(--lp-gutter, 16px); }