/* ============================================================
   legal.css — Legal Page template (template-legal.php), used by the
   Privacy Policy. Compact header band (same look as the Print Order
   hero, fading to white) + a readable text column.
   ============================================================ */

.legal-hero {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%),
        radial-gradient(70% 140% at 100% 0%, rgba(247, 180, 44, 0.16), transparent 65%),
        radial-gradient(60% 140% at 0% 0%, rgba(252, 87, 94, 0.10), transparent 65%),
        #ffffff;
    padding: clamp(96px, 7vw, 112px) clamp(16px, 6vw, 96px) clamp(16px, 2vw, 24px);
    font-family: "Karla", sans-serif;
    color: var(--color-fg);
}
.legal-hero__inner { max-width: 820px; margin: 0 auto; }

.legal-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted);
}
.legal-hero__breadcrumb a { color: var(--color-muted); text-decoration: none; transition: color 0.2s; }
.legal-hero__breadcrumb a:hover { color: var(--color-fg); }
.legal-hero__breadcrumb span[aria-hidden] { opacity: 0.4; }
.legal-hero__bc-current { color: var(--color-fg); font-weight: 700; }

.legal-hero__eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.legal-hero__title {
    margin: 0;
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* ---- text column ---- */
.legal {
    background: #ffffff;
    padding: clamp(16px, 2vw, 24px) clamp(16px, 6vw, 96px) clamp(64px, 8vw, 110px);
    font-family: "Karla", sans-serif;
}
.legal__content {
    max-width: 820px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.75;
    color: #3d4250;
}
.legal__content > :first-child { margin-top: 0; }
.legal__content p { margin: 0 0 16px; }
.legal__content h2 {
    margin: 40px 0 14px;
    padding-top: 24px;
    border-top: 1px solid rgba(14, 27, 51, 0.08);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-fg);
}
.legal__content h3 {
    margin: 24px 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-fg);
}
.legal__content ul { margin: 0 0 18px; padding-left: 22px; }
.legal__content li { margin-bottom: 6px; }
.legal__content li::marker { color: var(--color-accent); }
.legal__content a { color: var(--color-accent); text-underline-offset: 3px; }
.legal__content a:hover { color: var(--color-fg); }
.legal__contact {
    margin-top: 8px;
    padding: 18px 22px;
    border-radius: 16px;
    background: #faf8f4;
    border: 1px solid rgba(14, 27, 51, 0.07);
}
.legal__contact p { margin: 0; }

/* bullets — global.css sets list-style:none on every list, so draw our own dots */
.legal__content ul { list-style: none; padding-left: 0; }
.legal__content ul li { position: relative; padding-left: 22px; }
.legal__content ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f7b42c, #fc575e);
}