/* ===================================================================
   legal-page-shell.css
   Structure and visual tokens for LegalPageShell, LegalPageArticle,
   and ReturnToTop components.
   All governed visuals resolve through CSS custom properties emitted by
   LegalPageShell from the active theme contract.
   Shared fallback safety comes from the required --meb-* defaults in
   theme-default.css.
   =================================================================== */

/* ── Root wrapper ─────────────────────────────────────────────────── */

.legal-page {
    background: var(--legal-page-bg, transparent);
    color: var(--legal-text, var(--meb-text-default));
    min-height: 100vh;
    padding-block: var(--meb-space-stack-xl, 32px);
}

/* ── Hero ─────────────────────────────────────────────────────────── */

/* Hero background driven by surface.hero.background token (5861). */
.legal-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: var(--legal-hero-bg);
    padding-block: var(--meb-space-stack-xl, 32px);
    border-radius: 12px;
}

/* Hero text is white — hero background is always a dark brand color. */
.legal-title {
    color: #ffffff;
    font-family: var(--font-family-display);
    font-size: var(--font-size-display-desktop);
    font-weight: var(--font-weight-display);
    line-height: var(--font-lineheight-display);
    margin-block-end: 0;
}

.legal-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    max-width: 720px;
    margin-inline: auto;
    margin-block-end: 0;
}

/* ── Date badge pill (image-1 layout) ─────────────────────────────── */
/* Renders above the H1 as a frosted-glass rounded pill. */

.legal-date-badge-wrap {
    display: flex;
    justify-content: center;
}

.legal-date-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    padding: 4px 18px;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-sm-desktop);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-body);
    letter-spacing: 0.01em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Content Card ─────────────────────────────────────────────────── */
/* Vertical stacking is owned by <Stack> in LegalPageShell.razor.
   No flex wrapper needed here. */

/* ── Body row: TOC + article side by side ─────────────────────────── */
/* Layout is driven by <Inline Align="start" Gap="xl" Class="legal-body-row"> in
   LegalPageShell.razor. IScreenSizeService.IsDesktop decides whether TOC is
   rendered at all — no CSS media queries needed here. */
.legal-body-row {
    align-items: start;
}

/* TOC: fixed narrow column so the article gets maximum reading width. */
.legal-toc {
    flex: 0 0 220px;
}

/* Article: fills the remaining space; min-width prevents overflow on long words. */
.legal-article {
    flex: 1 1 0;
    min-width: 0;
}

/* ── TOC ──────────────────────────────────────────────────────────── */

.legal-toc {
    position: sticky;
    top: 1.5rem;
    /* Prevent overflow into the CTA section below */
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}

/* "Contents" heading rendered above the TOC list */
.legal-toc-heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    color: var(--legal-text, var(--meb-text-default, #2b2418));
    margin-block-end: 0.75rem;
    margin-block-start: 0;
    padding-block-end: 0.5rem;
    border-block-end: 2px solid var(--legal-text, var(--meb-text-default));
}

.legal-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legal-toc-list li {
    padding-block: 0.125rem;
}

.legal-toc a {
    display: block;
    color: var(--legal-text-muted, var(--meb-text-muted));
    text-decoration: none;
    padding-block: 0.25rem;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-sm-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    transition: color var(--meb-motion-fast, 120ms ease);
}

.legal-toc a:hover {
    color: var(--legal-text, var(--meb-text-default));
}

/* WCAG AA visible focus ring for TOC links */
.legal-toc a:focus-visible {
    color: var(--legal-text, var(--meb-text-default));
    outline: 2px solid var(--legal-text, var(--meb-text-default));
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Article ──────────────────────────────────────────────────────── */

.legal-article h2 {
    color: var(--legal-text, var(--meb-text-default, #2b2418));
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    padding-block-end: 0.5rem;
    border-block-end: 2px solid var(--meb-border-subtle);
    margin-block-start: var(--meb-space-stack-xl, 32px);
    margin-block-end: var(--meb-space-stack-sm, 8px);
}

.legal-article h3 {
    color: var(--legal-text, var(--meb-text-default, #2b2418));
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    margin-block-start: var(--meb-space-stack-lg, 20px);
    margin-block-end: var(--meb-space-stack-sm, 8px);
}

.legal-article p,
.legal-article li {
    color: var(--legal-text-muted, var(--meb-text-muted, #555));
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    /* Paragraph spacing: space.stack.sm token, resolved via --legal-space-sm */
    margin-block-end: var(--legal-space-sm, var(--meb-space-stack-sm, 8px));
    line-height: var(--font-lineheight-body);
}

.legal-article ul,
.legal-article ol {
    padding-inline-start: 2rem;
    margin-block-end: var(--legal-space-sm, var(--meb-space-stack-sm, 8px));
}

.legal-article a {
    color: var(--legal-text, var(--meb-text-default, #2b2418));
    font-weight: var(--font-weight-medium);
}

.legal-article a:hover {
    text-decoration: underline;
}

/* WCAG AA visible focus ring for article links */
.legal-article a:focus-visible {
    outline: 2px solid var(--legal-text, var(--meb-text-default));
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Info / Highlight / Warning / Contact boxes ───────────────────── */

.info-box,
.warning-box,
.highlight-section,
.contact-box {
    background: var(--meb-surface-card);
    border-inline-start: 4px solid var(--meb-border-accent, var(--meb-border-default));
    border-radius: 8px;
    padding: var(--meb-space-stack-lg, 20px);
    margin-block: var(--meb-space-stack-lg, 20px);
}

.info-box h3,
.warning-box h3,
.highlight-section h3 {
    margin-block-start: 0;
}

.contact-box {
    border-inline-start-color: var(--meb-border-subtle);
}

/* ── CTA section ──────────────────────────────────────────────────── */

/* CTA background driven by surface.cta.background token (5861). */
.legal-cta {
    background: var(--legal-cta-bg);
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    border: 1px solid var(--legal-btn-border, var(--meb-button-primary-border, transparent));
    box-shadow: var(--legal-btn-shadow, var(--meb-button-primary-shadow, none));
    border-radius: 12px;
    padding: var(--meb-space-stack-lg, 24px);
    text-align: center;
    margin-top: var(--meb-space-stack-xl, 32px);
}

.legal-cta h2 {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    border-block-end: none;
    margin-block-start: 0;
}

.legal-cta p {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground, #fff));
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    margin-block-end: 0;
}

.legal-cta a {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground, #fff));
    font-weight: var(--font-weight-heading);
    text-decoration: underline;
}

.legal-cta a:hover {
    opacity: 0.85;
}

/* Visible focus for CTA interactive elements */
.legal-cta a:focus-visible,
.legal-cta button:focus-visible {
    outline: 2px solid var(--legal-btn-fg, var(--meb-button-primary-foreground));
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── CTA responsive layout (5846) ────────────────────────────────── */
/* Desktop: Inline layout (text-left, button-right) via ui-inline primitive */
/* Mobile:  Stack layout (text centered, button full width) via CSS override */

.legal-cta-text {
    flex: 1 1 0;
}

.legal-cta-heading {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground, #fff));
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    margin-block-start: 0;
    margin-block-end: var(--meb-space-stack-sm, 8px);
    border-block-end: none;
}

.legal-cta-body {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground, #fff));
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    margin-block-end: 0;
}

/* ── Return-to-top overlay ────────────────────────────────────────── */

.return-to-top {
    position: fixed;
    inset-block-end: 2rem;
    inset-inline-end: 2rem;
    z-index: 100;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--legal-btn-bg, var(--meb-button-primary-background));
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    border: 1px solid var(--legal-btn-border, var(--meb-button-primary-border, transparent));
    box-shadow: var(--legal-btn-shadow, var(--meb-button-primary-shadow, 0 2px 8px rgba(0, 0, 0, 0.2)));
    cursor: pointer;
    font-size: var(--font-size-h3-mobile);
    line-height: var(--font-lineheight-display);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hidden at page top; pointer-events disabled so it never blocks content */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--meb-motion-fast, 120ms ease);
}

.return-to-top.return-to-top--visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Mobile / Tablet overrides (max 767 px) ───────────────────────── */

@media (max-width: 767px) {
    .legal-page {
        padding-block: var(--meb-space-stack-lg, 20px);
    }

    .legal-title {
        font-size: var(--font-size-display-mobile);
    }

    .legal-subtitle,
    .legal-date-badge {
        font-size: var(--font-size-body-sm-mobile);
    }

    .legal-article h2 {
        font-size: var(--font-size-h2-mobile);
    }

    .legal-article h3 {
        font-size: var(--font-size-h3-mobile);
    }

    .return-to-top {
        inset-block-end: 1rem;
        inset-inline-end: 1rem;
    }

    /* CTA: collapse Inline to Stack on mobile (5846) */
    .legal-cta .legal-cta-layout {
        flex-direction: column;
        align-items: center;
    }

    .legal-cta-text {
        text-align: center;
    }

    .legal-cta-heading {
        font-size: var(--font-size-h2-mobile);
    }

    .legal-cta-body {
        font-size: var(--font-size-body-mobile);
    }

    /* Mobile button full width */
    .legal-cta-action .ui-button-wrapper,
    .legal-cta-action .meb-btn {
        width: 100%;
        display: block;
    }
}

/* ── Decoration: dot pattern (5869) ──────────────────────────────── */
/* Pattern uses CSS radial-gradient — no SVG for repeating shapes. */

/* Dot color uses decoration.primary token (5861); falls back to white at low opacity
   so it is always visible against the hero's purple background (#8E50E5). */
.legal-deco-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        color-mix(in srgb, var(--legal-deco-primary) 25%, transparent) 1.5px,
        transparent 1.5px
    );
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* ── Decoration: wave SVG (5869) ──────────────────────────────────── */
/* Decorative SVG surfaces render through the shared mask-based abstraction.
   The legal wave keeps proportional scaling via aspect-ratio and remains
   fully non-interactive. */

.decorative-svg {
    display: block;
    inline-size: 100%;
    aspect-ratio: var(--decorative-svg-aspect-ratio, 1 / 1);
    background-color: var(--decorative-svg-color, currentColor);
    opacity: var(--decorative-svg-opacity, 1);
    pointer-events: none;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    -webkit-mask-image: var(--decorative-svg-src);
    mask-image: var(--decorative-svg-src);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.legal-deco-wave {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    pointer-events: none;
    z-index: 0;
}

.legal-deco-wave.decorative-svg {
    inline-size: 100%;
}

/* Ensure hero text content renders above decorations */
.legal-hero .ui-stack {
    position: relative;
    z-index: 1;
}