/* =============================================================================
   LEGAL PAGES - Privacy Policy, Terms & Conditions
   -----------------------------------------------------------------------------
   Reading pages: the same dark title band as About Us and Menu, then one
   comfortable column of text. Shared by every legal page so they cannot drift.
   Every value comes from the design system (fs-theme.css).
   ========================================================================== */

/* ---------- HERO ------------------------------------------------------- */
.legal-hero { position: relative; background-color: var(--surface-dark); }
.legal-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(115% 95% at 50% 45%,
                rgba(18,16,15,.20) 0%, rgba(18,16,15,.68) 58%, rgba(18,16,15,.92) 100%);
}
.legal-hero .container { position: relative; z-index: 2; }
.legal-hero .page-heading h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.01em;
    text-transform: uppercase;
}
.legal-hero__l1, .legal-hero__l2 { display: block; }
.legal-hero__l1 { color: var(--n-0); }
.legal-hero__l2 { color: var(--brand-500); }
.legal-hero__rule {
    display: block; width: 58px; height: 2px;
    background-color: var(--brand-500);
    border-radius: 2px;
    margin: 26px auto 0;
}

/* ---------- TEXT ------------------------------------------------------- */
/* translucent, so the illustrated backdrop reads through like the other pages */
.legal-section {
    padding: var(--space-section-md) 0 var(--space-section);
    background-color: transparent;   /* the #F04E3E backdrop shows as it is */
}
:root[data-theme="dark"] .legal-section { background-color: var(--surface); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .legal-section { background-color: var(--surface); }
}

.legal-col {
    max-width: 780px;
    margin: 0 auto;
    font-family: var(--font-ui);
    font-size: var(--step-base);
    line-height: 1.75;
    color: var(--ink-body);
}
.legal-col p { margin: 0 0 16px; }
.legal-updated {
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-brand);
}
.legal-col h2 {
    margin: 44px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--ink);
}
.legal-col h2:after {
    content: ""; display: block;
    width: 42px; height: 3px;
    margin-top: 10px;
    border-radius: 3px;
    background-color: var(--brand-500);
}
.legal-col h3 {
    margin: 30px 0 12px;
    font-family: var(--font-ui);
    font-size: var(--step-lg);
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
}
.legal-col h4 {
    margin: 22px 0 8px;
    font-family: var(--font-ui);
    font-size: var(--step-base);
    font-weight: 700;
    line-height: 1.45;
    color: var(--ink);
}
.legal-col ul { margin: 0 0 20px; padding-left: 22px; }
.legal-col li { margin-bottom: 12px; }
.legal-col li::marker { color: var(--brand-500); }
/* main.css removes list bullets site-wide; a list that should show them opts in */
.legal-col ul.legal-bullets { list-style: disc; }
.legal-col strong { color: var(--ink); font-weight: 600; }
.legal-col a {
    color: var(--ink-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}
.legal-col a:hover { color: var(--brand-600); }

/* clauses that already carry their own letter or number ("A.", "1.") in the
   text, so the list adds no bullet of its own */
.legal-col ul.legal-clauses { list-style: none; padding-left: 0; }
.legal-col ul.legal-clauses ul.legal-clauses { padding-left: 22px; }

/* a line that titles a set of terms within a part */
.legal-subtitle {
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .02em;
}

/* ---------- LONG PAGES: parts and a contents list ----------------------- */
.legal-part { scroll-margin-top: 96px; }
.legal-part + .legal-part {
    margin-top: 56px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.legal-part > h2:first-child { margin-top: 28px; }

.legal-toc {
    margin: 8px 0 12px;
    padding: 18px 22px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.legal-toc__title {
    margin: 0 0 8px;
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.legal-col .legal-toc ol { margin: 0; padding-left: 20px; }
.legal-col .legal-toc li { margin: 4px 0; }
.legal-col .legal-toc li::marker { color: var(--ink-muted); }
.legal-col .legal-toc a { text-decoration: none; }
.legal-col .legal-toc a:hover { text-decoration: underline; }

/* ---------- ALLERGEN SEARCH TOOL (allergens.php) ------------------------ */
.allergen-tool {
    margin: 32px 0 12px;
    padding: 24px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    scroll-margin-top: 96px;
}
.legal-col .allergen-tool h3 { margin-top: 4px; }
.allergen-tool__eyebrow,
.allergen-tool__label {
    margin: 0 0 8px;
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-brand);
}
.allergen-tool__label { margin-top: 20px; color: var(--ink-muted); }

.allergen-tool__tabs {
    display: inline-flex; flex-wrap: wrap; gap: 6px;
    padding: 4px;
    background-color: var(--surface-muted);
    border-radius: var(--r-pill);
}
.allergen-tool__tab {
    min-height: 40px; padding: 0 16px;
    border: 0; border-radius: var(--r-pill);
    background: transparent;
    font-family: var(--font-ui); font-size: 14px; font-weight: 600;
    color: var(--ink-body);
    cursor: pointer;
    transition: background-color var(--t), color var(--t);
}
.allergen-tool__tab.is-active { background-color: var(--btn-primary); color: var(--n-0); box-shadow: var(--sh-brand); }
.allergen-tool__tab:focus-visible,
.allergen-tool__chip:focus-visible { outline: none; box-shadow: var(--ring); }

.allergen-tool__pane { margin-top: 14px; }
.allergen-tool__input {
    width: 100%; min-height: 48px; padding: 0 16px;
    font-family: var(--font-ui); font-size: var(--step-base);
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
}
.allergen-tool__input:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--ring); }

.allergen-tool__allergens {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px;
    margin: 0; padding: 0; border: 0;
}
.allergen-tool__check { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-body); cursor: pointer; }
.allergen-tool__check input { accent-color: var(--brand-500); width: 17px; height: 17px; }

.allergen-tool__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.allergen-tool__chip {
    min-height: 38px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background-color: var(--surface);
    font-family: var(--font-ui); font-size: 13px; font-weight: 500;
    color: var(--ink-body);
    cursor: pointer;
    transition: background-color var(--t), color var(--t), border-color var(--t);
}
.allergen-tool__chip:hover { border-color: var(--line-strong); background-color: var(--surface-sunken); color: var(--ink); }
.allergen-tool__chip.is-active { background-color: var(--btn-primary); border-color: var(--btn-primary); color: var(--n-0); }

.allergen-tool__results:not(:empty) { margin-top: 20px; }
.allergen-tool__count { margin: 0 0 10px; font-weight: 600; color: var(--ink); }
.legal-col ul.allergen-tool__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legal-col .allergen-tool__item {
    margin: 0; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background-color: var(--surface-page);
}
.allergen-tool__name { display: block; font-weight: 600; color: var(--ink); line-height: 1.4; }
.allergen-tool__section { display: block; font-size: 13px; color: var(--ink-muted); }
.allergen-tool__note { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--ink-body); }
.allergen-tool__empty { margin: 0; color: var(--ink-muted); }
.allergen-tool__notice {
    margin: 0; padding: 14px 16px;
    border-left: 3px solid var(--brand-500);
    border-radius: var(--r-sm);
    background-color: var(--surface-tint);
    color: var(--ink);
}
:root[data-theme="dark"] .allergen-tool__notice { background-color: rgba(240, 78, 62, .12); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .allergen-tool__notice { background-color: rgba(240, 78, 62, .12); }
}

/* ---------- FAQS (click to open) ---------------------------------------- */
.legal-faq { display: grid; gap: 8px; margin: 0 0 12px; }
.legal-faq details {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background-color: var(--surface);
}
.legal-faq summary {
    position: relative;
    padding: 14px 44px 14px 16px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.legal-faq summary::-webkit-details-marker { display: none; }
.legal-faq summary:after {
    content: "+";
    position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%);
    font-size: 22px; font-weight: 400; line-height: 1;
    color: var(--brand-500);
}
.legal-faq details[open] summary:after { content: "\2212"; }
.legal-faq summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-md); }
.legal-faq details p { margin: 0; padding: 0 16px 16px; }

@media (max-width: 767px) {
    .allergen-tool { padding: 18px 16px; }
    .allergen-tool__allergens { grid-template-columns: 1fr; }
    /* two equal halves side by side - wrapped inside a pill they read as a blob */
    .allergen-tool__tabs {
        display: grid; grid-template-columns: 1fr 1fr;
        width: 100%;
        border-radius: var(--r-md);
    }
    .allergen-tool__tab {
        min-height: 46px; padding: 6px 10px;
        border-radius: var(--r-sm);
        font-size: 13px; line-height: 1.25;
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .legal-hero__rule { margin-top: 20px; width: 46px; }
    .legal-section .container { padding-left: 20px; padding-right: 20px; }
    .legal-col { font-size: 15.5px; line-height: 1.7; }
    .legal-col h2 { margin-top: 36px; }
    .legal-toc { padding: 14px 16px; }
}

/* ---------- DESKTOP: WIDE COLUMN, LARGER TEXT --------------------------- */
/* The same as About Us: from 992px the text runs almost the full width of the
   screen, a size up. A share of the container rather than vw, because the
   site is drawn at a scale on large screens (fs-theme.css). */
@media (min-width: 992px) {
    .legal-section .container { max-width: none; width: 100%; }
    .legal-col { max-width: 94%; font-size: 20px; line-height: 1.75; }
    .legal-col p { margin-bottom: 20px; }
    .legal-updated { font-size: 14px; }

    .legal-col h2 { margin: 56px 0 18px; font-size: clamp(1.875rem, 2.8vw, 2.625rem); }
    .legal-col h2:after { width: 52px; margin-top: 14px; }
    .legal-col h3 { margin: 36px 0 14px; font-size: 23px; }
    .legal-col h4 { font-size: 20px; }
    .legal-col ul { padding-left: 26px; }
    .legal-col li { margin-bottom: 14px; }

    .legal-toc { padding: 24px 30px; }
    .legal-toc__title { font-size: 14px; }

    .allergen-tool { padding: 32px 36px; }
    .allergen-tool__eyebrow,
    .allergen-tool__label { font-size: 14px; }
    .allergen-tool__tab { min-height: 48px; padding: 0 22px; font-size: 16px; }
    .allergen-tool__input { min-height: 56px; font-size: 18px; }
    .allergen-tool__allergens { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px; }
    .allergen-tool__check { font-size: 18px; }
    .allergen-tool__check input { width: 20px; height: 20px; }
    .allergen-tool__chip { min-height: 44px; padding: 0 18px; font-size: 15.5px; }
    .allergen-tool__section { font-size: 15px; }
    .allergen-tool__note { font-size: 16px; }

    .legal-faq summary { padding: 18px 52px 18px 20px; font-size: 19px; }
    .legal-faq details p { padding: 0 20px 20px; }
}