/**
 * SITE LAYOUT - SLOB (Soaps, Lotions, Oils & Balms)
 * Light, airy, botanical — clean ingredients, clean design
 * Open layout with transparency and breathing room
 */

/* ========================================================================
   PAGE STRUCTURE
   ======================================================================== */

#outerFrame {
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--bg-base);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ========================================================================
   HEADER
   ======================================================================== */

header {
    background-color: var(--surface-base);
    position: relative;
    color: var(--text-on-dark);
    /* Bottom padding matches the flex gap above the title so the space
       over the SLOB text equals the space under the tagline. */
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-sm);
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-radius: 50% 50% 0 0 / clamp(60px, 12vw, 160px) clamp(60px, 12vw, 160px) 0 0;
}

/* ===== SITE HEADER (Logo + Tagline) ===== */

.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.header-logo {
    /* Block, not inline: the img sits inside an inline <a>, and inline
       images carry ~8px of baseline descender space below them, which
       unbalanced the logo-to-title gap. */
    display: block;
    width: 33vw;
    max-width: 350px;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 20px rgba(74, 106, 24, 0.12);
    transition: box-shadow var(--transition-normal);
    /* No bottom margin: the .site-header flex gap owns the logo-to-title
       space, keeping it equal to the tagline-to-nav space below. */
    margin: var(--spacing-lg) 0 0;
}

.header-logo:hover {
    box-shadow: 0 4px 30px rgba(74, 106, 24, 0.2);
}

.header-title {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--primary);
    /* Zero BOTH margins: the h1 element baseline ships a large top margin
       that stacked on the flex gap and unbalanced the header spacing. */
    margin: 0;
}

.site-tagline {
    font-size: var(--font-size-sm);
    color: var(--text-on-dark-secondary);
    letter-spacing: 0.08em;
    margin-bottom: 0;
    font-weight: 400;
}

/* ========================================================================
   NAVIGATION STRUCTURE
   ======================================================================== */

nav {
    background-color: var(--surface-base);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 20;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
    display: block;
    text-decoration: none;
    color: var(--text-on-dark);
}

.nav-link:hover {
    background-color: var(--primary);
    color: var(--white);
    text-decoration: none;
}

.nav-link.active {
    background-color: var(--primary-dark);
    color: var(--white);
}

/* ========================================================================
   DROPDOWN MENUS
   ======================================================================== */

.nav-item.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--surface-base);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-normal);
    z-index: 1000;
    list-style: none;
    padding: var(--spacing-sm) 0;
    margin: 0;
}

.nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-item {
    color: var(--text-on-dark);
    padding: 0.75rem 1.25rem;
    display: block;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.dropdown-item:hover {
    background-color: var(--primary);
    color: var(--white);
    text-decoration: none;
}

.dropdown-item.active {
    background-color: var(--primary-dark);
    color: var(--white);
}

/* Dropdown arrow indicator */
.nav-item.dropdown > .nav-link::after {
    content: ' ▼';
    font-size: 0.8rem;
    margin-left: var(--spacing-sm);
    transition: transform var(--transition-normal);
}

.nav-item.dropdown:hover > .nav-link::after {
    transform: rotate(180deg);
}

/* ========================================================================
   INSTAGRAM LINK (Site-Specific)
   ======================================================================== */

.instagram-link {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
    text-decoration: none;
}

.instagram-link:hover {
    background-color: var(--hover-darken);
    text-decoration: none;
}

.instagram-link:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s;
}

/* ========================================================================
   CONTENT SECTIONS — Open, Airy, No Left Accent
   ======================================================================== */

/* VERTICAL RHYTHM STANDARD: sections space themselves with collapsing
   MARGINS only, never padding — padding stacks on top of neighbouring
   margins and doubles the gap, while sibling margins collapse to one
   clean --spacing-xl. .section-title's bottom margin uses the SAME
   token, so the space above any H2 (the collapsed section gap) always
   equals the space below it. Media queries may shrink the token, never
   reintroduce padding. */
.content-section {
    background: transparent;
    padding: 0;
    margin: var(--spacing-xl) 0;
    border-left: none;
    border-radius: 0;
}

.content-section:first-child {
    margin-top: 0;
}

.content-section:last-child {
    margin-bottom: 0;
}

/* ========================================================================
   HEADING HIERARCHY — Clear visual distinction per level
   ======================================================================== */

/* H1 — Page title: large, prominent, brand color */
#mainContent > h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-dark);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border);
    letter-spacing: 0.02em;
}

/* H2 section-title — Section heading: centered, medium, subtle separator.
   Owns BOTH margins: top 0 so the element-baseline h2 margin can't
   out-collapse the section gap; bottom = the rhythm token, so the air
   above every H2 (the collapsed --spacing-xl section gap) equals the
   air below it (see the VERTICAL RHYTHM STANDARD above). */
.content-section .section-title {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 var(--spacing-xl);
    color: var(--primary);
    letter-spacing: 0.01em;
}

/* H2 inside expanding-body or fieldset — Sub-section heading */
.expanding-body h2,
.content-section fieldset h2:not(.section-title) {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-on-dark-accent);
    margin-bottom: var(--spacing-md);
}

/* H3 — Tertiary heading */
.content-section h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-on-dark-accent);
    margin-bottom: var(--spacing-sm);
}

/* H4 — Labels, small headings */
.content-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--secondary-dark);
    margin-bottom: var(--spacing-xs);
}

/* --- Fieldset cards: surface background, zero padding, children handle spacing --- */
.content-section fieldset {
    margin-bottom: var(--spacing-lg);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-base);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: visible;
}

/* Legend — Fieldset label: small caps, sits on the border line */
.content-section fieldset legend {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-dark);
    padding: var(--spacing-xs) var(--spacing-md);
    margin-left: var(--spacing-md);
    background: var(--surface-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Content inside fieldsets gets inset margins and a subtle card feel.
   POSITIONAL, not tag-specific: any direct child that isn't the legend
   or a form (forms carry their own padding) is inset, the element right
   after the legend gets the top air, and the last child gets the bottom
   air — so new content types (tag chips, images, details) can never
   slip through the cascade and hug the card edges. */
.content-section fieldset > *:not(legend):not(form) {
    margin-left: var(--spacing-xl);
    margin-right: var(--spacing-xl);
}

.content-section fieldset > legend + *:not(form) {
    margin-top: var(--spacing-lg);
}

.content-section fieldset > *:not(form):last-child {
    margin-bottom: var(--spacing-lg);
}

/* Forms inside fieldsets — inset padding so form-groups and buttons don't hug edges */
.content-section fieldset > form {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md);
}

/* ========================================================================
   RESPONSIVE - MOBILE FIRST
   ======================================================================== */

@media (max-width: 768px) {
    #outerFrame {
        margin: 0;
    }

    header {
        padding: var(--spacing-md);
    }

    .header-logo {
        width: 45vw;
        max-width: 320px;
    }

    .header-title {
        font-size: 1.4rem;
    }

    .site-tagline {
        font-size: var(--font-size-xs);
    }

    nav {
        padding: var(--spacing-md);
    }

    .nav-menu {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .nav-container {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .instagram-link {
        align-self: flex-end;
        margin-top: var(--spacing-sm);
    }

    /* Rhythm standard: smaller token on mobile, still margin-only. */
    .content-section {
        margin: var(--spacing-lg) 0;
    }

    /* Same positional inset standard as desktop, narrower token. */
    .content-section fieldset > *:not(legend):not(form) {
        margin-left: var(--spacing-md);
        margin-right: var(--spacing-md);
    }

    .content-section fieldset > form {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .header-logo {
        width: 50vw;
        max-width: 250px;
    }

    .header-title {
        font-size: 1.2rem;
        letter-spacing: 0.1em;
    }

    .nav-link {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
}

/* ========================================================================
   FOOTER REFINEMENT
   ======================================================================== */

footer {
    border-top: 1px solid var(--border);
}

footer a {
    color: var(--primary);
}

footer a:hover {
    color: var(--primary-dark);
}

/* ========================================================================
   PRODUCT SHOWCASE — Grid of product cards with prominent images
   Transparent product images are the hero element.
   ======================================================================== */

.product-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    padding: var(--spacing-lg) 0;
}

/* --- Product Card --- */
.product-card {
    background: var(--surface-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* --- Product Image: Transparent PNG/WebP, large and prominent --- */
.product-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    /* Page bg shows through transparent images */
    background: var(--bg-base);
    min-height: 220px;
}

.product-card__image img {
    max-width: 100%;
    max-height: 280px;
    height: auto;
    object-fit: contain;
    /* Subtle lift effect on transparent product images */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

/* --- Feature tags (product feature chips: VEGAN, OLIVE SQUALANE, ...) ---
   Used in the flagship sections and in highlights-carousel body HTML. */
.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.feature-tags span {
    /* Filled badge: clearly a product badge, distinct from the outlined
       uppercase legends. (Flip back to outlined: border 1px solid
       var(--primary), color var(--primary), background none.) */
    background: var(--primary);
    color: var(--white);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Flagship image slot (home page hero image for each flagship) --- */
.flagship-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg) 0;
    min-height: 240px;
}
.flagship-image img {
    max-width: 100%;
    max-height: 320px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

/* --- Image-missing placeholder (SVG) ---
   Occupies the exact space a real image would, so layout stays stable
   once the image is added in admin. */
.image-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--text-on-dark-secondary, #888);
}
.image-missing svg {
    width: 100%;
    height: auto;
    max-width: 280px;
}
.image-missing--product {
    min-height: 220px;
}
.image-missing--highlight {
    min-height: 180px;
}
.image-missing--thumb {
    min-height: 60px;
}
.image-missing--thumb svg {
    max-width: 90px;
}

/* --- Product Info: Name, category, price, description --- */
.product-card__info {
    padding: var(--spacing-lg) var(--spacing-xl);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card__name {
    font-size: 1.25rem;
    color: var(--primary-dark);
    margin-bottom: var(--spacing-xs);
}

.product-card__category {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-on-dark-secondary);
    margin-bottom: var(--spacing-sm);
}

.product-card__price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--spacing-md);
}

.product-card__description {
    font-size: var(--font-size-sm);
    color: var(--text-on-dark-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
    flex: 1;
}

/* Ingredients expanding block inside product card */
.product-card__ingredients {
    margin-top: auto;
}

.product-card__ingredients .expanding-body {
    font-size: var(--font-size-xs);
    color: var(--text-on-dark-secondary);
}

/* --- Responsive: Single column on small screens --- */
@media (max-width: 600px) {
    .product-showcase {
        grid-template-columns: 1fr;
    }

    .product-card__image {
        min-height: 180px;
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .product-card__image img {
        max-height: 220px;
    }
}

/* --- Two columns on tablet --- */
@media (min-width: 601px) and (max-width: 960px) {
    .product-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ========================================================================
   NAV DROPDOWN CLOSE-ON-SELECT (mobile sticky :hover fix)
   Temporarily forces dropdown menus closed after a nav link is clicked,
   so the sticky hover state on touch devices releases cleanly.
   JS adds .nav-force-closed on click and removes it after 400ms.
   ======================================================================== */
nav.nav-force-closed .dropdown-menu,
nav.nav-force-closed .nav-item.dropdown:hover .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ========================================================================
   AUTO-SELECT NESTED FORMS
   When makeSmartNestedForm() is called with 'auto_select' => true,
   the select triggers submission on change via data-ajax-change.
   The submit button stays in the DOM as a progressive-enhancement fallback
   but is hidden since no manual click is needed.
   ======================================================================== */
.nested-form.auto-select button[type="submit"],
.nested-form.auto-select .form-actions {
    display: none;
}

/* ========================================================================
   CANADIAN MAPLE LEAF ICON
   Always Canadian red. Works inline (vertical-align) and inside flex
   <summary> rows (universal.css sizes summary SVGs to 2rem; the
   `summary .canada-leaf` override in universal.css scales it back down
   to a word-space accent).
   ======================================================================== */
.canada-leaf {
    flex-shrink: 0;
    width: 1.4em;
    height: 1.4em;
    vertical-align: middle;
    color: #D52B1E;
}

/* ════════════════════════════════════════════════════════════════════════
   RECIPE STEPS & BLOCKS WORKSPACE + RUN CHECKLIST (production module)
   Ported from the FG pilot 2026-08-19.
   ════════════════════════════════════════════════════════════════════════ */

.block-workspace .step-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
}

.block-list,
.run-checklist {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0.5rem 0.5rem;
    /* Empty lists keep a drop zone for cross-step drags. */
    min-height: 1.5rem;
}

.block-row,
.run-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.35rem;
    background: var(--surface-base);
}

/* Inline editors open full-width beneath their row's controls. */
.block-row .inline-edit-slot {
    flex-basis: 100%;
}

.block-grip {
    cursor: grab;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--text-on-dark-secondary);
}

.sortable-dragging {
    opacity: 0.5;
}

.block-kind {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--surface-lighter);
    color: var(--text-on-dark-accent);
}

.block-label {
    flex: 1;
    min-width: 12rem;
}

.step-meta {
    font-size: var(--font-size-sm);
    color: var(--text-on-dark-secondary);
}

.run-block-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.run-block--done .run-block-label {
    text-decoration: line-through;
    opacity: 0.65;
}

/* ════════════════════════════════════════════════════════════════════════
   INGREDIENT REFERENCE LINKS
   "We make no claims - the ingredients do": every named ingredient links
   to an independent reference (Wikipedia). The arrow marks it as an
   external read-for-yourself link.
   ════════════════════════════════════════════════════════════════════════ */

a.ingredient-ref::after {
    content: '\2197';
    font-size: 0.7em;
    margin-left: 0.12em;
    vertical-align: super;
    text-decoration: none;
    display: inline-block;
}