/*
 * ============================================================
 * FEARANN ALBA — privacy.css
 * ============================================================
 * Styles for the Privacy Policy page (templates/page-privacy.php).
 *
 * It does two jobs:
 *   1. PAGE HEADER BAND — the same photo-behind-gradients hero
 *      strip the Contact pages use, ported here so the Privacy
 *      page is fully self-contained (it does not depend on
 *      contact.css being loaded).
 *   2. LEGAL BODY — a comfortable, readable column for long-form
 *      policy text: a "last updated" line, an in-page contents
 *      box, and clearly separated numbered sections.
 *
 * Depends on main.css for the brand tokens (var(--color-*)),
 * the .container / .section helpers and the .label style.
 * ============================================================
 */


/*
 * ============================================================
 * 1. PAGE HEADER BAND
 * ============================================================
 * Mirrors .contact-hero so the Privacy page sits visually
 * alongside the Contact pages. Class names are prefixed
 * .legal-hero so the two never clash.
 * ============================================================
 */

.legal-hero {
    position: relative;
    min-height: 42vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;

    /* Clear the fixed 70px navigation bar, with breathing room. */
    padding-top: 130px;
    padding-bottom: 4rem;
}

/* The background photograph — covers the whole band. */
.legal-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Top + bottom gradient overlays so the title stays legible and
   the band fades cleanly into the black page below. */
.legal-hero__gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.legal-hero__gradient--top {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

.legal-hero__gradient--bottom {
    background: linear-gradient(
        to top,
        var(--color-bg) 0%,
        rgba(0, 0, 0, 0.4) 35%,
        transparent 100%
    );
}

/* Title + subtitle sit above the overlays. */
.legal-hero__inner {
    position: relative;
    z-index: 2;
}

.legal-hero__label {
    display: inline-block;
    margin-bottom: 1.25rem;
}

/* Split-weight title — a light (100) word next to a bold (700) word. */
.legal-hero__title {
    font-size: clamp(2.75rem, 8vw, 5.5rem);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: var(--weight-regular);
    margin: 0;
}

.legal-hero__title--light { font-weight: var(--weight-light); }
.legal-hero__title--bold  { font-weight: var(--weight-bold); }

.legal-hero__subtitle {
    margin: 1.5rem auto 0;
    max-width: 48ch;
    color: var(--color-text-muted);
    font-size: 1.05rem;
}


/*
 * ============================================================
 * 2. LEGAL BODY
 * ============================================================
 * A single, comfortably narrow reading column. The global
 * paragraph rule already caps line length and centres
 * paragraphs; here we constrain the whole column and switch
 * the text back to left-aligned, which reads better for a
 * long document.
 * ============================================================
 */

.legal-wrap {
    /* A narrower max-width than the 1200px site container so the
       policy reads like a document, not a full-bleed layout. */
    max-width: 820px;
}

/* Force the body copy in this column to read left-aligned,
   overriding the centred-paragraph default from main.css. */
.legal-wrap p {
    max-width: 70ch;
    margin-left: 0;
    margin-right: 0;
    color: var(--color-text-muted);
}

/* The "last updated" line — small, gold-tinted, mono. */
.legal-updated {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 2.5rem;
}

/* Intro paragraph — slightly larger and brighter than the rest. */
.legal-intro {
    font-size: 1.1rem;
    color: var(--color-text) !important;
    margin-bottom: 3.5rem;
}


/*
 * --- In-page contents box ---
 * A bordered panel listing the numbered sections, each an
 * anchor link down the page.
 */
.legal-toc {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 1.75rem 2rem;
    margin-bottom: 3.5rem;
}

.legal-toc__title {
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.legal-toc__list {
    /* Restore numbering — the base reset strips list styles. */
    list-style: decimal;
    padding-left: 1.4rem;
    display: grid;
    gap: 0.5rem;
}

.legal-toc__list li {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.legal-toc__list a {
    color: var(--color-text-muted);
    transition: color 0.2s ease;
}

.legal-toc__list a:hover {
    color: var(--color-gold);
}


/*
 * --- Numbered policy sections ---
 */
.legal-section {
    padding-top: 2.5rem;
    margin-top: 2.5rem;
    border-top: 1px solid var(--color-border);

    /* Offset anchor jumps so the heading clears the fixed
       70px navigation bar when linked to from the contents. */
    scroll-margin-top: 100px;
}

/* First section sits directly under the contents box with no
   extra divider line above it. */
.legal-section:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.legal-section__title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: var(--weight-light);
    line-height: 1.25;
    color: var(--color-text);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

/* The gold section number sitting before each heading. */
.legal-section__num {
    color: var(--color-gold);
    font-weight: var(--weight-bold);
    font-size: 0.9em;
}

/* Spacing between stacked paragraphs within a section. */
.legal-section p + p {
    margin-top: 1.1rem;
}

/* Strong/labelled terms inside lists and paragraphs. */
.legal-section strong {
    color: var(--color-text);
    font-weight: var(--weight-bold);
}


/*
 * --- Bulleted lists inside the policy ---
 * The base reset removes bullets globally, so we restore them
 * locally and give them a gold marker.
 */
.legal-list {
    list-style: disc;
    padding-left: 1.4rem;
    margin: 1.1rem 0;
    display: grid;
    gap: 0.6rem;
    max-width: 70ch;
}

.legal-list li {
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
    padding-left: 0.25rem;
}

/* Gold bullet markers. */
.legal-list li::marker {
    color: var(--color-gold);
}


/*
 * --- Links inside the policy body ---
 * Gold by default here (rather than white) so email and ICO
 * links are easy to spot in long copy, with an underline on
 * hover for clarity.
 */
.legal-wrap a:not(.legal-toc__list a) {
    color: var(--color-gold);
}

.legal-wrap a:not(.legal-toc__list a):hover {
    text-decoration: underline;
}


/*
 * ============================================================
 * 3. RESPONSIVE
 * ============================================================
 */
@media (max-width: 600px) {

    .legal-toc {
        padding: 1.5rem 1.25rem;
    }

    .legal-section__title {
        gap: 0.45rem;
    }
}