/*
Theme Name:   Sip Happens
Theme URI:    https://siphappenscatering.com
Author:       Sip Happens
Description:  Custom theme for Sip Happens Mobile Bartending, New Jersey. Dark charcoal and gold, Cormorant Garamond display type, built for lead capture.
Version:      1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sip-happens
Tags:         one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  --black:#0a0908;
  --charcoal:#161310;
  --charcoal2:#1c1814;
  --gold:#c8a15b;
  --gold-bright:#e0bc7c;
  --gold-dim:#8a6f3f;
  --cream:#f3ecdd;
  --line:rgba(200,161,91,0.28);
  --green:#2e7d4f;
  --danger:#d98080;

  --font-body:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-accent:'Cinzel',Georgia,serif;

  --gutter:5vw;
  --maxw:1180px;
}

/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html,body{background-color:var(--black);}
body{
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
::selection{background:var(--gold);color:var(--black);}

:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;}

.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--black);padding:0.8rem 1.4rem;
  font-family:var(--font-accent);font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;
}
.skip-link:focus{left:1rem;top:1rem;}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,h5,.display{font-family:var(--font-display);font-weight:500;line-height:1.15;}
h1{font-size:clamp(2.3rem,4.6vw,3.6rem);}
h2{font-size:clamp(2.1rem,4.6vw,3rem);}
h3{font-size:clamp(1.4rem,2.6vw,1.9rem);}
h4{font-size:1.2rem;}
p{line-height:1.7;}

.eyebrow{
  display:block;font-family:var(--font-accent);text-transform:uppercase;
  letter-spacing:0.32em;font-size:0.7rem;color:var(--gold);
}
em,.italic-gold{font-style:italic;color:var(--gold-bright);}
.rule{width:56px;height:1px;background:var(--gold);margin:1.3rem auto 0;}
.muted{color:rgba(243,236,221,0.68);}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.wrap{max-width:var(--maxw);margin-inline:auto;}
.narrow{max-width:960px;margin-inline:auto;}
section{padding:6rem var(--gutter);}
.section-head{max-width:640px;margin:0 auto 3.2rem;text-align:center;}
.section-head h2{margin-top:0.6rem;color:var(--cream);}
.section-head p{color:rgba(243,236,221,0.68);margin-top:1rem;font-size:1.02rem;}

/* ==========================================================================
   5. TOP BAR + NAV
   ========================================================================== */
.topbar{
  background:var(--charcoal2);border-bottom:1px solid var(--line);
  text-align:center;padding:0.5rem 1rem;
  font-family:var(--font-accent);font-size:0.68rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold-dim);
}
.topbar b{color:var(--gold);}

.site-header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1rem var(--gutter);
  background:var(--black);border-bottom:1px solid var(--line);
}
.site-mark{font-family:var(--font-accent);letter-spacing:0.14em;font-size:1.05rem;color:var(--cream);white-space:nowrap;}
.site-mark b{color:var(--gold);font-weight:600;}
.site-mark img{max-height:46px;width:auto;}

.nav-links{display:flex;gap:2.2rem;list-style:none;font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;}
.nav-links a{opacity:0.85;transition:color 0.18s ease,opacity 0.18s ease;}
.nav-links a:hover,.nav-links .current-menu-item > a{opacity:1;color:var(--gold-bright);}
.nav-links li{position:relative;}
.nav-links .sub-menu{
  display:none;position:absolute;top:100%;left:0;min-width:220px;
  background:var(--charcoal2);border:1px solid var(--line);padding:0.6rem 0;list-style:none;
}
.nav-links li:hover > .sub-menu,.nav-links li:focus-within > .sub-menu{display:block;}
.nav-links .sub-menu a{display:block;padding:0.6rem 1.2rem;text-transform:none;letter-spacing:0.03em;font-size:0.85rem;}

.nav-right{display:flex;align-items:center;gap:1.2rem;}
.nav-phone{font-family:var(--font-accent);font-size:0.82rem;letter-spacing:0.04em;opacity:0.9;white-space:nowrap;}

.burger{display:none;font-size:1.6rem;line-height:1;color:var(--gold);padding:0.2rem 0.4rem;}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn-primary,.btn-ghost,.nav-cta,.card-cta{
  display:inline-block;text-align:center;
  font-family:var(--font-accent);letter-spacing:0.1em;text-transform:uppercase;
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease;
  border:1px solid transparent;
}
.btn-primary,.btn-ghost{padding:1rem 2.1rem;font-size:0.8rem;}
.btn-primary{background:var(--gold);color:var(--black);}
.btn-primary:hover{background:var(--gold-bright);}
.btn-primary:disabled{opacity:0.45;cursor:not-allowed;}
.btn-ghost{border-color:rgba(243,236,221,0.5);color:#fff;}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);}

.nav-cta{border-color:var(--gold);color:var(--gold);padding:0.6rem 1.3rem;font-size:0.76rem;letter-spacing:0.08em;}
.nav-cta:hover{background:var(--gold);color:var(--black);}

.card-cta{border-color:var(--gold);color:var(--gold);padding:0.85rem;font-size:0.76rem;letter-spacing:0.08em;display:block;}
.card-cta:hover{background:var(--gold);color:var(--black);}

/* ==========================================================================
   7. SHARED COMPONENTS
   ========================================================================== */
.panel{background:var(--charcoal2);border:1px solid var(--line);}
.panel-head{
  padding:1.5rem 2rem;border-bottom:1px solid var(--line);background:var(--charcoal);
}
.panel-body{padding:2rem;}

.strip{background:var(--charcoal2);border-block:1px solid var(--line);padding:2.6rem var(--gutter);}
.strip-grid{max-width:1100px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.strip-item{display:flex;gap:1rem;align-items:flex-start;}
.strip-num{
  font-family:var(--font-display);font-size:2.2rem;color:var(--gold);line-height:1;flex-shrink:0;
}
.strip-item h4{color:var(--cream);margin-bottom:0.25rem;}
.strip-item p{font-size:0.86rem;color:rgba(243,236,221,0.65);line-height:1.55;}

.proof{display:flex;justify-content:center;gap:3.5rem;flex-wrap:wrap;text-align:center;max-width:1000px;margin-inline:auto;}
.proof b{display:block;font-family:var(--font-display);font-size:2.4rem;color:var(--gold);}
.proof span{font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(243,236,221,0.6);}

.badge{
  position:absolute;top:-13px;left:2rem;background:var(--gold);color:var(--black);
  font-family:var(--font-accent);font-size:0.62rem;letter-spacing:0.1em;
  text-transform:uppercase;padding:0.3rem 0.7rem;
}

.callout{
  border-left:2px solid var(--gold);background:rgba(200,161,91,0.06);
  padding:0.95rem 1.2rem;font-size:0.87rem;line-height:1.6;color:rgba(243,236,221,0.72);
}

/* form primitives shared by both apps */
.field{margin-bottom:1.7rem;}
.field:last-child{margin-bottom:0;}
.flabel,.field > label{
  display:block;font-family:var(--font-accent);font-size:0.7rem;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--gold-dim);margin-bottom:0.6rem;
}
.flabel .req{color:var(--gold);}
.hint{font-size:0.8rem;color:rgba(243,236,221,0.48);margin-top:0.5rem;line-height:1.55;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}

input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=date],select,textarea{
  width:100%;background:var(--black);border:1px solid var(--line);color:var(--cream);
  padding:0.85rem 1rem;font-weight:300;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);}
input.bad,select.bad{border-color:#c0575a;}
textarea{resize:vertical;}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(0.8) sepia(1) saturate(3) hue-rotate(5deg);cursor:pointer;
}

.pills{display:flex;flex-wrap:wrap;gap:0.6rem;}
.pill{
  background:var(--black);border:1px solid var(--line);color:rgba(243,236,221,0.75);
  padding:0.6rem 1.15rem;font-size:0.87rem;transition:all 0.16s ease;user-select:none;
}
.pill:hover{border-color:var(--gold-dim);}
.pill.on{border-color:var(--gold);background:rgba(200,161,91,0.11);color:var(--gold-bright);}

.stepper{display:flex;}
.stepper button{
  width:52px;background:var(--black);border:1px solid var(--line);color:var(--gold);
  font-size:1.25rem;line-height:1;transition:all 0.15s ease;flex-shrink:0;
}
.stepper button:hover{background:var(--gold);color:var(--black);}
.stepper input{border-inline:none;text-align:center;font-size:1.15rem;font-weight:400;}
.quickpicks{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.7rem;}
.quickpicks button{
  border:1px solid var(--line);color:rgba(243,236,221,0.7);
  padding:0.36rem 0.85rem;font-size:0.78rem;transition:all 0.15s ease;
}
.quickpicks button:hover{border-color:var(--gold);color:var(--gold-bright);}

.err{color:var(--danger);font-size:0.85rem;margin-top:0.9rem;display:none;}
.err.show{display:block;}

/* ==========================================================================
   8. PAGE HEADS + CONTENT
   ========================================================================== */
.page-head{text-align:center;max-width:680px;margin:0 auto 2.8rem;}
.page-head h1{margin-top:0.7rem;color:var(--cream);}
.page-head p{color:rgba(243,236,221,0.7);margin-top:1rem;}

.entry-content{max-width:760px;margin-inline:auto;}
.entry-content > * + *{margin-top:1.3rem;}
.entry-content h2,.entry-content h3{margin-top:2.4rem;color:var(--cream);}
.entry-content a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px;}
.entry-content ul,.entry-content ol{padding-left:1.4rem;}
.entry-content li{margin-top:0.5rem;}
.entry-content blockquote{
  border-left:2px solid var(--gold);padding-left:1.3rem;font-family:var(--font-display);
  font-size:1.25rem;font-style:italic;color:var(--gold-bright);
}
.entry-content img{margin-inline:auto;}
.wp-caption-text,.wp-element-caption{
  font-size:0.82rem;color:rgba(243,236,221,0.5);text-align:center;margin-top:0.6rem;
}
.alignleft{float:left;margin:0 1.5rem 1rem 0;}
.alignright{float:right;margin:0 0 1rem 1.5rem;}
.aligncenter{margin-inline:auto;}

/* ==========================================================================
   8b. HOME PAGE SECTIONS
   ========================================================================== */

/* hero */
.hero{position:relative;background-color:var(--black);padding:4.5rem var(--gutter) 4rem;}
.hero-grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:1.15fr 0.85fr;gap:4rem;align-items:center;
}
.hero-inner{max-width:560px;}
.hero-eyebrow{
  display:block;font-family:var(--font-accent);font-size:0.74rem;letter-spacing:0.24em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:1rem;
}
.hero h1{color:var(--cream);}
.hero-sub{font-size:1.08rem;line-height:1.7;color:rgba(243,236,221,0.8);max-width:500px;margin:1.3rem 0 2rem;}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.2rem;}
.hero-logo-panel{border:1px solid var(--line);background:var(--charcoal2);padding:1.4rem;}
.hero-logo-panel img{width:100%;}
.hero-logo-fallback{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:1;text-align:center;gap:0.5rem;
}
.hero-logo-fallback .mark{font-family:var(--font-accent);font-size:2rem;letter-spacing:0.12em;color:var(--cream);}
.hero-logo-fallback .mark b{color:var(--gold);}
.hero-logo-fallback .sub{font-family:var(--font-accent);font-size:0.62rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-dim);}
.hero-trust{display:flex;gap:1.8rem;flex-wrap:wrap;font-size:0.84rem;color:rgba(243,236,221,0.85);}
.hero-trust span{display:flex;align-items:center;gap:0.45rem;}
.hero-trust b{color:var(--gold-bright);}

/* packages */
.services{background:var(--charcoal);border-block:1px solid var(--line);}
.service-grid{max-width:1140px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.service-card{background:var(--black);border:1px solid var(--line);padding:2.4rem 2rem;display:flex;flex-direction:column;}
.service-card.featured{border-color:var(--gold);position:relative;}
.service-card h3{color:var(--cream);margin-bottom:0.5rem;}
.service-card .subline{
  font-family:var(--font-accent);color:var(--gold-dim);font-size:0.7rem;
  letter-spacing:0.1em;text-transform:uppercase;margin-bottom:1.2rem;
}
.service-card ul{list-style:none;margin-bottom:1.6rem;flex-grow:1;}
.service-card li{
  font-size:0.9rem;color:rgba(243,236,221,0.78);padding:0.5rem 0;
  border-top:1px dashed var(--line);display:flex;gap:0.6rem;
}
.service-card li::before{content:'—';color:var(--gold-dim);flex-shrink:0;}
.service-card.featured .card-cta{background:var(--gold);color:var(--black);}
.service-card.featured .card-cta:hover{background:var(--gold-bright);}

/* menu */
.menu-wrap{max-width:1000px;margin-inline:auto;}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 3.2rem;}
.menu-item{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px dashed var(--line);}
.menu-item h4{font-family:var(--font-display);font-weight:500;font-size:1.22rem;color:var(--cream);}
.menu-item p{font-size:0.84rem;color:rgba(243,236,221,0.6);margin-top:0.2rem;}
.menu-more{text-align:center;margin-top:2.6rem;}

/* signature drink */
.signature{background:var(--charcoal);border-block:1px solid var(--line);}
.signature-grid{max-width:1100px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.signature-step h4{color:var(--cream);margin:0.6rem 0 0.5rem;}
.signature-step p{font-size:0.9rem;color:rgba(243,236,221,0.68);line-height:1.65;}
.signature-example{
  max-width:760px;margin:3rem auto 0;border:1px solid var(--line);
  background:var(--black);padding:2rem;text-align:center;
}
.signature-example p{font-family:var(--font-display);font-size:1.2rem;font-style:italic;color:rgba(243,236,221,0.88);line-height:1.65;}

/* testimonials */
.test-grid{max-width:1140px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.test-card{background:var(--charcoal2);border:1px solid var(--line);padding:2rem 1.8rem;}
.test-card .stars{color:var(--gold);letter-spacing:0.16em;margin-bottom:1rem;font-size:0.95rem;}
.test-card p{font-size:0.96rem;color:rgba(243,236,221,0.82);line-height:1.7;}
.test-card span{
  display:block;margin-top:1.2rem;font-family:var(--font-accent);font-size:0.68rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-dim);
}

/* service area */
.area{
  max-width:900px;margin-inline:auto;text-align:center;
  border:1px solid var(--line);background:var(--charcoal2);padding:3.2rem 2rem;
}
.area h2{color:var(--cream);}
.area-pills{display:flex;flex-wrap:wrap;gap:0.6rem;justify-content:center;margin-top:1.8rem;}
.area-pills span{
  border:1px solid var(--line);padding:0.45rem 1rem;font-size:0.82rem;
  color:rgba(243,236,221,0.72);
}

/* blog teaser */
.blog{background:var(--charcoal);border-top:1px solid var(--line);}
.blog-grid{max-width:1140px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.blog-card{background:var(--black);border:1px solid var(--line);display:flex;flex-direction:column;}
.blog-thumb{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:var(--charcoal2);border-bottom:1px solid var(--line);
}
.blog-thumb svg{width:52px;height:52px;}
.blog-card .body{padding:1.6rem 1.5rem;}
.blog-tag{
  display:inline-block;font-family:var(--font-accent);font-size:0.58rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--line);
  padding:0.22rem 0.55rem;margin-bottom:0.8rem;
}
.blog-card h4{color:var(--cream);margin-bottom:0.5rem;line-height:1.3;}
.blog-card p{font-size:0.87rem;color:rgba(243,236,221,0.62);line-height:1.6;}

/* collapsible long-form guide (calculator page) */
.guide{border:1px solid var(--line);background:var(--charcoal2);}
.guide summary{
  list-style:none;cursor:pointer;padding:1.4rem 1.8rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--font-accent);font-size:0.78rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--gold);transition:background 0.18s ease;
}
.guide summary::-webkit-details-marker{display:none;}
.guide summary:hover{background:rgba(200,161,91,0.07);}
.guide summary i{font-style:normal;font-size:1.4rem;line-height:1;color:var(--gold-dim);flex-shrink:0;}
.guide[open] summary{border-bottom:1px solid var(--line);}
.guide[open] summary i{transform:rotate(45deg);}
.guide .entry-content{padding:0 1.8rem 2rem;}

/* final CTA */
.final-cta{background:var(--charcoal2);border-block:1px solid var(--line);}
.final-alt{text-align:center;margin-top:1.8rem;color:rgba(243,236,221,0.6);font-size:0.92rem;}
.final-alt a{color:var(--gold-bright);}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem;}
  .hero-logo-panel{order:-1;}
  .service-grid,.test-grid,.blog-grid,.signature-grid,.menu-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.site-footer{
  border-top:1px solid var(--line);background:var(--charcoal);
  padding:3.5rem var(--gutter) 2rem;
}
.footer-grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;
}
.site-footer h4{
  font-family:var(--font-accent);font-size:0.7rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1rem;
}
.site-footer ul{list-style:none;}
.site-footer li{margin-bottom:0.6rem;}
.site-footer a{color:rgba(243,236,221,0.72);font-size:0.88rem;}
.site-footer a:hover{color:var(--gold-bright);}
.footer-blurb{font-size:0.9rem;color:rgba(243,236,221,0.62);line-height:1.7;max-width:340px;}
.footer-bottom{
  max-width:var(--maxw);margin:2.5rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--line);text-align:center;
  font-size:0.78rem;color:rgba(243,236,221,0.42);line-height:1.7;
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media(max-width:900px){
  section{padding:4rem var(--gutter);}
  .strip-grid,.footer-grid{grid-template-columns:1fr;}
  .row2{grid-template-columns:1fr;}
  .nav-phone{display:none;}
  .burger{display:block;}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--charcoal2);
    border-bottom:1px solid var(--line);padding:0.6rem 0;
  }
  .nav-links.open{display:flex;}
  .nav-links a{display:block;padding:0.9rem var(--gutter);}
  .nav-links .sub-menu{
    display:block;position:static;border:none;background:transparent;padding:0 0 0 1rem;
  }
  .panel-body{padding:1.5rem;}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;
    transition-duration:0.01ms!important;scroll-behavior:auto!important;}
}