/* =========================================================================
   Bewitching Bakes — brand theme
   Palette derived from the supplied logo:
     - Primary forest green   #2e3a25
     - Mid green              #4a5d3a
     - Sage accent            #94a883
     - Muted gold/olive       #a89968
     - Cream background       #faf6ec
     - Text dark              #2a3522
   Typography: Playfair Display (serif) for the wordmark, Inter for body,
   Cormorant SC for small-caps tagline.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600&family=Cormorant+SC:wght@500;600&display=swap');

:root {
    --bb-green-dark: #2e3a25;
    --bb-green: #4a5d3a;
    --bb-sage: #94a883;
    --bb-sage-soft: #c2cf9f;
    --bb-gold: #a89968;
    --bb-gold-soft: #c9bb8f;
    --bb-cream: #faf6ec;
    --bb-cream-warm: #f5f0e1;
    --bb-text: #2a3522;
    --bb-text-muted: #6b7060;

    /* Hand brand colors to Bootstrap. */
    --bs-primary: var(--bb-green-dark);
    --bs-primary-rgb: 46, 58, 37;
    --bs-secondary: var(--bb-gold);
    --bs-secondary-rgb: 168, 153, 104;
    --bs-body-bg: var(--bb-cream);
    --bs-body-color: var(--bb-text);
    --bs-link-color: var(--bb-green-dark);
    --bs-link-hover-color: var(--bb-green);
    --bs-link-color-rgb: 46, 58, 37;
}

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }
html { position: relative; min-height: 100%; }

body {
    margin-bottom: 60px;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bb-cream);
    color: var(--bb-text);
    /* Better text rendering on retina iOS / macOS. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Block horizontal scroll caused by stray wide elements — easier to
       catch issues during the audit. */
    overflow-x: hidden;
}

/* ---- iOS / mobile defensive baseline ----------------------------------
   Defends against the most common iPhone Safari papercuts we can't reproduce
   from Windows: zoom-on-input, double-tap-to-zoom delay, tap-highlight flash,
   and content hidden by the notch / home-bar. */

/* iOS Safari zooms when a form input has font-size < 16px. Force 16px on
   form controls so the page never zooms in on focus. */
input.form-control,
textarea.form-control,
select.form-select,
input.form-control-sm,
select.form-select-sm,
textarea.form-control-sm {
    font-size: 16px;
}

/* Faster tap response on iOS — kills the 300ms double-tap-to-zoom delay
   on interactive elements and removes the gray tap flash. */
a, button, .btn, [role="button"], input[type="submit"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Make sure tap targets are big enough on touch devices. Bootstrap's btn-sm
   is 31px tall — borderline. Bump small buttons on touch devices to a
   comfortable 36px. We use BOTH pointer:coarse (real touch devices) AND
   viewport-width (catches phone-sized DevTools emulation, which doesn't
   always report pointer:coarse). */
@media (pointer: coarse), (max-width: 575.98px) {
    .btn-sm, .form-control-sm, .form-select-sm,
    .btn, .form-control, .form-select {
        /* 38px to clear browser sub-pixel rounding at fractional DPRs.
           DevTools at 373px viewport measured 35.995px on a min-height
           of 36px — bumping above the threshold avoids the false fail. */
        min-height: 38px;
    }
    /* Inline buttons inside table-active rows often have padding that
       eats the min-height — make sure they don't collapse below it. */
    .btn.btn-sm { padding-top: 0.35rem; padding-bottom: 0.35rem; }
}

/* Safe-area padding so footer / fixed elements don't sit under iOS home
   bar or notch. */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
footer.bb-footer {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}

/* Tables that aren't wrapped in .table-responsive still need to scroll
   horizontally on narrow viewports instead of breaking the layout. */
@media (max-width: 575.98px) {
    .table:not(.table-responsive *) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Images never overflow their container by default — defends against
   accidentally-wide product photos. */
img { max-width: 100%; height: auto; }

h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.brand-display {
    font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
    font-weight: 600;
    color: var(--bb-green-dark);
    letter-spacing: 0.01em;
}

.brand-tagline {
    font-family: 'Cormorant SC', Georgia, serif;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bb-gold);
}

/* ---- Buttons ----------------------------------------------------------- */
/* Override Bootstrap's blue defaults with the brand greens. Both --bs-btn-*
   custom properties AND direct background-color/border-color/color so the
   precedence wins regardless of how Bootstrap's compiled CSS landed.       */

/* :link + :visited covered explicitly so an <a class="btn btn-primary">
   keeps cream-on-green text after the user has clicked through once. The
   browser's :visited UA stylesheet specificity is element+pseudo-class which
   beats a bare class selector — without these states named, visited buttons
   would silently invert to dark-on-dark. */
.btn-primary,
.btn-primary:link,
.btn-primary:visited {
    --bs-btn-color: var(--bb-cream);
    --bs-btn-bg: var(--bb-green-dark);
    --bs-btn-border-color: var(--bb-green-dark);
    --bs-btn-hover-color: var(--bb-cream);
    --bs-btn-hover-bg: var(--bb-green);
    --bs-btn-hover-border-color: var(--bb-green);
    --bs-btn-focus-shadow-rgb: 46, 58, 37;
    --bs-btn-active-color: var(--bb-cream);
    --bs-btn-active-bg: var(--bb-green-dark);
    --bs-btn-active-border-color: var(--bb-green-dark);
    --bs-btn-disabled-color: var(--bb-cream);
    --bs-btn-disabled-bg: var(--bb-sage);
    --bs-btn-disabled-border-color: var(--bb-sage);
    color: var(--bb-cream);
    background-color: var(--bb-green-dark);
    border-color: var(--bb-green-dark);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: var(--bb-cream);
    background-color: var(--bb-green);
    border-color: var(--bb-green);
}
/* Disabled buttons (e.g. the "Add to cart" placeholder until the cart
   phase ships) use sage rather than 65%-opacity dark green — clearly
   non-interactive but still on-brand and high-contrast. */
.btn-primary:disabled, .btn-primary.disabled {
    color: var(--bb-cream) !important;
    background-color: var(--bb-sage) !important;
    border-color: var(--bb-sage) !important;
    opacity: 1;
    cursor: not-allowed;
}

.btn-outline-primary,
.btn-outline-primary:link,
.btn-outline-primary:visited {
    --bs-btn-color: var(--bb-green-dark);
    --bs-btn-border-color: var(--bb-green-dark);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--bb-cream);
    --bs-btn-hover-bg: var(--bb-green-dark);
    --bs-btn-hover-border-color: var(--bb-green-dark);
    --bs-btn-active-color: var(--bb-cream);
    --bs-btn-active-bg: var(--bb-green-dark);
    --bs-btn-active-border-color: var(--bb-green-dark);
    color: var(--bb-green-dark);
    border-color: var(--bb-green-dark);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    color: var(--bb-cream);
    background-color: var(--bb-green-dark);
    border-color: var(--bb-green-dark);
}

.btn-outline-secondary,
.btn-outline-secondary:link,
.btn-outline-secondary:visited {
    --bs-btn-color: var(--bb-text);
    --bs-btn-border-color: rgba(46, 58, 37, 0.35);
    --bs-btn-hover-color: var(--bb-cream);
    --bs-btn-hover-bg: var(--bb-green-dark);
    --bs-btn-hover-border-color: var(--bb-green-dark);
    color: var(--bb-text);
}

.btn-outline-info,
.btn-outline-info:link,
.btn-outline-info:visited {
    --bs-btn-color: var(--bb-green-dark);
    --bs-btn-border-color: var(--bb-sage);
    --bs-btn-hover-color: var(--bb-green-dark);
    --bs-btn-hover-bg: var(--bb-sage-soft);
    --bs-btn-hover-border-color: var(--bb-sage);
    color: var(--bb-green-dark);
}

.btn-outline-danger,
.btn-outline-danger:link,
.btn-outline-danger:visited {
    color: #b02a37;
}

/* ---- Links + nav ------------------------------------------------------- */
a, a:visited { color: var(--bb-green-dark); }
a:hover, a:focus { color: var(--bb-green); }

.text-primary { color: var(--bb-green-dark) !important; }
.bg-primary { background-color: var(--bb-green-dark) !important; }
.border-primary { border-color: var(--bb-green-dark) !important; }
.link-primary { color: var(--bb-green-dark) !important; }

/* Bootstrap renders breadcrumb separator as a CSS escaped quote — recolor it. */
.breadcrumb-item + .breadcrumb-item::before { color: var(--bb-text-muted); }

/* ---- Forms / focus ring ----------------------------------------------- */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--bb-green);
    box-shadow: 0 0 0 0.2rem rgba(46, 58, 37, 0.18);
}
.form-check-input:checked {
    background-color: var(--bb-green-dark);
    border-color: var(--bb-green-dark);
}
.form-switch .form-check-input:checked {
    background-color: var(--bb-green-dark);
    border-color: var(--bb-green-dark);
}

/* ---- Navbar / brand wordmark ------------------------------------------ */
.navbar.bb-navbar {
    background: var(--bb-cream-warm) !important;
    border-bottom: 1px solid rgba(46, 58, 37, 0.12) !important;
    box-shadow: none !important;
}
.navbar.bb-navbar .nav-link {
    color: var(--bb-text) !important;
    font-weight: 500;
}
.navbar.bb-navbar .nav-link:hover { color: var(--bb-green-dark) !important; }
/* Explicit forest-green hamburger so the mobile toggler is visible against
   the cream navbar. Bootstrap's default --bs-navbar-toggler-icon-bg can
   end up unset in some build configurations. */
.navbar.bb-navbar .navbar-toggler {
    border-color: rgba(46, 58, 37, 0.25);
    padding: 0.45rem 0.65rem;
}
.navbar.bb-navbar .navbar-toggler:focus { box-shadow: none; }
.navbar.bb-navbar .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='%232e3a25' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 1.5em;
    height: 1.5em;
}
.brand-wordmark {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--bb-green-dark) !important;
    letter-spacing: 0.01em;
}
.brand-logo {
    height: 38px;
    width: auto;
    margin-right: 0.5rem;
}

/* ---- Footer ------------------------------------------------------------ */
footer.bb-footer {
    background: transparent;
    border-top: 1px solid rgba(46, 58, 37, 0.12);
    color: var(--bb-text-muted);
    padding: 1.25rem 0;
    font-size: 0.9rem;
}
.bb-footer-links a {
    color: var(--bb-green-dark);
    text-decoration: none;
    /* Phone-friendly tap target: 36px tall × comfortable width. */
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.5rem 0.5rem;
    line-height: 1.2;
}
.bb-footer-links a:hover,
.bb-footer-links a:focus {
    color: var(--bb-gold);
    text-decoration: underline;
}
/* Same treatment on the copyright-row Privacy / Terms links. */
footer.bb-footer .small a {
    display: inline-block;
    min-height: 36px;
    padding: 0.45rem 0.5rem;
    line-height: 1.4;
}
.bb-social-link {
    color: var(--bb-green-dark);
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease, transform 0.15s ease;
}
.bb-social-link:hover,
.bb-social-link:focus {
    color: var(--bb-gold);
    transform: translateY(-1px);
}

/* ---- Social tab: horizontal post-strip carousel ----------------------- */
/* Each card is a fixed-width FB embedded-post iframe. Scroll-snap gives
   the "carousel feel" without using Bootstrap's display:none-based one
   (which breaks iframe initialization). Prev/next chevrons scroll the
   container programmatically via wwwroot/js/site.js. */
.bb-post-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.25rem 0.5rem 0.5rem;
}
.bb-post-strip::-webkit-scrollbar {
    height: 6px;
}
.bb-post-strip::-webkit-scrollbar-thumb {
    background: rgba(46, 58, 37, 0.25);
    border-radius: 3px;
}
.bb-post-card {
    flex: 0 0 auto;
    /* Cap to viewport on phones so the card doesn't overflow the body
       when the FB embed insists on its 500px width. */
    width: min(500px, calc(100vw - 32px));
    scroll-snap-align: start;
    border-radius: 6px;
    /* On narrow viewports the FB iframe's INTERNAL content stays at its
       natural width (FB clips its post layout, not us). Letting the card
       scroll horizontally lets visitors pan to see the full post instead
       of getting a hard clip with no escape. */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    background: #fff;
    display: flex;
    flex-direction: column;
}
.bb-post-card iframe {
    /* Keep the iframe at FB's preferred 500px so its content lays out
       correctly; the parent card handles overflow with horizontal pan. */
    flex: 0 0 auto;
}
.bb-post-card-footer {
    padding: 0.45rem 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #fafafa;
    text-align: center;
    font-size: 0.85rem;
}
.bb-post-card-footer a {
    color: var(--bb-green-dark);
    text-decoration: none;
}
.bb-post-card-footer a:hover {
    text-decoration: underline;
}
.bb-strip-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: var(--bb-green-dark);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, transform 0.15s ease;
}
.bb-strip-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}
.bb-strip-prev { left: -10px; }
.bb-strip-next { right: -10px; }

/* ---- Gallery grid (/gallery) ----------------------------------------- */
/* Uniform-height square tiles via aspect-ratio; img is object-fit cover so
   landscape/portrait shots both crop sensibly. Subtle lift on hover. */
.bb-gallery-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}
.bb-gallery-tile:hover {
    transform: translateY(-2px);
}
.bb-gallery-tile img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.bb-gallery-caption {
    text-align: center;
}

/* ---- Password input enhancements -------------------------------------- */
/* Wired up in site.js — every <input type="password"> gets wrapped in a
   .bb-pwd-wrap, an eye-toggle button, and a caps-lock warning element. */
.bb-pwd-wrap {
    position: relative;
}
.bb-pwd-wrap > input[type="password"],
.bb-pwd-wrap > input[type="text"] {
    /* Leave room on the right for the eye toggle so the cursor never
       collides with it. */
    padding-right: 2.75rem;
}
.bb-pwd-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--bb-text-muted);
    cursor: pointer;
    transition: color 0.12s ease;
}
.bb-pwd-toggle:hover,
.bb-pwd-toggle:focus {
    color: var(--bb-green-dark);
    outline: none;
}
.bb-pwd-caps {
    margin-top: 0.25rem;
}
/* Strength meter shown under "new password" inputs (Register / Reset /
   ChangePassword). Pure CSS bar + label, no chart library. */
.bb-pwd-meter-bar {
    height: 4px;
    width: 100%;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.bb-pwd-meter-fill {
    height: 100%;
    width: 0;
    transition: width 0.18s ease, background-color 0.18s ease;
}
.bb-pwd-meter-label {
    margin-top: 0.15rem;
    min-height: 1em;
}

/* ---- Order status timeline (Confirmation page) ------------------------ */
/* Horizontal stepper. Each step is a circle + label; bars connect them.
   Done = filled green, current = gold ring, future = muted. */
.bb-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.bb-timeline-step {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.bb-timeline-marker {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid transparent;
    background: #ddd;
    color: #fff;
    z-index: 1;
}
.bb-timeline-label {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--bb-text-muted);
}
.bb-timeline-bar {
    position: absolute;
    top: 1rem; /* center of marker (32px / 2) */
    left: 50%;
    right: -50%;
    height: 2px;
    background: #ddd;
    z-index: 0;
}
/* Done */
.bb-timeline-done .bb-timeline-marker,
.bb-timeline-done .bb-timeline-bar {
    background: var(--bb-green-dark);
}
.bb-timeline-done .bb-timeline-label {
    color: var(--bb-green-dark);
}
/* Current */
.bb-timeline-current .bb-timeline-marker {
    background: var(--bb-gold);
    box-shadow: 0 0 0 4px rgba(168, 153, 104, 0.2);
}
.bb-timeline-current .bb-timeline-label {
    color: var(--bb-green-dark);
    font-weight: 600;
}

/* ---- Cards & alerts ---------------------------------------------------- */
.card { border-color: rgba(46, 58, 37, 0.12); }
.alert-warning {
    background-color: #fdf6dd;
    border-color: rgba(168, 153, 104, 0.6);
    color: #58471a;
}
.alert-info {
    background-color: #eef3e3;
    border-color: rgba(74, 93, 58, 0.3);
    color: var(--bb-green-dark);
}

/* Tables: make active rows use brand green tint, danger/success keep
   Bootstrap defaults so they signal status clearly. */
.table-active > * { --bs-table-bg-state: rgba(46, 58, 37, 0.06); }
.table-success { --bs-table-bg: #e8efde; }

/* Badge color override — Bootstrap 5.3's text-bg-light is so close to our
   cream background that it visually disappears. Keep the deeper override
   on light only; text-bg-info / primary / secondary etc all read fine
   against cream with Bootstrap defaults. */
.badge.text-bg-light {
    background-color: #e6e0cf !important;
    color: var(--bb-text) !important;
    border: 1px solid rgba(46, 58, 37, 0.15);
}

/* ---- Decorative star accent (echoes the logo's stars) ----------------- */
.bb-star {
    color: var(--bb-gold);
    font-size: 0.75em;
    vertical-align: 0.25em;
}

/* ---- Admin shell + sidebar ------------------------------------------- */
/* Two modes:
   - Desktop (md+): sidebar shows as a fixed-width column next to the main
     content, classic admin layout.
   - Mobile (<md):  sidebar collapses into a Bootstrap offcanvas drawer
     toggled by the hamburger in the bb-admin-topbar above. */

.bb-admin-shell { min-height: 100vh; }
.bb-admin-main {
    padding: 1rem;
    min-width: 0; /* allows children to shrink inside the flex row */
    overflow-x: auto;
}
.bb-admin-topbar {
    background: var(--bb-cream-warm);
    border-bottom: 1px solid rgba(46, 58, 37, 0.12);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.bb-admin-burger {
    line-height: 1;
}

.bb-admin-sidebar {
    background: var(--bb-green-dark) !important;
    color: var(--bb-cream) !important;
}
.bb-admin-sidebar .nav-link {
    color: rgba(250, 246, 236, 0.85) !important;
    border-radius: 4px;
    margin-bottom: 2px;
}
.bb-admin-sidebar .nav-link:hover {
    color: var(--bb-cream) !important;
    background: rgba(255, 255, 255, 0.06);
}
.bb-admin-sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--bb-cream) !important;
    font-weight: 500;
}
.bb-admin-sidebar a { color: var(--bb-sage-soft); }
.bb-admin-sidebar a:hover { color: var(--bb-cream); }

/* Desktop: cancel the offcanvas-md behavior so the sidebar shows inline. */
@media (min-width: 768px) {
    .bb-admin-sidebar.offcanvas-md {
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        background-clip: border-box;
        width: 240px;
        flex-shrink: 0;
    }
    .bb-admin-main { padding: 1.5rem; }
}

/* Mobile: ensure the drawer is wide enough to read comfortably but not
   so wide it covers the whole phone. */
@media (max-width: 767.98px) {
    .bb-admin-sidebar.offcanvas-md {
        width: 80vw;
        max-width: 320px;
    }
}

/* ---- Bootstrap accordion brand colors --------------------------------- */
/* Bootstrap's stock accordion uses a #055160 blue text + #e7f1ff blue
   background on the expanded panel's header — fine for the default
   Bootstrap theme, jarring against our green/gold/cream palette. Override
   the CSS custom properties Bootstrap reads from so accordions feel like
   part of the site instead of an island of Bootstrap defaults. Used by
   /faq for now; any future accordion picks this up automatically.       */
.accordion {
    --bs-accordion-color: var(--bb-text);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: rgba(0, 0, 0, 0.08);
    --bs-accordion-btn-color: var(--bb-green-dark);
    --bs-accordion-btn-bg: var(--bb-cream);
    --bs-accordion-btn-focus-border-color: var(--bb-green-dark);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(46, 58, 37, 0.15);
    --bs-accordion-active-color: var(--bb-green-dark);
    --bs-accordion-active-bg: rgba(46, 58, 37, 0.05);
}
/* Caret icons: Bootstrap encodes the chevron color into the SVG data-URL,
   so the CSS variable override above doesn't reach it. Re-encode with
   our brand green. */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232e3a25'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232e3a25'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ---- Markdown rendering (bb-prose) ------------------------------------ */
/* Wrapper class for any admin-edited Markdown body (home intro, About,
   FAQ). Gives consistent, intentional sizing so editing through the
   admin UI doesn't visually regress vs. the hardcoded copy that was
   there originally.

   Specifically: the homepage used Bootstrap's .lead class on the first
   paragraph (1.25rem, slightly bigger than body), and the second
   paragraph was .text-muted .small. Markdown can't naturally express
   those classes, so we apply the same effect here based on document
   position. */

.bb-prose {
    /* Comfortable measure — long body lines hurt readability. */
    line-height: 1.6;
}

/* First paragraph reads as the "lead" — pulls the eye in. Matches the
   pre-Markdown homepage hero size so the bakery owner doesn't see a
   font shrinkage after switching to admin-editable copy. */
.bb-prose > p:first-of-type {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}

/* Body paragraphs after the lead. Normal body size; muted second paragraph
   feel comes from .text-muted if the user wants it. */
.bb-prose p {
    margin-bottom: 1rem;
}

/* Headings inherit the brand serif face (already set globally on h1–h3).
   Spacing tuned so a `## subhead` inside prose reads as a distinct break,
   not a font-size accident. */
.bb-prose h1 { font-size: 2.2rem;  margin-top: 1.5rem; margin-bottom: 0.75rem; }
.bb-prose h2 { font-size: 1.75rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.bb-prose h3 { font-size: 1.4rem;  margin-top: 1.25rem; margin-bottom: 0.5rem; }
.bb-prose h4 { font-size: 1.15rem; margin-top: 1rem; margin-bottom: 0.4rem; font-weight: 600; }
.bb-prose h5,
.bb-prose h6 { font-size: 1rem; margin-top: 0.75rem; margin-bottom: 0.3rem; font-weight: 600; }

/* Lists indent moderately and breathe. The default Bootstrap reboot strips
   list-style; restore it inside prose since markdown bullets/numbers are
   semantic ("step 1, step 2..."). */
.bb-prose ul,
.bb-prose ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.bb-prose ul { list-style: disc; }
.bb-prose ol { list-style: decimal; }
.bb-prose li { margin-bottom: 0.25rem; }
.bb-prose li > p { margin-bottom: 0.25rem; } /* tight paragraphs inside list items */

/* Inline emphasis. Markdig already wraps **bold** in <strong> and *italic*
   in <em>; just make sure they're visible. */
.bb-prose strong { font-weight: 600; }
.bb-prose em     { font-style: italic; }

/* Links in prose get the brand color and a subtle underline so they're
   identifiable without screaming. */
.bb-prose a {
    color: var(--bb-green-dark);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.bb-prose a:hover { text-decoration-thickness: 2px; }

/* Blockquotes — surprisingly handy in About/FAQ for pull-quotes. */
.bb-prose blockquote {
    border-left: 3px solid var(--bb-gold);
    padding: 0.25rem 0 0.25rem 1rem;
    color: #555;
    font-style: italic;
    margin: 1rem 0;
}

/* Inline code (single backticks) and fenced blocks. Rare in customer-
   facing copy but cheap to support since Markdig emits them. */
.bb-prose code {
    background: #f3efe6;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.92em;
}
.bb-prose pre {
    background: #f3efe6;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1rem;
}
.bb-prose pre code { background: transparent; padding: 0; }

/* Raw HTML support: Markdig passes through inline HTML by default, so the
   bakery owner can drop in <span style="font-size: 1.5rem">Big</span> or
   similar when she wants finer-grained control than Markdown headings
   provide. No CSS needed for that to work — but ensure inline-block-ish
   elements line-break sanely. */
.bb-prose img { display: block; margin: 0.5rem 0; }