/*
Theme Name: Asian Hotpot & BBQ (Kadence Child)
Theme URI: https://asianhotpotbbq.si
Description: Custom child theme for Kadence, built for Asian Hotpot & BBQ, Ljubljana. Provides the brand's dark/chili/broth visual system plus ready-to-insert block patterns for the homepage.
Author: Your Developer
Template: kadence
Version: 1.0.0
Text Domain: asian-hotpot-child
*/

/* =========================================================
   1. DESIGN TOKENS
   Scoped as custom properties so they never collide with
   Kadence's own --global-palette variables.
   ========================================================= */
:root{
  --ahb-iron:#171310;
  --ahb-char:#0c0a08;
  --ahb-chili:#c9291d;
  --ahb-chili-dim:#8f1d14;
  --ahb-broth:#e2a13a;
  --ahb-scallion:#4c7a5b;
  --ahb-cream:#f4efe4;
  --ahb-cream-dim:#c9c2b3;
  --ahb-line: rgba(244,239,228,0.14);
}

/* =========================================================
   2. TYPE — loaded via functions.php (Google Fonts), classes here
   ========================================================= */
.ahb-section, .ahb-hero, .ahb-ticker, .ahb-seasonal, .ahb-cta, footer.ahb-footer{
  font-family:'Work Sans', sans-serif;
  color: var(--ahb-cream);
}
.ahb-display{
  font-family:'Anton', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.95;
}
.ahb-mono{
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.ahb-wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media(max-width:600px){.ahb-wrap{padding:0 20px;}}

/* =========================================================
   3. BUTTONS
   ========================================================= */
.ahb-btn{
  display:inline-block; padding:11px 22px;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease;
  text-decoration:none;
}
.ahb-btn-fill{background:var(--ahb-chili); color:var(--ahb-cream);}
.ahb-btn-fill:hover{background:#e2352a; transform:translateY(-2px); color:var(--ahb-cream);}
.ahb-btn-line{border-color:var(--ahb-cream-dim); color:var(--ahb-cream);}
.ahb-btn-line:hover{border-color:var(--ahb-broth); color:var(--ahb-broth);}

/* =========================================================
   4. HERO
   ========================================================= */
.ahb-hero{
  position:relative; min-height:90vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:100px 0 60px;
  background:
    radial-gradient(ellipse at 18% 45%, rgba(201,41,29,0.35), transparent 55%),
    radial-gradient(ellipse at 82% 55%, rgba(226,161,58,0.28), transparent 55%),
    linear-gradient(180deg, var(--ahb-char), var(--ahb-iron) 55%, var(--ahb-iron));
}
.ahb-hero-inner{position:relative; z-index:2;}
.ahb-eyebrow{color:var(--ahb-broth); font-size:12px; margin-bottom:22px; display:flex; align-items:center; gap:10px;}
.ahb-eyebrow::before{content:''; width:26px; height:1px; background:var(--ahb-broth);}
.ahb-hero h1{font-size:clamp(40px, 8vw, 100px); color:var(--ahb-cream); margin:0;}
.ahb-hero h1 em{font-style:normal; color:var(--ahb-chili);}
.ahb-hero-sub{max-width:540px; margin-top:22px; font-size:17px; color:var(--ahb-cream-dim); font-weight:300;}
.ahb-hero-actions{display:flex; flex-wrap:wrap; gap:16px; margin-top:32px;}
.ahb-hero-meta{margin-top:48px; display:flex; gap:32px; flex-wrap:wrap;}
.ahb-hero-meta div{font-size:12px; color:var(--ahb-cream-dim);}
.ahb-hero-meta strong{display:block; font-family:'Anton'; font-size:15px; color:var(--ahb-cream); margin-bottom:4px;}

/* animated pot + grill rig, sits behind hero text */
.ahb-rig{position:absolute; right:0; bottom:0; top:0; width:50%; display:flex; align-items:center; justify-content:center; z-index:1; opacity:0.9; pointer-events:none;}
@media(max-width:900px){.ahb-rig{display:none;}}
.ahb-rig svg{width:100%; height:100%; max-height:600px;}
.ahb-bubble{animation:ahbRise 3.2s ease-in infinite;}
.ahb-bubble:nth-child(2){animation-delay:.6s}
.ahb-bubble:nth-child(3){animation-delay:1.3s}
.ahb-bubble:nth-child(4){animation-delay:2s}
@keyframes ahbRise{0%{transform:translateY(0); opacity:0;} 15%{opacity:.9;} 100%{transform:translateY(-90px); opacity:0;}}
.ahb-steam{animation:ahbSway 4.5s ease-in-out infinite;}
.ahb-steam.b{animation-delay:1.1s}
.ahb-steam.c{animation-delay:2.2s}
@keyframes ahbSway{0%,100%{transform:translateX(0) translateY(0); opacity:.55;} 50%{transform:translateX(6px) translateY(-14px); opacity:.9;}}
.ahb-flame{animation:ahbFlick 1.6s ease-in-out infinite;}
.ahb-flame.b{animation-delay:.3s}
.ahb-flame.c{animation-delay:.55s}
@keyframes ahbFlick{0%,100%{transform:scaleY(1) translateY(0);} 50%{transform:scaleY(1.12) translateY(-3px);}}
@media(prefers-reduced-motion:reduce){.ahb-bubble,.ahb-steam,.ahb-flame,.ahb-ticker-track{animation:none;}}

/* =========================================================
   5. TICKER + SEASONAL BANNER
   ========================================================= */
.ahb-ticker{background:var(--ahb-chili); overflow:hidden; white-space:nowrap; padding:14px 0;}
.ahb-ticker-track{display:inline-block; animation:ahbScroll 24s linear infinite;}
.ahb-ticker-track span{font-family:'Anton'; font-size:19px; color:var(--ahb-cream); margin-right:26px; text-transform:uppercase;}
.ahb-ticker-track span.dim{color:rgba(244,239,228,0.55); font-family:'JetBrains Mono'; font-size:14px;}
@keyframes ahbScroll{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}

.ahb-seasonal{background:var(--ahb-char); border-bottom:1px solid var(--ahb-line); padding:14px 0;}
.ahb-seasonal .ahb-wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--ahb-cream-dim);}
.ahb-seasonal strong{color:var(--ahb-broth); font-family:'JetBrains Mono'; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;}

/* =========================================================
   6. GENERIC SECTION / HEAD
   ========================================================= */
.ahb-section{background:var(--ahb-iron); padding:100px 0;}
.ahb-section-head{max-width:640px; margin:0 auto 50px;}
.ahb-section-head .ahb-mono{color:var(--ahb-broth); font-size:12px; margin-bottom:14px; display:block;}
.ahb-section-head h2{font-size:clamp(30px,5vw,46px); color:var(--ahb-cream); margin:0;}
.ahb-section-head p{margin-top:16px; color:var(--ahb-cream-dim); font-size:16px; max-width:520px;}

/* =========================================================
   7. TWO PATHS (Hot Pot / BBQ)
   ========================================================= */
.ahb-paths{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--ahb-line);}
@media(max-width:820px){.ahb-paths{grid-template-columns:1fr;}}
.ahb-path-card{background:var(--ahb-char); padding:48px 40px; position:relative; min-height:420px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;}
.ahb-path-card .ahb-ph{position:absolute; inset:0; opacity:0.55;}
.ahb-path-card .ahb-ph img{width:100%; height:100%; object-fit:cover; display:block;}
.ahb-path-card::after{content:''; position:absolute; inset:0;}
.ahb-path-card.ahb-hot::after{background:linear-gradient(180deg, rgba(12,10,8,0.1), rgba(12,10,8,0.96) 78%), linear-gradient(90deg, rgba(201,41,29,0.22), transparent);}
.ahb-path-card.ahb-bbq::after{background:linear-gradient(180deg, rgba(12,10,8,0.1), rgba(12,10,8,0.96) 78%), linear-gradient(90deg, rgba(226,161,58,0.2), transparent);}
.ahb-path-card .ahb-content{position:relative; z-index:2;}
.ahb-path-tag{font-size:11px; color:var(--ahb-broth); margin-bottom:10px; font-family:'JetBrains Mono'; text-transform:uppercase; letter-spacing:0.1em;}
.ahb-path-card.ahb-bbq .ahb-path-tag{color:var(--ahb-scallion);}
.ahb-path-card h3{font-family:'Anton'; font-size:34px; color:var(--ahb-cream); margin:0 0 12px; text-transform:uppercase;}
.ahb-path-card p{color:var(--ahb-cream-dim); max-width:380px; font-size:15px; margin:0;}

/* =========================================================
   8. HOW IT WORKS + AYCE TIERS
   ========================================================= */
.ahb-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ahb-line); border-top:1px solid var(--ahb-line); border-bottom:1px solid var(--ahb-line);}
@media(max-width:900px){.ahb-steps{grid-template-columns:repeat(2,1fr);}}
.ahb-step{background:var(--ahb-iron); padding:36px 28px;}
.ahb-step .ahb-num{font-family:'Anton'; font-size:40px; color:var(--ahb-chili); margin-bottom:14px;}
.ahb-step h4{font-family:'Anton'; font-size:17px; text-transform:uppercase; color:var(--ahb-cream); margin:0 0 8px;}
.ahb-step p{font-size:14px; color:var(--ahb-cream-dim); margin:0;}

.ahb-aycetiers{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--ahb-line); margin-top:40px;}
@media(max-width:820px){.ahb-aycetiers{grid-template-columns:1fr;}}
.ahb-tier{background:var(--ahb-char); padding:30px 26px;}
.ahb-tier .ahb-mono{color:var(--ahb-broth); font-size:11px;}
.ahb-tier h4{font-family:'Anton'; font-size:20px; margin:10px 0 8px; color:var(--ahb-cream); text-transform:uppercase;}
.ahb-tier p{font-size:13.5px; color:var(--ahb-cream-dim); margin:0;}
.ahb-tier .ahb-price{margin-top:14px; font-family:'JetBrains Mono'; font-size:13px; color:var(--ahb-broth);}
.ahb-tier-note{margin-top:16px; font-size:12px; color:var(--ahb-cream-dim);}

/* =========================================================
   9. MENU GRID
   ========================================================= */
.ahb-menu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--ahb-line);}
@media(max-width:820px){.ahb-menu-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.ahb-menu-grid{grid-template-columns:1fr;}}
.ahb-menu-tile{background:var(--ahb-char); aspect-ratio:1/1; position:relative; overflow:hidden;}
.ahb-menu-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.ahb-menu-tile:hover img{transform:scale(1.06);}
.ahb-menu-tile .ahb-tint{position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,10,8,0.05), rgba(12,10,8,0.92));}
.ahb-menu-tile .ahb-info{position:absolute; left:20px; right:20px; bottom:20px; z-index:2;}
.ahb-menu-tile .ahb-info .ahb-mono{font-size:10px; color:var(--ahb-broth); display:block; margin-bottom:6px;}
.ahb-menu-tile .ahb-info h4{font-family:'Anton'; font-size:20px; color:var(--ahb-cream); text-transform:uppercase; margin:0;}
.ahb-menu-tile.ahb-pattern{background:repeating-linear-gradient(135deg, rgba(226,161,58,0.10) 0 12px, transparent 12px 26px), radial-gradient(circle at 30% 30%, rgba(201,41,29,0.25), transparent 60%), var(--ahb-char);}
.ahb-menu-tile.ahb-pattern2{background:repeating-linear-gradient(45deg, rgba(76,122,91,0.14) 0 10px, transparent 10px 22px), radial-gradient(circle at 70% 70%, rgba(226,161,58,0.2), transparent 60%), var(--ahb-char);}
.ahb-menu-tile.ahb-pattern3{background:repeating-radial-gradient(circle at 50% 50%, rgba(201,41,29,0.14) 0 4px, transparent 4px 22px), var(--ahb-char);}

/* =========================================================
   10. GALLERY
   ========================================================= */
.ahb-gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; gap:6px;}
@media(max-width:820px){.ahb-gallery{grid-template-columns:repeat(2,1fr);}}
.ahb-g-item{position:relative; overflow:hidden; background:var(--ahb-char);}
.ahb-g-item img{width:100%; height:100%; object-fit:cover; display:block;}
.ahb-g-item.ahb-tall{grid-row:span 2;}
.ahb-g-item.ahb-wide{grid-column:span 2;}

/* =========================================================
   11. REVIEWS
   ========================================================= */
.ahb-reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ahb-line);}
@media(max-width:820px){.ahb-reviews{grid-template-columns:1fr;}}
.ahb-review{background:var(--ahb-iron); padding:32px 28px;}
.ahb-stars{color:var(--ahb-broth); font-size:14px; margin-bottom:14px; letter-spacing:2px;}
.ahb-review p{font-size:15px; color:var(--ahb-cream-dim); margin:0 0 16px;}
.ahb-review .ahb-who{font-size:12px; color:var(--ahb-cream); font-family:'JetBrains Mono'; text-transform:uppercase; letter-spacing:0.08em;}

/* =========================================================
   12. LOCATION
   ========================================================= */
.ahb-loc{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--ahb-line); align-items:stretch;}
@media(max-width:900px){.ahb-loc{grid-template-columns:1fr;}}
.ahb-loc-info{background:var(--ahb-char); padding:48px 40px;}
.ahb-loc-info .ahb-row{display:flex; gap:16px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--ahb-line);}
.ahb-loc-info .ahb-row:last-child{border:none; margin-bottom:0; padding-bottom:0;}
.ahb-loc-info .ahb-row .ahb-ic{font-size:20px; color:var(--ahb-chili); width:26px; flex:none;}
.ahb-loc-info .ahb-row h5{font-family:'Anton'; font-size:15px; text-transform:uppercase; margin:0 0 6px; color:var(--ahb-cream);}
.ahb-loc-info .ahb-row p{font-size:14px; color:var(--ahb-cream-dim); margin:0;}
.ahb-loc-info .ahb-row a{color:var(--ahb-broth);}
.ahb-map{min-height:340px; background:var(--ahb-iron);}
.ahb-map iframe{width:100%; height:100%; min-height:340px; border:0; filter:grayscale(40%) contrast(1.1) brightness(0.9);}

/* =========================================================
   13. CTA + FOOTER + WHATSAPP FAB
   ========================================================= */
.ahb-cta{background:linear-gradient(135deg, var(--ahb-chili-dim), var(--ahb-chili)); padding:80px 0; text-align:center;}
.ahb-cta h2{font-size:clamp(30px,6vw,54px); color:var(--ahb-cream); margin:0 0 20px;}
.ahb-cta .ahb-btn-line{border-color:rgba(244,239,228,0.5); color:#fff;}

.ahb-whatsapp-fab{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:var(--ahb-scallion); display:flex; align-items:center; justify-content:center;
  font-size:26px; box-shadow:0 8px 24px rgba(0,0,0,0.4); text-decoration:none;
}