/* ==========================================================================
   Miranda Gerber — custom.css (Optimized)
   ========================================================================== */

/* ==========================================================================
   Theme Palette — single source of truth for site colors.
   Change a value here to re-theme the whole site; class names below are
   deliberately generic (no color words) so HTML never needs to change when
   a color does. See CLAUDE.md for the canonical palette table/history.
   ========================================================================== */
:root {
    --color-ink: #212529;        /* charcoal — body text, dark buttons (Bootstrap default) */
    --color-accent: #C1CB44;     /* apple green — button hover, icon accents, logo frog */
    --color-urgent: #E62A7A;     /* bright pink — urgency/active states, badges, "sold" dot */
    --color-tint: #EBD2D6;       /* blush — dropdown/mobile-menu hover fills */
    --color-tint-line: #E6C7CC;  /* base blush — borders, underlines */
    --color-tint-soft: #fbeef1;  /* pale blush — soft banner backgrounds (e.g. workshop closed state) */
    --color-neutral: #f8f9fa;    /* light grey — section stripe bg; matches Bootstrap's own bg-light/accordion grey used elsewhere on the site */
    /* #25D366 (WhatsApp green) is intentionally NOT a variable here — it's
       WhatsApp's fixed brand color, not part of this site's own palette. */
}

/* Typography Utility Classes */
.font-handwriting {
    font-family: 'Caveat', cursive, sans-serif;
}
.font-body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}
.tracking-wide {
    letter-spacing: 0.15em;
}

/* Accordion Custom Styling */
.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: var(--color-ink);
    box-shadow: none;
}
.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0.125);
}
/* FAQ divider lines between questions — overrides the .border-bottom
   utility's default grey (both use !important; this wins on specificity). */
#faqAccordion .accordion-item {
    border-bottom-color: var(--color-tint-line) !important;
}

/* Global Button & Header Utilities */
.btn-hover-custom {
    background-color: #111111 !important;
    color: #ffffff !important; 
    border: none;
    transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}
.btn-hover-custom:hover,
.btn-hover-custom:focus {
    background-color: #444444 !important; 
    color: #ffffff !important; 
}
.align-btn-text {
    margin-bottom: 2px !important;
}
.navbar-brand-custom {
    letter-spacing: 0.05em;
    color: #111111;
    line-height: 1;
}
.nav-list-font {
    font-size: 0.8rem;
}
.nav-btn-text-size {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}
/* Standard CTA button sizing. Bootstrap's own .btn-dark / .btn-outline-dark
   are used directly as the button style across every page (no wrapper
   class), so sizing overrides live here rather than on a class that isn't
   in the HTML. .btn-sm variants (already intentionally small) and
   .btnScrollToTop / .btn-badge-star (their own fixed, non-Bootstrap
   sizing) are untouched. */
.btn-dark:not(.btn-sm),
.btn-outline-dark:not(.btn-sm) {
    font-size: 0.85rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.btn-dark.btn-lg,
.btn-outline-dark.btn-lg {
    font-size: 1rem;
}

/* Shared hover/focus state for every CTA button site-wide. Name is
   intentionally generic — swap --color-accent above to re-theme every
   button hover at once, no HTML changes needed. Button chrome (background,
   border) stays as-is on hover; only the text color shifts to accent green. */
.btn-hover-accent:hover,
.btn-hover-accent:focus {
    color: var(--color-accent) !important;
    font-weight: 600;
    transition: color 0.25s ease-in-out;
}

/* Same idea as .btn-hover-accent, for plain inline text links rather than
   buttons — e.g. the "Classes & Workshops" link in the FAQ answer. */
.link-hover-accent:hover,
.link-hover-accent:focus {
    color: var(--color-accent) !important;
    transition: color 0.25s ease-in-out;
}

/* Global Navbar Desktop Base */
.navbar {
    height: 70px !important; 
}
.navbar-brand img,
.navbar-brand-custom img {
    height: 80px !important;  
    width: auto !important;    
    max-height: none !important;
    position: relative;
    top: 10px; 
    z-index: 1050; 
    transition: all 0.3s ease-in-out;
}

/* ==========================================================================
   Navigation Links — Core Shared Styles
   ========================================================================== */
.nav-link-custom {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;    
    text-decoration: none;
    transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
}

/* Stripping Link Shadows Globally */
.navbar-nav .nav-item,
.navbar-nav .nav-link,
.navbar-nav a,
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.dropdown-toggle,
.gallery-dropdown-item {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
}

/* ==========================================================================
   Desktop-Specific Navigation (992px and up)
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. Ensure the main list container spans full width and aligns all items to the right */
    ul.navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    /* 1b. Pink underline on hover/focus for nav tabs (desktop only) */
    .nav-link-custom:not(.whatsapp-nav-icon) {
        border-bottom: 2px solid transparent !important;
        margin-left: 1px !important;
        margin-right: 1px !important;
        transition: border-color 0.25s ease-in-out, color 0.25s ease-in-out !important;
    }
    .nav-link-custom:not(.whatsapp-nav-icon):hover,
    .nav-link-custom:not(.whatsapp-nav-icon):focus,
    .nav-link-custom:not(.whatsapp-nav-icon).show {
        border-bottom: 2px solid var(--color-tint-line) !important;
    }
    .nav-link-custom:not(.whatsapp-nav-icon).active {
        border-bottom: 2px solid var(--color-urgent) !important;
    }

    /* 2. Style the individual WhatsApp list item wrapper */
    li.whatsapp-nav-icon-container {
        display: inline-flex !important;
        align-items: center !important;
        margin-left: 14px !important; /* Matches the uniform spacing gap between your menu items */
        padding: 0 !important;
    }

    /* 3. Keep the inner anchor link layout clean, visible, and square */
    li.whatsapp-nav-icon-container .whatsapp-nav-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        background-color: transparent !important;
        border: none !important;
    }

    /* 4. Enforce clean scaling for the Bootstrap icon */
    li.whatsapp-nav-icon-container .bi-whatsapp {
        font-size: 1.3rem !important;
        vertical-align: middle !important;
    }
}

/* ==========================================================================
   Mobile Responsive Adjustments (991px and down)
   ========================================================================== */
@media (max-width: 991px) {
    .navbar {
        height: 60px !important;
    }
    /* Bootstrap's .container caps out at 720px (md) / 540px (sm) and
       centers itself, which left a growing gap between the collapsed menu
       and the actual screen edge as viewport width increased toward a
       tablet — the hamburger button itself sits flush (it's positioned
       against .navbar, not .container) but the menu it opens wasn't.
       Removing the cap here makes both edges agree at every width below
       the desktop breakpoint. */
    .navbar > .container {
        max-width: none;
    }
    .navbar-brand img,
    .navbar-brand-custom img {
        height: 62px !important;  
        width: auto !important;   
        position: relative;
        top: 2px;
        z-index: 1050;
    }

    /* Consolidated Toggler Frame */
    .navbar-toggler {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1060;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        background: transparent !important;
        padding: 6px 6px !important;
        transition: transform 0.2s ease-in-out;
    }
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler:focus-visible {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Toggler Icons States — light pink base; dark pink on :hover only
       (focus/active/open all stay light pink). Colors are baked into the
       SVG data URI itself, which CANNOT reference a CSS variable. If
       --color-tint-line or --color-urgent above ever change, update the
       %23-encoded hex here too. */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23E6C7CC' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        transition: background-image 0.25s ease-in-out;
    }
    .navbar-toggler:hover .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23E62A7A' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Mobile Menu Items (Tab Blocks) */
    .nav-link-custom {
        display: block !important;
        text-align: center !important;
        margin: 6px 0 !important;
        padding: 10px 14px !important;
        border: 1px solid var(--color-tint-line) !important;
        border-radius: 4px !important;
        background-color: #ffffff !important;
        color: #1a1a1a !important;
    }
    .nav-link-custom:hover,
    .nav-link-custom:focus,
    .nav-link-custom.active,
    .nav-link-custom.active:visited {
        background-color: var(--color-tint-line) !important;
        color: #000000 !important;
        border-color: var(--color-tint-line) !important;
    }

    /* Mobile WhatsApp Tab Box Sync */
    .whatsapp-nav-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        padding: 10px 14px !important;
        margin: 4px 0 !important;
        border: 1px solid var(--color-tint-line) !important;
        border-radius: 4px !important;
        background-color: #ffffff !important;
    }
    .whatsapp-nav-icon span {
        display: inline !important;
        color: #1a1a1a !important;
    }
    .whatsapp-nav-icon:hover,
    .whatsapp-nav-icon:focus {
        background-color: var(--color-tint) !important;
        border-color: var(--color-tint-line) !important;
    }
    .whatsapp-nav-icon:hover span,
    .whatsapp-nav-icon:focus span {
        color: #000000 !important;
    }
    .whatsapp-nav-icon:hover .bi-whatsapp,
    .whatsapp-nav-icon:focus .bi-whatsapp {
        color: #000000 !important;
    }
}

/* Shared Global WhatsApp Resets */
.whatsapp-nav-icon,
.whatsapp-nav-icon:hover,
.whatsapp-nav-icon:focus {
    border: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
}
.whatsapp-nav-icon .bi-whatsapp {
    color: #25D366 !important;
}
/* Hide the in-menu WhatsApp icon below 992px — the floating button replaces it on mobile */
/* (placed after the rule below on purpose — same specificity, source order decides the winner) */
/* WhatsApp Alignment — Native flex layout with your HTML 'ms-auto' class */
    li.whatsapp-nav-icon-container {
        display: flex !important;
        align-items: center !important;
    }
@media (max-width: 991px) {
    li.whatsapp-nav-icon-container {
        display: none !important;
    }
}
    
    /* FIX: Targets the icon specifically to override the 0.75rem navbar font compression */
    li.whatsapp-nav-icon-container .bi-whatsapp {
        font-size: 1.2rem !important; /* Standard, crisp default presentation size */
        vertical-align: middle;
    }
    
    /* Hides the text label on desktops, showing only the clean icon */
    .whatsapp-nav-icon span {
        display: none !important;
    }

/* ==========================================================================
   Submenu & Dropdown Custom Layouts
   ========================================================================== */
/* ==========================================================================
   Submenu & Dropdown Custom Layouts (Adjusted for Delicate Borders)
   ========================================================================== */
.dropdown-menu.gallery-dropdown-menu {
    border: 1px solid var(--color-tint-line) !important;  /* Reduced from 5px down to a crisp 1px lines */
    border-radius: 4px !important;
    background-color: #ffffff !important;
    padding: 0 !important;
}

.gallery-dropdown-menu li {
    border: none !important;
    background: none !important;
}

.dropdown-item.gallery-dropdown-item {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    padding: 10px 20px !important;
    background-color: transparent !important;
    border: none !important;
    
    /* Matches the 1px delicate footprint of the outer bounding card box */
    border-bottom: 1px solid var(--color-tint-line) !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.gallery-dropdown-menu li:last-child .gallery-dropdown-item {
    border-bottom: none !important; /* Prevents the last item from looking double-lined */
}

.dropdown-item.gallery-dropdown-item:hover,
.dropdown-item.gallery-dropdown-item:focus {
    background-color: var(--color-tint) !important;
    color: #000000 !important;
}

/* ==========================================================================
   Hero & Structural Sections
   ========================================================================== */
.hero-watercolor-bg {
    background-color: #ffffff !important; 
    background-image: none !important;
}
@media (max-width: 991px) {
    .hero-watercolor-bg {
        padding-top: 1rem !important;
    }
    .hero-watercolor-bg > .container {
        margin-top: 0.5rem !important;
    }
    .hero-watercolor-bg .order-1 {
        margin-bottom: 2rem;
    }
}

.et_pb_image_20 {
    display: block;
    width: 100%;
    height: auto;
    max-width: 450px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    animation: floatImage 6s ease-in-out infinite;
    transform-origin: center center;
}
@keyframes floatImage {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }
    50% {
        transform: translateY(-10px) rotate(0.5deg);
        box-shadow: 0 25px 40px rgba(0,0,0,0.15);
    }
}

.image-window-wrapper {
    position: relative;
    padding: 2rem;
}
.image-window-wrapper::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 75%;
    height: 75%;
    background: #f2efe9;
    border-radius: 8px;
    z-index: 1;
    transform: rotate(-3deg);
}
.hero-intro-text {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
}
.hero-accent-img {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    width: 160px;
    height: 160px;
    max-width: 38%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 6px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    transform: rotate(-6deg);
    z-index: 2;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
}
.image-window-wrapper img#heroMainImg {
    transition: opacity 0.2s ease-in-out;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    cursor: pointer;
}
.hero-swap-badge {
    position: absolute;
    bottom: 2.2rem;
    left: 32%;
    width: 38px;
    height: 38px;
    background-color: var(--color-urgent);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 3;
    animation: heroSwapPulse 2.5s ease-in-out infinite;
}
@keyframes heroSwapPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
@media (max-width: 991px) {
    .hero-swap-badge {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
        bottom: 1.6rem;
        left: 26%;
    }
}
@media (max-width: 991px) {
    .hero-accent-img {
        width: 110px;
        height: 110px;
        max-width: 30%;
        bottom: -1rem;
        left: -0.75rem;
    }
}

/* ==========================================================================
   UI Decorative Features & Badges
   ========================================================================== */
.concept-icon-box {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}
.why-us-section .concept-icon-box {
    background-color: #ffffff;
    transition: all 0.3s ease-in-out;
    animation: iconBob 4s ease-in-out infinite;
}
.why-us-section .col-md-6:nth-child(1) .concept-icon-box { animation-delay: 0s; }
.why-us-section .col-md-6:nth-child(2) .concept-icon-box { animation-delay: 0.6s; }
.why-us-section .col-md-6:nth-child(3) .concept-icon-box { animation-delay: 1.2s; }
.why-us-section .col-md-6:nth-child(4) .concept-icon-box { animation-delay: 1.8s; }

/* Color variants — every .concept-icon-box in HTML must also carry one of
   these two modifiers (no bare/default color). --accent (green) is kept
   available for future use even where it's not currently used; to
   re-theme, edit the variables at the top of this file rather than
   these rules. */
.why-us-section .concept-icon-box--soft {
    border: 1px solid var(--color-tint-line);
    color: var(--color-tint-line);
}
.why-us-section .concept-icon-box--accent {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}
.why-us-section .concept-icon-box--soft:hover,
.why-us-section .concept-icon-box--accent:hover {
    color: #ffffff;
    transform: translateY(-6px) scale(1.05);
}
.why-us-section .concept-icon-box--soft:hover {
    background-color: var(--color-tint-line);
    box-shadow: 0 10px 20px rgba(230, 199, 204, 0.5);
}
.why-us-section .concept-icon-box--accent:hover {
    background-color: var(--color-accent);
    box-shadow: 0 10px 20px rgba(193, 203, 68, 0.5);
}

/* Section stripe — alternates with white to separate content sections
   (Why Join Us, FAQ). Was blush pink, moved back to light grey. */
.bg-section-stripe {
    background-color: var(--color-neutral) !important;
}
/* text-muted contrast override kept for consistency across every
   section-stripe instance regardless of what color the stripe is */
.bg-section-stripe .text-muted {
    color: #495057 !important;
}

@keyframes iconBob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

.course-item-img {
    max-width: 140px;
    border-radius: 50%;
    border: 6px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.course-item-img:hover {
    transform: translateY(-8px) scale(1.05);
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.12));
}

.container-narrow { max-width: 800px; }
.container-narrow-sm { max-width: 600px; }
.scroll-top-btn-position { bottom: 20px; right: 20px; }
.btnScrollToTop {
    width: 48px;
    height: 48px;
    background-color: #ffffff !important;
    border: 1px solid var(--color-tint-line) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    color: #2c2b3c !important;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.btnScrollToTop:hover,
.btnScrollToTop:focus {
    background-color: var(--color-tint-line) !important;
    color: #2c2b3c !important;
    transform: scale(1.06);
}

/* Floating WhatsApp Button (mobile only — desktop keeps the nav bar icon).
   #25D366 / #1ebe5b are WhatsApp's own brand green, not this site's
   --color-accent — kept literal on purpose, see palette note above. */
.whatsapp-float-btn {
    bottom: 84px;
    right: 20px;
    width: 52px;
    height: 52px;
    background-color: #25D366 !important;
    color: #ffffff !important;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    z-index: 1055;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.whatsapp-float-btn:hover,
.whatsapp-float-btn:focus {
    background-color: #1ebe5b !important;
    color: #ffffff !important;
    transform: scale(1.06);
}

.star-badge-wrapper {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(30deg);
    z-index: 1051;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.star-badge-wrapper:hover {
    transform: translateY(-50%) rotate(15deg) scale(1.12);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

.btn-badge-star {
    clip-path: polygon(
        50.0% 0.0%, 55.2% 10.3%, 62.9% 1.7%, 65.3% 13.0%,
        75.0% 6.7%, 74.4% 18.3%, 85.4% 14.6%, 81.7% 25.6%,
        93.3% 25.0%, 87.0% 34.7%, 98.3% 37.1%, 89.7% 44.8%,
        100.0% 50.0%, 89.7% 55.2%, 98.3% 62.9%, 87.0% 65.3%,
        93.3% 75.0%, 81.7% 74.4%, 85.4% 85.4%, 74.4% 81.7%,
        75.0% 93.3%, 65.3% 87.0%, 62.9% 98.3%, 55.2% 89.7%,
        50.0% 100.0%, 44.8% 89.7%, 37.1% 98.3%, 34.7% 87.0%,
        25.0% 93.3%, 25.6% 81.7%, 14.6% 85.4%, 18.3% 74.4%,
        6.7% 75.0%, 13.0% 65.3%, 1.7% 62.9%, 10.3% 55.2%,
        0.0% 50.0%, 10.3% 44.8%, 1.7% 37.1%, 13.0% 34.7%,
        6.7% 25.0%, 18.3% 25.6%, 14.6% 14.6%, 25.6% 18.3%,
        25.0% 6.7%, 34.7% 13.0%, 37.1% 1.7%, 44.8% 10.3%
    );
    width: 90px;
    height: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    background-color: var(--color-urgent) !important;
    color: #ffffff !important;
    font-size: 0.65rem;
    line-height: 1.1;
    border: none;
}

.status-sold {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}
.status-sold::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: var(--color-urgent);
    border-radius: 50%;
    margin-left: 6px;
}

/* ==========================================================================
   Migrated Inline Styles — consolidated here so styling lives in one place
   ========================================================================== */

/* Gallery lightbox: zoomable thumbnails (was inline style="cursor: zoom-in;") */
.gallery-img-zoom {
    cursor: zoom-in;
}

/* Gallery lightbox: enlarged modal image (was inline object-fit / max-height) */
#lightboxImage {
    object-fit: contain;
    max-height: 80vh;
}

/* About page: featured feature image below the pull-quote (was inline max-width) */
.about-feature-img {
    max-width: 700px;
}

/* Section intro paragraphs that need a narrower centered measure than the
   full container (was inline max-width + margin) */
.lead-narrow {
    max-width: 650px;
    margin: 0 auto;
}

/* Payment result icons (was inline font-size + color). --success stays on
   WhatsApp's literal brand green on purpose, same as .whatsapp-float-btn above. */
.status-icon {
    font-size: 3.5rem;
}
.status-icon--success {
    color: #25D366;
}
.status-icon--error {
    color: var(--color-urgent);
}

/* Soft tinted section background — e.g. the workshop "closed" banner (was
   inline background-color). Generic name: swap --color-tint-soft above to
   reuse this class for any future soft-background section. */
.bg-soft-tint {
    background-color: var(--color-tint-soft);
}

/* Narrow centered form, e.g. the email opt-in on the closed workshop banner
   (was inline max-width) */
.form-narrow {
    max-width: 360px;
}

/* Urgent accent text, e.g. booking deadline callouts (was inline color).
   Generic name: swap --color-urgent above to re-theme every use at once. */
.text-accent {
    color: var(--color-urgent);
}

/* Footer copy — a touch smaller than Bootstrap's own .small on the
   container (which is 0.875em; this knocks it down further). */
footer {
    font-size: 0.8rem;
}

/* Footer links (phone, email, legal pages) all share the same two
   Bootstrap classes and had no color/hover treatment of their own.
   Scoped to <footer> so it doesn't affect text-white-50 uses elsewhere. */
footer a.text-white-50 {
    color: var(--color-tint) !important;
}
footer a.text-white-50:hover,
footer a.text-white-50:focus {
    color: var(--color-accent) !important;
}

/* Fixed-bottom cookie notice banner (see assets/js/cookie-notice.js).
   Shown once per browser until dismissed; sits above everything else,
   including the WhatsApp float button and scroll-to-top button. */
.cookie-notice-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1090;
    background-color: var(--color-ink);
    border-top: 1px solid var(--color-tint-line);
}

/* Soft pink CTA fill — for buttons that need to stand out against a dark
   background where .btn-dark would blend in (e.g. the cookie banner's
   "Got it" button, sitting on the --color-ink banner). Dark text since
   the fill itself is light. */
.btn-soft-tint {
    background-color: var(--color-tint) !important;
    border-color: var(--color-tint) !important;
    color: var(--color-ink) !important;
    font-weight: 600;
}
.btn-soft-tint:hover,
.btn-soft-tint:focus {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-ink) !important;
}