/* Hill site styles */
:root{
  --gradient: linear-gradient(135deg, #0ea5e9, #22c55e);
}
body{scroll-behavior:smooth}
.navbar .text-gradient{background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;}
.btn-gradient{background:var(--gradient); border:none; color:#fff;}
.btn-gradient:hover{opacity:.9; color:#fff;}
.hero{
  position:relative; height: 88vh; min-height: 520px; color:#fff;
  background: radial-gradient(75% 75% at 50% 50%, #0b1220 0%, #000 100%);
  overflow: hidden;
  margin-top:56px;
}
.hero-bg{
  position:absolute; inset:0;
  background-image: radial-gradient(600px 200px at 20% 30%, rgba(14,165,233,.3), transparent),
                    radial-gradient(600px 200px at 80% 70%, rgba(34,197,94,.3), transparent);
  filter: blur(40px);
}
.hero .fade-up{opacity:0; transform:translateY(16px);}
.hero .fade-up.show{opacity:1; transform:none; transition: all .8s ease;}
.delay-1{transition-delay:.15s}
.delay-2{transition-delay:.3s}

.pt-6{padding-top:6rem}
.bottle-stage{transition: transform .6s ease;}
.bottle-stage:hover{transform: translateY(-4px)}
.parallax{will-change: transform}

.card, .bottle-stage{border:0}
#flavourGrid .card{cursor:pointer; transition: transform .3s ease, box-shadow .3s ease;}
#flavourGrid .card:hover{transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0,0,0,.12)}

footer{backdrop-filter: blur(6px)}

/* =========================
   Hero Carousel — appended
   ========================= */

/* Keep all hero slides equal height and centered */
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item{
  min-height: calc(88vh - 0px); /* matches .hero height */
}

/* Prevent overlap/peeking and center content vertically */
.hero .carousel-item{
  display:flex; align-items:center;
  overflow:hidden;
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(255,255,255,.06), transparent);
}

/* Inner grid width & padding */
.hero .slide-inner{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:2rem 1rem;
}
@media (min-width: 992px){
  .hero .slide-inner{ padding:3rem 1rem; }
}

/* Headings/body in hero stay readable on dark bg */
.hero h1, .hero p{ color:#fff; }

/* Bottle images: never overflow the hero */
.bottle-img{
  width:auto;
  max-width:100%;
  max-height:60vh;   /* key line to stop spillover */
  height:auto;
  display:inline-block;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
@media (max-width: 575.98px){
  .bottle-img{ max-height:48vh; }
}

/* Make indicators/buttons a touch friendlier on dark */
.hero .carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%;
}
.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
/* === Tabbed Hero === */
.hero-tabs{ margin-top:72px; overflow:hidden; }

/* renamed background div */
.hero-tabs .hero-bg-img{
  position:absolute; inset:0;
  background:#000 center/cover no-repeat;
  filter:none; transform:scale(1.02);
}

/* dark overlay for text readability */
.hero-tabs .hero-bg-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.55) 40%, rgba(0,0,0,.45));
  pointer-events:none;
}

/* headings readable */
.hero-tabs h1, .hero-tabs p{
  color:#fff; text-shadow:0 6px 24px rgba(0,0,0,.55);
}

.hero-tabs .hero-pillbar .nav-link{ border-radius:0.9rem; font-weight:600; }
.hero-tabs .nav-link{ color:#1f2937; }
.hero-tabs .nav-link.active{
  color:#fff; background:linear-gradient(135deg,#0ea5e9,#22c55e); border:0;
}

.fade-swap{ animation:fadeSwap .6s ease both; }
@keyframes fadeSwap{
  from{opacity:0; transform:scale(1.01)}
  to{opacity:1; transform:none}
}

/* ensure full viewport height */
.hero-tabs .container .row{ min-height:calc(100vh - 72px); }
/* ===== Hero transition pack ===== */

/* Background image fade (you already add/remove .fade-swap in JS) */
.fade-swap { animation: heroFade .7s ease both; }
@keyframes heroFade {
  from { opacity:.15; }
  to   { opacity:1; }
}

/* Text/CTA slide-in (left/right variants) */
.hero-swap { will-change: transform, opacity; }

.slide-left-1 { animation: slideInLeft .55s ease both; }
.slide-left-2 { animation: slideInLeft .65s ease both; }
.slide-left-3 { animation: slideInLeft .75s ease both; }

.slide-right-1 { animation: slideInRight .55s ease both; }
.slide-right-2 { animation: slideInRight .65s ease both; }
.slide-right-3 { animation: slideInRight .75s ease both; }

@keyframes slideInLeft {
  from { opacity:0; transform: translateX(-18px); }
  to   { opacity:1; transform: none; }
}
@keyframes slideInRight {
  from { opacity:0; transform: translateX(18px); }
  to   { opacity:1; transform: none; }
}

/* === Clean stacking: navbar (fixed) → announcement (normal) → hero === */

/* 1) Only offset the page by the navbar height */
:root { --nav-h: 64px; }           /* 56px on small screens if yours is shorter */
@media (max-width: 991.98px){ :root { --nav-h: 56px; } }

body{ padding-top: var(--nav-h) !important; }

/* 2) Announcement bar sits directly under the navbar with NO extra gap */
.announcement-bar{
  position: relative;              /* not fixed, not sticky */
  margin: 0 !important;            /* kill any previous margin-top */
  top: auto !important;            /* kill any previous top: 56px */
  padding-left: 0; padding-right: 0;
}
.announcement-bar .container,
.announcement-bar .container-fluid{ padding-left: 1rem; padding-right: 1rem; }

/* 3) Hero should not add its own top margin anymore */
.hero-tabs{ margin-top: 0 !important; }

/* --- Consistent fixed navbar height vars --- */
:root { --nav-h: 64px; }                 /* desktop */
@media (max-width: 991.98px){
  :root { --nav-h: 56px; }               /* mobile navbar */
}

/* Only offset the page by the navbar (announcement sits below it) */
body { padding-top: var(--nav-h) !important; }

/* Announcement directly below navbar, no extra gaps */
.announcement-bar{
  position: sticky;                      /* stays under navbar on scroll */
  top: var(--nav-h);
  z-index: 1030;
  margin: 0 !important;
  padding-left: 0; padding-right: 0;
}
.announcement-bar .container-fluid{
  padding-left: 1rem; padding-right: 1rem;
}

/* HERO: make mobile fill the *safe* viewport height (iOS fix) */
.hero-tabs{ position: relative; margin-top: 0 !important; overflow: hidden; }
.hero-tabs .container .row{
  /* Use dynamic viewport units on mobile to avoid the white gap */
  min-height: calc(100svh - var(--nav-h));
}
@supports not (height: 100svh){
  /* fallback for older browsers */
  .hero-tabs .container .row{ min-height: calc(100vh - var(--nav-h)); }
}

/* Background image layer must actually cover & sit behind content */
.hero-tabs .hero-bg-img{
  position: absolute; inset: 0;
  z-index: 0;
  background: #000 center / cover no-repeat;
  filter: none;
  transform: translateZ(0);              /* force paint on iOS */
}

/* Readable overlay – slightly lighter on mobile PNGs */
.hero-tabs .hero-bg-img::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45) 40%, rgba(0,0,0,.35));
}

/* Content on top of background + overlay */
.hero-tabs .row,
.hero-tabs .overlay,
.hero-tabs .hero-pillbar,
#heroTitle, #heroDesc, #heroCta { position: relative; z-index: 2; }

/* If your background PNGs are very light, darken a bit more on small screens */
@media (max-width: 575.98px){
  .hero-tabs .hero-bg-img::after{
    background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.5) 40%, rgba(0,0,0,.4));
  }
}
/* Normalize sparkling bottle images so they don't blow up too large */
#sparkling .bottle-stage img {
  max-height: 420px;   /* matches lineup scale */
  width: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
}