/*
Theme Name: Tapped
Theme URI: https://tapped.coffee
Author: Tapped Coffee
Description: Custom theme for Tapped Coffee — premium coffee, on tap, in seconds.
Version: 1.0.0
Text Domain: tapped
*/

/* ==========================================================================
   Tapped — design tokens (see .tastemaker/style-lock.md for the derivation)
   ========================================================================== */

:root{
  /* dark surface */
  --bg-dark:#14100D;
  --surface-dark:#221B15;
  --ink-dark:#F5EFE6;
  --ink-dark-muted:#C9BFAF;
  --accent-dark:#C89B6B;
  --accent-dark-bright:#E0BE8C;

  /* light surface */
  --bg-light:#F6F1E7;
  --surface-light:#FFFFFF;
  --ink-light:#1A1512;
  --ink-light-muted:#5C5245;
  --accent-light:#B8783F;

  /* shared */
  --btn-label-on-accent:#14100D;
  --radius:2px;
  --hairline: 1px solid rgba(200,155,107,0.25);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px; --space-32:128px; --space-48:192px;

  --font-display:'General Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-body:'General Sans', -apple-system, 'Segoe UI', sans-serif;

  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --dur-1: 180ms; --dur-2: 320ms; --dur-3: 600ms;
}

/* ==========================================================================
   Fonts — self-hosted General Sans (400/500/600/700)
   ========================================================================== */

@font-face{
  font-family:'General Sans';
  src:url('assets/fonts/7YY3ZAAE3TRV2LANYOLXNHTPHLXVWTKH.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'General Sans';
  src:url('assets/fonts/SB2OEB6IKZPRR6JT4GFJ2TFT6HBB6AZN.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'General Sans';
  src:url('assets/fonts/3ZLMEXZEQPLTEPMHTQDAUXP5ZZXCZAEN.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'General Sans';
  src:url('assets/fonts/NIQ54PVBBIWVK3PFSOIOUJSXIJ5WTNDP.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:clip;}
body{
  margin:0;overflow-x:clip;
  font-family:var(--font-body);
  background:var(--bg-light);
  color:var(--ink-light);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block;}
h1,h2,h3,h4,p,figure{margin:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;}
ul{list-style:none;margin:0;padding:0;}
:where(*){overflow-wrap:anywhere;}

/* browser surfaces — themed, not left to default */
::selection{background:var(--accent-light);color:var(--btn-label-on-accent);}
:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px;}
.on-dark :focus-visible{outline-color:var(--accent-dark);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg-light);}
::-webkit-scrollbar-thumb{background:var(--accent-light);border-radius:6px;}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em;line-height:1.05;}
.display-1{font-size:clamp(2.75rem,7vw,6rem);font-weight:700;letter-spacing:-0.04em;line-height:0.98;}
.display-2{font-size:clamp(2.25rem,5vw,3.75rem);letter-spacing:-0.03em;line-height:1.02;}
.heading-1{font-size:clamp(1.75rem,3vw,2.5rem);}
.heading-2{font-size:1.375rem;font-weight:600;}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.55;max-width:38rem;}
p, .body-text{max-width:68ch;}
.text-muted{color:var(--ink-light-muted);}
.on-dark .text-muted{color:var(--ink-dark-muted);}
.label{font-family:var(--font-display);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;font-size:0.75rem;}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container{max-width:1240px;margin-inline:auto;padding-inline:var(--space-6);}
@media (min-width:900px){.container{padding-inline:var(--space-12);}}

.section{padding-block:var(--space-24);}
@media (min-width:900px){.section{padding-block:var(--space-32);}}
.section--tight{padding-block:var(--space-16);}
@media (min-width:900px){.section--tight{padding-block:var(--space-24);}}

.on-light{background:var(--bg-light);color:var(--ink-light);}
.on-dark{background:var(--bg-dark);color:var(--ink-dark);}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--ink-dark);}
.surface-light{background:var(--surface-light);}
.surface-dark{background:var(--surface-dark);}

.grid{display:grid;gap:var(--space-8);}
@media (min-width:900px){
  .grid--2{grid-template-columns:1fr 1fr;}
  .grid--asym-left{grid-template-columns:1.1fr 0.9fr;align-items:center;}
  .grid--asym-right{grid-template-columns:0.9fr 1.1fr;align-items:center;}
}

.divider{border:0;border-top:var(--hairline);margin:0;}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:14px 28px;border-radius:var(--radius);
  font-family:var(--font-display);font-weight:600;font-size:0.95rem;letter-spacing:0.01em;
  white-space:nowrap;
  transition:transform var(--dur-1) var(--ease-out-expo), background-color var(--dur-2) var(--ease-out-expo);
  min-height:44px;
}
.btn--copper{background:var(--accent-light);color:var(--btn-label-on-accent);}
.on-dark .btn--copper{background:var(--accent-dark);color:var(--btn-label-on-accent);}
.btn--copper:hover{background:var(--accent-dark-bright);}
.btn--ghost{background:var(--ink-light);color:var(--bg-light);}
.on-dark .btn--ghost{background:var(--ink-dark);color:var(--bg-dark);}
.btn--outline{border:1px solid currentColor;background:transparent;color:var(--ink-light);}
.on-dark .btn--outline{color:var(--ink-dark);}
.btn:active{transform:scale(0.98);}
.btn-row{display:flex;gap:var(--space-4);flex-wrap:wrap;}

/* ==========================================================================
   Site header / nav
   ========================================================================== */

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-6);
  background:rgba(20,16,13,0.72);backdrop-filter: saturate(140%);
  border-bottom:1px solid rgba(245,239,230,0.08);
}
@media (min-width:900px){.site-header{padding:var(--space-4) var(--space-12);}}
.site-logo{display:flex;align-items:center;gap:var(--space-2);color:var(--ink-dark);font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-0.01em;}
.site-logo svg{height:28px;width:auto;display:block;}
.site-logo svg.mark{color:var(--accent-dark-bright);}
.site-footer .site-logo svg.mark{color:var(--accent-dark-bright);}
.site-nav{display:none;align-items:center;gap:var(--space-8);}
@media (min-width:960px){.site-nav{display:flex;}}
.site-nav a{color:var(--ink-dark-muted);font-size:0.92rem;font-weight:500;transition:color var(--dur-1) ease;}
.site-nav a:hover, .site-nav a[aria-current="page"]{color:var(--ink-dark);}
.nav-cta{display:none;}
@media (min-width:960px){.nav-cta{display:inline-flex;padding:10px 20px;min-height:auto;}}
.nav-toggle{display:inline-flex;background:none;color:var(--ink-dark);}
@media (min-width:960px){.nav-toggle{display:none;}}

.mobile-nav{position:fixed;inset:0;z-index:60;background:var(--bg-dark);display:flex;flex-direction:column;justify-content:center;padding:var(--space-8);gap:var(--space-6);transform:translateY(-100%);transition:transform var(--dur-3) var(--ease-out-expo);}
.mobile-nav.is-open{transform:translateY(0);}
.mobile-nav a{color:var(--ink-dark);font-family:var(--font-display);font-size:2rem;font-weight:600;}
.mobile-nav-close{position:absolute;top:var(--space-6);right:var(--space-6);color:var(--ink-dark);}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{background:var(--bg-dark);color:var(--ink-dark);padding-block:var(--space-24) var(--space-8);}
.footer-top{display:grid;gap:var(--space-16);padding-bottom:var(--space-16);border-bottom:1px solid rgba(245,239,230,0.1);}
@media (min-width:900px){.footer-top{grid-template-columns:1.3fr 1fr 1fr 1fr;}}
.footer-nav h4{font-size:0.85rem;color:var(--ink-dark-muted);margin-bottom:var(--space-4);font-weight:500;}
.footer-nav ul{display:flex;flex-direction:column;gap:var(--space-2);}
.footer-nav a{color:var(--ink-dark);font-size:0.95rem;}
.footer-nav a:hover{color:var(--accent-dark);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-8);color:var(--ink-dark-muted);font-size:0.85rem;}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-top:120px;}
.hero-stage{position:absolute;inset:0;z-index:0;}
#hero-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;}
@media (max-width:640px){#hero-video{display:none;}}
.hero-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.hero-content{position:relative;z-index:2;padding:var(--space-8) var(--space-6) var(--space-16);}
@media (min-width:900px){.hero-content{padding:var(--space-8) var(--space-12) var(--space-24);}}
.hero-kicker{display:none;}
.hero h1{max-width:14ch;}
.hero .lede{color:var(--ink-dark-muted);margin-top:var(--space-4);}
.hero .btn-row{margin-top:var(--space-8);}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,16,13,0) 0%, rgba(20,16,13,0.55) 55%, rgba(20,16,13,0.95) 100%);z-index:1;pointer-events:none;}

.tap-pour-go{display:flex;gap:var(--space-8);margin-top:var(--space-12);flex-wrap:wrap;}
.tap-pour-go span{font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:0.04em;color:var(--ink-dark-muted);opacity:0.4;transition:opacity var(--dur-3) ease;}
.tap-pour-go span.is-active{opacity:1;color:var(--accent-dark-bright);}

/* ==========================================================================
   Reveal / motion
   ========================================================================== */

.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-3) var(--ease-out-expo), transform var(--dur-3) var(--ease-out-expo);}
.js .reveal{opacity:0;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .tap-pour-go span{opacity:1;color:var(--accent-dark-bright);}
}

/* ==========================================================================
   Components
   ========================================================================== */

.stat-line{display:flex;align-items:baseline;gap:var(--space-3);}
.stat-line .num{font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,8vw,7rem);letter-spacing:-0.03em;line-height:1;color:var(--accent-dark-bright);}

.step-panel{border-top:var(--hairline);padding-top:var(--space-6);}
.on-dark .step-panel{border-top:1px solid rgba(245,239,230,0.15);}

.image-frame{position:relative;overflow:hidden;background:var(--surface-light);}
.on-dark .image-frame{background:var(--surface-dark);}
.image-frame img{width:100%;height:100%;object-fit:cover;}
.image-frame--bleed{margin-inline:calc(var(--space-6) * -1);}
@media (min-width:900px){.image-frame--bleed{margin-inline:0;}}

.card-row{display:grid;gap:var(--space-6);}
@media (min-width:900px){.card-row--3{grid-template-columns:repeat(3,1fr);}}
.card{padding:var(--space-8);background:var(--surface-light);border-top:2px solid var(--accent-light);}
.on-dark .card{background:var(--surface-dark);border-top:2px solid var(--accent-dark);}

.link-arrow{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:600;border-bottom:1px solid currentColor;padding-bottom:2px;}
.link-arrow:hover{color:var(--accent-light);border-color:var(--accent-light);}
.on-dark .link-arrow:hover{color:var(--accent-dark);border-color:var(--accent-dark);}

.tap-diagram{display:flex;flex-direction:column;gap:0;}
.tap-diagram .row{display:flex;align-items:center;gap:var(--space-6);padding-block:var(--space-6);border-top:var(--hairline);}
.tap-diagram .row:first-child{border-top:none;}
.on-dark .tap-diagram .row{border-top:1px solid rgba(245,239,230,0.15);}
.tap-diagram .row .n{font-family:var(--font-display);font-weight:700;font-size:2rem;color:var(--accent-light);min-width:2.5ch;}
.on-dark .tap-diagram .row .n{color:var(--accent-dark);}

.compare-list{display:flex;flex-direction:column;gap:0;list-style:none;padding:0;margin:0;}
.compare-list li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6);padding-block:var(--space-4);border-top:1px solid rgba(245,239,230,0.15);}
.compare-list li:first-child{border-top:none;}
.compare-list li strong{font-family:var(--font-display);font-weight:600;}
.compare-list__win{color:var(--accent-dark-bright);}
.compare-list__win strong{font-size:1.5rem;}

.locations-list{display:flex;flex-direction:column;}
.locations-list .row{display:flex;justify-content:space-between;align-items:baseline;padding-block:var(--space-6);border-top:var(--hairline);gap:var(--space-4);flex-wrap:wrap;}
.locations-list .row:first-child{border-top:none;}

.form-field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-6);}
.form-field label{font-size:0.85rem;font-weight:500;color:var(--ink-light-muted);}
.form-field input,.form-field select,.form-field textarea{
  border:1px solid rgba(26,21,18,0.2);background:var(--surface-light);padding:12px 14px;border-radius:var(--radius);font-family:var(--font-body);font-size:1rem;color:var(--ink-light);
}
.form-field textarea{min-height:120px;resize:vertical;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--accent-light);}

.final-cta{text-align:left;}
.final-cta .display-1{margin-bottom:var(--space-8);}

@media (max-width:599px){
  .hero-content{padding-bottom:var(--space-12);}
}