/* ============================================================
   KAVA & COMPANY — Brand Guide 2026 override layer
   (additive; loaded after styles.css on pages being rebranded)
   Source: Kava-and-Company-Brand-Guide.pdf
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

:root{
  /* Neutrals & ground (guide p.06) */
  --ink:#071417;
  --ink-2:#0C2A30;      /* Navy */
  --panel:#123035;      /* Panel */
  --panel-2:#0C2A30;
  --cream:#FFF3E0;
  --cream-dim:#DFE9DC;

  /* Brand brights (guide p.06) */
  --pink:#FB1EC2;       /* Hot Magenta */
  --teal:#45DBE0;       /* Aqua Chrome */
  --coral:#FF7A45;      /* Coral */
  --orange:#FF7A45;
  --yellow:#FFCF3A;     /* Sun Gold */
  --purple:#9A5CFF;     /* Cosmic Purple */
  --green:#34E209;      /* Neon Green (Mandarin accent) */
  --green-lt:#B6F24A;   /* Jungle Lime */

  --navy:#071417;       /* bubble-letter outline = Ink, per logo art */

  /* Type system (guide p.07): Bungee display */
  --f-display:'Bungee',system-ui,sans-serif;
}

/* ---- ground: deep jungle-teal, neon glows breathe on it ---- */
body::before{
  background:
    radial-gradient(60% 45% at 12% 8%, rgba(69,219,224,.13), transparent 60%),
    radial-gradient(55% 50% at 88% 12%, rgba(182,242,74,.09), transparent 60%),
    radial-gradient(70% 55% at 50% 108%, rgba(251,30,194,.15), transparent 60%),
    var(--ink);
}

/* ---- Bungee is wide & caps-only: retune display scale ---- */
h1,h2,h3{line-height:1.08;letter-spacing:0}
h1{font-size:clamp(2.3rem,5.6vw,4.3rem)}
h2{font-size:clamp(1.65rem,3.8vw,2.7rem)}
h3{font-size:clamp(1.05rem,2vw,1.35rem)}
.bubble{
  letter-spacing:0;
  -webkit-text-stroke:.07em var(--navy);
  text-shadow:.055em .07em 0 var(--navy), .1em .12em 0 rgba(0,0,0,.4);
}
h1.bubble{font-size:clamp(2.4rem,6vw,4.6rem)}
h2.bubble{font-size:clamp(1.85rem,4.3vw,3.15rem)}

/* neon-tube glow on script accents (Pacifico = taglines, guide p.07) */
.script{text-shadow:0 0 16px currentColor}

/* ---- ink labels on bright fills — never white on pink (guide p.08) ---- */
.btn{
  color:#071417;
  box-shadow:0 8px 0 #a30d7e, 0 18px 30px rgba(251,30,194,.35);
}
.btn:active{box-shadow:0 2px 0 #a30d7e,0 6px 14px rgba(251,30,194,.3)}
.btn-teal{color:#071417;box-shadow:0 8px 0 #2b9ba0,0 18px 30px rgba(69,219,224,.3)}
.btn-teal:active{box-shadow:0 2px 0 #2b9ba0,0 6px 14px rgba(69,219,224,.3)}
.btn-coral{color:#071417;box-shadow:0 8px 0 #c4502a,0 18px 30px rgba(255,122,69,.3)}
/* ghost button: always visible, teal (was inheriting ink text = invisible on dark) */
.btn-ghost{background:transparent;color:var(--teal);border:2px solid rgba(69,219,224,.55);box-shadow:none}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.event-day{color:#071417}

/* ---- homepage intro strip: photo-backed cards ---- */
.photo-card{position:relative;overflow:hidden;padding:0;min-height:300px;display:flex;align-items:flex-end}
.photo-card img.pc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-card .pc-body{position:relative;z-index:2;padding:26px 24px 24px;width:100%;background:linear-gradient(180deg,rgba(7,20,23,0) 0%,rgba(7,20,23,.55) 30%,rgba(7,20,23,.93) 75%)}

/* three-spots banner (locations page): centered, mid size */
.hero-vibe-banner{width:min(520px,84vw);left:0;transform:none}

/* ---- menu page hero: neon jungle with hidden mocktails ---- */
.bg-menu-jungle{
  background:
    linear-gradient(180deg, rgba(7,20,23,.93), rgba(7,20,23,.8) 45%, rgba(7,20,23,.97)),
    url('assets/photos/menu-hero-jungle.jpg') center/cover no-repeat;
}

/* ---- neon-jungle section background (brand-kit leaves) ---- */
.bg-jungle{
  background:
    linear-gradient(180deg, rgba(7,20,23,.94), rgba(7,20,23,.72) 50%, rgba(7,20,23,.94)),
    url('assets/photos/bg-neon-leaves.jpg') center/cover no-repeat;
}

/* ---- footer: leaf image fills the wavy top edge ---- */
.site-footer::before{display:none}
.site-footer{
  border-top:none;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0 16 Q15 32 30 16 T60 16 T90 16 T120 16 V32 H0 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top/120px 32px,
    linear-gradient(#000,#000) 0 31px/100% calc(100% - 31px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0 16 Q15 32 30 16 T60 16 T90 16 T120 16 V32 H0 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top/120px 32px,
    linear-gradient(#000,#000) 0 31px/100% calc(100% - 31px) no-repeat;
}

/* ---- header / nav on ink ---- */
.site-header{background:rgba(7,20,23,.8)}
.drop-menu a:hover{background:rgba(251,30,194,.16)}
@media(max-width:900px){
  .nav-links{background:rgba(7,20,23,.98)}
}

/* ---- products page: e-commerce (front-end cart) ---- */
.shop-buy{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.strain-sel{font-family:inherit;font-size:.85rem;color:var(--cream);background:var(--panel);border:1px solid rgba(69,219,224,.35);border-radius:100px;padding:6px 10px;cursor:pointer}
.add-cart{font-family:var(--f-display);font-size:.7rem;color:#071417;background:var(--yellow);border:none;border-radius:100px;padding:9px 14px;cursor:pointer;box-shadow:0 4px 0 #b8912a;transition:transform .15s ease}
.add-cart:hover{transform:translateY(-1px)}
.add-cart:active{transform:translateY(2px);box-shadow:0 1px 0 #b8912a}
.add-cart.added{background:var(--green-lt);box-shadow:0 4px 0 #7ba32e}
.nav-cart{position:relative;display:inline-flex;align-items:center}
.nav-cart svg{width:25px;height:25px;stroke:var(--teal);filter:drop-shadow(0 0 5px rgba(69,219,224,.95)) drop-shadow(0 0 14px rgba(69,219,224,.55))}
.nav-cart:hover svg{stroke:var(--pink);filter:drop-shadow(0 0 5px rgba(251,30,194,.95)) drop-shadow(0 0 14px rgba(251,30,194,.55))}
.cart-badge{position:absolute;top:-7px;right:-10px;min-width:18px;height:18px;border-radius:9px;background:var(--pink);color:#071417;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.cart-overlay{position:fixed;inset:0;background:rgba(7,20,23,.65);opacity:0;pointer-events:none;transition:opacity .25s;z-index:120}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:-420px;width:min(380px,92vw);height:100%;background:var(--ink-2);border-left:2px solid rgba(69,219,224,.4);z-index:121;display:flex;flex-direction:column;transition:right .3s ease}
.cart-drawer.open{right:0}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(255,243,224,.1)}
.cart-head h3{color:var(--teal)}
.cart-close{background:none;border:none;color:var(--cream);font-size:1.7rem;cursor:pointer;line-height:1}
.cart-items{flex:1;overflow-y:auto;padding:6px 20px}
.cart-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px dashed rgba(255,243,224,.14)}
.cart-row-name{font-size:.92rem;color:var(--cream);display:block}
.cart-row-strain{font-size:.78rem;color:var(--cream-dim);display:block}
.cart-qty{display:flex;align-items:center;gap:8px}
.cart-qty button{width:24px;height:24px;border-radius:50%;border:1px solid rgba(69,219,224,.5);background:none;color:var(--teal);cursor:pointer;line-height:1;font-size:.95rem}
.cart-row-price{color:var(--yellow);font-size:.92rem;min-width:64px;text-align:right}
.cart-remove{background:none;border:none;color:var(--pink);cursor:pointer;font-size:1.05rem}
.cart-foot{padding:16px 20px;border-top:1px solid rgba(255,243,224,.1)}
.cart-total{display:flex;justify-content:space-between;font-family:var(--f-display);color:var(--cream);margin-bottom:12px}
.cart-total span{color:var(--yellow)}
.cart-note-sm{font-size:.78rem;color:var(--cream-dim);margin-top:10px;text-align:center}
.cart-empty-msg{color:var(--cream-dim);text-align:center;margin-top:34px}

/* ============================================================
   LOCATION SIGNATURE SYSTEMS (guide p.09–12)
   One hero color per layout; supporting brights stay as accents.
   ============================================================ */

/* ---- SAN MARCO · City Retro (Retro Teal / Neon Pink / Marquee Orange / Ink) ---- */
body.loc-page-sanmarco{
  --teal:#00E8FF; --pink:#FF0086;
  --coral:#FF9C00; --orange:#FF9C00; --yellow:#FF9C00;
  --purple:#00E8FF; --green-lt:#00E8FF;
}
body.loc-page-sanmarco::before{
  background:
    radial-gradient(60% 45% at 12% 8%, rgba(0,232,255,.16), transparent 60%),
    radial-gradient(55% 50% at 88% 12%, rgba(255,156,0,.10), transparent 60%),
    radial-gradient(70% 55% at 50% 108%, rgba(255,0,134,.13), transparent 60%),
    var(--ink);
}
body.loc-page-sanmarco .btn{background:#FF0086;box-shadow:0 8px 0 #ad0059,0 18px 30px rgba(255,0,134,.35)}
body.loc-page-sanmarco .btn:active{box-shadow:0 2px 0 #ad0059,0 6px 14px rgba(255,0,134,.3)}
body.loc-page-sanmarco .btn-teal{background:#00E8FF;box-shadow:0 8px 0 #0099ad,0 18px 30px rgba(0,232,255,.3)}
body.loc-page-sanmarco .btn-teal:active{box-shadow:0 2px 0 #0099ad,0 6px 14px rgba(0,232,255,.3)}
body.loc-page-sanmarco .card:hover,
body.loc-page-sanmarco .event-row:hover{border-color:rgba(0,232,255,.6)}
body.loc-page-sanmarco .tender h3{color:#00E8FF;text-shadow:0 0 4px rgba(0,232,255,.85),0 0 12px rgba(0,232,255,.65),0 0 26px rgba(0,232,255,.4)}
body.loc-page-sanmarco .ig-feed-wrap,
body.loc-page-sanmarco .ig-track img{border-color:rgba(0,232,255,.45)}

/* ---- MANDARIN · Tropical Escape (Neon Green / Bright Lime / Lagoon Teal / Cream) ---- */
body.loc-page-mandarin{
  --pink:#34E209; --teal:#45DBE0;
  --coral:#C0FF5B; --orange:#C0FF5B; --yellow:#C0FF5B;
  --purple:#34E209; --green:#34E209; --green-lt:#C0FF5B;
}
body.loc-page-mandarin::before{
  background:
    radial-gradient(60% 45% at 12% 8%, rgba(52,226,9,.13), transparent 60%),
    radial-gradient(55% 50% at 88% 12%, rgba(69,219,224,.11), transparent 60%),
    radial-gradient(70% 55% at 50% 108%, rgba(192,255,91,.12), transparent 60%),
    var(--ink);
}
body.loc-page-mandarin .btn{background:#34E209;box-shadow:0 8px 0 #1d8f04,0 18px 30px rgba(52,226,9,.35)}
body.loc-page-mandarin .btn:active{box-shadow:0 2px 0 #1d8f04,0 6px 14px rgba(52,226,9,.3)}
body.loc-page-mandarin .card:hover,
body.loc-page-mandarin .event-row:hover{border-color:rgba(52,226,9,.55)}
body.loc-page-mandarin .tender h3{color:#34E209;text-shadow:0 0 4px rgba(52,226,9,.85),0 0 12px rgba(52,226,9,.65),0 0 26px rgba(52,226,9,.4)}
body.loc-page-mandarin .ig-feed-wrap,
body.loc-page-mandarin .ig-track img{border-color:rgba(52,226,9,.45)}

/* ---- JAX BEACH · Miami Vice Diner (Neon Pink / Ocean Cyan / Cosmic Purple / Ink) ---- */
body.loc-page-beaches{
  --pink:#FF0490; --teal:#07FFFF;
  --coral:#FF0490; --orange:#FF0490; --yellow:#9A5CFF;
  --purple:#9A5CFF; --green-lt:#07FFFF;
}
body.loc-page-beaches::before{
  background:
    radial-gradient(60% 45% at 12% 8%, rgba(154,92,255,.18), transparent 60%),
    radial-gradient(55% 50% at 88% 12%, rgba(7,255,255,.12), transparent 60%),
    radial-gradient(70% 55% at 50% 108%, rgba(255,4,144,.16), transparent 60%),
    var(--ink);
}
body.loc-page-beaches .btn{background:#FF0490;box-shadow:0 8px 0 #b00062,0 18px 30px rgba(255,4,144,.35)}
body.loc-page-beaches .btn:active{box-shadow:0 2px 0 #b00062,0 6px 14px rgba(255,4,144,.3)}
body.loc-page-beaches .btn-teal{background:#07FFFF;box-shadow:0 8px 0 #00abab,0 18px 30px rgba(7,255,255,.3)}
body.loc-page-beaches .btn-teal:active{box-shadow:0 2px 0 #00abab,0 6px 14px rgba(7,255,255,.3)}
body.loc-page-beaches .card:hover,
body.loc-page-beaches .event-row:hover{border-color:rgba(255,4,144,.6)}
body.loc-page-beaches .tender h3{color:#FF0490;text-shadow:0 0 4px rgba(255,4,144,.85),0 0 12px rgba(255,4,144,.65),0 0 26px rgba(255,4,144,.4)}
body.loc-page-beaches .ig-feed-wrap,
body.loc-page-beaches .ig-track img{border-color:rgba(255,4,144,.45)}

/* ============================================================
   STAFF CARD FLIP (test: Wheatyn) — hover/tap flips the card
   to reveal a bio + fun facts. Appended; nothing above modified.
   ============================================================ */
.t-flip{background:none;border:none;padding:0;perspective:1100px;box-shadow:none}
.t-flip:hover{box-shadow:none;transform:none}
.t-flip::after{display:none}
.t-flip .t-flip-inner{position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.35,.1,.2,1)}
.t-flip:hover .t-flip-inner,
.t-flip:focus-within .t-flip-inner{transform:rotateY(180deg)}
.t-flip .t-flip-front,
.t-flip .t-flip-back{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);border:1px solid rgba(255,243,224,.08);padding:14px 14px 20px;text-align:center}
.t-flip .t-flip-front{position:relative;background:linear-gradient(180deg,var(--panel),var(--panel-2))}
.crew-mandarin .t-flip .t-flip-front,
body.loc-page-mandarin .t-flip .t-flip-front{background:linear-gradient(rgba(23,18,38,.8),rgba(23,18,38,.86)),url("assets/photos/tender-bg-mandarin.jpg") center/cover no-repeat}
.t-flip .t-flip-back{position:absolute;inset:0;transform:rotateY(180deg);overflow:auto;display:flex;flex-direction:column;justify-content:center;gap:11px;padding:24px 18px;background:linear-gradient(rgba(7,20,23,.82),rgba(7,20,23,.9)),url('assets/photos/tender-bg-mandarin.jpg') center/cover no-repeat;border-color:rgba(52,226,9,.55);box-shadow:0 0 26px rgba(52,226,9,.28),0 0 60px rgba(52,226,9,.12) inset}
.t-flip .t-back-title{font-family:var(--f-display);font-size:1.35rem;text-transform:uppercase;line-height:1.1;margin:0 0 2px;color:#B6F24A!important;text-shadow:0 0 6px rgba(182,242,74,.9),0 0 18px rgba(182,242,74,.65),0 0 42px rgba(182,242,74,.4)!important}
.t-flip .t-back-zig{height:8px;background:linear-gradient(135deg,#FB1EC2 25%,transparent 25%) 0 0/14px 8px,linear-gradient(225deg,#FB1EC2 25%,transparent 25%) 0 0/14px 8px;opacity:.9;margin:0 22px 2px}
.t-flip .t-back-bio{font-style:italic;color:var(--cream);font-size:.86rem;line-height:1.45;margin:0 0 4px}
.t-flip .t-back-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;text-align:left}
.t-flip .t-back-facts li{display:flex;gap:11px;align-items:center;background:rgba(18,48,53,.82);border:1px solid rgba(69,219,224,.35);border-left:4px solid #B6F24A;border-radius:12px;padding:9px 12px;color:var(--cream);font-size:.8rem;line-height:1.3;font-weight:500;box-shadow:0 0 12px rgba(69,219,224,.12)}
.t-flip .t-back-facts li .fi{font-size:1.1rem;filter:drop-shadow(0 0 6px rgba(182,242,74,.8))}
.t-flip .pop-sticker{transition:opacity .35s ease}
.t-flip:hover .pop-sticker,
.t-flip:focus-within .pop-sticker{opacity:0}
@media (prefers-reduced-motion: reduce){
  .t-flip .t-flip-inner{transition:none}
}

/* flip fix — kill the leafy card background painting on the outer
   shell so nothing shows behind the card while it rotates */
.tender.t-flip,
.crew-mandarin .tender.t-flip,
body.loc-page-mandarin .tender.t-flip{background:none!important;border:none!important;box-shadow:none!important}

/* ============================================
   FLIP TEMPORARILY DISABLED (July 2026) —
   delete this block to bring the card flip back.
   Back-of-card markup is still in the HTML.
   ============================================ */
.t-flip:hover .t-flip-inner,
.t-flip:focus-within .t-flip-inner{transform:none}
.t-flip .t-flip-back{display:none}
.t-flip:hover .pop-sticker,
.t-flip:focus-within .pop-sticker{opacity:1}