/* Sip'Stroke v38 polish — one consistent layer, loaded after every page's own CSS */

/* 1. One header on every page */
nav.nav{height:72px!important;min-height:72px!important;padding-top:0!important;padding-bottom:0!important;align-items:center!important}
.nav-logo{display:flex!important;align-items:center!important}
.nav-logo img{height:50px!important;width:auto!important;max-height:none!important}
.nav .ss-status{margin-left:22px!important;margin-right:auto!important}
.nav .nav-links{margin-left:0!important;margin-right:36px!important}
.nav .nav-links a{font-size:13px!important;letter-spacing:.12em!important}
.nav .nav-cta{font-size:12px!important;letter-spacing:.12em!important}
@media (max-width:900px){
  nav.nav{height:62px!important;min-height:62px!important}
  .nav-logo img{height:44px!important}
}

/* 2. Homepage kitchen section: cream, so the food photos pop between two dark sections */
#main-content > section.section:has(.home-dishes){background:#f4efe4}
#main-content > section.section:has(.home-dishes) .section-title{color:#0a1f1a}
#main-content > section.section:has(.home-dishes) .section-lead{color:#4c5a52}
#main-content > section.section:has(.home-dishes) .section-eyebrow{color:#9a7b3f}
#main-content > section.section:has(.home-dishes) .gold{color:#9a7b3f}
#main-content > section.section:has(.home-dishes) .btn-ghost{color:#0a1f1a!important;border-color:rgba(10,31,26,.35)!important}
#main-content > section.section:has(.home-dishes) .btn-ghost:hover{background:#0a1f1a!important;color:#f4efe4!important}
#main-content > section.section:has(.home-dishes) .hd-hint{color:#7a7462}

/* 3. Homepage dish cards: shorter, softer */
.home-dishes .hd-card{height:auto!important;aspect-ratio:1/1.08;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(10,31,26,.55)}
.home-dishes .hd-card img{height:100%!important;width:100%;object-fit:cover}

/* 4. Phone hero: less clutter (the info line repeats what the next section says) */
@media (max-width:600px){
  .hero .hero-price{display:none!important}
}

/* 5. Menu page, phone: slimmer sticky tab bar (121px down to about 90px) */
@media (max-width:700px){
  .mn-bar .mn-tabs button{height:36px!important;min-height:36px!important;font-size:11.5px!important}
  .mn-bar .mn-chips{height:auto!important;padding-top:6px!important;padding-bottom:6px!important}
  .mn-bar .mn-chips a{height:32px!important;min-height:32px!important;line-height:32px!important;padding-top:0!important;padding-bottom:0!important;font-size:11px!important}
}
.mn-img{background:#1a2f29}

/* 6. Footer bottom row: links on one even line */
.footer-bottom{align-items:center!important;flex-wrap:wrap!important;gap:12px 28px!important}
.footer-bottom > div:last-child{display:flex!important;gap:22px!important;flex-wrap:wrap!important}
.footer-bottom > div:last-child a{margin:0!important}

/* 7. Book-the-bay hero: clear the header, calmer text over the video */
html.pbar header.hero{padding-top:142px!important}
html:not(.pbar) header.hero{padding-top:108px!important}
header.hero .hero-in{text-shadow:0 1px 16px rgba(0,0,0,.6)}
header.hero h1{margin-top:6px!important}

/* 8. One page transition everywhere (v39)
   Before: 12 pages faded the whole page to black for 0.4s on every click (animations.js),
   then cross-faded; Book the bay and Events skipped that and jumped. Now every page uses
   the same native cross-fade, and the header, promo bar and phone bar stay put. */
@view-transition{navigation:auto}
body.page-leaving,body.page-entering{opacity:1!important}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:ssVtOut .2s ease both}
  ::view-transition-new(root){animation:ssVtIn .32s cubic-bezier(.2,.7,.2,1) both}
  @keyframes ssVtOut{to{opacity:0}}
  @keyframes ssVtIn{from{opacity:0;transform:translateY(6px)}}
  nav.nav{view-transition-name:ss-nav}
  #ss-pbar{view-transition-name:ss-pbar}
  .ss-mbar{view-transition-name:ss-mbar}
  ::view-transition-group(ss-nav),::view-transition-group(ss-pbar),::view-transition-group(ss-mbar){animation:none}
  ::view-transition-old(ss-nav),::view-transition-old(ss-pbar),::view-transition-old(ss-mbar){animation:none;opacity:0}
  ::view-transition-new(ss-nav),::view-transition-new(ss-pbar),::view-transition-new(ss-mbar){animation:none}

  /* 9. One scroll-reveal everywhere: same distance, same speed on every page
     (Events used its own .is-in version; the rest used .visible) */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)!important}
  .reveal.visible,.reveal.is-in{opacity:1!important;transform:none!important}
  html{scroll-behavior:smooth}
}