/* ──────────────────────────────────────────────────────────────────────────
   RASA — Area recipe pages (Little Rasas / Rasa Paws)
   The kids + paws detail pages ride the flagship shell (styles.css +
   css/recipe.css). This sheet does exactly three jobs:
     1. Re-tune the accent tokens per area (recipe.css is fully var-driven).
     2. Recolor the engine's inline-SVG saffron (JS-injected icons carry
        literal rgba(245,166,35,…) attributes — the substring selectors below
        override them via CSS's presentation-attribute precedence).
     3. Style the bits the flagship page doesn't have: the sub-brand wordmark,
        the native-script hero line, and the third "wisdom" lens.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1 · Area accent tokens ─────────────────────────────────────────── */

body[data-area="kids"] {
    --area-rgb: 139, 191, 90;
    --color-accent: #8BBF5A;
    --color-accent-light: #B8E08A;
    --color-accent-dim: rgba(139, 191, 90, 0.15);
    --color-accent-glow: rgba(139, 191, 90, 0.08);
    --color-science: #8BBF5A;
    --color-science-dim: rgba(139, 191, 90, 0.12);
    --color-science-rgb: 139, 191, 90;
    --gradient-saffron: linear-gradient(135deg, #8BBF5A 0%, #B8E08A 50%, #8BBF5A 100%);
}

body[data-area="paws"] {
    --area-rgb: 212, 121, 26;
    --color-accent: #D4791A;
    --color-accent-light: #E8A84A;
    --color-accent-dim: rgba(212, 121, 26, 0.15);
    --color-accent-glow: rgba(212, 121, 26, 0.08);
    --color-science: #D4791A;
    --color-science-dim: rgba(212, 121, 26, 0.12);
    --color-science-rgb: 212, 121, 26;
    --gradient-saffron: linear-gradient(135deg, #D4791A 0%, #E8A84A 50%, #D4791A 100%);
}

/* ── 2 · Recolor JS-injected saffron SVGs (engine icons) ────────────── */
/* Attribute substring match catches every literal saffron stroke/fill the
   engine writes inline; CSS wins over presentation attributes. Two alpha
   buckets keep the dual-tone feel. */

body[data-area] svg [stroke*="245,166,35"],
body[data-area] svg[stroke*="245,166,35"] {
    stroke: rgba(var(--area-rgb), 0.85);
}

body[data-area] svg [fill*="245,166,35"],
body[data-area] svg[fill*="245,166,35"] {
    fill: rgba(var(--area-rgb), 0.14);
}

/* The dum-seal flame core is a solid accent glyph, not a wash — restore it. */
body[data-area] .chapter__node svg path[fill*="245,166,35"] {
    fill: rgba(var(--area-rgb), 0.85);
}

/* ── 3a · Sub-brand wordmark in the shared nav ──────────────────────── */

.nav__brand--area {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.area-logo__sub {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(var(--area-rgb), 0.55);
    white-space: nowrap;
}

/* .nav__logo's base 0.22em letter-spacing (styles.css) is tuned for the
   4-letter "rasa" mark — on a multi-word area name ("Little Rasas") it
   stretches the word wide (Rakesh, 2026-08-16: "why is this logo different
   and stretched"). Kids recipe pages are the only page using the generic
   .nav__logo class for a multi-word wordmark; every other area page
   (little-rasas.html, rasa-paws.html) uses its own dedicated brand class
   instead. Tighten spacing to match normal word-spacing, not the
   single-word mark's wide tracking. */
.nav__logo--area {
    letter-spacing: 0.02em;
    padding-left: 0;
}

/* ── 3b · Native-script line under the hero title ───────────────────── */

.recipe-hero__native {
    display: block;
    margin: 0.35rem 0 0.9rem;
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    color: rgba(var(--area-rgb), 0.9);
    letter-spacing: 0.02em;
}

.recipe-hero__native:empty {
    display: none;
}

/* Auto-derived chapter titles can be a lone sentence — never show an empty
   body paragraph under them. */
.chapter__desc:empty {
    display: none;
}

/* ── 3c · The Wisdom lens ───────────────────────────────────────────── */

.aw-panel {
    display: grid;
    gap: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
}

.aw-card {
    position: relative;
    padding: 1.75rem 2rem 1.9rem;
    background: var(--color-bg-glass);
    border: 1px solid rgba(var(--area-rgb), 0.14);
    border-left: 2px solid rgba(var(--area-rgb), 0.55);
    border-radius: 12px;
}

.aw-card__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-science);
    margin-bottom: 0.9rem;
}

.aw-card__kicker svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.aw-card__body p,
.aw-card__note {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.65));
}

.aw-card__body p + p {
    margin-top: 0.75rem;
}

.aw-card__body strong,
.aw-card__note strong {
    color: var(--color-accent-light);
    font-weight: 500;
}

/* Molecules — mirrors the ingredient-science marginalia voice */
.aw-molecules {
    display: grid;
    gap: 1.1rem;
}

.aw-molecule {
    padding: 1rem 0 0.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.aw-molecule__compound {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(var(--area-rgb), 0.7);
    margin-right: 0.75rem;
}

.aw-molecule__name {
    font-family: var(--font-editorial);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-blush, #F2DDD0);
}

.aw-molecule__desc {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
}

/* Portion guide — CSS grid, tabular alignment */
.aw-portions {
    display: grid;
    gap: 0;
    margin-top: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    overflow: hidden;
}

.aw-portion {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 1rem;
    align-items: baseline;
    padding: 0.8rem 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.92rem;
}

.aw-portion--head {
    border-top: none;
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.4));
}

.aw-portion__dog {
    font-weight: 500;
    color: var(--color-blush, #F2DDD0);
}

.aw-portion__weight {
    color: var(--color-text-muted, rgba(255, 255, 255, 0.45));
}

.aw-portion__amount {
    font-variant-numeric: tabular-nums;
    color: var(--color-accent-light);
}

.aw-portion__amount em {
    font-style: normal;
    font-size: 0.8em;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.45));
}

.aw-card__note {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(var(--area-rgb), 0.25);
    font-size: 0.88rem;
}

/* The two-line wordmark makes the fixed bar taller than the flagship's on
   phones and pushes into the hero's back pill — drop the sub-line there. */
@media (max-width: 768px) {
    .area-logo__sub {
        display: none;
    }
}

@media (max-width: 640px) {
    .aw-card {
        padding: 1.35rem 1.25rem 1.5rem;
    }

    .aw-portion {
        grid-template-columns: 1fr 1fr;
    }

    .aw-portion__weight {
        display: none;
    }

    .aw-portion--head [role="columnheader"]:nth-child(2) {
        display: none;
    }
}

/* ── Household lens (profile-aware detail pages) ─────────────────────── */
.household-flag {
    display: flex; gap: 12px; align-items: flex-start;
    max-width: 1060px; margin: 18px auto 0; padding: 14px 20px;
    border: 1px solid rgba(232, 165, 90, 0.35); border-radius: 14px;
    background: linear-gradient(160deg, rgba(232, 165, 90, 0.09), rgba(232, 165, 90, 0.02));
    font-family: var(--font-primary, 'Syne', sans-serif);
    font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78);
}
.household-flag strong { color: #E8A54A; font-weight: 600; }
@media (max-width: 768px) { .household-flag { margin: 14px 1.25rem 0; } }

.aw-portion--mine {
    background: rgba(var(--color-science-rgb), 0.1);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(var(--color-science-rgb), 0.4);
}
.aw-card__note--mine { color: rgba(var(--color-science-rgb), 0.9); }