/* ═══════════════════════════════════════════
   Charlie's Fried Chicken – Legal / policy pages
   Terms and Conditions · Privacy Policy · Allergens
   Mobile-first: single column by default, contents
   sidebar only appears once there is room for it.
   ═══════════════════════════════════════════ */

.cfc-legal-page {
    /* Brand red is the only red on these pages — no darker variant, so nothing
       here can drift back to the maroon the rest of the site uses for hovers. */
    --cfc-red: #ff0006;
    --cfc-cream: #f5f0eb;
    /* Panel fill for the lede and contact blocks. Neutral grey rather than the
       brand cream, so the red sidebar is the only warm note on the page. */
    --cfc-panel: #f4f4f5;
    --cfc-black: #111111;
    --cfc-white: #ffffff;
    --cfc-grey: #5f5f5f;
    --cfc-line: #ececec;
    --cfc-red-tint: #fff4f4;
    --cfc-font-heading: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --cfc-font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif;

    font-family: var(--cfc-font-body);
    color: var(--cfc-black);
    background: var(--cfc-white);
}

.cfc-legal-page *,
.cfc-legal-page *::before,
.cfc-legal-page *::after {
    box-sizing: border-box;
}

/* Close the theme's #Content padding so the hero sits flush against the site
   header. Scoped to the body class Charlies_Legal adds, so no other page moves. */
body.cfc-legal-template #Content {
    padding-top: 0;
}

/* ─── Hero banner (full-bleed, flush to the header) ─── */
.cfc-legal-hero {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    /* Compact by design — a document page wants its copy near the top, so this
       is a title bar rather than the tall marketing hero used elsewhere. */
    min-height: var(--legal-hero-h-mobile, 150px);
    background-size: cover;
    background-position: center;
    /* Flat black, no gradient — these are documents, not marketing pages, and
       the black reads as a quieter counterpart to the red brand heroes. */
    background-color: var(--cfc-black);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.cfc-legal-hero--noimg {
    background-image: none;
}

.cfc-legal-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--legal-hero-tint, #000);
    opacity: var(--legal-hero-tint-alpha, 0.45);
    z-index: 1;
    pointer-events: none;
}

.cfc-legal-hero--noimg .cfc-legal-hero__overlay {
    opacity: 0; /* the gradient already provides contrast */
}

.cfc-legal-hero__content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    padding: clamp(2rem, 6vw, 3rem) 1.25rem;
}

.cfc-legal-hero__eyebrow {
    display: block;
    font-family: var(--cfc-font-heading);
    font-size: clamp(0.7rem, 2.6vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0.75rem;
}

.cfc-legal-hero__title {
    font-family: var(--cfc-font-heading);
    /* Small on phones by intent: this is a document label, not a headline, and
       "TERMS & CONDITIONS" at marketing size ate the whole screen width. */
    font-size: var(--legal-hero-title-size-mobile, clamp(1.1rem, 5vw, 1.6rem));
    /* Betheme colours every h1 from its own palette, which paints this dark
       against the red hero — pin it to the hero's own colour instead. */
    color: #fff;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
    /* Long titles ("TERMS AND CONDITIONS") must not overflow narrow phones. */
    overflow-wrap: break-word;
    hyphens: auto;
}

.cfc-legal-hero__subtitle {
    margin: 0.9rem auto 0;
    max-width: 46rem;
    font-size: clamp(0.95rem, 3.4vw, 1.05rem);
    line-height: 1.55;
    opacity: 0.94;
}

/* ─── Page shell ─── */
.cfc-legal__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 3.25rem) 1.25rem clamp(3rem, 9vw, 5.5rem);
}

/* ─── Contents nav ───
   Collapsed by default on mobile so the copy starts near the top of the
   screen; forced open from the sidebar breakpoint up. */
.cfc-legal__toc {
    margin: 0 0 2rem;
    background: var(--cfc-red);
    border-radius: 12px;
    padding: 0.25rem 1rem;
}

.cfc-legal__toc-title {
    font-family: var(--cfc-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    padding: 0.9rem 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* Comfortable tap target on mobile. */
    min-height: 44px;
}

.cfc-legal__toc-title::-webkit-details-marker {
    display: none;
}

.cfc-legal__toc-title::after {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex: none;
}

.cfc-legal__toc-details[open] .cfc-legal__toc-title::after {
    transform: rotate(-135deg);
}

.cfc-legal__toc-list {
    margin: 0;
    padding: 0 0 1rem;
    /* The section headings already carry their own numbering ("1. Changes to
       These Terms"), so a decimal marker here would double it up. */
    list-style: none;
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.5;
}

.cfc-legal__toc-list li {
    margin: 0 0 0.55rem;
}

.cfc-legal__toc-list a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.cfc-legal__toc-list a:hover,
.cfc-legal__toc-list a:focus-visible {
    border-bottom-color: currentColor;
}

/* ─── Body copy ─── */
.cfc-legal__body {
    font-size: clamp(0.98rem, 3.2vw, 1.02rem);
    line-height: 1.7;
    color: #2b2b2b;
    /* Long URLs and email addresses must not blow out the layout on phones. */
    overflow-wrap: break-word;
}

.cfc-legal__body > *:first-child {
    margin-top: 0;
}

.cfc-legal__body .cfc-legal__lede {
    font-size: clamp(1.02rem, 3.6vw, 1.12rem);
    line-height: 1.65;
    color: var(--cfc-black);
    padding: 1rem 1.15rem;
    background: var(--cfc-panel);
    border-left: 4px solid var(--cfc-red);
    border-radius: 0 8px 8px 0;
    margin: 0 0 2rem;
}

.cfc-legal__body h2 {
    font-family: var(--cfc-font-heading);
    font-size: clamp(1.15rem, 4.4vw, 1.4rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--cfc-black);
    margin: 2.6rem 0 0.85rem;
    padding-top: 1.4rem;
    border-top: 2px solid var(--cfc-line);
    /* Same header clearance as the sticky sidebar, so a contents link doesn't
       land the heading underneath the fixed header. */
    scroll-margin-top: calc(var(--cfc-h-height-actual, 96px) + 1rem);
}

.cfc-legal__body h2:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.cfc-legal__body h3 {
    font-family: var(--cfc-font-heading);
    font-size: clamp(1rem, 3.8vw, 1.1rem);
    font-weight: 700;
    color: var(--cfc-red);
    margin: 1.8rem 0 0.6rem;
    /* Same header clearance as the sticky sidebar, so a contents link doesn't
       land the heading underneath the fixed header. */
    scroll-margin-top: calc(var(--cfc-h-height-actual, 96px) + 1rem);
}

.cfc-legal__body p {
    margin: 0 0 1.05rem;
}

.cfc-legal__body ul,
.cfc-legal__body ol {
    margin: 0 0 1.25rem;
    padding-left: 1.35rem;
}

.cfc-legal__body li {
    margin: 0 0 0.5rem;
}

.cfc-legal__body ul {
    list-style: none;
    padding-left: 0;
}

.cfc-legal__body ul > li {
    position: relative;
    padding-left: 1.4rem;
}

.cfc-legal__body ul > li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cfc-red);
}

.cfc-legal__body a {
    color: var(--cfc-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Links are already brand red at rest, so hover thickens the underline rather
   than shifting colour — otherwise there'd be no hover feedback at all. */
.cfc-legal__body a:hover,
.cfc-legal__body a:focus-visible {
    text-decoration-thickness: 2px;
}

.cfc-legal__body strong {
    font-weight: 700;
    color: var(--cfc-black);
}

/* Contact / company detail blocks. */
.cfc-legal__body .cfc-legal__contact {
    background: var(--cfc-panel);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin: 0 0 1.25rem;
    line-height: 1.7;
}

.cfc-legal__body .cfc-legal__contact p {
    margin: 0;
}

.cfc-legal__updated {
    margin: 2.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 2px solid var(--cfc-line);
    font-size: 0.88rem;
    color: var(--cfc-grey);
}

/* ─── Back to top ─── */
.cfc-legal__top {
    display: inline-block;
    margin-top: 2rem;
    font-family: var(--cfc-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cfc-red);
    text-decoration: none;
    padding: 0.75rem 0;
    min-height: 44px;
}

.cfc-legal__top:hover,
.cfc-legal__top:focus-visible {
    text-decoration: underline;
}

/* ─── Desktop: contents becomes a sticky sidebar ─── */
@media (min-width: 900px) {
    .cfc-legal-hero {
        min-height: var(--legal-hero-h-desktop, 230px);
    }

    .cfc-legal-hero__title {
        font-size: var(--legal-hero-title-size, clamp(2rem, 3.4vw, 2.75rem));
    }

    .cfc-legal__inner {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 3.5rem);
        align-items: start;
    }

    .cfc-legal__toc {
        position: sticky;
        /* Clear the fixed site header. --cfc-h-height-actual is measured from
           the live header by the JS in class-charlies-header.php, so this stays
           correct when the slots bar or a taller ACF logo changes its height —
           a fixed rem offset tucked the sidebar under the header. */
        top: calc(var(--cfc-h-height-actual, 96px) + 1.5rem);
        margin: 0;
        max-height: calc(100vh - var(--cfc-h-height-actual, 96px) - 3.5rem);
        overflow-y: auto;
    }

    /* The sidebar is always visible on desktop — the toggle is a mobile affordance. */
    .cfc-legal__toc-title {
        cursor: default;
        pointer-events: none;
    }

    .cfc-legal__toc-title::after {
        display: none;
    }

    .cfc-legal__body {
        max-width: 46rem;
    }

    .cfc-legal__top {
        grid-column: 2;
    }
}

/* Very narrow phones: reclaim horizontal space. */
@media (max-width: 380px) {
    .cfc-legal__inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .cfc-legal__toc {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cfc-legal__toc-title::after {
        transition: none;
    }
}