/* --------------------------------------------------------------
   Saffron — Main Stylesheet
   Premium finish, layout cards, hero, forms, sticky header hooks.
   Color defaults = Terracotta scheme. Overridden by customizer.css
   when a different scheme is selected in the Customizer.
-------------------------------------------------------------- */

/* --------------------------------------------------------------
   1. Color Scheme Variables (Terracotta Default)
-------------------------------------------------------------- */
:root {
    /* Accent scheme */
    --saffron-accent:        #C45A3C;
    --saffron-accent-rgb:    196, 90, 60;
    --saffron-band:          #FDF9F6;
    --saffron-panel:         #2C2825;
    --saffron-footer-band:   #C45A3C;

    /* Supporting neutrals (shared across all schemes) */
    --saffron-text:          #2C2825;
    --saffron-text-muted:    #6B6560;
    --saffron-text-light:    #9A948E;
    --saffron-border:        #E8E2DB;
    --saffron-surface:       #FFFFFF;

    /* Feedback states */
    --saffron-success:       #4A7C59;
    --saffron-error:         #B23A3A;

    /* Radii (premium rounded corners per brief) */
    --saffron-radius-sm:     6px;
    --saffron-radius-md:     12px;
    --saffron-radius-lg:     20px;
    --saffron-radius-pill:   999px;

    /* Elevation */
    --saffron-shadow-sm:     0 1px 3px rgba(44, 40, 37, 0.06),
                             0 1px 2px rgba(44, 40, 37, 0.04);
    --saffron-shadow-md:     0 4px 12px rgba(44, 40, 37, 0.08),
                             0 2px 4px rgba(44, 40, 37, 0.04);
    --saffron-shadow-lg:     0 12px 32px rgba(44, 40, 37, 0.12),
                             0 4px 8px rgba(44, 40, 37, 0.04);

    /* Motion */
    --saffron-transition:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------
   2. Sticky Header Behavior
   The slim top bar scrolls away; the main header (wordmark + nav)
   sticks. JS toggles `.is-stuck` to apply the elevated shadow.
-------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--saffron-surface);
    box-shadow: none;
    transition: box-shadow var(--saffron-transition);
}

.site-header.is-stuck {
    box-shadow: 0 2px 14px rgba(44, 40, 37, 0.08);
}

/* Slim top bar (About / Contact / Subscribe + social icons) */
.top-bar {
    background: var(--saffron-surface);
    border-bottom: 1px solid var(--saffron-border);
    font-size: 0.8125rem;
    color: var(--saffron-text-muted);
    padding: 0.5rem 0;
}

.top-bar a {
    color: var(--saffron-text-muted);
    text-decoration: none;
    transition: color var(--saffron-transition);
}

.top-bar a:hover {
    color: var(--saffron-accent);
}

/* Main navigation */
.main-navigation a {
    color: var(--saffron-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    transition: color var(--saffron-transition);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
    color: var(--saffron-accent);
}

/* --------------------------------------------------------------
   3. Typography Helpers (Serif display / Sans body)
-------------------------------------------------------------- */
.saffron-eyebrow {
    display: block;
    color: var(--saffron-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.saffron-section-title {
    font-family: var(--saffron-font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 2rem;
    color: var(--saffron-text);
}

/* --------------------------------------------------------------
   4. Bands (white / pale alternation, dark panel, accent footer band)
-------------------------------------------------------------- */
.saffron-band {
    background: var(--saffron-band);
}

.saffron-panel {
    background: var(--saffron-panel);
    color: #FFFFFF;
    border-radius: var(--saffron-radius-lg);
    padding: 3rem;
    text-align: center;
    margin: 4rem 0;
}

.saffron-panel h2 {
    color: #FFFFFF;
    font-family: var(--saffron-font-display);
    margin: 0 0 0.75rem;
}

.saffron-panel p {
    color: rgba(255, 255, 255, 0.75);
    margin: 0 auto 1.5rem;
    max-width: 48ch;
}

.site-footer__band {
    background: var(--saffron-footer-band);
    color: #FFFFFF;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.site-footer__band a {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------
   5. Hero (Delta 1 — featured recipe feature)
-------------------------------------------------------------- */
.saffron-hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 4rem 0;
}

.saffron-hero__media {
    position: relative;
    border-radius: var(--saffron-radius-lg);
    overflow: hidden;
    box-shadow: var(--saffron-shadow-lg);
    aspect-ratio: 4 / 3;
}

.saffron-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.saffron-hero__content .saffron-eyebrow {
    color: var(--saffron-accent);
    margin-bottom: 0.75rem;
}

.saffron-hero__content h1 {
    font-family: var(--saffron-font-display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
    margin: 0 0 1rem;
    color: var(--saffron-text);
}

.saffron-hero__rating {
    color: var(--saffron-accent);
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.saffron-hero__chips {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.saffron-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--saffron-band);
    border: 1px solid var(--saffron-border);
    border-radius: var(--saffron-radius-pill);
    font-size: 0.875rem;
    color: var(--saffron-text);
    white-space: nowrap;
}

/* --------------------------------------------------------------
   6. Card Anatomy (premium finish: soft shadow + hover lift)
-------------------------------------------------------------- */
.saffron-card {
    position: relative;
    background: var(--saffron-surface);
    border: 1px solid var(--saffron-border);
    border-radius: var(--saffron-radius-md);
    overflow: hidden;
    box-shadow: var(--saffron-shadow-sm);
    transition: transform var(--saffron-transition),
                box-shadow var(--saffron-transition);
    height: 100%;
}

.saffron-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--saffron-shadow-md);
}

.saffron-card__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
}

.saffron-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.saffron-card:hover .saffron-card__image img {
    transform: scale(1.03);
}

.saffron-card__title {
    padding: 1rem 1.25rem 1.25rem;
    font-family: var(--saffron-font-display);
    font-size: 1.0625rem;
    line-height: 1.35;
    text-align: center;
    margin: 0;
    color: var(--saffron-text);
}

.saffron-card__meta {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 1.25rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--saffron-text-muted);
}

/* Collection cards — title overlaid on large photos */
.saffron-card--overlay .saffron-card__title {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.saffron-card--overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
    pointer-events: none;
}

/* --------------------------------------------------------------
   7. Buttons (charcoal primary; accent only where deliberate)
-------------------------------------------------------------- */
.saffron-btn,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--saffron-radius-sm);
    font-family: var(--saffron-font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--saffron-transition),
                box-shadow var(--saffron-transition),
                transform var(--saffron-transition);
}

.saffron-btn--primary,
.wp-block-button__link {
    background: var(--saffron-panel);
    color: #FFFFFF;
}

.saffron-btn--primary:hover,
.wp-block-button__link:hover {
    background: #1C1917;
    box-shadow: var(--saffron-shadow-md);
}

.saffron-btn--accent {
    background: var(--saffron-accent);
    color: #FFFFFF;
}

.saffron-btn--accent:hover {
    background: var(--saffron-accent);
    filter: brightness(0.92);
    box-shadow: var(--saffron-shadow-md);
}

.saffron-btn--ghost {
    background: transparent;
    color: var(--saffron-text);
    border-color: var(--saffron-border);
}

.saffron-btn--ghost:hover {
    border-color: var(--saffron-text);
}

/* Photo action row (David's call, 2026-11-01): the Pin/Print buttons
   sit on top of the recipe photo, where the transparent ghost Print
   button was near-invisible. In this row only, Print goes solid
   white so it reads on any photo; ghost buttons elsewhere keep
   their outline style. */
.saffron-recipe-actions .saffron-btn--ghost {
    background: #FFFFFF;
    color: #1C1917;
    border-color: transparent;
}

.saffron-recipe-actions .saffron-btn--ghost:hover {
    background: #FFFFFF;
    border-color: transparent;
    box-shadow: var(--saffron-shadow-md);
}

/* --------------------------------------------------------------
   8. Forms (premium inputs, refined focus rings)
-------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--saffron-font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--saffron-text);
    background: var(--saffron-surface);
    border: 1px solid var(--saffron-border);
    border-radius: var(--saffron-radius-sm);
    box-sizing: border-box;
    transition: border-color var(--saffron-transition),
                box-shadow var(--saffron-transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--saffron-accent);
    box-shadow: 0 0 0 3px rgba(var(--saffron-accent-rgb), 0.18);
}

input::placeholder,
textarea::placeholder {
    color: var(--saffron-text-light);
}

/* Panel-inverted forms (newsletter inside dark panel) */
.saffron-panel input[type="email"] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.saffron-panel input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.saffron-panel input[type="email"]:focus {
    border-color: var(--saffron-accent);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 0 3px rgba(var(--saffron-accent-rgb), 0.35);
}

/* Search form (used in header and sidebar) */
.saffron-search {
    display: flex;
    gap: 0.5rem;
}

.saffron-search input[type="search"] {
    flex: 1;
}

/* --------------------------------------------------------------
   9. Recipe Page Components
-------------------------------------------------------------- */

/* Hero media with Pin / Print actions */
.saffron-recipe-hero {
    position: relative;
    border-radius: var(--saffron-radius-lg);
    overflow: hidden;
    box-shadow: var(--saffron-shadow-lg);
}

.saffron-recipe-hero img {
    width: 100%;
    display: block;
}

.saffron-recipe-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
}

.saffron-recipe-actions .saffron-btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.8125rem;
    border-radius: var(--saffron-radius-sm);
    box-shadow: var(--saffron-shadow-sm);
}

/* Meta strip (Servings / Prep / Cook / Calories) */
.saffron-meta-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--saffron-border);
    border-radius: var(--saffron-radius-md);
    margin: 2rem 0;
    text-align: center;
}

.saffron-meta-strip__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--saffron-text-muted);
    margin-bottom: 0.25rem;
}

.saffron-meta-strip__value {
    font-weight: 600;
    font-size: 1rem;
    color: var(--saffron-text);
}

/* --------------------------------------------------------------
   Recipe tools — Jump to Recipe, servings scaler, unit toggle,
   Cook Mode (fix round 2026-10-31, items C1–C3)
-------------------------------------------------------------- */
.saffron-jump-to-recipe {
    margin: 1.25rem 0 0.5rem;
}

/* The card is the jump target; keep its top clear of the sticky
   header when the browser scrolls to the anchor. */
.saffron-recipe-card {
    scroll-margin-top: 6.5rem;
}

.saffron-recipe-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin: 0 0 2rem;
}

.saffron-scaler {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.saffron-scaler__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--saffron-text-muted);
}

.saffron-scaler__btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--saffron-border);
    background: var(--saffron-surface);
    color: var(--saffron-text);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.saffron-scaler__btn:hover {
    border-color: var(--saffron-accent);
    color: var(--saffron-accent);
}

.saffron-scaler__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.saffron-scaler__value {
    font-weight: 600;
    min-width: 5.5rem;
    text-align: center;
}

.saffron-units {
    display: inline-flex;
    border: 1px solid var(--saffron-border);
    border-radius: 999px;
    overflow: hidden;
}

.saffron-units__btn {
    border: 0;
    background: var(--saffron-surface);
    color: var(--saffron-text-muted);
    padding: 0.45rem 0.95rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.saffron-units__btn.is-active {
    background: var(--saffron-text);
    color: var(--saffron-surface);
}

/* Cook Mode overlay — big-type steps, phone-first. */
.saffron-cookmode {
    position: fixed;
    inset: 0;
    z-index: 1000;
    /* Solid surface token, shared across all schemes, so the overlay
       stays opaque in every scheme. (The old --saffron-bg token was
       never defined anywhere, which left this overlay transparent.) */
    background: var(--saffron-surface);
    color: var(--saffron-text);
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.saffron-cookmode[hidden] {
    display: none;
}

.saffron-cookmode__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.saffron-cookmode__count {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.8125rem;
    color: var(--saffron-text-muted);
}

.saffron-cookmode__wake {
    font-size: 0.8125rem;
    color: var(--saffron-text-muted);
}

.saffron-cookmode__step {
    flex: 1;
    /* Long steps scroll inside the overlay instead of pushing the nav
       off the bottom of the fixed full-screen panel (David's phone
       catch, 2026-11-01: long step text hid the Next button). Block
       layout, not flex centering — a taller-than-screen centered flex
       item clips its own top out of scroll reach. */
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 0;
    font-size: clamp(1.55rem, 2.2rem + 2vw, 2.6rem);
    line-height: 1.35;
    font-weight: 600;
    max-width: 46rem;
    margin: 0 auto;
    width: 100%;
}

.saffron-cookmode__bar,
.saffron-cookmode__nav {
    flex-shrink: 0;
}

.saffron-cookmode__nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: 46rem;
    margin: 0 auto;
    width: 100%;
}

.saffron-cookmode__nav .saffron-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Ingredients panel with circular checkboxes */
.saffron-ingredients {
    background: var(--saffron-band);
    border-radius: var(--saffron-radius-md);
    padding: 2rem;
    margin: 2rem 0;
}

.saffron-ingredients__title {
    font-family: var(--saffron-font-display);
    font-size: 1.5rem;
    margin: 0 0 1.25rem;
}

.saffron-ingredients__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.saffron-ingredients__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--saffron-border);
    font-size: 0.9375rem;
}

.saffron-ingredients__item:last-child {
    border-bottom: none;
}

.saffron-ingredients__check {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--saffron-border);
    border-radius: 50%;
    margin-top: 0.15rem;
    cursor: pointer;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color var(--saffron-transition),
                background var(--saffron-transition);
}

.saffron-ingredients__check:hover {
    border-color: var(--saffron-accent);
}

.saffron-ingredients__check:checked {
    border-color: var(--saffron-accent);
    background: var(--saffron-accent);
}

/* Numbered directions */
.saffron-directions__list {
    list-style: none;
    counter-reset: saffron-step;
    padding: 0;
    margin: 0;
}

.saffron-directions__item {
    counter-increment: saffron-step;
    position: relative;
    padding: 0 0 1.5rem 3rem;
    border-left: 2px solid var(--saffron-border);
    margin-left: 1rem;
}

.saffron-directions__item::before {
    content: counter(saffron-step);
    position: absolute;
    left: -1.05rem;
    top: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--saffron-panel);
    color: #FFFFFF;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
}

.saffron-directions__item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

/* --------------------------------------------------------------
   10. Sidebar Widgets
-------------------------------------------------------------- */
.saffron-popular-rail__item {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--saffron-border);
}

.saffron-popular-rail__item:last-child {
    border-bottom: none;
}

.saffron-popular-rail__image {
    width: 72px;
    height: 72px;
    border-radius: var(--saffron-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.saffron-popular-rail__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.saffron-popular-rail__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.25rem;
    color: var(--saffron-text);
}

.saffron-popular-rail__title a {
    color: inherit;
    text-decoration: none;
}

.saffron-popular-rail__title a:hover {
    color: var(--saffron-accent);
}

.saffron-popular-rail__views {
    font-size: 0.8125rem;
    color: var(--saffron-text-muted);
}

/* --------------------------------------------------------------
   11. Comment Rating Field (stars)
-------------------------------------------------------------- */
.saffron-comment-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.2rem;
    margin: 0.5rem 0 1rem;
}

.saffron-comment-rating input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.saffron-comment-rating label {
    cursor: pointer;
    color: var(--saffron-border);
    font-size: 1.5rem;
    line-height: 1;
    transition: color var(--saffron-transition);
}

.saffron-comment-rating input:checked ~ label,
.saffron-comment-rating label:hover,
.saffron-comment-rating label:hover ~ label {
    color: var(--saffron-accent);
}

.saffron-comment-rating input:focus-visible + label {
    outline: 2px solid var(--saffron-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------
   12. Responsive
-------------------------------------------------------------- */
@media (max-width: 782px) {
    .saffron-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 0;
    }

    .saffron-meta-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .saffron-panel {
        padding: 2rem 1.25rem;
    }

    .saffron-directions__item {
        padding-left: 2.5rem;
    }
}

/* --------------------------------------------------------------
   13. Reduced Motion
-------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .saffron-card:hover {
        transform: none;
    }

    .saffron-card:hover .saffron-card__image img {
        transform: none;
    }
}

/* --------------------------------------------------------------
   14. F2 — Comment Rating Display Stars
   Targets the role="img" wrapper and the is-filled / is-empty
   spans rendered by Saffron_Comment_Rating::render_saved_rating
   (Saffron Recipe Ratings, Step 19). Scoped under __display so
   these rules cannot affect the interactive comment-form field
   styled in section 11.
-------------------------------------------------------------- */
.saffron-comment-rating__display {
    display: inline-flex;
    gap: 0.15rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.saffron-comment-rating__display .saffron-comment-rating__star {
    font-size: 1.05rem;
    line-height: 1;
}

.saffron-comment-rating__display .saffron-comment-rating__star.is-filled {
    color: var(--saffron-accent);
}

.saffron-comment-rating__display .saffron-comment-rating__star.is-empty {
    color: var(--saffron-border);
}

/* --------------------------------------------------------------
   15. F3 — Rating Stars block
   Targets the .saffron-rating-stars wrapper and inner class
   names rendered by saffron-recipe-ratings/blocks/rating-stars/
   render.php (Step 20B). JS (view.js, Step 20D) rewrites the
   .is-filled / .is-half / .is-empty state classes after a vote.
-------------------------------------------------------------- */

/* Outer wrapper — stacks the star row above the count (and, after
   a failed vote, above the error row). */
.saffron-rating-stars {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Star row containers — identical layout whether the stars are
   interactive buttons (__vote) or a display-only row (__display). */
.saffron-rating-stars__vote,
.saffron-rating-stars__display {
    display: inline-flex;
    gap: 0.2rem;
    line-height: 1;
}

/* Busy state (view.js sets aria-busy="true" on __vote during flight). */
.saffron-rating-stars__vote[aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}

/* Interactive buttons — reset, so the star glyphs are the only
   visible affordance. Mirrors section 11's interactive field. */
.saffron-rating-stars__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    border-radius: 2px;
    transition: color var(--saffron-transition);
}

.saffron-rating-stars__btn:disabled {
    cursor: default;
}

.saffron-rating-stars__btn:focus-visible {
    outline: 2px solid var(--saffron-accent);
    outline-offset: 2px;
}

/* Star glyph base + state colours. */
.saffron-rating-stars__star {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--saffron-border);
    transition: color var(--saffron-transition);
}

.saffron-rating-stars__star.is-filled {
    color: var(--saffron-accent);
}

.saffron-rating-stars__star.is-empty {
    color: var(--saffron-border);
}

/* Half-star technique: background-clip: text with a 50/50 linear
   gradient. The glyph inside is the filled ★ character; setting
   color / text-fill to transparent lets the gradient (clipped to
   the glyph) show through — accent on the left half, border on the
   right half. -webkit- prefixed variants are included for Safari
   and Blink engines; color: transparent is enough for Firefox. */
.saffron-rating-stars__star.is-half {
    color: transparent;
    background-image: linear-gradient(
        90deg,
        var(--saffron-accent) 50%,
        var(--saffron-border) 50%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Interactive hover preview: hovering button N fills buttons 1..N
   (visual preview of the vote). The :has() chain is used because
   the buttons are in DOM order 1→5 and we cannot reverse the DOM
   without editing render.php; :has() lets us select preceding
   siblings via the container's child index. The :not(:disabled)
   guard stops a preview firing after a vote has been cast (view.js
   keeps buttons disabled after success). The background-image and
   -webkit-text-fill-color overrides ensure a half-filled star
   becomes fully filled during the hover preview. */
.saffron-rating-stars__vote:has(.saffron-rating-stars__btn:nth-child(1):hover:not(:disabled)) .saffron-rating-stars__btn:nth-child(-n + 1) .saffron-rating-stars__star,
.saffron-rating-stars__vote:has(.saffron-rating-stars__btn:nth-child(2):hover:not(:disabled)) .saffron-rating-stars__btn:nth-child(-n + 2) .saffron-rating-stars__star,
.saffron-rating-stars__vote:has(.saffron-rating-stars__btn:nth-child(3):hover:not(:disabled)) .saffron-rating-stars__btn:nth-child(-n + 3) .saffron-rating-stars__star,
.saffron-rating-stars__vote:has(.saffron-rating-stars__btn:nth-child(4):hover:not(:disabled)) .saffron-rating-stars__btn:nth-child(-n + 4) .saffron-rating-stars__star,
.saffron-rating-stars__vote:has(.saffron-rating-stars__btn:nth-child(5):hover:not(:disabled)) .saffron-rating-stars__btn:nth-child(-n + 5) .saffron-rating-stars__star {
    color: var(--saffron-accent);
    background-image: none;
    -webkit-text-fill-color: var(--saffron-accent);
}

/* Count text ("4.5 from 128 ratings" / "Be the first to rate"). */
.saffron-rating-stars__count {
    font-size: 0.8125rem;
    color: var(--saffron-text-muted);
    line-height: 1.4;
}

/* Error row. view.js converts the SR-only status span into a
   visible element by removing .screen-reader-text and adding this
   class; on a later success it restores the SR-only form. */
.saffron-rating-stars__error {
    color: var(--saffron-error);
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-top: 0.25rem;
}

/* Already-voted note (fix round 2026-10-31, item A4). Rendered by
   the Rating Stars block when the visitor's vote cookie already
   covers the recipe, alongside disabled buttons — the reload-state
   counterpart of the server-side cookie guard. */
.saffron-rating-stars__voted-note {
    color: var(--saffron-text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-top: 0.25rem;
}

/* Featured Categories panels (fix round 2026-10-31, item B2).
   Rendered by the saffron/featured-categories block (Saffron Core)
   using section 6's overlay-card anatomy. Two additions: the title
   link's hit area stretches across the whole panel (same
   stretched-link pattern as A1 — the gradient ::after has
   pointer-events:none, so taps pass through to the link), the count
   line under the category name, and a no-photo variant for
   categories whose recipes have no featured image yet (title sits
   in normal flow in ink colour instead of floating over a photo
   that isn't there). */
.saffron-featured-categories__panel .saffron-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.saffron-featured-categories__count {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--saffron-font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.saffron-card--overlay.saffron-card--no-photo {
    min-height: 10rem;
    display: flex;
    align-items: flex-end;
}

.saffron-card--overlay.saffron-card--no-photo::after {
    display: none;
}

.saffron-card--overlay.saffron-card--no-photo .saffron-card__title {
    position: static;
    padding: 1rem 1.25rem 1.25rem;
    color: var(--saffron-text);
    text-shadow: none;
}

/* Newsletter signup (fix round 2026-10-31, item B5). The form is
   rendered by the saffron/newsletter-form block (Saffron Core) with
   the theme's existing form classes; additions are the honeypot
   (kept off-screen and out of the tab order by markup) and the
   status notes the block renders after a signup attempt. */
.saffron-newsletter__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.saffron-newsletter__note {
    text-align: center;
    font-weight: 600;
    margin: 0 auto 1rem;
    max-width: 34rem;
}

.saffron-newsletter__note--error {
    color: var(--saffron-accent);
}

/* New-tab indicator (fix round 2026-10-31, item B6). Shown next to
   the recipe card's Print/Pin labels — both open a new tab, and the
   link now says so visibly (glyph) and to assistive tech
   (screen-reader text in the markup). */
.saffron-newtab {
    font-size: 0.8em;
    line-height: 1;
    margin-left: 0.3em;
}

/* --------------------------------------------------------------
   16. F4 — Recipe Index block
   Targets the .saffron-index__* classes rendered by
   Saffron_Index_Render (Step 23b) and the editor notice emitted
   by blocks/recipe-index/render.php (Step 25B). Every rule uses
   the scheme variables above so all color variants carry through.
-------------------------------------------------------------- */

/* Outer wrapper — vertical stack of filter form, results, pagination. */
.saffron-index {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* Editor-only notice (Step 25B carries inline styles too; this is
   the fallback for the rare case where the inline styles are
   stripped by a CSP that allows only same-origin stylesheets). */
.saffron-index__notice {
    padding: 1rem;
    border: 1px dashed var(--saffron-error);
    border-radius: var(--saffron-radius-sm);
    background: var(--saffron-surface);
    color: var(--saffron-error);
    font-family: var(--saffron-font-body, inherit);
    line-height: 1.4;
}

/* --- Filter form ---------------------------------------------------- */

.saffron-index__filters {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--saffron-band);
    border: 1px solid var(--saffron-border);
    border-radius: var(--saffron-radius-md);
}

.saffron-index__category-group {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.saffron-index__group-label {
    display: block;
    margin: 0 0 0.75rem;
    padding: 0;
    font-family: var(--saffron-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--saffron-text-muted);
}

.saffron-index__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Pill = label wrapping a hidden checkbox. The label itself is the
   visible affordance. Hidden input via position: absolute + opacity: 0
   so keyboard focus is preserved; the label picks up the focus ring
   via :focus-within. */
.saffron-index__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.95rem;
    background: var(--saffron-surface);
    border: 1px solid var(--saffron-border);
    border-radius: var(--saffron-radius-pill);
    color: var(--saffron-text);
    font-size: 0.875rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--saffron-transition),
                background var(--saffron-transition),
                color var(--saffron-transition);
}

.saffron-index__pill:hover {
    border-color: var(--saffron-text-muted);
}

.saffron-index__pill:focus-within {
    outline: 2px solid var(--saffron-accent);
    outline-offset: 2px;
}

.saffron-index__pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.saffron-index__pill-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    white-space: nowrap;
}

.saffron-index__pill-count {
    font-size: 0.75rem;
    color: var(--saffron-text-muted);
    transition: color var(--saffron-transition);
}

/* Selected state — accent fill, white text. The count text switches
   to translucent white so it stays readable on the accent ground. */
.saffron-index__pill.is-selected {
    background: var(--saffron-accent);
    border-color: var(--saffron-accent);
    color: #FFFFFF;
}

.saffron-index__pill.is-selected .saffron-index__pill-count {
    color: rgba(255, 255, 255, 0.8);
}

.saffron-index__pill.is-selected:hover {
    border-color: var(--saffron-accent);
    filter: brightness(0.94);
}

/* Search row — the input inherits section 8's styling wholesale,
   so the row only has to lay it out. */
.saffron-index__search-row {
    display: block;
}

.saffron-index__search {
    width: 100%;
}

/* Controls row — sort / apply / clear on one line at desktop,
   wraps gracefully on narrow viewports. */
.saffron-index__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.saffron-index__order-label {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.saffron-index__order-label .saffron-index__group-label {
    margin: 0;
}

.saffron-index__order {
    width: auto;
    min-width: 12rem;
}

.saffron-index__apply {
    align-self: flex-end;
}

.saffron-index__clear {
    align-self: flex-end;
    font-size: 0.875rem;
    color: var(--saffron-text-muted);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color var(--saffron-transition);
}

.saffron-index__clear:hover {
    color: var(--saffron-accent);
}

/* --- Results grid -------------------------------------------------- */

.saffron-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2rem;
}

/* Card — inherits section 6's .saffron-card conventions; this rule
   makes the <a> a proper block-level flex column so its span
   children stack and the section 6 spacing applies. */
.saffron-index__card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.saffron-index__card .saffron-card__title {
    display: block;
}

.saffron-index__card-eyebrow {
    padding: 0.75rem 1.25rem 0;
    margin-bottom: 0;
}

.saffron-index__card-meta {
    padding-bottom: 0.75rem;
}

.saffron-index__card-rating {
    align-self: center;
    margin: 0 0 1.25rem;
    padding: 0 1.25rem;
}

.saffron-index__card-rating .saffron-rating-stars__star {
    font-size: 1rem;
}

/* Empty state — centered, banded, matches the section 4 pale band. */
.saffron-index__empty {
    padding: 3rem 1.5rem;
    background: var(--saffron-band);
    border: 1px solid var(--saffron-border);
    border-radius: var(--saffron-radius-md);
    text-align: center;
}

.saffron-index__empty p {
    margin: 0;
    color: var(--saffron-text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* --- Pagination ---------------------------------------------------- */

.saffron-index__pagination {
    display: flex;
    justify-content: center;
}

.saffron-index__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.saffron-index__pagination .page-numbers > li {
    margin: 0;
    padding: 0;
}

.saffron-index__pagination .page-numbers a,
.saffron-index__pagination .page-numbers span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: var(--saffron-radius-sm);
    border: 1px solid var(--saffron-border);
    background: var(--saffron-surface);
    color: var(--saffron-text);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--saffron-transition),
                color var(--saffron-transition),
                background var(--saffron-transition);
}

.saffron-index__pagination .page-numbers a:hover {
    border-color: var(--saffron-accent);
    color: var(--saffron-accent);
}

.saffron-index__pagination .page-numbers a:focus-visible {
    outline: 2px solid var(--saffron-accent);
    outline-offset: 2px;
}

.saffron-index__pagination .page-numbers .current {
    background: var(--saffron-accent);
    border-color: var(--saffron-accent);
    color: #FFFFFF;
    cursor: default;
}

.saffron-index__pagination .page-numbers .dots {
    border: none;
    background: transparent;
    color: var(--saffron-text-muted);
    min-width: auto;
}

/* Responsive — sort, apply, and clear stack on narrow screens. */
@media (max-width: 600px) {
    .saffron-index__controls {
        flex-direction: column;
        align-items: stretch;
    }

    .saffron-index__order {
        width: 100%;
    }

    .saffron-index__apply,
    .saffron-index__clear {
        align-self: stretch;
        text-align: center;
    }

    .saffron-index__grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------
   17. F5 — Consolidated polish pass
   Closes the small CSS gaps surfaced during Phase 7 (Step 28's
   header/footer/sidebar parts, Steps 31–33's patterns). Nothing
   above this section changes; every rule below is additive.
-------------------------------------------------------------- */

/* --- (1) Search block button -----------------------------------
   Core's search block renders its submit as
   <button class="wp-block-search__button wp-element-button">.
   Section 7 styles .wp-block-button__link (button blocks) but not
   this class, so the button inherited WordPress's block-library
   default. Match the theme's primary button treatment. The
   .wp-block-search prefix raises specificity above the block
   library's single-class default. */
.wp-block-search .wp-block-search__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--saffron-radius-sm);
    border: 1px solid transparent;
    background: var(--saffron-panel);
    color: #FFFFFF;
    font-family: var(--saffron-font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--saffron-transition),
                box-shadow var(--saffron-transition);
}

.wp-block-search .wp-block-search__button:hover {
    background: #1C1917;
    box-shadow: var(--saffron-shadow-md);
}

.wp-block-search .wp-block-search__button:focus-visible {
    outline: 2px solid var(--saffron-accent);
    outline-offset: 2px;
}

/* --- (2) Newsletter email input flex ----------------------------
   Section 8's .saffron-search rule stretches only
   input[type="search"]; the newsletter form uses input[type="email"].
   Extend the same flex rule so the email field stretches to fill
   the row and the Subscribe button keeps its intrinsic width. */
.saffron-search input[type="email"] {
    flex: 1;
}

/* --- (3) Part wrapper layout classes ----------------------------
   Header and sidebar part wrappers (Step 28). Each group was
   already laid out by core layout rules; these tighten spacing
   and set the small structural details the parts were authored
   against. */

/* Top-bar links paragraph: flush, quiet, one line. */
.top-bar__links {
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--saffron-text-muted);
}

/* Header main row: a hairline rule separates the wordmark row
   from the page content below. The slim top bar already has its
   own bottom border (section 2). */
.header-main {
    border-bottom: 1px solid var(--saffron-border);
}

/* Branding stack: wordmark over tagline, tightened together. */
.header-branding {
    gap: 0.25rem;
}

.header-branding .wp-block-site-title,
.header-branding .wp-block-site-tagline {
    margin: 0;
}

/* Nav row: navigation + search side by side with breathing room,
   search capped so it does not crowd the nav on wide viewports. */
.header-nav {
    gap: 1.5rem;
}

.header-nav .wp-block-search {
    max-width: 22rem;
}

/* Sidebar widget stack: each widget separated by a hairline,
   the last one unruled. Headings use the serif display face so
   sidebar widgets match the section system. */
.saffron-sidebar__widget {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--saffron-border);
}

.saffron-sidebar__widget:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.saffron-sidebar__widget .wp-block-heading {
    margin-top: 0;
    margin-bottom: 1rem;
    font-family: var(--saffron-font-display);
    font-size: 1.25rem;
    color: var(--saffron-text);
}

/* --- (4) Category cards grid -----------------------------------
   The browse-categories pattern (Step 31) applies the class
   .saffron-category-cards to core/categories. Core renders it as
   a <ul> with one <li> per term (name link + count text). Turn
   the list into a card grid; each <li> becomes a card matching
   section 6's .saffron-card visual rhythm. */
.saffron-category-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.saffron-category-cards > li {
    margin: 0;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--saffron-surface);
    border: 1px solid var(--saffron-border);
    border-radius: var(--saffron-radius-md);
    box-shadow: var(--saffron-shadow-sm);
    color: var(--saffron-text-muted);
    font-size: 0.875rem;
    line-height: 1.4;
    transition: transform var(--saffron-transition),
                box-shadow var(--saffron-transition),
                border-color var(--saffron-transition);
}

.saffron-category-cards > li:hover {
    transform: translateY(-2px);
    box-shadow: var(--saffron-shadow-md);
    border-color: var(--saffron-accent);
}

.saffron-category-cards > li > a {
    color: var(--saffron-text);
    font-family: var(--saffron-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--saffron-transition);
}

.saffron-category-cards > li:hover > a {
    color: var(--saffron-accent);
}

/* --- Whole-card tap target (fix round 2026-10-31, item A1) ---
   Only the category name was a link, so most of the card was dead
   space on touch devices (David found this by tapping). Stretch the
   name link's hit area across the entire card with an ::after
   overlay — the classic stretched-link pattern. The count text sits
   outside the anchor in core's markup but under the overlay, so the
   whole card navigates while the markup stays core's own. */
.saffron-category-cards > li {
    position: relative;
}

.saffron-category-cards > li > a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* --- (5) Overlaid card title links inherit the overlay color ---
   Section 6 colours .saffron-card__title containers (#FFFFFF on
   overlay cards, --saffron-text on plain cards) but does not
   touch any <a> inside them, so a link inherits theme.json's
   accent instead of the container colour. Make the link inherit
   whatever the container set. This also makes the inline
   color:#FFFFFF workaround in the collections pattern (Step 32)
   redundant — it remains harmless. On hover, plain cards
   transition to accent; overlay cards keep white and underline
   so legibility against the photo is preserved. */
.saffron-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--saffron-transition);
}

.saffron-card__title a:hover {
    color: var(--saffron-accent);
}

.saffron-card--overlay .saffron-card__title a:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(255, 255, 255, 0.7);
}

/* --- (6) Collection description typography ---------------------
   The collections pattern (Step 32) styles each panel's excerpt
   with .saffron-collection__description. Match section 6's
   .saffron-card__meta rhythm — small, muted, comfortable line
   height — so the caption under each panel reads as supporting
   text, not as body copy. */
.saffron-collection__description {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--saffron-text-muted);
}

/* --- (7) About-band image sizing -------------------------------
   The about-band pattern (Step 33) ships an empty image block
   inside .saffron-about__image; the editor selects an image.
   When one is present, give the image a portrait aspect ratio
   matching the two-column band's proportions and rounded
   corners matching the hero. On an empty block (no <img>), no
   rule applies and the figure collapses cleanly. */
.saffron-about__image {
    margin: 0;
    overflow: hidden;
}

.saffron-about__image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

/* --- (8) Single-recipe prev/next navigation --------------------
   The single-recipe template (Step 29b) wraps two
   post-navigation-link blocks in .saffron-post-nav. Style them
   as inline text links matching section 2's nav rhythm; the
   "Previous recipe" / "Next recipe" label reads as a quiet
   eyebrow above the destination title. */
.saffron-post-nav {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--saffron-border);
}

.saffron-post-nav a {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--saffron-text);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--saffron-transition);
}

.saffron-post-nav a:hover {
    color: var(--saffron-accent);
}

.saffron-post-nav .post-navigation-link__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--saffron-text-muted);
}