/*
Theme Name:  Barista Child
Theme URI:   https://barista.qodeinteractive.com
Description: Child theme for Barista (baristawp). Custom styles for Bubby's Place.
Author:      Bubby's Place
Template:    baristawp
Version:     1.0.0
Text Domain: baristawp-child
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ─── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@1,700&display=swap');

/* ─── Global Typography ─────────────────────────────────────────────────────── */

/* Body & base text — 20px Semi-Bold, Pure Black, generous line spacing */
body,
p,
li,
td,
input,
textarea,
select {
    font-family: 'Montserrat', sans-serif;
    font-size:   20px;
    font-weight: 600;
    color:       #000000;
    line-height: 1.6;
}

/* All headings — Barlow Condensed Light, Vibrant Red */
h1, h2, h3, h4, h5, h6,
.bubby-page-banner__title,
.bubby-section-title,
.bubby-hero__title,
.bubby-menu-category,
.bubby-footer__site-name {
    font-family:    'Barlow Condensed', sans-serif;
    font-weight:    300;          /* Light — the skinny look */
    font-style:     normal;
    color:          var(--bubby-red);
    line-height:    1.1;
    letter-spacing: 1px;          /* high-end designer spacing */
}

/* Navigation links — Barlow Condensed Regular (legible but skinny) */
.bubby-nav__list a,
.bubby-nav__list > li > a,
.bubby-mobile-nav__list a,
.bubby-tab-btn {
    font-family:    'Barlow Condensed', sans-serif;
    font-weight:    400;
    font-size:      18px;    /* +25% from 18px */
    letter-spacing: 1px;
}

/* Keep white on inner page banners */
.bubby-page-banner__title {
    color: #fff;
}

/* ── Homepage hero info (hours/address) — white + halo ──────────────────────── */
.home .bubby-hero__hours-label,
.home .bubby-hero__hours,
.home .bubby-hero__address {
    color:       #ffffff;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.80);
}

.home .bubby-hero__address a {
    color:           inherit;
    text-decoration: none;
}

.home .bubby-hero__address a:focus-visible {
    outline:        2px solid #ffffff;
    outline-offset: 2px;
}

/* Tagline: double-glow shadow, own rule so it isn't overridden */
.home .bubby-hero__tagline {
    color:       #ffffff;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0px 4px 12px rgba(0,0,0,0.90), 0px 0px 20px rgba(0,0,0,0.50);
}

/* ── Hero title: Pure White, 900 weight — overrides every other rule ────────── */
.home .bubby-hero__title,
.bubby-hero__title,
.bubby-hero__title-line1,
.bubby-hero__title-line2 {
    color:          #ffffff                                                          !important;
    font-weight:    900                                                              !important;
    line-height:    0.7                                                              !important;
    text-shadow:    0px 4px 12px rgba(255,0,0,0.90), 0px 0px 20px rgba(255,0,0,0.50)  !important;
    margin-top:     0                                                                !important;
    margin-bottom:  0                                                                !important;
    padding-top:    0                                                                !important;
    padding-bottom: 0                                                                !important;
}

/* Footer site name stays white */
.bubby-footer__site-name {
    color: #fff;
}

/* Sub-headings inside footer/nav that should stay white */
.bubby-footer__heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color:       #fff;
}

/* Italic accent words (e.g. "Menu" in "Our Drinks Menu") —
   Barlow Condensed supports italic, so use it here */
.bubby-page-banner__title em {
    font-family:    'Barlow Condensed', sans-serif;
    font-style:     italic;
    font-weight:    300;
    font-size:      1em;
    color:          rgba(255, 255, 255, 0.65);
}

/* ─── Brand Tokens ─────────────────────────────────────────────────────────── */
/*
 * PALETTE — anchored to three client-specified colors:
 *   Vibrant Red  →  #e63946
 *   Steel Gray   →  #6c757d
 *   Light Gray   →  #f8f9fa
 *
 * A full range is derived from each anchor so every section of the site
 * has depth without introducing any brown, beige, or warm tones.
 *
 * REDS  (dark → light)
 *   --bubby-red-deepest   #6B0F14  near-black red      → deepest accents
 *   --bubby-red-deep      #9B1521  dark crimson        → page-banner gradient top
 *   --bubby-red           #e63946  Vibrant Red ★       → buttons, prices, icons
 *   --bubby-red-hover     #cf2d3b  pressed             → :hover / :active
 *   --bubby-red-muted     #b03040  subdued             → secondary accents
 *   --bubby-red-light     #f25462  bright              → labels on dark bg
 *
 * GRAYS  (dark → light — zero warm/brown undertone)
 *   --bubby-gray-darkest  #212529  near-black          → deepest text / darkest bg
 *   --bubby-gray-dark     #343a40  dark slate          → header + banner bg
 *   --bubby-gray-warm     #495057  medium-dark         → tab bars, dividers
 *   --bubby-gray          #6c757d  Steel Gray ★        → body text, icons
 *   --bubby-gray-mid      #adb5bd  medium-light        → muted text, borders
 *   --bubby-gray-light    #dee2e6  light               → cards, section borders
 *   --bubby-gray-offwhite #f8f9fa  Light Gray ★        → page background, light sections
 */
:root {
    /* — Reds — Pure Electric palette */
    --bubby-red-deepest:  #990000;   /* deep anchor for dark gradient ends */
    --bubby-red-deep:     #CC0000;   /* dark red — banner gradient top */
    --bubby-red:          #FF0000;   /* PURE ELECTRIC RED ★ */
    --bubby-red-hover:    #DD0000;   /* pressed state */
    --bubby-red-muted:    #FF3333;   /* secondary accent */
    --bubby-red-light:    #FF5F5F;   /* glow red — gradient highlights */

    /* — Grays — (+50% lightness = noticeably lighter, airier palette) */
    --bubby-gray-darkest: #3d4349;
    --bubby-gray-dark:    #555e67;   /* header/banner bg — was #343a40 */
    --bubby-gray-warm:    #737b84;
    --bubby-gray:         #8d959d;   /* body text — was #6c757d */
    --bubby-gray-mid:     #b8bfc5;
    --bubby-gray-light:   #e2e5e8;
    --bubby-gray-offwhite:#f8f9fa;   /* Light Gray ★ — unchanged */

    /* — Typography scale — */
    --bubby-font-heading: 2rem;
    --bubby-font-sub:     1.05rem;
    --bubby-font-input:   0.95rem;

    /* Fixed .bubby-header sits below this (top bar is in normal document flow) */
    --bubbys-top-bar-height: 32px;

    /* Fixed main nav row height — matches .bubby-header__inner (desktop) */
    --bubby-header-bar-height: 43px;
}

@media (max-width: 600px) {
    :root {
        /* Stacked top bar (see .top-bar-container mobile rule) — slightly taller */
        --bubbys-top-bar-height: 58px;
    }
}

@media (max-width: 767px) {
    :root {
        /* Slim header row but height:auto + larger logo — approximate drawer offset */
        --bubby-header-bar-height: 54px;
    }
}


/* =============================================================================
   HEADER + NAVIGATION  —  .bubby-header / .bubby-nav / .bubby-mobile-nav
   -----------------------------------------------------------------------------
   Fixed transparent header overlays the hero on load.
   Gains a solid dark background (.bubby-header--scrolled) once the user
   scrolls past 60px (toggled by the inline JS in functions.php).
   ============================================================================= */

/* ── Header bar ─────────────────────────────────────────────────────────────── */
.bubby-header {
    position:   fixed;
    top:        var(--bubbys-top-bar-height);
    left:       0;
    width:      100%;          /* span full viewport, not constrained by any parent */
    z-index:    9999;
    background: transparent;
    transition: background-color 0.30s ease, box-shadow 0.30s ease;
    box-sizing: border-box;
}

/* When WP admin bar is visible (logged-in view), drop header below it */
.admin-bar .bubby-header {
    top: calc(32px + var(--bubbys-top-bar-height));
}
@media screen and (max-width: 782px) {
    .admin-bar .bubby-header {
        top: calc(46px + var(--bubbys-top-bar-height));
    }
}

/* Solid background once scrolled or on any inner (non-hero) page */
.bubby-header--scrolled,
body:not(.home) .bubby-header {
    background-color: var(--bubby-gray-dark);
    box-shadow:       0 2px 16px rgba(0, 0, 0, 0.30);
}

/* ── Inner row: logo hard-left, nav hard-right (matching Slide 1) ────────────── */
.bubby-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    padding:         0 32px;
    height:          var(--bubby-header-bar-height);
    box-sizing:      border-box;
}

/* ── Brand (logo image + site name) ─────────────────────────────────────────── */
.bubby-header__brand {
    display:         flex;
    align-items:     center;
    gap:             8px;
    text-decoration: none;
    flex-shrink:     0;
}

.bubby-header__logo {
    width:         26px;
    height:        26px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
}

/* 2-line stacked title — white for contrast on header background */
.bubby-header__site-name {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    align-items:    flex-start;
    line-height:    1.15;
    gap:            1px;
    color:          #ffffff;
}

.bubby-header__site-name--line1 {
    font-family:    'Barlow Condensed', sans-serif;
    font-style:     italic;
    font-weight:    700;
    font-size:      1.05rem;
    color:          #ffffff;
    letter-spacing: 0.5px;
    line-height:    1.1;
    white-space:    nowrap;
}

.bubby-header__site-name--line2 {
    font-family:    'Barlow Condensed', sans-serif;
    font-style:     normal;
    font-weight:    700;
    font-size:      0.66rem;
    color:          #ffffff;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height:    1.1;
    white-space:    nowrap;
}

/* Mobile: center header brand + scale title down slightly */
/* ── Mobile: left-aligned brand, hamburger right, larger sizes locked ────────── */
@media (max-width: 767px) {

    /* Row layout: brand hard-left, hamburger hard-right */
    .bubby-header__inner {
        flex-direction:  row;
        justify-content: space-between;
        align-items:     center;
        padding:         5px 16px 5px 15px;  /* 15px left so brand clears screen edge */
        height:          auto;
    }

    /* Brand: left side, no centering */
    .bubby-header__brand {
        justify-content: flex-start;
        flex:            0 1 auto;
        gap:             9px;
    }

    /* Logo — scaled with slimmer header */
    .bubby-header__logo {
        width:  40px;
        height: 40px;
    }

    /* Title: left-aligned, stacked */
    .bubby-header__site-name {
        align-items: flex-start;
        text-align:  left;
    }

    /* Line 1 */
    .bubby-header__site-name--line1 {
        font-size:   1.05rem;
        font-weight: 700;
        color:       #ffffff;
    }

    /* Line 2 */
    .bubby-header__site-name--line2 {
        font-size:   0.72rem;
        font-weight: 700;
        color:       #ffffff;
    }

    /* Hamburger stays right — no changes needed, flex layout handles it */

    /* Body text: bolder + more breathing room on mobile */
    body,
    p,
    li,
    td {
        font-weight: 700;
        line-height: 1.8;
        color:       #000000;
    }
}

/* ── Desktop navigation list ─────────────────────────────────────────────────── */
.bubby-nav__list {
    display:     flex;
    align-items: center;
    gap:         4px;
    list-style:  none;
    margin:      0;
    padding:     0;
}

.bubby-nav__list > li > a {
    display:         block;
    padding:         5px 11px;
    color:           rgba(255, 255, 255, 0.90);
    font-family:     'Montserrat', sans-serif;
    font-size:       0.82rem;
    font-weight:     500;
    text-decoration: none;
    letter-spacing:  0.02em;
    border-radius:   4px;
    transition:      color 0.2s ease, background-color 0.2s ease;
    white-space:     nowrap;
}

.bubby-nav__list > li > a:hover,
.bubby-nav__list > li.current-menu-item > a {
    color:            #fff;
    background-color: rgba(255, 255, 255, 0.12);
}

/* ── Dropdown (sub-menu under "Menu") ─────────────────────────────────────────── */
.bubby-nav__list li {
    position: relative;
}

.bubby-nav__list .sub-menu {
    position:         absolute;
    top:              calc(100% + 5px);
    left:             0;
    min-width:        180px;
    background-color: var(--bubby-gray-dark);
    border-radius:    6px;
    box-shadow:       0 8px 24px rgba(0, 0, 0, 0.30);
    list-style:       none;
    margin:           0;
    padding:          5px 0;
    opacity:          0;
    visibility:       hidden;
    transform:        translateY(-6px);
    transition:       opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.bubby-nav__list li:hover > .sub-menu,
.bubby-nav__list li:focus-within > .sub-menu {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

.bubby-nav__list .sub-menu li a {
    display:         block;
    padding:         6px 14px;
    color:           rgba(255, 255, 255, 0.82);
    font-size:       0.88rem;
    text-decoration: none;
    transition:      color 0.15s ease, background-color 0.15s ease;
    white-space:     nowrap;
}

.bubby-nav__list .sub-menu li a:hover {
    color:            #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

/* Dropdown arrow indicator on parent items that have children */
.bubby-nav__list > li.menu-item-has-children > a::after {
    content:      ' ▾';
    font-size:    0.7em;
    opacity:      0.75;
    margin-left:  2px;
}

/* ── Mobile hamburger button ─────────────────────────────────────────────────── */
.bubby-nav__toggle {
    display:        none;      /* hidden on desktop */
    flex-direction: column;
    justify-content: center;
    gap:            3px;
    width:          28px;
    height:         28px;
    background:     transparent;
    border:         none;
    cursor:         pointer;
    padding:        4px;
    border-radius:  4px;
    transition:     background-color 0.2s ease;
}

.bubby-nav__toggle:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.bubby-nav__bar {
    display:          block;
    width:            22px;
    height:           2px;
    background-color: #fff;
    border-radius:    2px;
    transition:       transform 0.25s ease, opacity 0.25s ease;
}

/* Animate to × when open */
.bubby-nav__toggle.is-open .bubby-nav__bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}
.bubby-nav__toggle.is-open .bubby-nav__bar:nth-child(2) {
    opacity:   0;
    transform: scaleX(0);
}
.bubby-nav__toggle.is-open .bubby-nav__bar:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* ── Mobile navigation panel ─────────────────────────────────────────────────── */
.bubby-mobile-nav {
    display:          none;    /* only visible on mobile breakpoint */
    position:         fixed;
    top:              calc(var(--bubbys-top-bar-height) + var(--bubby-header-bar-height));
    left:             0;
    right:            0;
    background-color: var(--bubby-gray-dark);
    z-index:          999;
    padding:          16px 0 24px;
    box-shadow:       0 8px 24px rgba(0, 0, 0, 0.30);
    max-height:       calc(100vh - var(--bubbys-top-bar-height) - var(--bubby-header-bar-height));
    overflow-y:       auto;
    transform:        translateY(-8px);
    opacity:          0;
    transition:       transform 0.25s ease, opacity 0.25s ease;
}

.bubby-mobile-nav.is-open {
    transform: translateY(0);
    opacity:   1;
}

.bubby-mobile-nav__list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.bubby-mobile-nav__list li a {
    display:         block;
    padding:         8px 22px;
    color:           rgba(255, 255, 255, 0.88);
    font-size:       1rem;
    font-weight:     700;
    text-decoration: none;
    border-bottom:   1px solid rgba(255, 255, 255, 0.07);
    transition:      color 0.15s ease;
}

.bubby-mobile-nav__list li a:hover {
    color: #fff;
}

/* Sub-menu items indented on mobile */
.bubby-mobile-nav__list .sub-menu {
    list-style: none;
    margin:     0;
    padding:    0;
}

.bubby-mobile-nav__list .sub-menu li a {
    padding-left: 28px;
    font-size:    0.92rem;
    font-weight:  700;
    color:        rgba(255, 255, 255, 0.65);
}

/*
 * Laptop / tablet landscape / typical notebooks: bolder horizontal nav.
 * Ultra-wide desktops (>1920px) keep medium weight from .bubby-nav__list > li > a above.
 */
@media (min-width: 901px) and (max-width: 1920px) {
    .bubby-nav__list > li > a {
        font-weight: 700;
    }
    .bubby-nav__list .sub-menu li a {
        font-weight:     700;
        font-family:     'Montserrat', sans-serif;
    }
}

/* ── Responsive: show hamburger, hide desktop nav on mobile ──────────────────── */
@media (max-width: 900px) {
    .bubby-nav {
        display: none;
    }
    .bubby-nav__toggle {
        display: flex;
    }
    .bubby-mobile-nav {
        display: block;
        pointer-events: none;   /* non-interactive while closed */
    }
    .bubby-mobile-nav.is-open {
        pointer-events: auto;
    }
}

/* Prevent the Barista wrapper from creating a new stacking context
   that would clip or offset our fixed header */
.edgtf-wrapper,
.edgtf-wrapper-inner {
    position: static !important;
    overflow: visible !important;
}

/* Push inner-page content below the fixed header height */
.edgtf-content {
    padding-top: var(--bubby-header-bar-height) !important;
}

/* Homepage: hero fills full viewport — no push needed */
.home .edgtf-content {
    padding-top: 0 !important;
}


/* =============================================================================
   HERO SECTION  —  .bubby-hero
   -----------------------------------------------------------------------------
   Used on the homepage via front-page.php.
   Background image is pulled from the page's Featured Image in WP Admin.
   Falls back to a dark gradient if no image is set yet.
   ============================================================================= */

/* ── Outer section: full viewport height, stacking context ──────────────────── */
.bubby-hero {
    position:         relative;
    min-height:       100vh;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    overflow:         hidden;
}

/* ── Background image — full brightness, vivid and energized ────────────────── */
.bubby-hero__bg {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    filter:              brightness(1.2) contrast(1.1);  /* turn up the lights */
}

/* Fallback gradient — used when no Featured Image has been uploaded yet.
   Flows from deep warm red at the top through brand red, then transitions
   into warm grays at the bottom — the full palette in one sweep. */
.bubby-hero__bg--fallback {
    background: linear-gradient(
        to bottom,
        var(--bubby-red-deepest)  0%,
        var(--bubby-red-deep)    25%,
        var(--bubby-red)         50%,
        var(--bubby-gray-warm)   75%,
        var(--bubby-gray-dark)  100%
    );
}

/* ── Vignette overlay — dark where text lives, clear in the sunny center ──────
   Top:    45% black — nav + headline zone stays readable
   Middle: 0% — image at full brightness, "sunny" feel
   Bottom: 50% black — hours/address zone stays readable               */
.bubby-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45)  0%,
        rgba(0, 0, 0, 0.20) 25%,
        rgba(0, 0, 0, 0.00) 50%,
        rgba(0, 0, 0, 0.20) 75%,
        rgba(0, 0, 0, 0.50) 100%
    );
}

/* ── Centered content block ──────────────────────────────────────────────────── */
.bubby-hero__content {
    position:   relative;
    z-index:    2;
    text-align: center;
    padding:    120px 24px 80px;
    max-width:  900px;
    width:      100%;
}

/* ── Main headline — largest element on the page ─────────────────────────────── */
.bubby-hero__title {
    font-family:    'Barlow Condensed', sans-serif                                    !important;
    font-style:     normal                                                            !important;
    font-weight:    900                                                               !important;
    font-size:      clamp(3.9rem, 10.4vw, 7.8rem)                                    !important;
    color:          #ffffff                                                           !important;
    line-height:    0.7                                                               !important;
    margin:         0 auto 24px                                                       !important;  /* 24px gap below title, auto sides keep it centered */
    text-shadow:    0px 4px 12px rgba(255,0,0,0.90), 0px 0px 20px rgba(255,0,0,0.50)    !important;
    letter-spacing: 0.01em                                                            !important;
}

/* Each line: block-stacked, zero margin, lines almost touching */
.bubby-hero__title-line1,
.bubby-hero__title-line2 {
    display:        block                                                             !important;
    color:          #ffffff                                                           !important;
    font-weight:    900                                                               !important;
    line-height:    0.7                                                               !important;
    text-shadow:    0px 4px 12px rgba(255,0,0,0.90), 0px 0px 20px rgba(255,0,0,0.50)   !important;
    margin-top:     0                                                                 !important;
    padding-top:    0                                                                 !important;
    padding-bottom: 0                                                                 !important;
}

/* Line 1 ("Bubby's Place"): no gap below — the two words stay tight */
.bubby-hero__title-line1 {
    margin-bottom: 0 !important;
}

/* Line 2 ("Coffee Shop"): 24px gap after it, before the tagline */
.bubby-hero__title-line2 {
    margin-bottom: 24px !important;
}

/* Main title stack (lines 1–2 only); location line stays a direct child of h1 */
.bubby-hero__title-main {
    display: block;
}

/* Tighten gap between "Coffee Shop" and location on desktop only */
.home .bubby-hero__title > .bubby-hero__title-line2 {
    margin-top: -24px !important;
}

/* ── Phones only (≤480px): hero title lift, location spacing, slightly smaller type
      Tablets/desktop (481px+): use default hero title metrics above. ─────────── */
@media (max-width: 480px) {
    .home .bubby-hero__title-main {
        margin-top: -24px !important;
    }

    .home .bubby-hero__title > .bubby-hero__title-line2 {
        margin-top: 16px !important;
    }

    .bubby-hero__title {
        font-size:      clamp(3.51rem, 9.36vw, 7.02rem) !important;  /* 10% smaller */
        line-height:    0.7                              !important;
        letter-spacing: -1px                             !important;
    }
    .bubby-hero__title-line1,
    .bubby-hero__title-line2 {
        line-height:    0.7  !important;
        letter-spacing: -1px !important;
    }
}

/* ── Tagline ─────────────────────────────────────────────────────────────────── */
.bubby-hero__tagline {
    font-size:   clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 700;
    color:       #ffffff;
    line-height: 1.2;
    text-align:  center;
    margin:      0 auto 38px;   /* margin-top: 0 keeps the 24px gap on line2 clean */
    padding-top: 0;
    text-shadow: 0px 4px 12px rgba(0,0,0,0.90), 0px 0px 20px rgba(0,0,0,0.50);
}

/* ── CTA button: red pill ────────────────────────────────────────────────────── */
.bubby-hero__cta {
    display:          inline-block;
    background-color: var(--bubby-red);
    color:            #fff;
    font-family:      'Montserrat', sans-serif;
    font-size:        1rem;
    font-weight:      600;
    text-decoration:  none;
    padding:          14px 38px;
    border-radius:    50px;
    letter-spacing:   0.02em;
    transition:       background-color 0.2s ease, transform 0.15s ease,
                      box-shadow 0.2s ease;
    box-shadow:       0 4px 14px rgba(255, 0, 0, 0.45);
}

.bubby-hero__cta:hover,
.bubby-hero__cta:focus {
    background-color: var(--bubby-red-hover);
    transform:        translateY(-2px);
    box-shadow:       0 6px 20px rgba(255, 0, 0, 0.55);
    color:            #fff;
    text-decoration:  none;
    outline:          none;
}

.bubby-hero__cta:active {
    transform:  translateY(0);
    box-shadow: 0 3px 10px rgba(255, 0, 0, 0.40);
}

/*
 * Temporary: hide hero "Get 10% Off" promo CTA for launch.
 * Re-enable anytime by removing class `hidden-promo` from the link in front-page.php
 * or deleting this rule.
 */
.bubby-hero__cta.hidden-promo {
    display: none;
}

/* ── Hours + address overlay — bottom-left corner ───────────────────────────── */
.bubby-hero__info {
    position:    absolute;
    bottom:      44px;
    left:        44px;
    z-index:     2;
    line-height: 1.65;
}

.bubby-hero__hours-label {
    font-size:      0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color:          #ffffff;
    font-weight:    600;
    margin:         0 0 5px;
    text-shadow:    1px 1px 6px rgba(0, 0, 0, 0.80);
}

.bubby-hero__hours,
.bubby-hero__address {
    font-size:   0.88rem;
    font-weight: 600;
    color:       #ffffff;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.80);
    margin:    0 0 6px;
}

/* ── Hero: small phones only (≤480px) — not tablets / desktop ───────────────── */
@media (max-width: 480px) {
    .bubby-hero__info {
        display: none;    /* avoids overlap with content on small screens */
    }
    .bubby-hero__content {
        padding: 90px 20px 60px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .bubby-hero__info {
        bottom: 28px;
        left:   24px;
    }
}


/* =============================================================================
   FOOTER  —  .bubby-footer
   -----------------------------------------------------------------------------
   3-column layout: Brand | Quick Links | Get In Touch
   Color scheme: dark charcoal background, red accents, gray text
   ============================================================================= */

/* ── Outer footer ───────────────────────────────────────────────────────────── */
.bubby-footer {
    background-color: var(--bubby-gray-dark);
    color:            rgba(255, 255, 255, 0.70);
    font-family:      'Montserrat', sans-serif;
    font-size:        0.92rem;
    line-height:      1.75;
}

/* ── 3-column grid ──────────────────────────────────────────────────────────── */
.bubby-footer__inner {
    display:               grid;
    grid-template-columns: 1.4fr 1fr 1.4fr;
    gap:                   48px;
    max-width:             1140px;
    margin:                0 auto;
    padding:               64px 40px 48px;
}

/* ── Column 1: Brand ────────────────────────────────────────────────────────── */
.bubby-footer__logo-wrap {
    display:     flex;
    align-items: center;
    gap:         14px;
    margin-bottom: 16px;
}

/* Custom logo image sizing */
.bubby-footer__logo-wrap .custom-logo {
    width:         48px;
    height:        48px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
}

.bubby-footer__site-name {
    font-family:  'Barlow Condensed', sans-serif;
    font-style:   italic;
    font-weight:  700;
    font-size:    1.25rem;
    color:        #fff;
    line-height:  1.25;
}

.bubby-footer__tagline {
    color:       rgba(255, 255, 255, 0.60);
    font-size:   0.88rem;
    line-height: 1.75;
    margin:      0 0 20px;
    max-width:   280px;
}

/* Social icon circle */
.bubby-footer__social {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    50%;
    background-color: rgba(255, 255, 255, 0.10);
    color:            rgba(255, 255, 255, 0.70);
    text-decoration:  none;
    transition:       background-color 0.2s ease, color 0.2s ease;
}

.bubby-footer__social:hover {
    background-color: var(--bubby-red);
    color:            #fff;
}

/* ── Column headings ────────────────────────────────────────────────────────── */
.bubby-footer__heading {
    font-family:    'Montserrat', sans-serif;
    font-size:      1rem;
    font-weight:    600;
    color:          #fff;
    letter-spacing: 0.02em;
    margin:         0 0 18px;
    text-transform: none;
}

/* ── Quick Links list ───────────────────────────────────────────────────────── */
.bubby-footer__link-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.bubby-footer__link-list li {
    margin-bottom: 8px;
}

.bubby-footer__link-list a {
    color:           rgba(255, 255, 255, 0.68);
    text-decoration: none;
    transition:      color 0.2s ease;
}

.bubby-footer__link-list a:hover {
    color: #fff;
}

/* Accent link (Inquiries & Suggestions) */
.bubby-footer__link--accent {
    color: var(--bubby-red) !important;
}

.bubby-footer__link--accent:hover {
    color: var(--bubby-red-light) !important;
}

/* ── Contact list ───────────────────────────────────────────────────────────── */
.bubby-footer__contact-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.bubby-footer__contact-item {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    margin-bottom: 14px;
    color:       rgba(255, 255, 255, 0.68);
    font-size:   0.88rem;
}

.bubby-footer__contact-icon {
    color:      var(--bubby-red);
    flex-shrink: 0;
    margin-top:  2px;
}

.bubby-footer__contact-item a {
    color:           rgba(255, 255, 255, 0.68);
    text-decoration: none;
    transition:      color 0.2s ease;
}

.bubby-footer__contact-item a:hover {
    color: #fff;
}

/* ── Order Delivery band ────────────────────────────────────────────────────── */
.bubby-footer__delivery {
    background-color: #222;
    border-top:       1px solid rgba(255, 255, 255, 0.12);
    border-bottom:    1px solid rgba(255, 255, 255, 0.12);
}

.bubby-footer__delivery-inner {
    max-width:  1140px;
    margin:     0 auto;
    padding:    36px 40px;
    text-align: center;
}

.bubby-footer__delivery-heading {
    margin:      0 0 10px;
    font-family: 'Montserrat', sans-serif;
    font-size:   24px;
    font-weight: 700;
    color:       var(--bubby-red);
}

.bubby-footer__delivery-text {
    margin:      0 auto 20px;
    max-width:   420px;
    font-size:   0.88rem;
    color:       rgba(255, 255, 255, 0.72);
    line-height: 1.65;
}

.bubby-footer__delivery-actions {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             14px;
}

.bubby-footer__delivery-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    min-width:        168px;
    padding:          12px 26px;
    border-radius:    50px;
    border:           1px solid rgba(255, 255, 255, 0.85);
    background-color: transparent;
    color:            rgba(255, 255, 255, 0.92);
    font-family:      'Montserrat', sans-serif;
    font-size:        0.88rem;
    font-weight:      600;
    letter-spacing:   0.02em;
    text-decoration:  none;
    transition:       background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bubby-footer__delivery-btn:hover {
    background-color: var(--bubby-red);
    border-color:     var(--bubby-red);
    color:            #fff;
}

.bubby-footer__delivery-icon {
    flex-shrink: 0;
    opacity:     0.9;
}

.bubby-footer__delivery-btn:hover .bubby-footer__delivery-icon {
    opacity: 1;
}

/* ── Bottom copyright bar ───────────────────────────────────────────────────── */
.bubby-footer__bar {
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    flex-wrap:        wrap;
    gap:              8px;
    max-width:        1140px;
    margin:           0 auto;
    padding:          20px 40px;
    border-top:       1px solid rgba(255, 255, 255, 0.12);
    font-size:        0.75rem;
    text-transform:   uppercase;
    letter-spacing:   0.07em;
    color:            rgba(255, 255, 255, 0.35);
}

.bubby-footer__bar p {
    margin: 0;
}

/* ── Footer responsive ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .bubby-footer__inner {
        grid-template-columns: 1fr;
        gap:     36px;
        padding: 48px 24px 36px;
    }
    .bubby-footer__delivery-inner {
        padding: 32px 24px;
    }
    .bubby-footer__delivery-actions {
        flex-direction: column;
        align-items:    stretch;
    }
    .bubby-footer__delivery-btn {
        width:     100%;
        min-width: 0;
    }
    .bubby-footer__bar {
        flex-direction: column;
        text-align:     center;
        padding:        16px 24px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .bubby-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
    .bubby-footer__brand {
        grid-column: 1 / -1;  /* brand spans full width on tablet */
    }
}


/* =============================================================================
   EMAIL CAPTURE SECTION  —  .bubby-capture
   -----------------------------------------------------------------------------
   Matches the [bubby_email_capture] shortcode output in functions.php.
   BEM structure:
     .bubby-capture               Outermost <section> — full-width band
     .bubby-capture__inner        Centered content column
     .bubby-capture__heading      "JOIN THE CLUB" headline
     .bubby-capture__spam         "No spam" sub-text below button
     .bubby-capture__subheading   Supporting copy line
     .bubby-capture__error        Inline validation message
     .bubby-capture__form         <form> element
     .bubby-capture__fields       Flex row: inputs + button
     .bubby-capture__btn          Submit button
     .bubby-capture--success      Modifier: success / thank-you state
     .bubby-capture__thankyou     Success confirmation text
   ============================================================================= */

/* ── Outer band — dark box with red border ───────────────────────────────────── */
.bubby-capture {
    background-color: #000000;
    border:           2px solid #FF0000;
    border-radius:    8px;
    padding:          40px 24px;
    text-align:       center;
    width:            100%;
    max-width:        720px;
    margin:           40px auto;
    box-sizing:       border-box;
}

/* ── Centered content column ─────────────────────────────────────────────────── */
.bubby-capture__inner {
    max-width:  640px;
    margin:     0 auto;
}

/* ── Headline: all-caps white, ultra-bold, tight ─────────────────────────────── */
.bubby-capture__heading {
    font-family:    'Barlow Condensed', sans-serif !important;
    font-size:      clamp(2rem, 5vw, 3rem)         !important;
    font-weight:    900                            !important;
    color:          #ffffff                        !important;
    text-transform: uppercase                      !important;
    line-height:    0.8                            !important;
    letter-spacing: 0.05em                         !important;
    margin:         0 0 16px                       !important;
    text-align:     center                         !important;
}

/* ── Supporting copy ─────────────────────────────────────────────────────────── */
.bubby-capture__subheading {
    font-size:   1rem;
    color:       #cccccc;
    margin:      0 0 28px;
    line-height: 1.6;
}

/* ── Validation error message ────────────────────────────────────────────────── */
.bubby-capture__error {
    background-color: #330000;
    border-left:      3px solid #FF0000;
    color:            #ff6666;
    font-size:        0.9rem;
    padding:          10px 14px;
    margin-bottom:    20px;
    text-align:       left;
    border-radius:    2px;
}

/* ── Fields row: side-by-side on desktop, stacked on mobile ──────────────────── */
.bubby-capture__fields {
    display:         flex;
    flex-wrap:       wrap;
    gap:             10px;
    justify-content: center;
}

/* ── Text / email inputs ─────────────────────────────────────────────────────── */
.bubby-capture__fields input[type="text"],
.bubby-capture__fields input[type="email"] {
    flex:         1 1 200px;
    font-size:    1rem;
    font-weight:  500;
    color:        #000000;
    background:   #ffffff;
    border:       2px solid #cccccc;
    border-radius: 4px;
    padding:      14px 16px;
    outline:      none;
    transition:   border-color 0.2s ease;
    box-sizing:   border-box;
}

/* Placeholder text: black + medium weight for clarity */
.bubby-capture__fields input[type="text"]::placeholder,
.bubby-capture__fields input[type="email"]::placeholder {
    color:       #000000;
    font-weight: 500;
    opacity:     1;
}

/* Focus ring: red glow */
.bubby-capture__fields input[type="text"]:focus,
.bubby-capture__fields input[type="email"]:focus {
    border-color: #FF0000;
    box-shadow:   0 0 0 3px rgba(255, 0, 0, 0.30);
}

/* ── Submit button: full-width Electric Red ──────────────────────────────────── */
.bubby-capture__btn {
    flex:             1 1 100%;       /* full-width by default (thumb-friendly) */
    background-color: #FF0000;
    color:            #ffffff;
    font-size:        1.05rem;
    font-weight:      700;
    letter-spacing:   0.06em;
    text-transform:   uppercase;
    border:           none;
    border-radius:    4px;
    padding:          16px 28px;
    cursor:           pointer;
    transition:       background-color 0.2s ease, transform 0.1s ease;
    white-space:      nowrap;
}

.bubby-capture__btn:hover,
.bubby-capture__btn:focus {
    background-color: #cc0000;
    outline:          none;
}

.bubby-capture__btn:active {
    transform: scale(0.97);
}

/* ── "No spam" sub-text ──────────────────────────────────────────────────────── */
.bubby-capture__spam {
    margin-top:     16px;
    font-size:      0.82rem;
    font-weight:    400;
    color:          #aaaaaa;
    text-align:     center;
    letter-spacing: 0.02em;
}

/* ── Success / thank-you state ───────────────────────────────────────────────── */
.bubby-capture--success {
    background-color: #000000;
    border:           2px solid #FF0000;
    border-radius:    8px;
    padding:          60px 24px;
    text-align:       center;
    max-width:        720px;
    margin:           40px auto;
}

.bubby-capture__thankyou {
    font-size:   1.3rem;
    font-weight: 700;
    color:       #ffffff;
}

.bubby-capture__thankyou::first-letter {
    color: #FF0000;
}


/* =============================================================================
   PRODUCT LIST  —  .bubby-products / .bubby-product-card
   -----------------------------------------------------------------------------
   Matches the [bubby_product_list] shortcode output in functions.php.
   BEM structure:
     .bubby-products               Outer grid wrapper
     .bubby-product-card           Individual item card
     .bubby-product-card__image    Featured image container
     .bubby-product-card__body     Text content area
     .bubby-product-card__name     Item name <h3>
     .bubby-product-card__desc     Description / excerpt
     .bubby-product-card__price    Price display
     .bubby-products__empty        No-results message

   Column count is driven by the CSS custom property --bubby-columns,
   set inline by the shortcode (e.g. style="--bubby-columns:3;").
   Default is 3; override with [bubby_product_list columns="2"].
   ============================================================================= */

/* ── Grid wrapper ───────────────────────────────────────────────────────────── */
.bubby-products {
    display:               grid;
    grid-template-columns: repeat( var(--bubby-columns, 3), 1fr );
    gap:                   28px;
    padding:               40px 0;
    list-style:            none;
    margin:                0;
}

/* ── Individual card ────────────────────────────────────────────────────────── */
.bubby-product-card {
    background:    #fff;
    border:        1px solid var(--bubby-gray-light);
    border-radius: 4px;
    overflow:      hidden;                   /* clips the image to rounded corners */
    display:       flex;
    flex-direction: column;
    transition:    box-shadow 0.2s ease, transform 0.2s ease;
}

/* Subtle lift on hover — signals interactivity without being flashy */
.bubby-product-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
    transform:  translateY(-2px);
}

/* ── Featured image ─────────────────────────────────────────────────────────── */
.bubby-product-card__image {
    width:            100%;
    aspect-ratio:     4 / 3;   /* consistent crop regardless of original dimensions */
    overflow:         hidden;
    background-color: var(--bubby-gray-light);
}

.bubby-product-card__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;          /* fills the box, never distorts */
    display:    block;
    transition: transform 0.35s ease;
}

/* Slow zoom on hover — a classic coffee-menu feel */
.bubby-product-card:hover .bubby-product-card__image img {
    transform: scale(1.04);
}

/* ── Body ───────────────────────────────────────────────────────────────────── */
.bubby-product-card__body {
    padding:        20px;
    flex:           1;           /* stretches body so cards in a row align at bottom */
    display:        flex;
    flex-direction: column;
}

/* ── Item name ──────────────────────────────────────────────────────────────── */
.bubby-product-card__name {
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--bubby-gray);
    margin:      0 0 8px;
    line-height: 1.3;
}

/* ── Description ────────────────────────────────────────────────────────────── */
.bubby-product-card__desc {
    font-size:   0.9rem;
    color:       var(--bubby-gray);
    line-height: 1.6;
    margin:      0 0 14px;
    flex:        1;              /* pushes price to the bottom of the card */
}

.bubby-product-card__desc p {
    margin: 0;
}

/* ── Price ──────────────────────────────────────────────────────────────────── */
.bubby-product-card__price {
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--bubby-red);
    margin:      0;
    padding-top: 10px;
    border-top:  1px solid var(--bubby-gray-light);
}

/* ── Empty-state message ────────────────────────────────────────────────────── */
.bubby-products__empty {
    color:       var(--bubby-gray);
    font-style:  italic;
    padding:     20px 0;
}


/* =============================================================================
   RESPONSIVE  —  Mobile-first adjustments
   Vibe Spec priority: mobile-first design.
   ============================================================================= */

/* On screens narrower than 480px the fields stack vertically for thumb comfort */
@media ( max-width: 479px ) {

    .bubby-capture {
        padding: 40px 16px;
    }

    .bubby-capture__heading {
        font-size: 1.6rem;
    }

    /* Each field becomes full-width when stacked */
    .bubby-capture__fields input[type="text"],
    .bubby-capture__fields input[type="email"],
    .bubby-capture__btn {
        flex:  1 1 100%;
        width: 100%;
    }

    /* Product grid: force single column on small screens regardless of columns attr */
    .bubby-products {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Two-column layout on mid-size screens (tablets, landscape phones) */
@media ( min-width: 480px ) and ( max-width: 767px ) {
    .bubby-products {
        grid-template-columns: repeat( 2, 1fr );
    }
}


/* =============================================================================
   INNER PAGE SHARED COMPONENTS
   Used across Drinks Menu, Food Menu, Meet Bubby, About, Visit Us, Contact Us
   ============================================================================= */

/* ── Shared page wrapper ─────────────────────────────────────────────────────── */
.bubby-page {
    background-color: var(--bubby-gray-offwhite);
    min-height:       100vh;
}

/* ── Page banner (dark gradient header on each inner page) ───────────────────── */
.bubby-page-banner {
    background: linear-gradient(
        to bottom,
        var(--bubby-red-deep)  0%,
        var(--bubby-gray-dark) 100%
    );
    padding:    110px 44px 60px;
    text-align: center;
    position:   relative;
}

.bubby-page-banner__label {
    display:        block;
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color:          rgba(255, 255, 255, 0.72);  /* same white as subtitle */
    margin:         0 0 14px;
}

.bubby-page-banner__title {
    font-family:  'Barlow Condensed', sans-serif;
    font-weight:  700;
    font-size:    clamp(2.2rem, 5vw, 3.8rem);
    color:        #fff;
    margin:       0 0 14px;
    line-height:  1.1;
}

/* Italic accent word (e.g. "Menu" in "Our Drinks Menu") */
.bubby-page-banner__title em {
    font-style: italic;
    color:      rgba(255, 255, 255, 0.70);
}

.bubby-page-banner__subtitle {
    font-size:   1rem;
    color:       rgba(255, 255, 255, 0.72);
    max-width:   480px;
    margin:      0 auto;
    line-height: 1.75;
}

/* ── Tab navigation bar (menu page category tabs) ────────────────────────────── */
.bubby-tabs {
    background:      var(--bubby-gray-dark);
    padding:         22px 44px;
    display:         flex;
    gap:             10px;
    justify-content: center;
    flex-wrap:       wrap;
}

.bubby-tab-btn {
    padding:          10px 24px;
    border-radius:    50px;
    border:           none;
    background:       transparent;
    color:            rgba(255, 255, 255, 0.60);
    font-family:      'Montserrat', sans-serif;
    font-size:        0.9rem;
    font-weight:      500;
    cursor:           pointer;
    transition:       background-color 0.2s ease, color 0.2s ease;
    white-space:      nowrap;
}

.bubby-tab-btn:hover {
    color: rgba(255, 255, 255, 0.90);
}

.bubby-tab-btn.is-active {
    background-color: var(--bubby-red);
    color:            #fff;
}

/* ── Tab content panels ──────────────────────────────────────────────────────── */
.bubby-tab-panel {
    display: none;
}
.bubby-tab-panel.is-active {
    display: block;
}

/* ── Menu content section ────────────────────────────────────────────────────── */
.bubby-menu-section {
    max-width:  900px;
    margin:     0 auto;
    padding:    56px 44px;
}

/* Category heading (e.g. "Espresso Shots", "Hot Coffee") */
.bubby-menu-category {
    font-family: 'Barlow Condensed', sans-serif;
    font-style:  italic;
    font-weight: 700;
    font-size:   1.6rem;
    color:       var(--bubby-red);
    margin:      0 0 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bubby-gray-light);
}

/* 2-column item grid */
.bubby-menu-items {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px 40px;
    margin-bottom:         36px;
}

.bubby-menu-item {
    display:   flex;
    gap:       14px;
    align-items: flex-start;
}

.bubby-menu-item__img-placeholder {
    width:            56px;
    height:           56px;
    border-radius:    8px;
    background-color: var(--bubby-gray-light);
    flex-shrink:      0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--bubby-gray-mid);
    font-size:        1.4rem;
}

.bubby-menu-item__name {
    font-weight: 700;
    font-size:   0.95rem;
    color:       var(--bubby-gray-dark);
    margin:      0 0 4px;
}

.bubby-menu-item__desc {
    font-size:   0.85rem;
    color:       #000000;
    line-height: 1.6;
    margin:      0;
}

/* =============================================================================
   MENU CONTAINER  —  .menu-container / .menu-item
   -----------------------------------------------------------------------------
   Used for the organized Coffee Classics, Lotus Energy, and Pastry groups.
   Desktop: 2-column grid.  Mobile: single column, tighter type.
   ============================================================================= */

.menu-container {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   20px 32px;
    margin:                20px 0 28px;
    padding:               0;
    list-style:            none;
}

.menu-item {
    border-left:   3px solid var(--bubby-red);
    padding-left:  14px;
    box-sizing:    border-box;
}

.menu-item__name {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      1.05rem;
    font-weight:    700;
    color:          #000000;
    line-height:    1.2;     /* tight — prevents 3-line wrap on Android */
    margin:         0 0 4px;
    letter-spacing: 0.01em;
}

.menu-item__desc {
    font-size:   0.82rem;
    font-weight: 500;
    color:       #000000;
    line-height: 1.45;
    margin:      0;
}

/* Intro paragraph under category heading */
.bubby-menu-section__intro {
    font-size:   0.92rem;
    color:       #000000;
    line-height: 1.6;
    margin:      0 0 16px;
    font-style:  italic;
}

/* ── Mobile: single column, slightly smaller type ───────────────────────────── */
@media (max-width: 767px) {
    .menu-container {
        grid-template-columns: 1fr;   /* single column */
        gap:                   14px;
        margin:                16px 0 20px;
    }

    .menu-item__name {
        font-size:   0.97rem;   /* -1px to prevent 3-line wrap on Android */
        line-height: 1.15;
    }

    .menu-item__desc {
        font-size:   0.80rem;
        line-height: 1.4;
    }

    .menu-item {
        padding-left: 12px;
    }

    .menu-container .menu-item--with-img .bubby-food-menu__img {
        width:     40px;
        height:    40px;
        min-width: 40px;
    }
}

/* Flavors / options note box */
.bubby-menu-note {
    background:    var(--bubby-gray-light);
    border-left:   3px solid var(--bubby-red);
    border-radius: 0 4px 4px 0;
    padding:       14px 18px;
    margin:        16px 0 32px;
    font-size:     0.88rem;
    color:         #000000;
    line-height:   1.7;
}

.bubby-menu-note strong {
    display:      block;
    color:        var(--bubby-red);
    margin-bottom: 4px;
    font-size:    0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Food menu card grid */
.bubby-food-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
    margin-bottom:         40px;
}

.bubby-food-card {
    background:    #fff;
    border:        1px solid var(--bubby-gray-light);
    border-left:   3px solid var(--bubby-red);  /* red accent line, same as .menu-item */
    border-radius: 6px;
    padding:       18px 20px;
}

.bubby-food-card__img {
    width:         100%;
    height:        120px;
    object-fit:    cover;
    border-radius: 4px;
    display:       block;
    margin:        0 0 12px;
}

/* Food menu list rows: thumbnail + text (Breakfast / Bagels / Hash Browns) */
.menu-container .menu-item--with-img {
    display:        flex;
    flex-direction: row;
    align-items:    flex-start;
    gap:            12px;
}

.menu-container .menu-item--with-img .bubby-food-menu__img {
    width:         110px;
    height:        110px;
    min-width:     110px;
    object-fit:    cover;
    border-radius: 8px;
    flex-shrink:   0;
    display:       block;
}

.menu-container .menu-item--with-img .menu-item__body {
    flex:      1;
    min-width: 0;
}

.bubby-food-card__name {
    font-weight: 700;
    font-size:   0.95rem;
    color:       var(--bubby-gray-dark);
    margin:      0 0 6px;
}

.bubby-food-card__desc {
    font-size:   0.85rem;
    color:       #000000;
    line-height: 1.6;
    margin:      0;
}

/* ── Photo placeholder grid (Meet Bubby) ─────────────────────────────────────── */
.bubby-photo-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px;
    max-width:             680px;
    margin:                0 auto 48px;
}

.bubby-photo-grid > .bubby-photo-placeholder {
    min-height: 0;
}

.bubby-photo-placeholder {
    aspect-ratio:     1;
    background-color: var(--bubby-gray-light);
    border-radius:    10px;
    display:          block;
    overflow:         hidden;
    padding:          0;
    position:         relative;
}

.bubby-photo-placeholder img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ── Quote block ─────────────────────────────────────────────────────────────── */
.bubby-quote {
    background:    #fff;
    border-radius: 10px;
    max-width:     640px;
    margin:        0 auto 48px;
    padding:       36px 44px;
    text-align:    center;
    box-shadow:    0 2px 16px rgba(0, 0, 0, 0.06);
}

/* Red-background variant — matches .bubby-feature-card (Meet Bubby quote, About Us CTA) */
.bubby-quote--red {
    background-color: var(--bubby-red);
    border:           1px solid var(--bubby-red-hover);
    box-shadow:       none;
}

.bubby-quote--red .bubby-quote__text {
    color:       #ffffff;
    font-weight: 700;
}

.bubby-quote--red .bubby-section-body {
    color: #e9ecef;
}

.bubby-quote--red .bubby-quote__attribution {
    color: #e9ecef;
}

.bubby-quote--red .bubby-quote__name {
    color:      #ffffff;
    font-style: italic;
}

.bubby-quote--red strong {
    color: #ffffff;
}

.bubby-quote__text {
    font-family:  'Barlow Condensed', sans-serif;
    font-style:   italic;
    font-size:    clamp(1.1rem, 2.5vw, 1.4rem);
    color:        var(--bubby-gray-dark);
    line-height:  1.6;
    margin:       0 0 20px;
}

.bubby-quote__attribution {
    font-size:      0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color:          var(--bubby-gray-mid);
    margin:         0 0 4px;
}

.bubby-quote__name {
    font-size:   0.88rem;
    color:       var(--bubby-red);
    font-style:  italic;
    margin:      0;
}

/* ── Feature cards row (Faith & Hope, Unwavering Joy, Love for Others) ───────── */
.bubby-feature-cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   20px;
    max-width:             900px;
    margin:                0 auto 48px;
    padding:               0 44px;
}

.bubby-feature-card {
    background-color: var(--bubby-red);
    border:           1px solid var(--bubby-red-hover);
    border-radius:    10px;
    padding:          28px 24px;
    text-align:       center;
}

.bubby-feature-card__icon {
    font-size:     1.5rem;
    margin-bottom: 12px;
    color:         #ffffff;
}

.bubby-feature-card__title {
    font-weight:   700;
    font-size:     1rem;
    color:         #ffffff;
    margin:        0 0 8px;
}

.bubby-feature-card__text {
    font-size:   0.87rem;
    color:       #ffffff;
    line-height: 1.65;
    margin:      0;
}

/* ── "Back to Bubby's Place" button ──────────────────────────────────────────── */
.bubby-back-wrap {
    text-align: center;
    padding:    40px 44px;
}

.bubby-back-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    background-color: var(--bubby-gray-dark);
    color:            rgba(255, 255, 255, 0.85);
    text-decoration:  none;
    padding:          13px 30px;
    border-radius:    50px;
    font-size:        0.9rem;
    font-weight:      500;
    transition:       background-color 0.2s ease, color 0.2s ease;
}

.bubby-back-btn:hover {
    background-color: var(--bubby-red);
    color:            #fff;
    text-decoration:  none;
}

/* ── Content body sections (About, Visit, Contact) ───────────────────────────── */
.bubby-content-section {
    max-width:  1100px;
    margin:     0 auto;
    padding:    64px 44px;
}

.bubby-content-section--light {
    background-color: #fff;
}

.bubby-two-col {
    display:         grid;
    grid-template-columns: 1fr 1fr;
    gap:             60px;
    align-items:     center;
}

.bubby-img-placeholder {
    aspect-ratio:     4/3;
    background-color: var(--bubby-gray-light);
    border-radius:    12px;
    display:          block;
    overflow:         hidden;
    position:         relative;
}

.bubby-img-placeholder img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.bubby-section-label {
    font-size:      0.72rem;
    font-weight:    700;  /* bold so red text is readable on light backgrounds */
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color:          var(--bubby-red);
    margin:         0 0 10px;
    display:        block;
}

.bubby-section-title {
    font-family:  'Barlow Condensed', sans-serif;
    font-weight:  700;
    font-size:    clamp(1.8rem, 3.5vw, 2.6rem);
    color:        var(--bubby-gray-dark);
    line-height:  1.2;
    margin:       0 0 20px;
}

.bubby-section-body {
    font-size:   0.97rem;
    color:       #000000;
    line-height: 1.8;
    margin:      0 0 16px;
}

/* Icon trio (Locally Owned / Fresh Roasted / Made with Love) */
.bubby-icon-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:     20px;
    margin-top: 32px;
}

.bubby-icon-item__label {
    font-size:      0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color:          var(--bubby-red);
    font-weight:    600;
    margin:         8px 0 4px;
    display:        block;
}

.bubby-icon-item__desc {
    font-size:   0.82rem;
    color:       #000000;
    line-height: 1.5;
    margin:      0;
}

/* Contact cards row */
.bubby-contact-cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   20px;
    margin-bottom:         32px;
}

.bubby-contact-card {
    background:    #fff;
    border:        1px solid var(--bubby-gray-light);
    border-radius: 10px;
    padding:       32px 24px;
    text-align:    center;
}

.bubby-contact-card__icon {
    font-size:     1.8rem;
    color:         var(--bubby-red);
    margin-bottom: 14px;
}

.bubby-contact-card__title {
    font-weight:   700;
    font-size:     1.05rem;
    color:         var(--bubby-gray-dark);
    margin:        0 0 8px;
}

.bubby-contact-card__detail {
    font-size:   0.88rem;
    color:       #000000;
    margin:      0 0 10px;
    line-height: 1.6;
}

.bubby-contact-card__value {
    font-size:       0.9rem;
    font-weight:     600;
    color:           var(--bubby-gray-dark);
    text-decoration: none;
    display:         block;
}

.bubby-contact-card__value:hover {
    color: var(--bubby-red);
}

/* Hours table */
.bubby-hours-table {
    width:           100%;
    border-collapse: collapse;
    margin-top:      16px;
    font-size:       0.92rem;
}

.bubby-hours-table tr {
    border-bottom: 1px solid var(--bubby-gray-light);
}

.bubby-hours-table td {
    padding:     10px 0;
    color:       #000000;
    font-weight: 600;
}

.bubby-hours-table td:last-child {
    text-align:  right;
    font-weight: 600;
    color:       var(--bubby-red);
}

.bubby-hours-table .is-closed td:last-child {
    color:       var(--bubby-gray-mid);
    font-weight: 400;
}

/* ── Inner page responsive ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .bubby-page-banner {
        padding: 100px 24px 48px;
    }
    .bubby-tabs {
        padding: 16px 20px;
        gap: 8px;
    }
    .bubby-tab-btn {
        padding: 8px 16px;
        font-size: 0.82rem;
    }
    .bubby-menu-section {
        padding: 36px 24px;
    }
    .bubby-menu-items {
        grid-template-columns: 1fr;
    }
    .bubby-food-grid {
        grid-template-columns: 1fr;
    }
    .bubby-feature-cards {
        grid-template-columns: 1fr;
        padding: 0 24px;
    }
    .bubby-photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bubby-content-section {
        padding: 40px 24px;
    }
    .bubby-two-col {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .bubby-icon-trio {
        grid-template-columns: 1fr;
    }
    .bubby-contact-cards {
        grid-template-columns: 1fr;
    }
    .bubby-back-wrap {
        padding: 32px 24px;
    }

    /* ── Visit Us page: stack location → contact → hours vertically ─────────── */
    .bubby-visit-info-grid {
        display:               grid         !important;
        grid-template-columns: 1fr          !important;  /* single column */
        gap:                   20px         !important;
        padding:               0 15px       !important;
        max-width:             100%         !important;
        box-sizing:            border-box   !important;
    }

    /* Location above, contact below — natural source order keeps this */
    .bubby-visit-location,
    .bubby-visit-contact {
        width:      100%        !important;
        max-width:  100vw       !important;
        box-sizing: border-box  !important;
    }

    /* Hours box: full width, no bleed */
    .bubby-hours-table {
        width:      100%        !important;
        max-width:  100vw       !important;
        box-sizing: border-box  !important;
        font-size:  0.88rem     !important;  /* -1px equivalent to prevent Android overflow */
    }

    /* Stack day & time vertically on narrow screens */
    .bubby-hours-table tr {
        display:   block        !important;
        padding:   8px 0        !important;
    }
    .bubby-hours-table td {
        display:    block       !important;
        text-align: left        !important;
        padding:    2px 0       !important;
        color:      #000000     !important;
        font-weight: 600        !important;
    }
    .bubby-hours-table td:last-child {
        text-align:  left       !important;
        font-weight: 700        !important;
        color:       var(--bubby-red) !important;
        font-size:   0.86rem    !important;
    }

    /* Padding on content sections so text never touches screen edge */
    .bubby-content-section--light .bubby-two-col > div {
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* ── Tagline: width-lock forces 2-line wrap on narrow Android screens ───────── */
    .bubby-hero__tagline {
        max-width:    83vw  !important;
        margin-left:  auto  !important;
        margin-right: auto  !important;
        text-align:   center !important;
    }

    /* ── Meet Bubby: force heading onto 2 lines + center each line on mobile ──────── */
    .bubby-meet-heading {
        text-align: center !important;
    }
    .bubby-meet-heading__line1 {
        display:    block;
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .bubby-food-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bubby-feature-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ==========================================================================
   Bubby's Place - Premium Menu Responsive Grid & Cards
   ========================================================================== */
.bubby-menu-items {
    display: grid;
    grid-template-columns: 1fr; /* 1 column layout on mobile screens */
    gap: 20px;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .bubby-menu-items {
        grid-template-columns: 1fr 1fr; /* 2 sleek columns on desktop and tablets */
    }
}

.bubby-menu-item {
    display: flex;
    flex-direction: column; /* Stacks image nicely above text on narrow phones */
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

@media (min-width: 480px) {
    .bubby-menu-item {
        flex-direction: row; /* Shifts side-by-side once the phone has enough width */
        align-items: center;
        gap: 15px;
    }
}

.bubby-menu-item__img {
    width: 100%;
    height: 180px;
    object-fit: cover; /* Forces images to crop and fit cleanly without distortion */
}

@media (min-width: 480px) {
    .bubby-menu-item__img {
        width: 110px; /* Uniform, compact squares on tablets/desktop */
        height: 110px;
        min-width: 110px;
    }
}

.bubby-menu-item__name {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0 0 5px 0;
    color: #333;
    padding: 0 10px;
}

@media (min-width: 480px) {
    .bubby-menu-item__name {
        padding: 0;
    }
}

.bubby-menu-item__desc {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
    padding: 0 10px 10px 10px;
}

@media (min-width: 480px) {
    .bubby-menu-item__desc {
        padding: 0;
    }
}

/* Drinks menu: tight thumbnails on phones / small tablets (text stays beside image) */
@media (max-width: 768px) {
    .bubby-menu-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    .bubby-menu-item__img {
        width: 40px;
        height: 40px;
        min-width: 40px;
        max-width: 40px;
        flex-shrink: 0;
        object-fit: cover;
    }

    .bubby-menu-item > div {
        flex: 1;
        min-width: 0;
    }
}

/* ─── Bubby's Place top bar (contact + social) — matches scrolled main header ─ */
.bubbys-top-bar {
    position:         relative;
    z-index:          9999;
    background-color: var(--bubby-gray-dark); /* same as .bubby-header--scrolled / #555e67 */
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    font-family: sans-serif;
}
.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.top-bar-info {
    margin-right: 20px;
}
a.top-bar-info--link {
    color:           inherit;
    text-decoration: none;
}
a.top-bar-info--link:hover,
a.top-bar-info--link:focus-visible {
    color:           #d2b48c;
    text-decoration: none;
}
.top-bar-social-icon {
    color: #ffffff;
    text-decoration: none;
    margin-left: 15px;
    font-weight: bold;
    transition: color 0.2s ease;
}
.top-bar-social-icon:hover {
    color: #d2b48c;
}
@media (max-width: 600px) {
    .top-bar-container {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    .top-bar-info {
        margin: 0 10px;
    }
}

.bubbys-footer-socials {
    text-align: center;
    margin: 20px 0;
    font-family: sans-serif;
}
.footer-social-title {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff; /* Assumes a dark gray/black footer, adjust if needed */
    margin-bottom: 10px;
}
.footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.footer-social-link {
    color: #cccccc; /* Subtle gray link color */
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: color 0.2s ease;
}
/* Turns our branded red when hovered */
.footer-social-link:hover {
    color: #FF3008;
}