/* ==========================================================================
   VALURA — Legal policy pages
   Routes: /privacy-policy, /cookie-policy, /data-security

   Markup contract (Components/Pages/{PrivacyPolicy,CookiePolicy,DataSecurity}.razor):
     .policy-page > .policy-container
       > header.policy-hero
           > p.policy-hero__eyebrow > span.policy-hero__dot
           > h1.policy-hero__title                     (RadzenText H1)
           > p.policy-hero__subtitle | p.policy-hero__meta
       > .policy-stack                                 (RadzenStack, vertical)
           > .policy-card[.policy-card--lead]          (RadzenCard)
               > .policy-card__title                   (RadzenText H2)
               > .policy-lead | .policy-text           (RadzenText Body1)
               > .policy-card__heading                 (RadzenText H3)
               > ul.policy-list > li
       > nav.policy-related
           > span.policy-related__label + a.policy-link--chip

   Why this lives here and not in three identical .razor.css files: the three
   policies share one visual system and one markup contract, so a single
   stylesheet keeps them in lockstep and avoids triplicated scoping attributes.
   It is linked from Components/App.razor after <RadzenTheme> and the Valura
   token layer, so class rules win the cascade without !important.

   Radzen's material3expressive theme ships display-sized headings (H1 up to
   6rem) and a --rz-gap driven stack. The token block below re-points that scale
   at the .policy-page subtree, so a plain <RadzenText> is already
   document-sized; the class rules then pin each visual slot.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Local tokens — one navy editorial surface, one blue accent family.
   Every value derives from the Valura palette: --valura-page-bg,
   --valura-darkest-navy, --valura-primary. Bright accents exist only for text
   and icons on navy, where the raw brand blue does not clear WCAG AA.
   -------------------------------------------------------------------------- */
.policy-page {
    --policy-surface: var(--valura-page-bg, #051C2C);
    --policy-surface-deep: var(--valura-darkest-navy, #010A26);

    --policy-card-bg: #0C1F3F;
    --policy-card-bg-inset: rgba(5, 22, 44, 0.55);
    --policy-border: rgba(255, 255, 255, 0.08);
    --policy-border-accent: rgba(29, 130, 183, 0.34);

    --policy-text-strong: #F1F5F9;
    --policy-text: #CBD5E1;
    --policy-text-soft: #E2E8F0;
    --policy-text-muted: #94A3B8;

    /* Brand blue for fills, rails and dots. */
    --policy-accent: var(--valura-primary, #1D82B7);
    /* Readable accent for text and icons on navy (≈ 8.9:1 on the card). */
    --policy-accent-text: #7CC9E8;
    --policy-accent-hover: #B7E4F7;
    --policy-accent-wash: rgba(29, 130, 183, 0.14);
    --policy-accent-line: linear-gradient(180deg, var(--valura-primary, #1D82B7) 0%, #7CC9E8 100%);

    --policy-radius: 1rem;
    --policy-radius-sm: 0.75rem;
}

/* --------------------------------------------------------------------------
   2. Page shell — the fixed 77px header floats over the hero, so the shell
   carries the clearance. The ambient glow echoes the landing-page hero.
   -------------------------------------------------------------------------- */
.policy-page {
    min-height: 100dvh;
    padding-block: 8.5rem 5rem;
    color: var(--policy-text);
    background-color: var(--policy-surface);
    background-image:
        radial-gradient(900px 320px at 50% -6%, rgba(29, 130, 183, 0.20), transparent 70%),
        radial-gradient(720px 420px at 100% 108%, rgba(29, 130, 183, 0.07), transparent 70%),
        linear-gradient(180deg, #051C2C 0%, #041730 52%, var(--policy-surface-deep) 100%);
    background-repeat: no-repeat;
}

.policy-container {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 640px) {
    .policy-container {
        padding-inline: 2rem;
    }
}

/* --------------------------------------------------------------------------
   3. RadzenText scale for this subtree.
   Legal copy needs a document scale: 1.75 body line-height, compact card
   headings, and a page title that never balloons on wide screens.
   -------------------------------------------------------------------------- */
.policy-page {
    --rz-text-font-family: var(--valura-font-text, 'IBM Plex Sans', sans-serif);

    --rz-text-h1-font-size: clamp(1.875rem, 1.15rem + 3vw, 2.75rem);
    --rz-text-h1-line-height: 1.12;
    --rz-text-h1-font-weight: 700;
    --rz-text-h1-letter-spacing: -0.025em;
    --rz-text-h1-color: #FFFFFF;
    --rz-text-h1-margin-block-start: 0;
    --rz-text-h1-margin-block-end: 0;

    --rz-text-h2-font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
    --rz-text-h2-line-height: 1.35;
    --rz-text-h2-font-weight: 700;
    --rz-text-h2-letter-spacing: -0.01em;
    --rz-text-h2-color: #FFFFFF;
    --rz-text-h2-margin-block-start: 0;
    --rz-text-h2-margin-block-end: 0.75rem;

    --rz-text-h3-font-size: 1rem;
    --rz-text-h3-line-height: 1.5;
    --rz-text-h3-font-weight: 600;
    --rz-text-h3-letter-spacing: 0.005em;
    --rz-text-h3-color: var(--policy-text-soft);
    --rz-text-h3-margin-block-start: 1.5rem;
    --rz-text-h3-margin-block-end: 0.5rem;

    --rz-text-body1-font-size: 0.9375rem;
    --rz-text-body1-line-height: 1.75;
    --rz-text-body1-font-weight: 400;
    --rz-text-body1-letter-spacing: 0.005em;
    --rz-text-body1-color: var(--policy-text);
    --rz-text-body1-margin-block-start: 0;
    --rz-text-body1-margin-block-end: 0.875rem;

    --rz-text-caption-font-size: 0.8125rem;
    --rz-text-caption-line-height: 1.6;
    --rz-text-caption-letter-spacing: 0.01em;
    --rz-text-caption-color: var(--policy-text-muted);
    --rz-text-caption-margin-block-start: 0;
    --rz-text-caption-margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   4. Hero — eyebrow badge, serif title, meta line and a blue rule that closes
   the title block. Left aligned, matching the landing-page band headers.
   -------------------------------------------------------------------------- */
.policy-hero {
    padding-block: 0 2rem;
    text-align: start;
}

.policy-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.375rem 0.75rem;
    font-family: var(--valura-font-ui, 'Manrope', sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--policy-accent-text);
    background-color: var(--policy-accent-wash);
    border: 1px solid var(--policy-border-accent);
    border-radius: 999px;
}

.policy-hero__dot {
    flex: none;
    width: 6px;
    height: 6px;
    background-color: var(--policy-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(29, 130, 183, 0.16);
}

.policy-hero__title,
.policy-hero__title.rz-text-h1,
.policy-hero .policy-hero__title,
.policy-hero h1 {
    margin: 0;
    font-family: var(--valura-font-heading, 'Times New Roman', serif);
    font-size: clamp(1.875rem, 1.15rem + 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    text-wrap: balance;
}

/* Descriptive lead-in (Data Security carries a sentence, not a date). */
.policy-hero__subtitle,
.policy-hero__subtitle.rz-text-body1,
.policy-hero .policy-hero__subtitle {
    max-width: 46rem;
    margin: 1rem 0 0;
    font-family: var(--valura-font-text, 'IBM Plex Sans', sans-serif);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--policy-text);
}

/* "Last updated" line — UI face and wide tracking so the date reads as
   document metadata rather than as body copy. */
.policy-hero__meta,
.policy-hero__meta.rz-text-caption,
.policy-hero .policy-hero__meta {
    max-width: 46rem;
    margin: 1rem 0 0;
    font-family: var(--valura-font-ui, 'Manrope', sans-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--policy-text-muted);
}

/* Blue rule: a 3rem dash under the copy, echoing the section eyebrows. */
.policy-hero::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin-block: 1.75rem 0;
    background-image: var(--policy-accent-line);
    border-radius: 999px;
}

@media (min-width: 640px) {
    .policy-hero__subtitle,
    .policy-hero__subtitle.rz-text-body1,
    .policy-hero .policy-hero__subtitle {
        font-size: 1.0625rem;
    }
}

/* --------------------------------------------------------------------------
   5. Document body — RadzenStack of RadzenCards.
   The stack sets its own gap through --rz-gap (Radzen inline style); the
   explicit `gap` here wins the cascade at equal specificity because this file
   loads after the theme.
   -------------------------------------------------------------------------- */
.policy-stack {
    --rz-gap: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.policy-card {
    /* Local RadzenCard tokens, so the markup stays a plain
       <RadzenCard Class="policy-card"> with no Radius/Style overrides. */
    --rz-card-background-color: var(--policy-card-bg);
    --rz-card-border-radius: var(--policy-radius);
    --rz-card-padding: 1.5rem;

    position: relative;
    padding: 1.5rem;
    background-color: var(--policy-card-bg);
    border: 1px solid var(--policy-border);
    border-radius: var(--policy-radius);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 40px -28px rgba(0, 0, 0, 0.75);
    overflow-wrap: break-word;
}

/* Lead card (privacy/cookie intro): a breath of brand blue instead of a
   heavier border, plus a soft glow so the opening paragraph leads the eye. */
.policy-card--lead {
    border-color: var(--policy-border-accent);
    background-image: linear-gradient(180deg, rgba(29, 130, 183, 0.10), rgba(29, 130, 183, 0) 60%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(29, 130, 183, 0.08),
        0 26px 60px -34px rgba(29, 130, 183, 0.55);
}

/* --- Card heading (RadzenText H2) ---------------------------------------- */
.policy-card__title,
.policy-card__title.rz-text-h2,
.policy-card .policy-card__title,
.policy-card h2 {
    display: flex;
    /* First-line alignment: a two-line heading keeps its rail on the first
       line instead of floating it to the vertical centre. */
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0 0 0.75rem;
    font-family: var(--valura-font-heading, 'Times New Roman', serif);
    font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

/* 3px rail instead of a bullet; decorative, so it carries no text. */
.policy-card__title::before,
.policy-card__title.rz-text-h2::before,
.policy-card .policy-card__title::before,
.policy-card h2::before {
    content: "";
    flex: none;
    width: 3px;
    height: 1.05em;
    /* (1.35 line box - 1.05 rail) / 2 keeps the rail level with line one. */
    margin-block-start: 0.15em;
    background-image: var(--policy-accent-line);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(29, 130, 183, 0.45);
}

/* --- Sub-heading (RadzenText H3), used by the cookie categories ----------- */
.policy-card__heading,
.policy-card__heading.rz-text-h3,
.policy-card .policy-card__heading,
.policy-card h3 {
    position: relative;
    margin: 1.5rem 0 0.5rem;
    padding-inline-start: 1.125rem;
    font-family: var(--valura-font-heading, 'Times New Roman', serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.005em;
    color: var(--policy-text-soft);
}

.policy-card__heading:first-child,
.policy-card h3:first-child {
    margin-block-start: 0;
}

.policy-card__heading::before,
.policy-card__heading.rz-text-h3::before,
.policy-card .policy-card__heading::before,
.policy-card h3::before {
    content: "";
    position: absolute;
    inset-block-start: 0.575em;
    inset-inline-start: 0;
    width: 6px;
    height: 6px;
    background-color: var(--policy-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(29, 130, 183, 0.16);
}

/* --- Body copy ----------------------------------------------------------- */
/* `.policy-card .policy-text` (0,2,0) outranks Radzen's `.rz-stack >
   .rz-text-body1 { margin-block: 0 }` so the paragraph rhythm survives. */
.policy-text,
.policy-card .policy-text,
.policy-card p,
.policy-card .rz-text-body1 {
    margin-block: 0 0.875rem;
    font-family: var(--valura-font-text, 'IBM Plex Sans', sans-serif);
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--policy-text);
    /* Avoids orphaned words at the end of a legal paragraph. */
    text-wrap: pretty;
}

/* Intro paragraph: one step up in size and tone, still inside the measure. */
.policy-lead,
.policy-card .policy-lead,
.policy-card .policy-lead.rz-text-body1,
.policy-card p.policy-lead {
    margin-block: 0 1rem;
    font-family: var(--valura-font-text, 'IBM Plex Sans', sans-serif);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--policy-text-soft);
    text-wrap: pretty;
}

/* The card's padding provides the closing space, never the last child's margin. */
.policy-card > :last-child,
.policy-card > :last-child > :last-child {
    margin-block-end: 0;
}

/* Strong emphasis must survive the muted body tone. */
.policy-card strong,
.policy-text strong {
    font-weight: 600;
    color: var(--policy-text-strong);
}

@media (min-width: 640px) {
    .policy-stack {
        --rz-gap: 1.25rem;
        gap: 1.25rem;
    }

    .policy-card {
        --rz-card-padding: 2rem;
        padding: 2rem;
    }

    .policy-text,
    .policy-card .policy-text,
    .policy-card p,
    .policy-card .rz-text-body1 {
        font-size: 1rem;
    }

    .policy-lead,
    .policy-card .policy-lead,
    .policy-card .policy-lead.rz-text-body1,
    .policy-card p.policy-lead {
        font-size: 1.0625rem;
    }
}

/* --------------------------------------------------------------------------
   6. Lists — the inset panel behind the data-security checklists: a deeper
   navy well on the card, blue check markers drawn as a mask (no icon font,
   scales with the line box).
   -------------------------------------------------------------------------- */
.policy-list {
    display: grid;
    gap: 0.625rem;
    margin: 0.5rem 0 0;
    padding: 0.875rem 1rem;
    list-style: none;
    background-color: var(--policy-card-bg-inset);
    border: 1px solid rgba(29, 130, 183, 0.22);
    border-radius: var(--policy-radius-sm);
}

.policy-list li {
    position: relative;
    padding-inline-start: 1.625rem;
    font-family: var(--valura-font-text, 'IBM Plex Sans', sans-serif);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--policy-text);
}

/* 1.7em is the line height above, 0.9375rem the icon box, so the glyph sits
   optically centred on the first line. */
.policy-list li::before {
    content: "";
    position: absolute;
    inset-block-start: calc((1.7em - 0.9375rem) / 2);
    inset-inline-start: 0;
    width: 0.9375rem;
    height: 0.9375rem;
    background-color: var(--policy-accent-text);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Safety net: a plain <ul> that missed the class still reads as a legal list. */
.policy-card ul:not(.policy-list) {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.125rem;
    color: var(--policy-text);
}

.policy-card ul:not(.policy-list) li {
    font-size: 0.9375rem;
    line-height: 1.7;
}

.policy-card ul:not(.policy-list) li::marker {
    color: var(--policy-accent-text);
}

@media (min-width: 640px) {
    .policy-list {
        padding: 1rem 1.125rem;
        gap: 0.75rem;
    }

    .policy-list li {
        font-size: 1rem;
    }
}

/* --------------------------------------------------------------------------
   7. Inline links — brand blue for the fill, a bright tint for the glyphs so
   contrast clears AA on the card navy.
   -------------------------------------------------------------------------- */
.policy-link,
.policy-card .rz-link,
.policy-card .policy-link {
    color: var(--policy-accent-text);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(124, 201, 232, 0.45);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-radius: 2px;
    overflow-wrap: anywhere;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.policy-link:hover,
.policy-card .rz-link:hover,
.policy-card .policy-link:hover {
    color: var(--policy-accent-hover);
    text-decoration-color: currentColor;
}

.policy-link:focus-visible,
.policy-card .rz-link:focus-visible,
.policy-card .policy-link:focus-visible {
    outline: 2px solid var(--policy-accent-text);
    outline-offset: 3px;
    color: var(--policy-accent-hover);
    text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   8. Related documents — cross-links between the three policies.
   -------------------------------------------------------------------------- */
.policy-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 2rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--policy-border);
}

.policy-related__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0.25rem 0 0;
    font-family: var(--valura-font-ui, 'Manrope', sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--policy-text-muted);
}

.policy-link--chip,
.policy-related .rz-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-family: var(--valura-font-ui, 'Manrope', sans-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--policy-text-soft);
    text-decoration: none;
    background-color: rgba(12, 31, 63, 0.85);
    border: 1px solid rgba(124, 201, 232, 0.30);
    border-radius: 999px;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

/* Arrow is an icon, not text: the bright accent keeps it above 3:1. */
.policy-related .policy-link--chip::after,
.policy-related .rz-link::after {
    content: "\2192"; /* → */
    font-size: 0.875rem;
    line-height: 1;
    color: var(--policy-accent-text);
    transition: transform 0.2s ease, color 0.2s ease;
}

.policy-related .policy-link--chip:hover,
.policy-related .rz-link:hover,
.policy-related .policy-link--chip:focus-visible,
.policy-related .rz-link:focus-visible {
    color: var(--valura-white, #FFFFFF);
    text-decoration: none;
    background-color: var(--policy-accent-wash);
    border-color: rgba(124, 201, 232, 0.55);
}

.policy-related .policy-link--chip:hover::after,
.policy-related .rz-link:hover::after {
    color: var(--valura-white, #FFFFFF);
    transform: translateX(2px);
}

.policy-related .policy-link--chip:focus-visible,
.policy-related .rz-link:focus-visible {
    outline: 2px solid var(--policy-accent-text);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   9. Small screens — tighten the shell, the cards and the chip row.
   -------------------------------------------------------------------------- */
@media (max-width: 639.98px) {
    .policy-page {
        padding-block: 6.5rem 3.5rem;
    }

    .policy-card {
        --rz-card-padding: 1.25rem;
        --rz-card-border-radius: var(--policy-radius-sm);
        padding: 1.25rem;
        border-radius: var(--policy-radius-sm);
    }

    .policy-hero {
        padding-block-end: 1.5rem;
    }

    .policy-hero::after {
        margin-block-start: 1.5rem;
    }

    .policy-related {
        gap: 0.5rem;
    }

    .policy-related__label {
        width: 100%;
        margin-block-end: 0.25rem;
    }

    /* Finger-sized targets on phones (≈ 40px tall including the border). */
    .policy-link--chip,
    .policy-related .rz-link {
        padding: 0.625rem 1rem;
    }
}

/* Wide desktop: a little more air above the fold once the header is roomy. */
@media (min-width: 1280px) {
    .policy-page {
        padding-block: 9.5rem 6rem;
    }
}

/* --------------------------------------------------------------------------
   10. Preferences — motion and print.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .policy-link,
    .policy-card .rz-link,
    .policy-link--chip,
    .policy-related .rz-link,
    .policy-related .rz-link::after {
        transition: none;
    }

    .policy-related .rz-link:hover::after {
        transform: none;
    }
}

/* Policy documents get printed; the navy surface would waste a cartridge. */
@media print {
    .policy-page {
        min-height: 0;
        padding-block: 0;
        color: #111827;
        background: #FFFFFF;
    }

    .policy-container {
        max-width: none;
        padding-inline: 0;
    }

    .policy-hero__eyebrow,
    .policy-hero::after,
    .policy-related {
        display: none;
    }

    .policy-hero__title,
    .policy-card__title,
    .policy-card__heading {
        color: #000000;
    }

    .policy-text,
    .policy-lead,
    .policy-list li,
    .policy-card strong {
        color: #1F2937;
    }

    .policy-hero__meta,
    .policy-related__label {
        color: #4B5563;
    }

    .policy-card {
        --rz-card-background-color: transparent;
        background: none;
        border: 1px solid #D1D5DB;
        box-shadow: none;
        break-inside: avoid;
    }

    .policy-list {
        background-color: #F9FAFB;
        border-color: #E5E7EB;
        break-inside: avoid;
    }

    .policy-list li::before {
        background-color: #1F2937;
    }

    .policy-link,
    .policy-card .rz-link {
        color: #1F2937;
        text-decoration-color: #6B7280;
    }
}