/*
Theme Name: GutsyBites
Theme URI: https://gutsybites.com
Description: Custom theme for GutsyBites - Family health made fun
Version: 1.1.1
*/

/* ============================================
   BREAKPOINT SYSTEM (Standardized)
   ============================================
   xs:  480px  - Small phones
   sm:  640px  - Phones
   md:  768px  - Tablets (PRIMARY BREAKPOINT)
   lg:  900px  - Small desktop / nav collapse
   xl: 1024px  - Desktop
   2xl: 1280px - Large desktop

   Usage: @media (max-width: 768px) for tablet-down
          @media (max-width: 480px) for small-phone-only
          @media (max-width: 900px) for nav-collapse only
   ============================================ */

/* ============================================
   COLOR VARIABLES
   ============================================ */
:root {
    --color-hero-primary: #a6feff;
    --color-hero-accent: #56c878;
    --color-nav-bg: #ffffff;
    --color-nav-text: #004143;
    --color-nav-hover: #56c878;
    --color-text-dark: #004143;
    --color-base: #ffffff;
    --color-nav-cta-bg: #56c878;
    --color-glass-border: rgba(0, 0, 0, 0.1);
}

html.dark-theme {
    --color-hero-primary: #005152;
    --color-hero-accent: #25723c;
    --color-nav-bg: #1a1a1a;
    --color-nav-text: #e0f0f0;
    --color-nav-hover: #56c878;
    --color-text-dark: #e0f0f0;
    --color-base: #0a0a0a;
    --color-glass-border: rgba(255, 255, 255, 0.1);
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden; /* Prevent horizontal scroll from 100vw elements */
}

body {
    margin: 0;
    padding: 0;
    padding-top: 4rem;
    overflow-x: hidden;
    font-family: var(--wp--preset--font-family--outfit, "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    line-height: 1.6;
    color: var(--color-text-dark);
    background: var(--color-base);
    /* Note: overflow-x: hidden is on html element - no need to duplicate */
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Respect WordPress inline margin styles */
.wp-block-heading[style*="margin"] {
    margin-top: var(--wp-heading-margin-top, 0);
    margin-bottom: var(--wp-heading-margin-bottom, 1rem);
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }

p {
    margin-bottom: 1rem;
}

/* Tighter spacing for tag-pills before headings */
p:has(.tag-pill) {
    margin-bottom: 0.75rem;
}

/*
 * NOTE ON !important USAGE:
 * These declarations override WordPress core block styles that use
 * inline styles. Without !important, the user's chosen margins
 * wouldn't apply. This is a documented WordPress pattern.
 */
.wp-block-heading[style*="margin-top:0"] {
    margin-top: 0 !important;
}
.wp-block-heading[style*="margin-bottom:0"] {
    margin-bottom: 0 !important;
}

/* ============================================
   TOUCH DEVICE FIX - Eliminate tap delay
   ============================================ */
a, button, input, select, textarea, [role="button"],
.wp-block-button__link, .wp-element-button, .btn {
    touch-action: manipulation;
}

/* ============================================
   LAYOUT - Full Width Support
   ============================================ */
.site-main,
.site-main > article {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.entry-content {
    max-width: 100%;
    overflow-x: hidden;
}

/* Hide empty paragraphs that WordPress sometimes adds */
.entry-content > p:empty {
    display: none;
}

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

/*
 * Block Gap Overrides - These !important are needed because WordPress
 * applies block gap via inline styles that otherwise can't be overridden.
 * Required for seamless section transitions in full-width layouts.
 */
.entry-content > .wp-block-group + .wp-block-group,
.entry-content > .wp-block-cover + .wp-block-group,
.entry-content > .wp-block-group + .wp-block-cover {
    margin-top: 0 !important;
}

.entry-content > .alignfull + .alignfull {
    margin-top: 0 !important;
}

/* Full-width sections should have no external gaps */
.entry-content > .alignfull.wp-block-group,
.entry-content > .alignfull.wp-block-cover {
    margin-top: 0;
    margin-bottom: 0;
}

/* Override WordPress layout gap for seamless full-width sections */
.entry-content.wp-block-post-content {
    --wp--style--block-gap: 0;
}

/* Ensure no borders or box-shadows create visual lines */
.entry-content > .alignfull {
    border: none;
    box-shadow: none;
}

.alignwide {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   HERO - Overlap fixed header
   Full-bleed hero should go under the nav bar
   ============================================ */

/* Remove body padding when first block is full-width cover */
body:has(.entry-content > .wp-block-cover.alignfull:first-child) {
    padding-top: 0;
}

/* Adaptive background - body background matches first block */
html {
    background-color: var(--adaptive-bg-color, #ffffff);
}

html.dark-theme {
    background-color: var(--adaptive-bg-color, #0a1214);
}

body {
    background-color: inherit;
}

/* Hero cover block goes edge-to-edge, content centered */
/* Note: Don't force min-height here - let inline styles from WordPress control it.
   Forcing 100vh breaks iOS Safari scrolling on pages with shorter heroes (like About). */
.entry-content > .wp-block-cover.alignfull:first-child {
    padding-top: 4rem; /* Space for nav bar */
}

/* Center content vertically regardless of WordPress position setting */
.entry-content > .wp-block-cover.alignfull:first-child {
    align-items: center;
    justify-content: center;
}

/* ============================================
   BUTTONS
   ============================================
   NOTE: These !important declarations are required because:
   1. WordPress core applies inline styles via theme.json
   2. The Gutenberg editor sets default button colors
   3. Without !important, the brand pill button style can't override
   This is a known WordPress pattern for theme button consistency.
   ============================================ */
.btn,
.wp-block-button__link,
.wp-element-button,
.wp-block-button .wp-element-button {
    display: inline-block !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    border: none !important;
    cursor: pointer;
    background: var(--wp--preset--color--hero-accent, #56c878) !important;
    color: white;
}

/* Respect WordPress text color settings */
.wp-block-button .wp-block-button__link.has-text-dark-color,
.wp-block-button .wp-element-button.has-text-dark-color {
    color: var(--wp--preset--color--text-dark, #004143) !important;
}

/* Black text explicitly set */
.wp-block-button__link.has-black-color,
.wp-element-button.has-black-color,
.wp-block-button .wp-block-button__link[style*="color:#000"],
.wp-block-button .wp-block-button__link[style*="color: #000"],
.wp-block-button .wp-block-button__link[style*="color:black"],
.wp-block-button .wp-block-button__link[style*="color: black"],
.wp-block-button .wp-block-button__link[style*="color:rgb(0, 0, 0)"],
.wp-block-button .wp-block-button__link[style*="color: rgb(0, 0, 0)"] {
    color: #000000 !important;
}

@media (hover: hover) {
    .btn:hover,
    .wp-block-button__link:hover,
    .wp-element-button:hover {
        transform: scale(1.05);
    }
}

/* Override WordPress inline styles - force green unless explicitly set */
.wp-block-button:not(.is-style-outline) .wp-block-button__link[style*="background"],
.wp-block-button:not(.is-style-outline) .wp-element-button[style*="background"] {
    background: var(--wp--preset--color--hero-accent, #56c878) !important;
}

/* If user picks white, override it to green (white buttons look broken) */
.wp-block-button__link[style*="background-color:#ffffff"],
.wp-block-button__link[style*="background-color: #ffffff"],
.wp-block-button__link[style*="background-color:rgb(255, 255, 255)"],
.wp-block-button__link[style*="background-color: rgb(255, 255, 255)"],
.wp-element-button[style*="background-color:#ffffff"],
.wp-element-button[style*="background-color: #ffffff"],
.wp-block-button__link.has-base-white-background-color,
.wp-element-button.has-base-white-background-color,
.wp-block-button .has-background {
    background: var(--wp--preset--color--hero-accent, #56c878) !important;
}

/* WordPress has-X-background-color classes - ensure green default */
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background,
.wp-block-button:not(.is-style-outline) .wp-element-button.has-background {
    background: var(--wp--preset--color--hero-accent, #56c878) !important;
}

/* Outline Button Style - Default dark teal */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
    background: transparent !important;
    border: 2px solid var(--color-text-dark, #004143) !important;
    color: var(--color-text-dark, #004143) !important;
}

@media (hover: hover) {
    .wp-block-button.is-style-outline .wp-block-button__link:hover,
    .wp-block-button.is-style-outline .wp-element-button:hover {
        background: rgba(0, 65, 67, 0.1) !important;
        transform: scale(1.05);
    }

    /* Outline button hover on colored backgrounds */
    [style*="background-color"] .wp-block-button.is-style-outline .wp-block-button__link:hover,
    [style*="background-color"] .wp-block-button.is-style-outline .wp-element-button:hover,
    [style*="background:"] .wp-block-button.is-style-outline .wp-block-button__link:hover,
    [style*="background:"] .wp-block-button.is-style-outline .wp-element-button:hover {
        background: rgba(0, 65, 67, 0.1) !important;
    }
}

/* Adaptive Filled Button - uses section text color as background */
.wp-block-button.is-style-adaptive .wp-block-button__link:not(.has-background),
.wp-block-button.adaptive-btn .wp-block-button__link:not(.has-background) {
    background: currentColor !important;
}

.wp-block-button.is-style-adaptive .wp-block-button__link,
.wp-block-button.adaptive-btn .wp-block-button__link {
    border: none !important;
}

.wp-block-button.is-style-adaptive .wp-block-button__link:not(.has-text-color) span,
.wp-block-button.adaptive-btn .wp-block-button__link:not(.has-text-color) span,
.wp-block-button.is-style-adaptive .wp-block-button__link:not(.has-text-color),
.wp-block-button.adaptive-btn .wp-block-button__link:not(.has-text-color) {
    /* Text color contrasts with currentColor background */
    color: color-mix(in srgb, currentColor 0%, white) !important;
    -webkit-text-fill-color: white;
}

@media (hover: hover) {
    .wp-block-button.is-style-adaptive .wp-block-button__link:hover,
    .wp-block-button.adaptive-btn .wp-block-button__link:hover {
        filter: brightness(1.1);
        transform: scale(1.05);
    }
}

/* ============================================
   BENEFIT PILLS - Subtle highlight style
   Use class "benefit-list" on parent or "benefit-pill" on items
   ============================================ */

/* Option 1: Add class "benefit-list" to parent group/column */
.benefit-list p,
.benefit-list li {
    display: inline-block;
    background: rgba(86, 200, 120, 0.2); /* Soft green, darker than mint */
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* Option 2: Add class "benefit-pill" directly to paragraph */
p.benefit-pill,
.benefit-pill {
    display: inline-block;
    background: rgba(86, 200, 120, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    margin-bottom: 0.5rem;
}

/* Option 3: Benefit with left accent bar instead of pill */
.benefit-bar {
    border-left: 3px solid #56c878;
    padding-left: 1rem;
    margin-bottom: 0.75rem;
}

/* Option 4: Simple dot indicator */
.benefit-dot::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #56c878;
    border-radius: 50%;
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* Option 5: Soft card style */
.benefit-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(86, 200, 120, 0.3);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Energy Reset specific: Style benefits in mint section */
/* Targets paragraphs in nested columns within the c6fee0 section */
.has-background[style*="c6fee0"] .wp-block-columns .wp-block-columns .wp-block-column p {
    background: rgba(0, 80, 60, 0.12); /* Darker teal-green tint */
    padding: 0.5rem 0.875rem;
    border-radius: 1.5rem;
    margin-bottom: 0.5rem;
    display: inline-block;
    line-height: 1.4;
}

/* ============================================
   GLASS EFFECT
   ============================================ */
.glass {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
}

html.dark-theme .glass {
    background: rgba(17, 24, 39, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   HIGHLIGHTS
   ============================================ */
.text-highlight,
.yellow-highlight {
    background: linear-gradient(180deg, transparent 50%, #f3fc83 50%);
    padding: 0 0.15em;
}

.mint-highlight {
    background-color: #a6feff;
    padding: 0 0.15em;
}

.band-highlight {
    background: linear-gradient(180deg, transparent 35%, #f3fc83 35%, #f3fc83 65%, transparent 65%);
    padding: 0 0.15em;
}

html.dark-theme .text-highlight,
html.dark-theme .yellow-highlight {
    background: linear-gradient(180deg, transparent 50%, rgba(243, 252, 131, 0.3) 50%);
}

html.dark-theme .mint-highlight {
    background-color: rgba(166, 254, 255, 0.3);
}

html.dark-theme .band-highlight {
    background: linear-gradient(180deg, transparent 35%, rgba(243, 252, 131, 0.3) 35%, rgba(243, 252, 131, 0.3) 65%, transparent 65%);
}

/* ============================================
   MARQUEE ANIMATION
   ============================================ */
.marquee-banner {
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
}

/* Full-width marquee fix - ensure no gaps */
.alignfull .marquee-banner,
.wp-block-group.alignfull .marquee-banner,
.marquee-banner.alignfull {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
}

.marquee-text {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-banner:hover .marquee-text {
    animation-play-state: paused;
}

/* Slower marquee on mobile for readability */
@media (max-width: 768px) {
    .marquee-text {
        animation-duration: 45s;
    }
}

/* Mobile marquee - fill parent alignfull container, don't try to break out further */
@media (max-width: 480px) {
    .alignfull .marquee-banner,
    .wp-block-group.alignfull .marquee-banner,
    .marquee-banner.alignfull {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ============================================
   TAG PILLS
   Auto-adapts to section text color using color-mix
   ============================================ */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    /* Auto-adapts to text color of parent container */
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: inherit;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   COLUMNS
   ============================================ */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.wp-block-column {
    flex: 1;
    min-width: min(280px, 100%);  /* Responsive: won't exceed viewport on small phones */
    display: flex;
    flex-direction: column;
}

/* Equal height boxes within columns */
.wp-block-column > .wp-block-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Center content vertically within equal-height boxes */
.wp-block-column > .wp-block-group > p,
.wp-block-column > .wp-block-group > .wp-block-paragraph {
    margin: auto 0;
}

/* Outer columns get extra margin from screen edges on desktop */
@media (min-width: 769px) {
    .wp-block-columns > .wp-block-column:first-child {
        margin-left: 2rem;
    }

    .wp-block-columns > .wp-block-column:last-child {
        margin-right: 2rem;
    }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    /* Hero takes full viewport height on mobile - true full screen */
    /* Uses lvh (large viewport height) - maximum height assuming browser UI is hidden */
    .entry-content > .wp-block-cover.alignfull:first-child {
        min-height: 100vh !important; /* Fallback */
        min-height: 100lvh !important; /* Large - assumes browser UI hidden */
        /* Extend into safe areas - negative margin pulls into notch area */
        margin-top: calc(-1 * env(safe-area-inset-top, 0px)) !important;
        padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    /* Hero headline bigger on mobile, moved higher */
    .entry-content > .wp-block-cover.alignfull:first-child h1 {
        font-size: clamp(4rem, 14vw, 5rem) !important;
        margin: 0 !important;
        margin-top: -2rem !important;
        padding: 0 !important;
    }

    /* !important needed to override inline styles from WordPress editor */
    h1 {
        font-size: clamp(2.75rem, 9vw, 3.5rem) !important;
        max-width: 100% !important;
        width: auto !important;
    }

    /* Allow text to wrap on mobile */
    h1, h2, h3, p {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    h3 { font-size: 1.5rem; }

    .wp-block-columns {
        flex-direction: column;
    }

    .wp-block-column {
        min-width: 100%;
    }

    /* Improve tag pill readability on mobile */
    .tag-pill {
        font-size: 1rem;
    }
}

/* Extra small mobile (iPhone SE, 320px phones) */
@media (max-width: 480px) {
    h1 {
        font-size: clamp(2.5rem, 10vw, 3rem) !important;
        max-width: 100% !important;
        width: auto !important;
    }
    h3 { font-size: 1.25rem; }

    /* No body padding on mobile - full-width blocks go edge-to-edge naturally */
    body {
        padding-top: 3.5rem;
        padding-left: 0;
        padding-right: 0;
    }

    /* Content padding applied to entry-content, but alignfull breaks out */
    .entry-content {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    /* Full-width elements break out of entry-content padding */
    .entry-content > .alignfull {
        /* Break out of entry-content padding using negative margins */
        margin-left: calc(-1 * max(0.75rem, env(safe-area-inset-left))) !important;
        margin-right: calc(-1 * max(0.75rem, env(safe-area-inset-right))) !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Tighter padding on very small screens - but NOT for alignfull blocks */
    .wp-block-group:not(.alignfull) {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Alignfull group blocks (like marquee container) need no horizontal padding */
    .wp-block-group.alignfull:has(.marquee-banner) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Smaller button text on tiny screens */
    .btn,
    .wp-block-button__link,
    .wp-element-button {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.9rem !important;
    }

    /* Prevent text overflow on small screens */
    p, li, span {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Touch-friendly tap targets for all interactive elements */
@media (pointer: coarse) {
    a,
    button,
    input,
    select,
    textarea,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Ensure adequate spacing between tappable elements */
    .wp-block-buttons .wp-block-button {
        margin-bottom: 0.5rem;
    }
}

/* ============================================
   GUTSYBITES DESIGN SYSTEM (Native WP Blocks)
   Migrated from custom-gutsybites-styles.css to keep
   front-end in sync with the Next.js design
   ============================================ */

/* Local fonts loaded via fonts/local-fonts.css - no external requests (GDPR compliant) */
/* Fonts: Outfit (body), Poppins (headings) - all self-hosted */

/*
 * Design System Variables - Consolidated
 *
 * These --gb-color-* variables now reference --color-* (customizer-controlled)
 * with fallbacks for when customizer values aren't set.
 * This bridges the design system with user customization.
 */
:root {
    /* Primary colors - linked to customizer */
    --gb-color-primary: var(--color-hero-accent, #56c878);
    --gb-color-secondary: var(--color-hero-primary, #a6feff);

    /* Background colors - linked to customizer */
    --gb-color-background: var(--color-base, #ffffff);
    --gb-color-background-alt: var(--color-light-gray, #f3f4f6);

    /* Text colors - linked to customizer */
    --gb-color-text: var(--color-text-dark, #004143);
    --gb-color-text-light: #64748b;

    /* Typography */
    --gb-font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
    --gb-font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing & Radius */
    --gb-radius-sm: 0.25rem;
    --gb-radius-md: 0.5rem;
    --gb-radius-lg: 1rem;

    --gb-space-4: 1rem;
    --gb-space-6: 1.5rem;
    --gb-space-8: 2rem;
    --gb-space-12: 3rem;
}

/* Dark mode - linked to customizer dark mode values */
@media (prefers-color-scheme: dark) {
    :root {
        --gb-color-primary: var(--color-hero-accent-dark, #6fe3aa);
        --gb-color-secondary: var(--color-hero-primary-dark, #a7f3d0);
        --gb-color-background: var(--color-dark-bg, #0a0a0a);
        --gb-color-background-alt: #111827;
        --gb-color-text: var(--color-dark-text, #ffffff);
        --gb-color-text-light: #94a3b8;
    }
}

/* Respect existing theme toggle cookie */
html.dark-theme {
    --gb-color-primary: var(--color-hero-accent-dark, #6fe3aa);
    --gb-color-secondary: var(--color-hero-primary-dark, #a7f3d0);
    --gb-color-background: var(--color-dark-bg, #0a0a0a);
    --gb-color-background-alt: #111827;
    --gb-color-text: var(--color-dark-text, #ffffff);
    --gb-color-text-light: #94a3b8;
}

body {
    font-family: var(--gb-font-body);
    color: var(--gb-color-text);
    background: var(--gb-color-background);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--gb-font-heading);
}

/* Buttons - .button class only (main button styles are above) */
.button,
a.button {
    background: var(--gb-color-primary, var(--color-nav-cta-bg, #56c878));
    color: white;
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

@media (hover: hover) {
    .button:hover {
        background: var(--gb-color-secondary, #45a865);
        transform: translateY(-2px);
    }
}

/* Glass effect */
.glass-effect,
.gutsybites-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--gb-radius-lg);
}

@media (prefers-color-scheme: dark) {
    .glass-effect,
    .gutsybites-glass {
        background: rgba(17, 24, 39, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Container widths (align with Next.js design) */
.wp-block-group__inner-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Section spacing */
.wp-block-group {
    padding-top: var(--gb-space-12);
    padding-bottom: var(--gb-space-12);
}

/* Cards / columns gap */
.wp-block-media-text,
.wp-block-columns {
    gap: var(--gb-space-8);
}

/* Rounded images */
.wp-block-image img {
    border-radius: var(--gb-radius-lg);
}

/* Featured image style - matches Energy Reset section */
.featured-image img,
.wp-block-image.featured-image img,
.wp-block-column.featured-image img {
    border-radius: 1.5rem;
    min-height: 400px;
    width: 100%;
    object-fit: cover;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .featured-image img,
    .wp-block-image.featured-image img {
        min-height: 300px;
    }
}

/* Links */
a {
    color: var(--gb-color-primary);
}

@media (hover: hover) {
    a:hover {
        color: var(--gb-color-secondary);
    }
}

/* Navigation block */
.wp-block-navigation a {
    font-weight: 500;
}

/* ============================================
   COVER BLOCK - Minimal overrides for WordPress 6.9
   Let WordPress core handle structure/positioning
   ============================================ */

/* Default text color for cover blocks - only when no custom color set */
.wp-block-cover {
    color: white;
}

/* Child elements inherit unless they have explicit colors */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover h4,
.wp-block-cover h5,
.wp-block-cover h6,
.wp-block-cover p,
.wp-block-cover .wp-block-paragraph,
.wp-block-cover .wp-block-heading {
    color: inherit;
}

/* Respect WordPress inline styles - elements with style attribute keep their color */
.wp-block-cover [style*="color"],
.wp-block-cover .has-text-color,
.wp-block-cover .has-text-dark-color,
.wp-block-cover .has-base-white-color,
.wp-block-cover [class*="has-"][class*="-color"] {
    color: inherit;
}

/* Respect WordPress color picker when Cover has custom text color */
.wp-block-cover.has-text-color,
.wp-block-cover.has-text-color h1,
.wp-block-cover.has-text-color h2,
.wp-block-cover.has-text-color h3,
.wp-block-cover.has-text-color p {
    color: inherit;
}

/* When Group block inside Cover has explicit text color, respect it */
.wp-block-cover .wp-block-group[style*="color"],
.wp-block-cover .wp-block-group.has-text-color {
    color: inherit;
}

.wp-block-cover .wp-block-group[style*="color"] h1,
.wp-block-cover .wp-block-group[style*="color"] h2,
.wp-block-cover .wp-block-group[style*="color"] h3,
.wp-block-cover .wp-block-group[style*="color"] p,
.wp-block-cover .wp-block-group.has-text-color h1,
.wp-block-cover .wp-block-group.has-text-color h2,
.wp-block-cover .wp-block-group.has-text-color h3,
.wp-block-cover .wp-block-group.has-text-color p {
    color: inherit;
}

/* Only apply border-radius to non-full-width covers */
.wp-block-cover:not(.alignfull) {
    border-radius: var(--gb-radius-lg);
}

/* Animations (lightweight) */
@media (prefers-reduced-motion: no-preference) {
    .wp-block-button__link,
    .wp-block-image {
        transition: transform 0.2s ease-out;
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .wp-block-button__link:hover {
        transform: translateY(-2px);
    }

    .wp-block-image:hover {
        transform: scale(1.02);
    }
}

/* ============================================
   AUDIENCE PILLARS - Kids & Parents Chat Bubbles
   Use class "audience-pillars" on the parent group
   ============================================ */
.audience-pillars {
    --section-padding-top: 3rem;
    --section-padding-bottom: 3rem;
    padding: var(--section-padding-top) 2rem var(--section-padding-bottom) 2rem;
    background-color: #C6FEFF;
}

.audience-pillars .wp-block-columns {
    max-width: 1200px;
    margin: 0 auto;
    gap: 0;
    align-items: flex-start !important; /* Override WP core !important */
}

/* Each pillar column - independent height, content flows naturally */
.audience-pillars .wp-block-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    align-self: flex-start !important; /* Each column only as tall as its content */
    flex-grow: 0 !important; /* Don't stretch to fill */
    flex-basis: auto !important;
    height: auto !important;
}

/* Kids column - pushed down */
.audience-pillars .wp-block-column:first-child {
    padding-top: 8rem;
    flex-basis: 50% !important;
}

/* Parents column - stays at top, independent flow */
.audience-pillars .wp-block-column:last-child {
    padding-top: 0;
    flex-basis: 50% !important;
}

/* Pillar headings - "for" on top, main word large below */
.audience-pillars .pillar-heading {
    font-size: 6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    line-height: 0.9;
    position: relative;
    z-index: 10;
    text-shadow: 2px 2px 0 rgba(255,255,255,0.3);
}

/* "for" prefix - medium text above */
.audience-pillars .pillar-prefix {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

/* Kids heading - yellow, overlaps bubble on left */
.audience-pillars .wp-block-column:first-child .pillar-heading {
    color: #FFD300;
    text-align: right;
    margin-right: -10%;
    margin-bottom: -0.6em;  /* em = relative to font-size */
    padding-right: 15px;
    text-shadow: 2px 2px 0 rgba(0,66,67,0.15);
}

.audience-pillars .wp-block-column:first-child .pillar-prefix {
    text-align: left;
    padding-left: 15px; /* Align similar to Parents "for" distance */
}

/* Parents heading - dark teal, overlaps bubble on right */
.audience-pillars .wp-block-column:last-child .pillar-heading {
    color: #004243;
    text-align: left;
    margin-left: -10%;
    margin-bottom: -0.6em;  /* em = relative to font-size */
    padding-left: 15px;
    text-shadow: 2px 2px 0 rgba(255,255,255,0.2);
}

.audience-pillars .wp-block-column:last-child .pillar-prefix {
    text-align: left;
    padding-left: 15px;
}

/* ============================================
   CHAT BUBBLES - Core Styling
   Solid bubbles with blend-mode overlap effect
   ============================================ */
.chat-bubble {
    position: relative;
    padding: 3.5rem 2rem 2rem 2rem; /* Extra top padding for headline overlap */
    border-radius: 1.5rem;
    max-width: min(340px, 90vw);  /* Responsive: won't exceed 90% viewport on small phones */
    color: var(--color-text-dark, #004143);
    border: none;
    box-shadow: 0 8px 32px rgba(0,66,67,0.08);
}

/* Kids bubble - pull right to overlap, on TOP */
.audience-pillars .wp-block-column:first-child .chat-bubble {
    margin-left: auto;
    margin-right: -25px;
    z-index: 3;
}

/* Parents bubble - pull left, underneath Kids */
.audience-pillars .wp-block-column:last-child .chat-bubble {
    margin-right: auto;
    margin-left: -25px;
    z-index: 2;
}

/* Text inside bubbles - clean, no extra background needed */
.chat-bubble p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 500;
    position: relative;
    z-index: 10;
}

/* Chat bubble pointer - large sharp triangle using clip-path */
.chat-bubble::after {
    content: '';
    position: absolute;
    z-index: -1;
}

/* Kids bubble - solid yellow-green, more top padding for KIDS headline */
.chat-bubble-kids {
    --bubble-bg: #F3FC97;
    background: var(--bubble-bg);
    padding-top: 4rem;
}

/* Kids pointer - LARGE triangle pointing RIGHT toward Parents */
.chat-bubble-kids::after {
    right: -70px;
    top: 50%;
    margin-top: -40px;
    width: 100px;
    height: 80px;
    background: var(--bubble-bg);
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* Parents bubble - solid teal, compact with top padding for PARENTS headline */
.chat-bubble-parents {
    --bubble-bg: #97DEDF;
    background: var(--bubble-bg);
    padding: 3rem 1.75rem 1.5rem 1.75rem;
}

/* Parents pointer - LARGE triangle pointing LEFT toward Kids */
.chat-bubble-parents::after {
    left: -55px;
    top: 50%;
    margin-top: -30px;
    width: 80px;
    height: 60px;
    background: var(--bubble-bg);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* Pillar CTAs - tight spacing from bubbles */
.audience-pillars .wp-block-buttons {
    margin-top: 1rem;
}

.audience-pillars .wp-block-button__link {
    padding: 0.75rem 1.75rem;
    font-size: 0.9rem;
    border-radius: 9999px !important;
}

/* Kids CTA - yellow, aligned right */
.audience-pillars .wp-block-column:first-child .wp-block-buttons {
    justify-content: flex-end;
    padding-right: 30px;
    margin-top: 1.25rem;
}

.audience-pillars .wp-block-column:first-child .wp-block-button__link {
    background-color: #FFD300 !important;
    color: #004243 !important;
}

/* Parents CTA - dark teal, aligned left */
.audience-pillars .wp-block-column:last-child .wp-block-buttons {
    justify-content: flex-start;
    padding-left: 30px;
    margin-top: 1rem;
}

.audience-pillars .wp-block-column:last-child .wp-block-button__link {
    background-color: #004243 !important;
    color: #ffffff !important;
}

/* ============================================
   AUDIENCE PILLARS - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    .audience-pillars {
        --section-padding-top: 2rem;
        --section-padding-bottom: 2rem;
        padding: var(--section-padding-top) 1.5rem var(--section-padding-bottom) 1.5rem;
    }

    .audience-pillars .wp-block-columns {
        flex-direction: column;
        gap: 2.5rem;
    }

    .audience-pillars .wp-block-column {
        width: 100%;
    }

    /* Reset stagger on mobile - both columns at top */
    .audience-pillars .wp-block-column:first-child,
    .audience-pillars .wp-block-column:last-child {
        padding-top: 0;
    }

    /* Mobile headings - bigger main word, smaller "for" */
    .audience-pillars .pillar-heading {
        font-size: clamp(3.5rem, 14vw, 4.5rem) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: -0.4em !important;  /* em = relative to font-size */
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        z-index: 5;
    }

    .audience-pillars .pillar-prefix {
        font-size: 0.9rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Both Kids and Parents: left aligned on mobile */
    .audience-pillars .wp-block-column:first-child .pillar-heading,
    .audience-pillars .wp-block-column:first-child .pillar-prefix,
    .audience-pillars .wp-block-column:last-child .pillar-heading,
    .audience-pillars .wp-block-column:last-child .pillar-prefix {
        text-align: left !important;
    }

    /* Mobile bubbles - taller, text at bottom */
    .audience-pillars .wp-block-column:first-child .chat-bubble,
    .audience-pillars .wp-block-column:last-child .chat-bubble {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        min-height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .chat-bubble-kids,
    .chat-bubble-parents {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Mobile arrows - pointing DOWN toward buttons, same shape */
    .chat-bubble-kids::after,
    .chat-bubble-parents::after {
        left: 50%;
        right: auto;
        top: auto;
        bottom: -25px;
        width: 50px;
        height: 30px;
        margin-left: -25px;
        margin-top: 0;
        transform: none;
        border-radius: 0;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    /* CTAs on mobile - more space from bubble arrow */
    .audience-pillars .wp-block-column:first-child .wp-block-buttons,
    .audience-pillars .wp-block-column:last-child .wp-block-buttons {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        margin-top: 2.5rem !important;  /* Space for arrow */
    }
}

/* ============================================
   DARK THEME - Audience Pillars
   ============================================ */
html.dark-theme .chat-bubble {
    color: #1a1a1a;
}

/* Dark mode: muted colors that match dark theme aesthetic */
html.dark-theme .chat-bubble-kids,
html.dark-theme .wp-block-group.chat-bubble-kids,
html.dark-theme div.chat-bubble-kids,
html.dark-theme .audience-pillars .chat-bubble-kids {
    --bubble-bg: #3d4a1a;
    background: #3d4a1a !important;
}

html.dark-theme .chat-bubble-kids::after,
html.dark-theme .wp-block-group.chat-bubble-kids::after,
html.dark-theme div.chat-bubble-kids::after,
html.dark-theme .audience-pillars .chat-bubble-kids::after {
    background: #3d4a1a !important;
}

html.dark-theme .chat-bubble-parents,
html.dark-theme .wp-block-group.chat-bubble-parents,
html.dark-theme div.chat-bubble-parents,
html.dark-theme .audience-pillars .chat-bubble-parents {
    --bubble-bg: #1a4a4c;
    background: #1a4a4c !important;
}

html.dark-theme .chat-bubble-parents::after,
html.dark-theme .wp-block-group.chat-bubble-parents::after,
html.dark-theme div.chat-bubble-parents::after,
html.dark-theme .audience-pillars .chat-bubble-parents::after {
    background: #1a4a4c !important;
}

/* Dark mode: chat bubble text should be light on dark backgrounds */
html.dark-theme .chat-bubble-kids,
html.dark-theme .chat-bubble-kids p,
html.dark-theme .chat-bubble-parents,
html.dark-theme .chat-bubble-parents p {
    color: #e4f5f6 !important;
}

/* Dark mode: audience pillar buttons */
html.dark-theme .audience-pillars .wp-block-column:first-child .wp-block-button__link {
    background-color: #c9a800 !important;
    color: #0a1214 !important;
}

html.dark-theme .audience-pillars .wp-block-column:last-child .wp-block-button__link {
    background-color: #006a6c !important;
    color: #ffffff !important;
}

/* ============================================
   ENERGY RESET SECTION - Benefit Checkmarks
   ============================================ */
.benefit-check {
    color: var(--color-hero-accent, #56c878);
    font-weight: 700;
    margin-right: 0.25rem;
}

/* Benefits list - tighter spacing */
.wp-block-media-text .wp-block-columns p {
    margin-bottom: 0.5rem;
}

/* Testimonial box styling */
.testimonial-box {
    position: relative;
}

.testimonial-box p:first-child {
    margin-bottom: 0.5rem;
}

.testimonial-box p:last-child {
    margin-bottom: 0;
}

/* Media & Text block - rounded image */
.wp-block-media-text figure img {
    border-radius: 1.5rem;
}

/* Media & Text - image fill mode with rounded corners */
.wp-block-media-text.is-image-fill .wp-block-media-text__media {
    border-radius: 1.5rem;
    overflow: hidden;
}

/* Energy Reset section buttons */
.wp-block-media-text .wp-block-buttons {
    gap: 1rem;
}

.wp-block-media-text .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--color-text-dark, #004143);
    color: var(--color-text-dark, #004143);
}

.wp-block-media-text .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: rgba(0, 65, 67, 0.1);
}

/* ============================================
   MEDIA & TEXT BLOCK - Layout Fixes
   ============================================ */

/* Constrain media-text width within sections */
.wp-block-group .wp-block-media-text {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure proper grid layout for media-text blocks */
.wp-block-media-text {
    display: grid;
    grid-template-columns: 45% 1fr;
    align-items: center;
    gap: 2rem;
}

/* Two-column image+content sections - equal gaps */
/* gapA and gapC come from parent padding (2rem), gapB from column gap */
.wp-block-group.alignfull > .wp-block-columns.are-vertically-aligned-center {
    gap: 2rem !important;  /* gapB: between image and content columns */
}

/* Content column - all direct children get consistent left margin to align with pills */
.wp-block-group.alignfull > .wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child > *:not(.wp-block-columns) {
    margin-left: 2rem;  /* Align text, tag, buttons with pills */
}

/* Headline specifically - ensure it aligns too */
.wp-block-group.alignfull > .wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child > h2,
.wp-block-group.alignfull > .wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child > .wp-block-heading {
    margin-left: 2rem !important;
}

/* Nested benefit pill columns stay at edge */
.wp-block-group.alignfull > .wp-block-columns > .wp-block-column:last-child > .wp-block-columns {
    margin-left: 0;
}

/* Mobile: Reset margins and center content when columns stack */
@media (max-width: 768px) {
    .wp-block-group.alignfull > .wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child > *:not(.wp-block-columns) {
        margin-left: 0;
    }

    .wp-block-group.alignfull > .wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child > h2,
    .wp-block-group.alignfull > .wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child > .wp-block-heading {
        margin-left: 0 !important;
    }

    .wp-block-group.alignfull > .wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child > .wp-block-buttons {
        justify-content: center;
    }
}

/* Image container - proper sizing */
.wp-block-media-text__media {
    margin: 0;
    min-height: 400px;
    overflow: hidden;
    border-radius: 1.5rem;
}

.wp-block-media-text__media img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    border-radius: 1.5rem;
}

/* Content side - centered within available space on desktop */
.wp-block-media-text__content {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ensure content children don't stretch full width */
.wp-block-media-text__content > * {
    max-width: 100%;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .wp-block-group > .wp-block-media-text,
    .wp-block-media-text {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
        row-gap: 1.5rem !important;
    }

    .wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 1fr !important;
    }

    .wp-block-media-text__media {
        min-height: 300px;
        order: -1; /* Image first on mobile */
    }

    .wp-block-media-text__media img {
        min-height: 300px;
    }

    .wp-block-media-text__content {
        padding: 0 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Stack benefits columns on mobile */
    .wp-block-media-text .wp-block-columns {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ============================================
   CARD DECK PARALLAX
   Overlapping cards with scroll parallax effect
   Use class "card-deck" on a Group or Columns block
   ============================================ */

.card-deck-parallax {
    padding: 1.5rem 2rem 3rem;
    overflow: visible;
}

.card-deck-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 0 0;
}

.deck-card {
    position: relative;
    width: min(252px, 80vw);  /* Responsive: won't exceed 80% viewport */
    min-width: min(224px, 75vw);
    background: var(--card-bg, #fff);
    border-radius: 1.5rem;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.12),
        0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    transform: rotate(var(--card-rotate, 0deg)) translateY(var(--card-offset-y, 0px)) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin-left: -42px;
    will-change: transform;
}

.deck-card:first-child {
    margin-left: 0;
}

.deck-card:hover {
    transform: rotate(0deg) translateY(-15px) scale(1.05) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.2),
        0 5px 20px rgba(0, 0, 0, 0.1);
    z-index: 10 !important;
}

.deck-card-image {
    position: relative;
    height: 245px;
    overflow: hidden;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.deck-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.deck-card:hover .deck-card-image img {
    transform: scale(1.1);
}

.deck-card-content {
    padding: 1rem;
}

.deck-card-subtitle {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #56c878;
    margin-bottom: 0.25rem;
}

.deck-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #004143;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.deck-card-text {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* Staggered z-index for visual depth */
.deck-card:nth-child(1) { z-index: 1; }
.deck-card:nth-child(2) { z-index: 3; }
.deck-card:nth-child(3) { z-index: 2; }
.deck-card:nth-child(4) { z-index: 4; }
.deck-card:nth-child(5) { z-index: 2; }
.deck-card:nth-child(6) { z-index: 1; }

/* IMAGE-ONLY CARD VARIANT
   Add class "deck-card-image-only" to show just the image
   Ratio: 10:7 (height:width) like playing cards
   ---------------------------------------------------- */
.deck-card.deck-card-image-only .deck-card-image {
    height: 360px;
    border-radius: 1.5rem;
}

.deck-card.deck-card-image-only .deck-card-content {
    display: none;
}

/* FLIP CARD FUNCTIONALITY
   Cards flip on click to reveal back content
   ---------------------------------------------------- */

/* Enable 3D perspective on flippable cards */
.deck-card.deck-card-flippable {
    perspective: 1000px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    cursor: pointer;
}

/* Inner container handles the flip */
.deck-card-flippable .deck-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 380px;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
}

/* Flipped state */
.deck-card-flippable.is-flipped .deck-card-inner {
    transform: rotateY(180deg);
}

/* Front and back faces */
.deck-card-flippable .deck-card-front,
.deck-card-flippable .deck-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1.5rem;
    overflow: hidden;
}

/* Front face */
.deck-card-flippable .deck-card-front {
    background: var(--card-bg, #fff);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.12),
        0 2px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

/* Make image fill available space on flippable cards */
.deck-card-flippable .deck-card-front .deck-card-image {
    flex: 1;
    height: auto;
    min-height: 200px;
}

/* Content area stays fixed size */
.deck-card-flippable .deck-card-front .deck-card-content {
    flex-shrink: 0;
}

/* Flip hint on front - only for flippable cards */
.deck-card-flip-hint {
    display: none;
}

.deck-card-flippable .deck-card-flip-hint {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.deck-card-flip-hint span {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
}

.deck-card-flippable:hover .deck-card-flip-hint {
    opacity: 1;
}

/* Back face */
.deck-card-flippable .deck-card-back {
    background: var(--card-back-bg, #004143);
    color: var(--card-back-text, #ffffff);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.15),
        0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Close button */
.deck-card-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deck-card-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Back card content */
.deck-card-back-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    padding-right: 2rem;
    line-height: 1.3;
}

.deck-card-back-content {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.6;
    overflow-y: auto;
}

.deck-card-back-content p {
    margin: 0 0 0.75rem 0;
}

.deck-card-back-content b,
.deck-card-back-content strong {
    font-weight: 700;
}

.deck-card-back-content i,
.deck-card-back-content em {
    font-style: italic;
}

.deck-card-back-content a {
    color: inherit;
    text-decoration: underline;
}

/* Back card link button */
.deck-card-back-link {
    display: inline-block;
    margin-top: auto;
    padding: 0.65rem 1.25rem;
    background: rgba(255, 255, 255, 0.2);
    color: inherit !important;
    text-decoration: none !important;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.deck-card-back-link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Gentler hover for flippable cards (don't scale, just lift slightly) */
.deck-card-flippable:hover {
    transform: rotate(var(--card-rotate, 0deg)) translateY(calc(var(--card-offset-y, 0px) - 8px)) !important;
}

/* Disable hover transforms when flipped */
.deck-card-flippable.is-flipped,
.deck-card-flippable.is-flipped:hover {
    transform: rotate(var(--card-rotate, 0deg)) translateY(var(--card-offset-y, 0px)) !important;
    z-index: 20 !important;
}

/* Hide back face on non-flippable cards (defensive) */
.deck-card:not(.deck-card-flippable) .deck-card-back {
    display: none !important;
}

.deck-card:not(.deck-card-flippable) .deck-card-inner {
    display: contents;
}

.deck-card:not(.deck-card-flippable) .deck-card-front {
    display: contents;
}

/* Mobile: Stack vertically with overlap */
@media (max-width: 768px) {
    .card-deck-inner {
        flex-direction: column;
        gap: 0; /* Remove gap, use negative margins for overlap */
        align-items: center;
    }

    .deck-card {
        margin-left: 0;
        width: 280px;
        max-width: 85%;
        /* Override inline styles but allow our mobile rotations */
        --card-offset-y: 0px !important;
    }

    /* Overlap cards vertically on mobile (except first) */
    .deck-card:not(:first-child) {
        margin-top: -2rem;
    }

    /* Alternating tilt and z-index for playful stacked effect */
    .deck-card:nth-child(1) { transform: rotate(-2deg); z-index: 1; }
    .deck-card:nth-child(2) { transform: rotate(1.5deg); z-index: 3; }
    .deck-card:nth-child(3) { transform: rotate(-1deg); z-index: 2; }
    .deck-card:nth-child(4) { transform: rotate(2deg); z-index: 4; }
    .deck-card:nth-child(5) { transform: rotate(-1.5deg); z-index: 2; }
    .deck-card:nth-child(6) { transform: rotate(1deg); z-index: 1; }

    .deck-card-image {
        height: 300px;
    }

    .deck-card.deck-card-image-only .deck-card-image {
        height: 400px;
    }

    .deck-card:hover {
        transform: rotate(0deg) translateY(-10px) scale(1.02) !important;
        z-index: 10 !important;
    }

    /* Flip cards on mobile */
    .deck-card-flippable .deck-card-inner {
        min-height: 420px;
    }

    .deck-card-flippable.is-flipped:hover {
        transform: none !important;
    }

    /* Always show flip hint on mobile (no hover) */
    .deck-card-flippable .deck-card-flip-hint {
        opacity: 1;
        background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .deck-card {
        transition: none;
    }
    .deck-card:hover {
        transform: rotate(var(--card-rotate, 0deg)) translateY(var(--card-offset-y, 0px)) !important;
    }
    .deck-card-image img {
        transition: none;
    }
    /* Instant flip for reduced motion */
    .deck-card-flippable .deck-card-inner {
        transition: none;
    }
    .deck-card-flip-hint {
        transition: none;
    }
    .deck-card-close {
        transition: none;
    }
    .deck-card-back-link {
        transition: none;
    }
}

/* ============================================
   BUTTON OVERRIDES - FINAL (highest priority)
   Forces green pill buttons everywhere
   ============================================ */
body .wp-block-button__link,
body .wp-element-button,
body .wp-block-button .wp-block-button__link,
body .wp-block-button .wp-element-button,
.wp-site-blocks .wp-block-button__link,
.wp-site-blocks .wp-element-button,
.wp-block-cover .wp-block-button__link,
.wp-block-cover .wp-element-button,
.wp-block-group .wp-block-button__link,
.wp-block-group .wp-element-button {
    background: #56c878 !important;
    border-radius: 9999px !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    display: inline-block !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Default white text - yields to WordPress color picker (.has-text-color) */
body .wp-block-button__link:not(.has-text-color),
body .wp-element-button:not(.has-text-color),
body .wp-block-button .wp-block-button__link:not(.has-text-color),
body .wp-block-button .wp-element-button:not(.has-text-color),
.wp-site-blocks .wp-block-button__link:not(.has-text-color),
.wp-site-blocks .wp-element-button:not(.has-text-color),
.wp-block-cover .wp-block-button__link:not(.has-text-color),
.wp-block-cover .wp-element-button:not(.has-text-color),
.wp-block-group .wp-block-button__link:not(.has-text-color),
.wp-block-group .wp-element-button:not(.has-text-color) {
    color: #ffffff !important;
}

/* Hover state for all buttons */
@media (hover: hover) {
    body .wp-block-button__link:hover,
    body .wp-element-button:hover,
    .wp-block-cover .wp-block-button__link:hover,
    .wp-block-cover .wp-element-button:hover {
        background-color: #45a865 !important;
        background: #45a865 !important;
        transform: scale(1.02);
    }
}

/* Outline buttons - only when explicitly set as outline style */
body .wp-block-button.is-style-outline .wp-block-button__link,
body .wp-block-button.is-style-outline .wp-element-button,
.wp-site-blocks .wp-block-button.is-style-outline .wp-block-button__link,
.wp-site-blocks .wp-block-button.is-style-outline .wp-element-button,
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline .wp-element-button {
    background-color: transparent !important;
    background: transparent !important;
    color: #004143 !important;
    border: 2px solid #004143 !important;
}

/* Outline buttons inside Cover blocks - use white for dark backgrounds */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline .wp-element-button {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* ============================================
   OUTLINE BUTTONS - Specific Background Colors
   Darker shades for light backgrounds, lighter for dark backgrounds
   ============================================ */

/* Pale cream backgrounds (#fffee2) - waitlist section → Dark olive outline */
[style*="#fffee2"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#fffee2"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#FFFEE2"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#FFFEE2"] .wp-block-button.is-style-outline .wp-element-button {
    color: #6B5D14 !important;
    border-color: #6B5D14 !important;
}

/* Yellow-green backgrounds (#d6f19d, #e6f2c5) → Dark olive outline */
[style*="#d6f19d"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#d6f19d"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#D6F19D"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#D6F19D"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#e6f2c5"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#e6f2c5"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#E6F2C5"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#E6F2C5"] .wp-block-button.is-style-outline .wp-element-button {
    color: #4A5A1A !important;
    border-color: #4A5A1A !important;
}

/* Light green backgrounds (#8ce5b2) → Dark green outline */
[style*="#8ce5b2"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#8ce5b2"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#8CE5B2"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#8CE5B2"] .wp-block-button.is-style-outline .wp-element-button {
    color: #1D5A3A !important;
    border-color: #1D5A3A !important;
}

/* Mint/teal backgrounds (#c4f4e6, #c6fee0, #c5f2e2) → Dark teal outline */
[style*="#c4f4e6"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#c4f4e6"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#c6fee0"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#c6fee0"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#c5f2e2"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#c5f2e2"] .wp-block-button.is-style-outline .wp-element-button {
    color: #0A5A5C !important;
    border-color: #0A5A5C !important;
}

/* Cyan backgrounds (#c6feff, #c8ffff, #a6feff) → Dark teal outline */
[style*="#c6feff"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#c6feff"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#C6FEFF"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#C6FEFF"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#c8ffff"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#c8ffff"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#C8FFFF"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#C8FFFF"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#a6feff"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#a6feff"] .wp-block-button.is-style-outline .wp-element-button {
    color: #006B6D !important;
    border-color: #006B6D !important;
}

/* Hero green backgrounds (#56c878) → Dark green outline */
[style*="#56c878"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#56c878"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#56C878"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#56C878"] .wp-block-button.is-style-outline .wp-element-button {
    color: #1A4D2E !important;
    border-color: #1A4D2E !important;
}

/* Sage/teal medium backgrounds (#81b7ae) → Dark teal outline */
[style*="#81b7ae"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#81b7ae"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#81B7AE"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#81B7AE"] .wp-block-button.is-style-outline .wp-element-button {
    color: #2A4A45 !important;
    border-color: #2A4A45 !important;
}

/* Dark sage/teal backgrounds (#4f8a85, #004143, #004243, #027742) → White outline */
[style*="#4f8a85"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#4f8a85"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#4F8A85"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#4F8A85"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#004143"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#004143"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#004243"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#004243"] .wp-block-button.is-style-outline .wp-element-button,
[style*="#027742"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="#027742"] .wp-block-button.is-style-outline .wp-element-button {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* ============================================
   FOCUS VISIBLE - Accessibility
   ============================================ */

/* Focus styles for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--color-hero-accent, #56c878);
    outline-offset: 2px;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure buttons have visible focus */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.btn:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-hero-accent, #56c878);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(86, 200, 120, 0.3);
}

/* Links focus state */
a:focus-visible {
    outline: 2px solid var(--color-hero-accent, #56c878);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Navigation links focus */
.nav-items li a:focus-visible,
.mobile-nav-items li a:focus-visible {
    outline: 2px solid var(--color-hero-accent, #56c878);
    outline-offset: 2px;
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS

   Fix for Safari iOS bug: IntersectionObserver incorrectly
   calculates positions for elements with CSS transforms.
   Solution: Use opacity-only for initial state, apply
   transform via @keyframes animation on visibility.
   ============================================ */

/* Keyframe animations - transform applied only during animation */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeSlideUpCard {
    from {
        opacity: 0;
        transform: translateY(25px) rotate(var(--card-rotate, 0deg));
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(var(--card-rotate, 0deg));
    }
}

@keyframes fadeScaleUp {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeSlideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeSlideFromRight {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Base state for animated elements - NO transform (Safari fix) */
.animate-on-scroll {
    opacity: 0;
}

/* Visible state - animation applies transform */
.animate-on-scroll.is-visible {
    animation: fadeSlideUp 0.35s ease-out forwards;
    animation-delay: var(--animation-delay, 0s);
}

/* Disable animations when JS sets .no-animations class */
.no-animations .animate-on-scroll {
    opacity: 1;
    transform: none;
    animation: none;
}

/* Disable animations when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* Staggered animations for card-like elements */
.deck-card.animate-on-scroll.is-visible {
    animation-name: fadeSlideUpCard;
}

/* Chat bubbles animation */
.chat-bubble.animate-on-scroll.is-visible {
    animation-name: fadeScaleUp;
}

/* Benefit pills - slide in from left/right */
.benefit-pill.animate-on-scroll:nth-child(odd).is-visible {
    animation-name: fadeSlideFromLeft;
}

.benefit-pill.animate-on-scroll:nth-child(even).is-visible {
    animation-name: fadeSlideFromRight;
}

/* ============================================
   QUOTE BLOCK - Remove default WordPress border
   WordPress adds a left border by default
   ============================================ */
.wp-block-quote,
blockquote {
    border: none;
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Full-width quote blocks - ensure no gaps */
.wp-block-quote.alignfull,
blockquote.alignfull {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* ============================================
   IMAGE CREDIT OVERLAY
   Subtle attribution for image photographers
   Used across multiple blocks
   ============================================ */
.gutsybites-image-credit {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.35rem 0.75rem;
    background: rgba(0, 0, 0, 0.55);
    font-size: 0.625rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    z-index: 5;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.gutsybites-image-credit__prefix,
.gutsybites-image-credit__link,
.gutsybites-image-credit__text {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-weight: 400;
}

.gutsybites-image-credit__link:hover {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: underline;
}

/* Image credit wrapper - wraps the img tag directly */
.gutsybites-image-credit-wrapper {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    /* Border radius is synced via JS from the image */
}

.gutsybites-image-credit-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    /* Ensure image fills wrapper */
    margin: 0;
}

/* Cover block variant - needs to fill the cover area */
.gutsybites-image-credit-wrapper--cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
}

.gutsybites-image-credit-wrapper--cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gutsybites-image-credit-wrapper--cover .gutsybites-image-credit {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}