/* Spirit & Proof — shared components (loaded after base.css) */

/* Top navigation */
.nav{position:sticky;top:0;z-index:20;background:var(--mist);border-bottom:1px solid var(--rule)}
.nav-in{max-width:64rem;margin:0 auto;padding:.7rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{font:400 1.35rem/1 var(--display);color:var(--slate);text-decoration:none;white-space:nowrap}
.brand i{font-style:italic;color:var(--rose)}
.nav-links{display:flex;gap:1.4rem;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--slate);text-decoration:none;font:600 .95rem/1 var(--body)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--rose)}
.nav-links .btn{color:var(--paper);padding:.7rem 1rem}
.nav-links .btn:hover{color:var(--paper)}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--slate);font:600 .9rem/1 var(--body);padding:.6rem .8rem;cursor:pointer}
@media (max-width:46rem){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--mist);flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--rule);padding:.5rem 1.25rem 1rem}
  .nav.open .nav-links{display:flex}
  .nav-links a{display:block;padding:.85rem 0;border-bottom:1px solid var(--rule)}
  .nav-links li:last-child a{border-bottom:0;margin-top:.75rem;text-align:center}
}

/* Sticky "Check a date" on phones */
.sticky-cta{display:none}
@media (max-width:46rem){
  .sticky-cta{display:block;position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:15;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:opacity .2s,transform .2s}
  .sticky-cta.hide{opacity:0;transform:translateY(120%);pointer-events:none}
  body{padding-bottom:5rem}
}

/* Page headers for inner pages */
.page-head{padding:3rem 0 1.5rem}
.page-head h1{font:400 clamp(2.3rem,8vw,3.4rem)/1.02 var(--display);margin:0 0 .6rem}
.page-head .kicker{font:italic 400 1rem/1.3 var(--display);color:var(--lake);margin:0 0 .5rem}

/* Carousel */
.carousel{position:relative;margin:1.25rem 0}
.track{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.6rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.slide{flex:0 0 78%;max-width:26rem;scroll-snap-align:start;margin:0;background:var(--paper)}
@media (min-width:46rem){.slide{flex-basis:40%}}
.slide button{all:unset;display:block;cursor:zoom-in;width:100%}
.slide img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.slide figcaption{font-size:.86rem;color:var(--lake);padding:.55rem .75rem .75rem}
.car-btn{position:absolute;top:40%;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--rule);background:var(--paper);color:var(--slate);font:400 1.4rem/1 var(--display);cursor:pointer;display:grid;place-items:center}
.car-btn.prev{left:-.6rem}.car-btn.next{right:-.6rem}
@media (max-width:46rem){.car-btn{display:none}}
.dots{display:flex;gap:.4rem;justify-content:center;margin-top:.4rem}
.dots span{width:.5rem;height:.5rem;border-radius:50%;background:var(--rule)}
.dots span.on{background:var(--rose)}

/* Gallery grid + lightbox */
.ggrid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));padding-bottom:3rem}
.ggrid figure{margin:0;background:var(--paper)}
.ggrid button{all:unset;display:block;cursor:zoom-in;width:100%}
.ggrid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.ggrid figcaption{font-size:.84rem;color:var(--lake);padding:.5rem .7rem .7rem}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,56rem);max-height:92vh}
dialog.lightbox::backdrop{background:rgba(10,14,13,.88)}
.lightbox img{display:block;max-width:100%;max-height:80vh;margin:0 auto}
.lightbox p{color:#E8ECE8;text-align:center;font-size:.92rem;margin:.75rem 0 0}
.lb-bar{display:flex;justify-content:space-between;margin-top:.6rem}
.lb-bar button{background:none;border:1px solid #5a6662;color:#E8ECE8;font:600 .9rem/1 var(--body);padding:.6rem .9rem;cursor:pointer}

/* FAQ */
.faq details{border-bottom:1px solid var(--rule);padding:.9rem 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.4rem/1 var(--display);color:var(--rose)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.6rem 0 0;color:var(--lake)}

/* Rain plan */
.rain{background:var(--slate);color:var(--paper);padding:2rem 1.5rem;margin:0 -1.5rem;border-top:0}
.rain h2{color:var(--paper)}
.rain p{color:var(--paper);opacity:.9}
.rain a{color:#EE8A7F}
@media (min-width:46rem){.rain{margin:0;padding:2.25rem 2rem}}

/* Menu cards with drinks */
.drinks{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:1.25rem 0}
.drink{background:var(--paper);display:flex;flex-direction:column}
.drink img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.drink .ph{aspect-ratio:4/5;display:grid;place-items:center;background:var(--mist);border-bottom:1px solid var(--rule);font:italic 400 1.1rem/1.3 var(--display);color:var(--lake);text-align:center;padding:1rem}
.drink .body{padding:1rem 1rem 1.1rem}
.drink h3{font:400 1.35rem/1.2 var(--display);margin:0 0 .3rem}
.drink .glass{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);margin:0 0 .5rem}
.drink p{font-size:.95rem;margin:0}

/* Shopping list estimator */
.est{background:var(--paper);border-top:3px solid var(--rose);padding:1.25rem}
.est-controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:end;margin-bottom:1rem}
.est-controls label{flex:1 1 10rem}
.stepper{display:flex;align-items:center;gap:.5rem}
.stepper button{width:2.6rem;height:2.6rem;border:1px solid var(--rule);background:var(--mist);color:var(--slate);font:400 1.3rem/1 var(--display);cursor:pointer}
.stepper output{min-width:2.5rem;text-align:center;font:400 1.6rem/1 var(--display)}
.est table{min-width:0}
.est td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.est .tot td{font-weight:600;border-bottom:0}
.est .keep{margin:1rem 0 0;padding:.75rem .9rem;border-left:3px solid var(--lake);background:var(--mist)}
.est .fine{font-size:.82rem;color:var(--lake);margin:.75rem 0 0}

/* Small strip teaser */
.teaser{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.more{font:600 .95rem/1 var(--body);color:var(--lake)}
.about-grid{display:grid;gap:1.75rem}
@media (min-width:46rem){.about-grid{grid-template-columns:1fr 1.2fr;align-items:start}}
.pull{font:italic 400 1.35rem/1.45 var(--display);border-left:3px solid var(--rose);padding:.2rem 0 .2rem 1rem;margin:1.5rem 0}
.creds{list-style:none;padding:0;margin:1rem 0}
.creds li{padding:.55rem 0;border-bottom:1px solid var(--rule)}
footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-bottom:.9rem}
footer nav a{font-weight:600}