/* ==== Hollybush CSS === */


/* ==== Hollybush CSS Header === */

/* Sticky wrapper so promo + header stay at top */
.hb-header-shell {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* PROMO BAR (layout only; colours via inline style=) */
.hb-promo {
    font-size:.9rem;
}
.hb-promo-inner {
    max-width:1200px;
    margin:0 auto;
    padding:8px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.hb-promo-text { white-space:normal; }
.hb-promo-cta {
    padding:6px 14px;
    border-radius:999px;
    border:1px solid currentColor;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:.75rem;
    background:transparent;
}
.hb-promo-cta:hover {
    background:currentColor;
    color:#111827;
}

/* MAIN HEADER SHELL (GREENE KING FEEL) */
.hb-header {
    background:#003E2F;
    border-bottom:0;
    color:#ffffff;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    position:relative;
}

/* Dark overlay over seasonal image */
.hb-header::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.45)
    );
    pointer-events:none;
}

/* Ensure inner container sits above overlay */
.hb-header-inner {
    position:relative;
    z-index:2;
}

/* Seasonal header images */
.hb-header--season-default {
    background-image:url('/assets/images/header-default.jpg');
}
.hb-header--season-christmas {
    background-image:url('/assets/images/header-christmas.jpg');
}
.hb-header--season-halloween {
    background-image:url('/assets/images/header-halloween.jpg');
}
.hb-header--season-spring {
    background-image:url('/assets/images/header-spring.jpg');
}

.hb-header-inner {
    max-width:1200px;
    margin:0 auto;
    padding:12px 16px 14px;
}

/* LOGO ABOVE NAV, CENTRED */
.hb-header-top {
    display:flex;
    justify-content:center;
    align-items:center;
    padding:4px 0 10px;
}
.hb-logo-link {
    text-decoration:none;
    color:#ffffff;
}
.hb-logo {
    height:72px;
    width:auto;
    display:block;
}
.hb-logo-placeholder {
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:.10em;
}

/* NAV ROW + CTA */
.hb-header-nav-row {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    position:relative;
}

/* NAV BASE */
.hb-main-nav { display:flex; }
.hb-main-nav ul {
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    gap:24px;
    justify-content:center;
}
.hb-main-nav li { position:relative; }

/* TOP LEVEL LINKS */
.hb-nav-link,
.hb-nav-link--parent {
    color:#ffffff;
    text-decoration:none;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    padding:8px 0;
    background:none;
    border:none;
    cursor:pointer;
    position:relative;
    white-space:nowrap;
}

/* Underline animation */
.hb-nav-link::after,
.hb-nav-link--parent::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-4px;
    height:2px;
    background:#f9fafb;
    transform-origin:center;
    transform:scaleX(0);
    opacity:0;
    transition:transform .22s ease-out, opacity .22s ease-out;
}
.hb-nav-link:hover::after,
.hb-nav-link--parent:hover::after {
    transform:scaleX(1);
    opacity:1;
}

/* DROPDOWN (DESKTOP) */
.hb-has-children .hb-submenu {
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    background:#ffffff;
    color:#111827;
    padding:8px 0;
    list-style:none;
    min-width:200px;
    border-radius:6px;
    box-shadow:0 16px 40px rgba(0,0,0,.25);
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease;
}
.hb-has-children:hover .hb-submenu {
    opacity:1;
    visibility:visible;
}
.hb-submenu-link {
    display:block;
    padding:8px 16px;
    font-size:.9rem;
    color:#111827;
    text-decoration:none;
    white-space:nowrap;
}
.hb-submenu-link:hover {
    background:#f3f4f6;
}

/* HEADER CTA BUTTON */
.hb-header-cta {
    padding:9px 18px;
    border-radius:999px;
    background:#f5f3e7;
    color:#002b1a;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    text-decoration:none;
    white-space:nowrap;
}
.hb-header-cta:hover {
    background:#ffffff;
}

/* HAMBURGER (MOBILE) */
.hb-nav-toggle {
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
}
.hb-nav-toggle span {
    display:block;
    width:24px;
    height:3px;
    background:#ffffff;
    margin:4px 0;
}

/* RESPONSIVE */
@media (max-width:880px) {

    .hb-header-inner {
        padding:10px 14px 12px;
    }

    .hb-header-top {
        padding-bottom:6px;
    }

    .hb-nav-toggle {
        display:block;
    }

    .hb-header-nav-row {
        justify-content:flex-end;
        gap:10px;
    }

    .hb-main-nav {
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#003E2F;
        display:none;
        padding:14px 16px 18px;
        box-sizing:border-box;
        box-shadow:0 12px 30px rgba(0,0,0,.35);
    }
    .hb-main-nav.open {
        display:block;
    }

    .hb-main-nav ul {
        flex-direction:column;
        gap:10px;
        align-items:flex-start;
    }

    /* On mobile, dropdowns always open inline */
    .hb-has-children .hb-submenu {
        position:static;
        transform:none;
        box-shadow:none;
        background:#024332;
        opacity:1;
        visibility:visible;
        margin-top:2px;
        border-radius:4px;
    }
    .hb-submenu-link {
        color:#f9fafb;
    }

    .hb-header-cta {
        font-size:.75rem;
        padding:7px 12px;
    }

    .hb-promo-inner {
        flex-direction:column;
        align-items:flex-start;
    }
}


/* ==== Hollybush CSS Footer === */

.hb-footer {
    background:#003E2F;
    color:#ffffff;
    padding:40px 0 0;
    border-top:4px solid #0B5D44;
}
.hb-footer-inner {
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}
.hb-footer-col {}
.hb-footer-heading {
    font-size:1rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:10px;
}
.hb-footer-text {
    font-size:.95rem;
    line-height:1.5;
    color:#D9EDE4;
    margin-bottom:8px;
}
.hb-footer-social {
    display:flex;
    gap:14px;
    margin-top:6px;
}
.hb-social-icon svg {
    width:26px;
    height:26px;
    transition:opacity .2s ease;
}
.hb-social-icon:hover svg { opacity:.6; }

.hb-footer-bottom {
    text-align:center;
    padding:14px 0;
    font-size:.9rem;
    color:#C7DED6;
    margin-top:20px;
    background:#002A20;
}

@media(max-width:880px) {
    .hb-footer-inner {
        grid-template-columns:1fr;
    }
}



/* ==== Hollybush CSS Main Page === */

body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#ffffff;color:#111827}
main{min-height:60vh}

/* HERO SLIDER */
.hb-hero{
    position:relative;
    overflow:hidden;
    color:#ffffff;
    min-height:360px;
    background:#111827;
}
.hb-hero-slider{
    position:absolute;
    inset:0;
    z-index:0;
}
.hb-hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.03);
    transition:opacity .7s ease,transform 5s ease;
}
.hb-hero-slide--active{
    opacity:1;
    transform:scale(1);
}
.hb-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.35),rgba(0,0,0,0.1));
    z-index:1;
}
.hb-hero-inner{
    position:relative;
    z-index:2;
    max-width:1200px;
    margin:0 auto;
    padding:48px 16px 32px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:360px;
}
.hb-hero-title{
    font-size:2.4rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin:0 0 12px;
}
.hb-hero-sub{
    font-size:1.05rem;
    line-height:1.6;
    color:#e5e7eb;
    margin-bottom:18px;
    max-width:640px;
}
.hb-hero-cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:4px;
}
.hb-hero-cta-primary{
    padding:10px 22px;
    border-radius:999px;
    border:none;
    background:#ffffff;
    color:#002b1a;
    font-size:.95rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-decoration:none;
}
.hb-hero-cta-secondary{
    padding:10px 22px;
    border-radius:999px;
    border:1px solid #ffffff;
    color:#ffffff;
    font-size:.95rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-decoration:none;
    background:transparent;
}
.hb-hero-dots{
    position:absolute;
    bottom:14px;
    right:18px;
    z-index:3;
    display:flex;
    gap:6px;
}
.hb-hero-dot{
    width:8px;
    height:8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.9);
    background:transparent;
    cursor:pointer;
}
.hb-hero-dot--active{
    background:#ffffff;
}

@media(max-width:880px){
  .hb-hero-inner{
      padding:32px 16px;
      min-height:300px;
  }
  .hb-hero-title{
      font-size:1.9rem;
  }
}


/* CONTENT SECTIONS */
.hb-section{max-width:1200px;margin:0 auto;padding:32px 16px 12px}
.hb-section-title{text-transform:uppercase;letter-spacing:.16em;font-size:.9rem;margin-bottom:12px;color:#4b5563}
.hb-card-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hb-card{border-radius:16px;border:1px solid #e5e7eb;padding:18px;background:#ffffff;box-shadow:0 6px 20px rgba(0,0,0,.04)}
.hb-card h3{margin:0 0 8px;font-size:1.1rem}
.hb-card p{margin:0;font-size:.9rem;color:#4b5563}

/* TESTIMONIALS */
.hb-quote-card{border-radius:16px;border:1px solid #e5e7eb;padding:18px;background:#ffffff;box-shadow:0 6px 20px rgba(0,0,0,.04);position:relative;overflow:hidden;min-height:90px}
.hb-quote-slide{position:absolute;inset:18px;opacity:0;transition:opacity .4s ease}
.hb-quote-slide--active{opacity:1}
.hb-quote{border-left:3px solid #002b1a;padding-left:16px;font-size:.95rem;color:#374151;margin-top:0}
.hb-quote span{display:block;margin-top:6px;font-size:.85rem;color:#6b7280}
.hb-quote-dots{position:absolute;bottom:12px;right:14px;display:flex;gap:6px}
.hb-quote-dot{width:7px;height:7px;border-radius:999px;border:1px solid #9ca3af;background:transparent;cursor:pointer}
.hb-quote-dot--active{background:#9ca3af}

@media(max-width:880px){
  .hb-hero-inner{padding:32px 16px;min-height:300px}
  .hb-hero-title{font-size:1.9rem}
  .hb-card-row{grid-template-columns:1fr}
}

/* --- CUSTOM HOMEPAGE SECTIONS 2025 --- */
.hb-two-col{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1.5fr);
  gap:32px;
  align-items:start;
}
.hb-two-col-reverse{
  grid-template-columns:minmax(0,1.5fr) minmax(0,2fr);
}
.hb-two-col-media img{
  width:100%;
  height:auto;
  border-radius:18px;
  object-fit:cover;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.hb-photo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.hb-photo-grid figure{
  margin:0;
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.hb-photo-grid img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.hb-photo-grid figcaption{
  padding:10px 14px 14px;
  font-size:.85rem;
  color:#4b5563;
}
.hb-eat-out{
  border-radius:20px;
  background:linear-gradient(135deg, #0F4D2C, #5B726E);
  padding:24px 20px;
  color:#F5F2EA;
  box-shadow:0 16px 40px rgba(0,0,0,.26);
}
.hb-eat-out h2{
  color:#F5F2EA;
}
.hb-eat-out p{
  color:#F5F2EA;
}
.hb-eat-out .hb-eat-out-cta{
  font-weight:600;
  margin-top:10px;
}
.hb-news-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.hb-news-item{
  border-radius:16px;
  border:1px solid #e5e7eb;
  padding:18px;
  background:#ffffff;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
}
.hb-news-item h3{
  margin:0 0 4px;
  font-size:1rem;
}
.hb-news-meta{
  margin:0 0 8px;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#6b7280;
}
.hb-mail-card{
  border-radius:20px;
  padding:24px 20px;
  background:#f9fafb;
  box-shadow:0 14px 36px rgba(0,0,0,.10);
}
.hb-mail-form{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.hb-mail-form label{
  font-size:.85rem;
  color:#4b5563;
  text-align:left;
}
.hb-mail-form input{
  border-radius:999px;
  border:1px solid #d1d5db;
  padding:8px 14px;
  font-size:.9rem;
}
.hb-mail-form button{
  margin-top:4px;
  align-self:flex-start;
}
.hb-mail-message{
  margin-top:6px;
  font-size:.9rem;
  font-weight:600;
  color:#0F4D2C;
}
.hb-mail-small{
  font-size:.8rem;
  color:#6b7280;
}

@media (max-width:900px){
  .hb-two-col,
  .hb-two-col-reverse{
    grid-template-columns:1fr;
  }
  .hb-photo-grid{
    grid-template-columns:1fr 1fr;
  }
  .hb-news-list{
    grid-template-columns:1fr;
  }
}
@media (max-width:640px){
  .hb-photo-grid{
    grid-template-columns:1fr;
  }
}


/* Icons for section titles */
.hb-section-title--news::before,
.hb-section-title--testimonials::before{
  display:inline-block;
  margin-right:.5em;
}
.hb-section-title--news::before{
  content:"📰";
}
.hb-section-title--testimonials::before{
  content:"★";
}

/* Latest news layout with optional thumbnail */
.hb-news-item{
  display:flex;
  gap:14px;
}
.hb-news-thumb{
  flex:0 0 84px;
}
.hb-news-thumb img{
  width:84px;
  height:84px;
  border-radius:14px;
  object-fit:cover;
  display:block;
}
.hb-news-body{
  flex:1 1 auto;
}

/* Image hover animation */
.hb-two-col-media img,
.hb-photo-grid img,
.hb-news-thumb img{
  transition:transform .25s ease, box-shadow .25s ease;
}
.hb-two-col-media img:hover,
.hb-photo-grid img:hover,
.hb-news-thumb img:hover{
  transform:scale(1.03);
  box-shadow:0 16px 40px rgba(0,0,0,.30);
}


/* Section contrast helpers */
.hb-section--panel{
  background:#f9fafb;
  border-radius:24px;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  margin-top:32px;
}
.hb-section--soft{
  background:#f3f4f6;
  border-radius:24px;
  box-shadow:0 12px 28px rgba(15,23,42,.04);
  margin-top:32px;
}
.hb-section--soft .hb-section-title,
.hb-section--panel .hb-section-title{
  color:#111827;
}


/* Simple layout for confirm/unsubscribe pages */
body.hb-plain-page{
  background:#003E2F;
  color:#F9FAFB;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.hb-plain-wrap{
  max-width:640px;
  background:rgba(15,23,42,0.92);
  border-radius:24px;
  padding:28px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55);
}
.hb-plain-wrap h1{
  margin-top:0;
  margin-bottom:12px;
  font-size:1.8rem;
}
.hb-plain-wrap p{
  margin-bottom:10px;
}
.hb-plain-wrap a{
  color:#facc15;
}
.hb-plain-wrap button{
  margin-right:8px;
  margin-top:12px;
}
/* === Mobile-friendly guest comments === */
@media (max-width: 768px) {
  /* Let the card grow with the content */
  .hb-quote-card {
    height: auto;
    overflow: visible;
    padding: 20px 16px;
    border-radius: 18px;
  }

  /* Stop treating slides like overlapping carousel panels */
  .hb-quote-card .hb-quote-slide {
    position: static;
    height: auto;
    min-height: 0;
    opacity: 1;
    transform: none;
    display: none; /* we’ll only show the active one */
  }

  .hb-quote-card .hb-quote-slide--active {
    display: block;
  }

  /* Tweak typography so it’s comfy to read on a phone */
  .hb-quote {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .hb-quote span {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    opacity: 0.85;
  }

  /* Keep the dots close to the quote */
  .hb-quote-dots {
    margin-top: 10px;
    justify-content: flex-end;
  }
}
/* === Guest comments: unified layout (desktop + mobile) === */
.hb-quote-card {
  height: auto;
  overflow: visible;
  padding: 20px 16px;
  border-radius: 18px;
}

/* Treat each slide as a normal block; only the active one is shown */
.hb-quote-card .hb-quote-slide {
  position: static;
  height: auto;
  min-height: 0;
  opacity: 1;
  transform: none;
  display: none; /* hide all by default */
}

.hb-quote-card .hb-quote-slide--active {
  display: block; /* only active slide is visible */
}

/* Comfortable typography on all screen sizes */
.hb-quote {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.hb-quote span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Keep the dots close to the quote */
.hb-quote-dots {
  margin-top: 10px;
  justify-content: flex-end;
}
/* === Latest news + What's on layout === */
.hb-news-and-whats {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.hb-news-column,
.hb-whats-column {
  min-width: 0;
}

.hb-section-title--whats-on::before {
  content: "★";
  font-size: 0.9rem;
  margin-right: 8px;
}

/* Card for the what's on slider */
.hb-whats-on-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #0b3b31;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  min-height: 220px;
}

/* Individual slides */
.hb-whats-on-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.hb-whats-on-slide--active {
  opacity: 1;
  pointer-events: auto;
}

/* Image + overlay */
.hb-whats-on-image {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hb-whats-on-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hb-whats-on-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 18px;
  padding: 20px 22px;
  align-items: flex-end;
  min-height: 220px;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(3, 60, 47, 0.94) 65%,
    rgba(3, 60, 47, 1) 100%
  );
  color: #fff;
}

/* Date block */
.hb-whats-on-date {
  flex: 0 0 auto;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hb-whats-on-date .month {
  display: block;
  font-size: 0.7rem;
}

.hb-whats-on-date .day {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
}

.hb-whats-on-date .year {
  display: block;
  font-size: 0.7rem;
  opacity: 0.85;
}

/* Text block */
.hb-whats-on-text {
  flex: 1 1 auto;
  min-width: 0;
}

.hb-whats-on-title {
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.hb-whats-on-desc {
  margin: 0 0 6px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.hb-whats-on-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.85);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  color: #fefefe;
  background: rgba(15, 118, 110, 0.4);
  backdrop-filter: blur(6px);
}

.hb-whats-on-link:hover {
  background: rgba(15, 118, 110, 0.8);
}

/* Dots */
.hb-whats-on-dots {
  position: absolute;
  right: 16px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.hb-whats-on-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.4);
  padding: 0;
  cursor: pointer;
}

.hb-whats-on-dot--active {
  width: 18px;
  background: #ffffff;
}

.hb-whats-on-empty {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #64748b;
}

/* Responsive stacking */
@media (max-width: 960px) {
  .hb-news-and-whats {
    grid-template-columns: minmax(0, 1fr);
  }

  .hb-whats-on-card {
    min-height: 210px;
  }

  .hb-whats-on-overlay {
    padding: 18px 18px;
  }
}

@media (max-width: 640px) {
  .hb-whats-on-overlay {
    flex-direction: row;
  }

  .hb-whats-on-title {
    font-size: 0.95rem;
  }

  .hb-whats-on-desc {
    font-size: 0.85rem;
  }
}
/* Make the Latest news card use the full width of its column
   when shown alongside the What’s on slider */
.hb-news-and-whats .hb-news-list {
  max-width: none;
}

.hb-news-and-whats .hb-news-item {
  max-width: none;
}
/* --- Latest news + What’s on layout --- */
.hb-news-and-whats {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 40px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .hb-news-and-whats {
    grid-template-columns: 1fr;
  }
}

/* --- What’s on teaser card (homepage) --- */
.hb-whats-card {
  position: relative;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.08);
  padding: 22px 22px 26px;
  overflow: hidden;
  min-height: 260px;
}

.hb-whats-slide {
  display: none;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: stretch;
}

.hb-whats-slide--active {
  display: grid;
}

@media (max-width: 900px) {
  .hb-whats-slide {
    grid-template-columns: 1fr;
  }
}

.hb-whats-media {
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  min-height: 220px;
}

.hb-whats-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hb-whats-date {
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 0;
}

.hb-whats-title {
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.hb-whats-text {
  margin: 2px 0 10px;
  color: #4b5563;
}

.hb-whats-link {
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: #14532d;
  margin-top: auto;
}

.hb-whats-link:hover {
  text-decoration: underline;
}

/* dots under What’s on teaser */
.hb-whats-dots {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 18px;
}

.hb-whats-dot {
  width: 14px;
  height: 6px;
  border-radius: 999px;
  border: none;
  background: #e5e7eb;
  cursor: pointer;
}

.hb-whats-dot--active {
  width: 22px;
  background: #14532d;
}

/* --- YouTube video block --- */
.hb-video-card {
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.08);
  padding: 18px 18px 20px;
}

.hb-video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  margin-bottom: 10px;
}

.hb-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hb-video-caption {
  font-size: 0.9rem;
  color: #4b5563;
}

/* --- Subscribe banner styling (verification bar) --- */
.hb-subscribe-banner-wrap {
  margin: 0 auto;
  max-width: 1120px;
  padding: 18px 16px 0;
}

.hb-subscribe-banner {
  border-radius: 999px;
  padding: 10px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #064e3b;
  color: #f9fafb;
  font-size: 0.9rem;
}

.hb-subscribe-banner--success {
  background: #166534;
}

.hb-subscribe-banner-text {
  flex: 1 1 220px;
}

.hb-subscribe-banner-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hb-subscribe-banner-form input {
  border-radius: 999px;
  border: none;
  padding: 6px 12px;
  font-size: 0.9rem;
  min-width: 150px;
}

.hb-subscribe-banner-btn {
  border-radius: 999px;
  border: none;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background: #ffffff;
  color: #064e3b;
}

@media (max-width: 700px) {
  .hb-subscribe-banner {
    border-radius: 18px;
    align-items: stretch;
  }
  .hb-subscribe-banner-form {
    width: 100%;
  }
  .hb-subscribe-banner-form input,
  .hb-subscribe-banner-btn {
    flex: 1 1 100%;
  }
}

/* --- Small utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- What’s on page footer --- */
.hb-whats-footer {
  margin-top: 40px;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.hb-whats-footer a {
  color: #14532d;
  text-decoration: none;
}

.hb-whats-footer a:hover {
  text-decoration: underline;
}



/* --- Hollybush homepage layout fixes v2 --- */

/* Make Latest news a single-column list inside the two-column area */
.hb-news-and-whats .hb-news-list {
  grid-template-columns: 1fr;
}


/* ------------------------------------------------------------------
   HOMEPAGE “WHAT’S ON” TEASER SLIDER
   ------------------------------------------------------------------ */
.hb-whats-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 260px;                 /* fixed visual height for all slides */
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.08);
  background: #000;
}

/* All slides are stacked on top of each other */
.hb-whats-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  pointer-events: none;
}

/* Only the active slide is visible & interactive */
.hb-whats-slide--active {
  opacity: 1;
  pointer-events: auto;
}

.hb-whats-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.9;
}

.hb-whats-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                /* anchor content to the bottom */
  z-index: 2;
  padding: 40px 28px 32px;   /* ↑ increased top padding, lower bottom padding */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #f9fafb;

  /* MUCH stronger gradient so text always sits on readable dark area */
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.95) 0%,
    rgba(15, 23, 42, 0.75) 35%,
    rgba(15, 23, 42, 0.0) 100%
  );

  height: 100%;  /* ensures the gradient spans entire slide height */
  box-sizing: border-box;
}


.hb-whats-date {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d1d5db;
  margin: 0 0 4px;
}

.hb-whats-title {
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.hb-whats-text {
  margin: 0 0 10px;
  color: #e5e7eb;
}

.hb-whats-link {
  align-self: flex-start;
  margin-top: 4px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(248, 250, 252, 0.8);
  background: rgba(15, 23, 42, 0.2);
  color: #f9fafb;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.hb-whats-link:hover {
  background: rgba(15, 23, 42, 0.4);
}

/* Dots: now absolutely positioned inside the card, so they’re never cropped */
.hb-whats-dots {
  position: absolute;
  right: 20px;
  bottom: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 0;
  z-index: 2;
}

.hb-whats-dot {
  width: 14px;
  height: 6px;
  border-radius: 999px;
  border: none;
  background: #e5e7eb;
  cursor: pointer;
}

.hb-whats-dot--active {
  width: 22px;
  background: #14532d;
}

/* (Existing full what’s-on page styles below this can stay as-is) */



/* WHAT'S ON poster layout
   -------------------------------------------------- */

.hb-whatson-page {
  padding-top: 40px;
  padding-bottom: 80px;
}

.hb-whatson-poster {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 28px 32px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, #14532d 0, #022c22 40%, #020617 100%);
  color: #ecfdf5;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.55);
  position: relative;
  overflow: hidden;
}

.hb-whatson-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at right top, rgba(236, 252, 203, 0.18), transparent 55%);
  opacity: 0.85;
  pointer-events: none;
}

.hb-whatson-poster-header,
.hb-whatson-poster-body,
.hb-whatson-footer {
  position: relative;
  z-index: 1;
}

.hb-whatson-poster-header {
  margin-bottom: 18px;
}

.hb-whatson-poster-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}

.hb-whatson-poster-title {
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.hb-whatson-poster-intro {
  max-width: 540px;
  font-size: 0.95rem;
  opacity: 0.9;
  margin: 0;
}

/* rows */

.hb-whatson-poster-body {
  margin-top: 10px;
}

.hb-whatson-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid rgba(226, 232, 240, 0.16);
}

.hb-whatson-row:first-of-type {
  border-top: 1px solid rgba(226, 232, 240, 0.4);
}

/* date badge */

.hb-whatson-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 10px 8px;
  border: 1px solid rgba(226, 232, 240, 0.35);
  min-width: 70px;
}

.hb-whatson-date-day {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hb-whatson-date-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.hb-whatson-date-month {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hb-whatson-date-freetext {
  font-size: 0.85rem;
}

.hb-whatson-main {
  min-width: 0;
}

.hb-whatson-event-title {
  font-size: 1.15rem;
  margin: 0 0 4px;
}

.hb-whatson-event-text {
  margin: 0 0 10px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.hb-whatson-event-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.7);
  color: #ecfdf5;
  text-decoration: none;
}

.hb-whatson-event-link:hover {
  background: rgba(15, 118, 110, 0.85);
}

/* image */

.hb-whatson-image {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.7);
}

.hb-whatson-image img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* footer line */

.hb-whatson-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(226, 232, 240, 0.28);
  font-size: 0.9rem;
  opacity: 0.9;
}

.hb-whatson-footer a {
  color: #bef264;
  text-decoration: none;
}

.hb-whatson-footer a:hover {
  text-decoration: underline;
}

/* Responsive tweaks */

@media (max-width: 960px) {
  .hb-whatson-poster {
    padding: 22px 18px 26px;
  }

  .hb-whatson-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hb-whatson-date {
    justify-content: flex-start;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    align-self: flex-start;
  }

  .hb-whatson-date-num {
    font-size: 1.2rem;
  }

  .hb-whatson-image img {
    height: 210px;
  }
}

@media (max-width: 640px) {
  .hb-whatson-poster-title {
    font-size: 1.4rem;
  }
  .hb-whatson-image img {
    height: 190px;
  }
}
/* --- HOMEPAGE WHAT'S ON — Typography Boost --- */

.hb-whats-date {
  font-size: 1rem !important;       /* slightly bigger */
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-bottom: 6px;
  color: #f1f5f9;
}

.hb-whats-title {
  font-size: 1.45rem !important;    /* bigger title */
  font-weight: 800 !important;      /* extra bold */
  line-height: 1.2;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25); /* subtle highlight */
}

.hb-whats-text {
  font-size: 1rem;
  line-height: 1.45;
  color: #e2e8f0;
  max-width: 92%;
}

/* =========================================================
  
