/*
Theme Name: Top Shelf
Description: Single-page classical theme for Top Shelf Tom mobile bartending.
Version: 1.3.2
Author: InnovaERP
Requires PHP: 8.0
*/
:root{
  --green:#16302a; --green-deep:#0f231e; --brass:#b08d4c; --brass-light:#d4b77a;
  --paper:#fbfaf6; --ink:#1c1c1a; --muted:#5c5a52; --oxblood:#6b1e23;
  --display:"Bodoni Moda",Didot,"Bodoni 72",serif;
  --body:"EB Garamond",Garamond,Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.1875rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--oxblood)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:10}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.15;margin:0 0 .6em}
h2{font-size:clamp(1.9rem,4vw,2.6rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
.site-main>*{margin:0}

/* Sections */
.ts-section{padding:clamp(4rem,9vw,7rem) 1.25rem;text-align:center}
.ts-section>*{max-width:40rem;margin-left:auto;margin-right:auto}
.ts-section>h2::after{content:"";display:block;width:3.5rem;height:1px;background:var(--brass);margin:1.1rem auto 0}
.ts-dark{background:var(--green);color:#f3f1ea}
.ts-dark h2,.ts-dark h3{color:#fff}
.ts-dark a{color:var(--brass-light)}

/* Hero: the cocktail-menu card */
.ts-hero{background:var(--green-deep);padding:clamp(1.25rem,4vw,3rem);min-height:min(92vh,58rem);display:flex;align-items:center;justify-content:center}
.ts-card{position:relative;max-width:46rem;width:100%;margin:0 auto;padding:clamp(3rem,8vw,5.5rem) clamp(1.5rem,6vw,4.5rem);text-align:center;color:#f3f1ea;border:1px solid var(--brass);outline:1px solid var(--brass);outline-offset:-10px;background:var(--green)}
.ts-card::before,.ts-card::after{content:"";position:absolute;left:50%;width:9px;height:9px;background:var(--brass);transform:translateX(-50%) rotate(45deg)}
.ts-card::before{top:-5px}.ts-card::after{bottom:-5px}
.ts-card .ts-est{font-style:italic;color:var(--brass-light);font-size:1.15rem;margin-bottom:1.5rem}
.ts-card h1{font-size:clamp(3rem,11vw,6.25rem);font-weight:400;letter-spacing:-.01em;line-height:.95;color:#fff;margin-bottom:1.5rem}
.ts-card .ts-rule{display:flex;align-items:center;gap:1rem;justify-content:center;color:var(--brass-light);font-family:var(--display);font-size:clamp(1rem,2.6vw,1.3rem);letter-spacing:.08em;margin:0 auto 1.75rem}
.ts-card .ts-rule{white-space:nowrap}
.ts-card .ts-rule::before,.ts-card .ts-rule::after{content:"";flex:0 1 4.5rem;min-width:1.25rem;height:1px;background:var(--brass)}
.ts-card .ts-lede{font-size:clamp(1.15rem,2.4vw,1.35rem);max-width:30rem;margin:0 auto 2.25rem}

/* Buttons */
.wp-block-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.wp-block-button__link{display:inline-block;font-family:var(--body);font-size:1.1rem;padding:.8rem 2rem;border:1px solid var(--brass);background:var(--brass);color:var(--green-deep)!important;text-decoration:none;border-radius:0;transition:background .2s,color .2s}
.wp-block-button__link:hover{background:transparent;color:var(--brass-light)!important}
.ts-section:not(.ts-dark) .wp-block-button__link:hover{color:var(--green)!important}

/* Events: menu list */
.ts-menu{list-style:none;padding:0;margin:2.5rem auto 0;max-width:44rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:2.25rem 3rem}
.ts-menu li{margin:0}
.ts-menu strong{display:block;font-family:var(--display);font-weight:500;font-size:1.4rem;margin-bottom:.25rem}
.ts-menu span{color:var(--muted)}
.ts-dark .ts-menu span{color:#d3cfc2}

/* Steps */
.ts-steps{list-style:none;padding:0;margin:2.5rem auto 0;max-width:34rem;counter-reset:step}
.ts-steps li{counter-increment:step;margin:0 0 2rem}
.ts-steps li::before{content:counter(step,upper-roman);display:block;font-family:var(--display);color:var(--brass-light);font-size:1.6rem;margin-bottom:.2rem}
.ts-steps li:last-child{margin-bottom:0}

/* Contact */
.ts-contact{font-size:1.3rem}
.ts-contact a{color:var(--oxblood);text-decoration-thickness:1px;text-underline-offset:.2em}

.site-footer{background:var(--green-deep);color:#c9c5b8;text-align:center;padding:2.5rem 1.25rem;font-size:1rem}
.site-footer p{margin:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Photos */
.wp-block-image{margin:0}
.wp-block-image img{display:block;width:100%;height:100%;object-fit:cover}
.ts-hero{gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap}
.ts-hero>.ts-card{flex:1 1 30rem;max-width:44rem;margin:0}
.ts-hero-photo{flex:0 1 28rem;align-self:center;border:1px solid var(--brass);padding:9px;background:var(--green)}
.ts-hero-photo img{aspect-ratio:1/1;object-position:50% 8%}
.ts-about{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,32rem);gap:clamp(2rem,5vw,4.5rem);align-items:center;justify-content:center;text-align:left}
.ts-section.ts-about>*{max-width:none;margin:0}
.ts-about-text h2::after{content:"";display:block;width:3.5rem;height:1px;background:var(--brass);margin:1.1rem 0 0}
.ts-about-photo{border:1px solid var(--brass);padding:9px}
.ts-about-photo img{aspect-ratio:4/5;object-position:50% 25%}
.ts-section.ts-gallery-section>.ts-gallery{max-width:72rem;margin-top:2.5rem}
.ts-gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(14rem,24vw,22rem);gap:clamp(.5rem,1.2vw,1rem)}
.ts-gallery .ts-wide{grid-column:span 2}
.ts-dark .ts-contact a{color:var(--brass-light)}
@media (max-width:760px){
  .ts-hero-photo{flex-basis:100%;max-width:26rem}
  .ts-about{grid-template-columns:1fr;text-align:center;justify-items:center}
  .ts-about-photo{max-width:20rem}
  .ts-about-text h2::after{margin-left:auto;margin-right:auto}
  .ts-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(11rem,52vw,18rem)}
}

/* Booking form */
.ts-form{max-width:26rem;margin:2rem auto 0;text-align:left}
.ts-form p{margin:0 0 1.1rem}
.ts-form label{display:block;font-size:1rem;margin-bottom:.3rem}
.ts-form input{width:100%;font:inherit;font-size:1.05rem;padding:.65rem .8rem;border:1px solid #c9c2ad;background:#fff;color:var(--ink);border-radius:0}
.ts-form input:focus-visible{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.ts-form .wp-block-button{text-align:center;margin-top:1.6rem}
.ts-form button{cursor:pointer}
.ts-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ts-form-note{max-width:30rem;margin:1.5rem auto 0;padding:.9rem 1.1rem;border:1px solid var(--brass);font-size:1.1rem}
.ts-form-error{border-color:var(--oxblood);color:var(--oxblood)}

/* Reel inside the gallery: 2 columns x 2 rows */
.ts-gallery .ts-video{grid-column:span 2;grid-row:span 2;position:relative;margin:0}
.ts-gallery .ts-video video{display:block;width:100%;height:100%;object-fit:cover}
.ts-video-toggle{position:absolute;right:.75rem;bottom:.75rem;font:inherit;font-size:.95rem;padding:.35rem .9rem;background:rgba(15,35,30,.82);color:#fff;border:1px solid var(--brass);cursor:pointer}
.ts-video-toggle:hover{background:var(--green-deep)}

/* Quote form: grouped fields */
.ts-form{max-width:38rem}
.ts-form fieldset{border:0;padding:0;margin:0 0 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem}
.ts-form legend{font-family:var(--display);font-size:1.35rem;margin-bottom:1rem;padding:0}
.ts-form .ts-full{grid-column:1/-1}
.ts-form select,.ts-form textarea{width:100%;font:inherit;font-size:1.05rem;padding:.65rem .8rem;border:1px solid #c9c2ad;background:#fff;color:var(--ink);border-radius:0}
.ts-form textarea{resize:vertical}
.ts-form select:focus-visible,.ts-form textarea:focus-visible{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.ts-opt{color:var(--muted);font-size:.9rem}
@media (max-width:560px){.ts-form fieldset{grid-template-columns:1fr}}

/* FAQ */
.ts-faq{max-width:40rem;margin:2.5rem auto 0;text-align:left}
.ts-faq details{border-top:1px solid rgba(176,141,76,.5)}
.ts-faq details:last-child{border-bottom:1px solid rgba(176,141,76,.5)}
.ts-faq summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;position:relative;font-family:var(--display);font-size:1.2rem}
.ts-faq summary::-webkit-details-marker{display:none}
.ts-faq summary::after{content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);color:var(--brass);font-size:1.5rem}
.ts-faq details[open] summary::after{content:"\2212"}
.ts-faq details p{margin:0 0 1.2rem}
.ts-faq summary::after{font-family:var(--body);font-weight:500;color:var(--green)}
.ts-dark .ts-opt{color:#c9c5b8}