/* ── Shared site header: holiday banner + utility strip + navbar ──────────
   Used by index.html, faq.html, privacy.html (markup is copied in each page).
   schedule.html has its own app navbar (schedule.css) and does not load this. */

/* ── Holiday hours banner (filled by header.js from /api/closures) ── */
.holiday-banner {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: .6rem 1rem;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.4;
  border-bottom: 3px solid var(--gold);
  display: none;
}
.holiday-banner strong { color: var(--gold-lt); }

/* ── Utility strip (phone + hours) ────────────────────── */
.util-strip{background:var(--teal);color:var(--white);font-family:var(--font-body);font-size:.85rem}
.util-strip .container{display:flex;justify-content:space-between;align-items:center;padding-top:.45rem;padding-bottom:.45rem}
.util-strip a{color:var(--gold-lt);font-weight:600;letter-spacing:.02em;transition:var(--transition)}
.util-strip a:hover{color:var(--white)}
.util-hours{color:rgba(255,255,255,.85)}
/* Strip + navbar pinned together; navbar is fixed on other pages' patterns,
   static here inside the sticky wrapper. */
.pinned-top{position:sticky;top:0;z-index:1001}
.pinned-top .navbar{position:static}
@media(max-width:768px){
  .util-strip{font-size:.8rem}
  .util-strip .container{justify-content:center;gap:12px;flex-wrap:wrap}
}

/* ── Navbar ───────────────────────────────────────────── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:0;transition:var(--transition);
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px)
}
.navbar.scrolled{box-shadow:var(--shadow)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;column-gap:24px}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{font-size:1rem;font-weight:500;color:var(--grey-700);transition:var(--transition);position:relative}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:var(--teal);transition:var(--transition)
}
.nav-links a:hover{color:var(--navy)}
.nav-links a:hover::after{width:100%}
/* Small laptops: tighter, slightly smaller links so the logo, links and CTA fit on one
   row (below 1101px the ☰ menu takes over). Must come AFTER the base .nav-links rules. */
@media(min-width:1101px) and (max-width:1180px){.nav-links{gap:18px}.nav-links a{font-size:.9rem}}
.nav-cta .btn{padding:10px 24px;font-size:.85rem}
.mobile-cta-item{display:none}
.hamburger{display:none;flex-direction:column;gap:6px;background:none;padding:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.hamburger span{width:24px;height:2px;background:var(--navy);transition:var(--transition);transform-origin:center;pointer-events:none}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Navbar collapses to the ☰ menu below 1100px: the full link row doesn't fit on tablets */
@media(max-width:1100px){
  .navbar .container{flex-wrap:wrap}
  .nav-cta{display:none}
  .hamburger{display:flex}
  .nav-links{
    display:none;flex-direction:column;gap:0;
    width:100%;order:3;
    padding:8px 0 16px
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{
    display:block;padding:14px 8px;font-size:1rem;
    border-bottom:1px solid var(--grey-200)
  }
  .nav-links a::after{display:none}
  .nav-links li:last-child a{border-bottom:none}
  .mobile-cta-item{display:block}
  .nav-links .mobile-cta{
    display:block;margin-top:8px;padding:14px 8px;
    text-align:center;background:var(--teal);color:var(--white);
    border-radius:var(--radius);font-weight:600;font-size:.95rem
  }
}