/*
Theme Name: Soda Splash
Author: Northpoint Web Solutions
Author URI: https://northpointweb.com/
Description: A bright, modern block theme for soda shops, specialty drink bars, lemonade stands, refreshers, and drive-through beverage businesses.
Version: 0.5.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soda-splash
Tags: full-site-editing, food-and-drink, one-column, two-columns, custom-colors, featured-images, wide-blocks, editor-style
*/

:root {
  --soda-shadow: 0 18px 45px rgba(15, 63, 68, .12);
  --soda-shadow-lg: 0 28px 70px rgba(15, 63, 68, .18);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.wp-site-blocks { overflow: hidden; }

.soda-header {
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 8px 28px rgba(13,85,97,.08);
  backdrop-filter: blur(14px);
}
.soda-brand-wrap { min-width: 190px; }
.soda-brand-image {
  width: 190px;
  aspect-ratio: 3/2;
  max-height: 72px;
  background: url('assets/images/soda-splash-logo.webp') center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgba(13,85,97,.10));
}
.soda-brand-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.soda-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.soda-hero:before,
.soda-hero:after,
.soda-bubble-field:before,
.soda-bubble-field:after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
}
.soda-hero:before {
  width: 460px; height: 460px;
  right: -120px; top: -165px;
  background: rgba(255,255,255,.32);
  border: 2px solid rgba(255,255,255,.55);
}
.soda-hero:after {
  width: 180px; height: 180px;
  left: 42%; bottom: -90px;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.55);
}
.soda-bubble-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.soda-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 0 16px rgba(255,255,255,.35);
  animation: soda-float 9s ease-in-out infinite;
}
.soda-bubble:nth-child(1){width:28px;height:28px;left:8%;top:18%;animation-delay:-1s}
.soda-bubble:nth-child(2){width:64px;height:64px;left:45%;top:7%;animation-delay:-4s}
.soda-bubble:nth-child(3){width:38px;height:38px;left:36%;bottom:15%;animation-delay:-7s}
.soda-bubble:nth-child(4){width:82px;height:82px;right:5%;bottom:8%;animation-delay:-2s}
.soda-bubble:nth-child(5){width:22px;height:22px;right:31%;top:21%;animation-delay:-6s}
@keyframes soda-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
@media (prefers-reduced-motion: reduce){.soda-bubble,.soda-spigot__stream,.soda-spigot__bubble{animation:none!important}}

.soda-pill {
  display: inline-block;
  border-radius: 999px;
  padding: .45rem .85rem;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
}

.soda-hero-visual {
  min-height: 480px;
  border-radius: 38px;
  background: url('assets/images/soda-splash-hero.webp') center / cover no-repeat;
  box-shadow: var(--soda-shadow-lg);
  border: 8px solid rgba(255,255,255,.72);
  position: relative;
  overflow: hidden;
}
.soda-hero-visual:after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:34%;
  background:linear-gradient(180deg,transparent,rgba(13,85,97,.20));
}

.soda-card {
  height:100%;
  border:1px solid rgba(8,84,95,.1);
  box-shadow: var(--soda-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.soda-card:hover { transform: translateY(-5px); box-shadow: 0 24px 52px rgba(15,63,68,.16); }
.soda-icon {
  width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:30px;
  background:linear-gradient(135deg,#dffafd,#fff4c8);
}

.soda-menu-card { position:relative; overflow:hidden; }
.soda-menu-card:after {
  content:""; position:absolute; width:110px; height:110px; border-radius:50%; right:-38px; top:-42px; background:rgba(255,255,255,.42);
}
.soda-menu-art {
  min-height: 150px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 68px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.soda-menu-art:before,
.soda-menu-art:after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.35); }
.soda-menu-art:before { width:90px;height:90px;right:-20px;top:-30px; }
.soda-menu-art:after { width:42px;height:42px;left:20px;bottom:16px; }
.soda-menu-art--pink{background:linear-gradient(135deg,#ffd4df,#fff3c7)}
.soda-menu-art--aqua{background:linear-gradient(135deg,#c9f7f8,#fff7d6)}
.soda-menu-art--sun{background:linear-gradient(135deg,#ffe28b,#ffc6cf)}
.soda-tags { display:flex; flex-wrap:wrap; gap:8px; margin:.7rem 0 1rem; }
.soda-tag { display:inline-block; padding:.24rem .55rem; border-radius:999px; background:#effafa; color:#0d5561; font-size:.78rem; font-weight:700; }

.soda-builder {
  position: relative;
  overflow:hidden;
  border:1px solid rgba(13,85,97,.10);
  box-shadow:var(--soda-shadow);
}
.soda-builder:after {
  content:""; position:absolute; width:260px;height:260px;border-radius:50%;right:-100px;bottom:-120px;background:rgba(85,214,217,.22);
}
.soda-builder-steps { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.soda-builder-step { padding:.55rem .8rem; border-radius:999px; background:#fff; border:1px solid rgba(13,85,97,.12); font-size:.9rem; font-weight:700; }

.soda-review {
  background:#fff;
  border:1px solid rgba(13,85,97,.09);
  border-radius:24px;
  padding:26px;
  box-shadow:0 14px 36px rgba(13,85,97,.08);
}
.soda-stars { letter-spacing:.12em; color:#e7a900; font-size:1.05rem; }

.soda-location-card {
  border-radius:28px;
  border:1px solid rgba(13,85,97,.1);
  box-shadow:var(--soda-shadow);
  overflow:hidden;
  background:#fff;
}
.soda-location-top { min-height:120px; background:linear-gradient(135deg,#55D6D9,#DFFAFD 55%,#FFD75E); position:relative; }
.soda-location-top:after { content:"📍"; position:absolute; font-size:42px; right:24px; bottom:16px; }
.soda-location-body { padding:26px; }

.soda-catering {
  position:relative;
  overflow:hidden;
}
.soda-catering:before,
.soda-catering:after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.12); pointer-events:none; }
.soda-catering:before { width:260px;height:260px;left:-100px;top:-130px; }
.soda-catering:after { width:180px;height:180px;right:5%;bottom:-100px; }

.soda-footer-logo {
  width:190px;
  aspect-ratio:3/2;
  background:url('assets/images/soda-splash-logo.webp') center/contain no-repeat;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.12));
}
.soda-footer-credit a { color:#fff; text-decoration:none; }
.soda-footer-credit a:hover { text-decoration:underline; }



/* Carbonation: drifting bubbles that occasionally pop. */
.soda-bubble.is-popping { animation: soda-pop .48s ease-out forwards !important; }
@keyframes soda-pop {
  0% { transform: scale(1); opacity: 1; }
  55% { transform: scale(1.45); opacity: .72; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Decorative soda-fountain spigot between hero/categories and menu. */
.soda-menu-transition { position: relative; z-index: 3; height: 0; }
.soda-spigot {
  position: absolute;
  right: max(var(--soda-spigot-right, 34px), calc((100vw - 1180px)/2));
  top: var(--soda-spigot-top, -105px);
  width: 150px;
  height: 150px;
  pointer-events: none;
  filter: drop-shadow(0 18px 22px rgba(13,85,97,.16));
  transform: scale(var(--soda-spigot-desktop-scale, 1.3333));
  transform-origin: top right;
}
.soda-spigot__tower {
  position:absolute; right:30px; top:18px; width:58px; height:82px;
  border-radius:18px 18px 12px 12px;
  background:linear-gradient(90deg,#d7e4e6 0%,#fff 42%,#b9c9cc 68%,#eef4f5 100%);
  border:2px solid rgba(13,85,97,.18);
}
.soda-spigot__top {
  position:absolute; right:18px; top:4px; width:82px; height:28px; border-radius:16px;
  background:linear-gradient(180deg,#fff,#cbdadd); border:2px solid rgba(13,85,97,.16);
}
.soda-spigot__handle {
  position:absolute; right:45px; top:-16px; width:28px; height:28px; border-radius:50%;
  background:#ff6f86; border:5px solid #fff; box-shadow:0 4px 10px rgba(13,85,97,.16);
}
.soda-spigot__neck {
  position:absolute; right:71px; top:49px; width:55px; height:24px; border-radius:14px 0 0 14px;
  background:linear-gradient(180deg,#f9ffff,#beced1); border:2px solid rgba(13,85,97,.16); border-right:0;
}
.soda-spigot__nozzle {
  position:absolute; right:112px; top:63px; width:17px; height:34px; border-radius:0 0 9px 9px;
  background:linear-gradient(90deg,#c8d7da,#fff,#b5c6c9); border:2px solid rgba(13,85,97,.16);
}
.soda-spigot__stream {
  position:absolute; right:117px; top:94px; width:7px; height:54px; border-radius:999px;
  background:linear-gradient(180deg,rgba(85,214,217,.95),rgba(85,214,217,.18));
  animation:soda-stream 1.8s ease-in-out infinite;
}
.soda-spigot__bubble { position:absolute; border-radius:50%; border:1px solid rgba(13,85,97,.18); background:rgba(255,255,255,.75); animation:soda-spigot-bubble 2.8s ease-in infinite; }
.soda-spigot__bubble--1{width:12px;height:12px;right:105px;top:112px;animation-delay:-.6s}
.soda-spigot__bubble--2{width:8px;height:8px;right:128px;top:128px;animation-delay:-1.5s}
.soda-spigot__bubble--3{width:15px;height:15px;right:90px;top:132px;animation-delay:-2.2s}
@keyframes soda-stream { 0%,100%{transform:scaleY(.78);opacity:.72}50%{transform:scaleY(1);opacity:1} }
@keyframes soda-spigot-bubble { 0%{transform:translateY(10px) scale(.7);opacity:0}30%{opacity:1}100%{transform:translateY(-28px) scale(1.25);opacity:0} }

@media (max-width: 900px) {
  .soda-hero-visual { min-height: 390px; }
}
@media (max-width: 781px) {
  .soda-spigot { right: 12px; transform: scale(var(--soda-spigot-mobile-scale, .8)); transform-origin: top right; }
  .soda-brand-image { width:150px; max-height:58px; }
  .soda-header { position: relative; }
  .soda-hero-visual { min-height: 330px; margin-top: 14px; border-width: 5px; border-radius: 28px; }
  .soda-builder-steps { gap:8px; }
}