/**
 * @file plugins/themes/lumina/styles/academic/pinnacle-privacy.css
 *
 * Copyright (c) 2026 Lumina Project contributors
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Pinnacle Experience - Privacy Statement page presentation.
 *        Revision 3 (reference 2026-08-17): editorial heading band + content
 *        panel + content-agnostic section markers, in Pinnacle's established
 *        editorial design language.
 *
 * ARCHITECTURE (separation of concerns):
 *   - Privacy Statement is a native OJS CORE page (AboutSiteHandler::privacy,
 *     route `about/privacy`, structural marker `.page_privacy`). It is NOT a
 *     generic DEFAULT static page (`.page_static_content`) and therefore never
 *     receives the generic panel from styles/layouts/pinnacle-static-page.css.
 *   - The editorial heading band (`.lm-privacy-head`) mirrors the approved
 *     Pinnacle hero language (pinnacle-about / pinnacle-information): eyebrow
 *     with `::before` accent tick -> presentation title -> lead -> accent line,
 *     separated by a single hairline border. H1 semantics stay exclusively in
 *     Page Context.
 *   - The statement body lives in a single elevated content panel
 *     (`.lm-privacy-content`), styled with the same tokens/rhythm as the
 *     certified Pinnacle static-page family.
 *   - Content-agnostic section markers: every semantic heading the admin
 *     authored (h3/h4) receives a subtle CSS-only accent rail. No text
 *     parsing, no keyword matching, no numbering dependency, no JS.
 *   - The admin-authored privacy statement itself is NEVER generated or
 *     altered; it is rendered verbatim from {$privacyStatement} (OJS journal
 *     setting).
 *
 * SCOPE:
 *   - Selectors are prefixed with body.lm-layout-pinnacle and target only the
 *     `.page_privacy` structural marker. No slug-specific or title-specific
 *     selectors. No leakage into Zenith, Vanguard, portal or shared foundation.
 *
 * PALETTE / TOKEN CONFORMANCE (CORRECTION P0, approved 2026-08-18):
 *   - THIS FILE IS NOT A PALETTE SOURCE. It defines no color ramp and no
 *     custom `--lm-*` color variables.
 *   - Every color resolves from canonical Lumina tokens owned by
 *     PaletteEngine (`--lm-accent-*`, `--lm-primary`, `--lm-primary-rgb`,
 *     `--lm-link`, `--lm-link-hover`, `--lm-surface-*`, `--lm-border`,
 *     `--lm-text-*`, `--lm-focus-ring`, `--lm-focus-offset`) or from the
 *     static foundation tokens (`--lm-shadow-*`, `--lm-radius-*`,
 *     `--lm-motion-*`, `--lm-font-*`, `--lm-weight-*`, `--lm-lh-*`,
 *     `--space-*`). Zero hex/rgb/hsl literals appear below — the active
 *     palette is the single source of truth for every rendered color.
 */

/* ==========================================================================
   EDITORIAL HEADING BAND (Pinnacle language: clean header + hairline)
   ========================================================================== */

body.lm-layout-pinnacle .page_privacy .lm-privacy-head {
    padding: var(--space-xl, 2.5rem) 0 var(--space-2xl, 4rem);
    margin: 0;
    border-bottom: 1px solid var(--lm-border);
    max-width: 72ch;
}

body.lm-layout-pinnacle .page_privacy .lm-privacy-head__glow,
body.lm-layout-pinnacle .page_privacy .lm-privacy-head__grid-bg,
body.lm-layout-pinnacle .page_privacy .lm-privacy-head__rail {
    display: none;
}

body.lm-layout-pinnacle .page_privacy .lm-privacy-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: var(--lm-weight-bold, 700);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lm-accent-700);
}

body.lm-layout-pinnacle .page_privacy .lm-privacy-head__eyebrow::before {
    content: "";
    width: 1.25rem;
    height: 2px;
    background: var(--lm-accent-600);
    border-radius: var(--lm-radius-full, 9999px);
}

/* Presentation title — editorial focal point (semantic H1 lives in Page Context) */
body.lm-layout-pinnacle .page_privacy .lm-privacy-head__title {
    margin: 0.75rem 0 0.35rem;
    font-family: var(--lm-font-heading-sans, var(--lm-font-sans, inherit));
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight: var(--lm-weight-extrabold, 800);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--lm-text-primary);
}

body.lm-layout-pinnacle .page_privacy .lm-privacy-head__lead {
    margin: 0;
    max-width: 60ch;
    font-size: 1rem;
    line-height: var(--lm-lh-relaxed, 1.625);
    color: var(--lm-text-secondary);
}

body.lm-layout-pinnacle .page_privacy .lm-privacy-head__accent-line {
    width: 3.5rem;
    height: 3px;
    margin-top: var(--space-lg, 1.5rem);
    background: linear-gradient(
        90deg,
        var(--lm-accent-600) 0%,
        rgba(var(--lm-primary-rgb), 0) 100%
    );
    border-radius: var(--lm-radius-full, 9999px);
}

/* ==========================================================================
   CONTENT PANEL (Privacy Statement core page only)
   ========================================================================== */

body.lm-layout-pinnacle .page_privacy .lm-privacy-content {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--lm-surface-card);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-xl, 12px);
    box-shadow: var(--lm-shadow-sm);
    padding: 1.75rem;
}

@media (min-width: 768px) {
    body.lm-layout-pinnacle .page_privacy .lm-privacy-content {
        padding: 2.5rem 2.75rem;
    }
}

@media (min-width: 1024px) {
    body.lm-layout-pinnacle .page_privacy .lm-privacy-content {
        padding: 3rem;
    }
}

/* Reading surface — NOT an interactive card: no hover affordance on the
   whole panel, so the statement reads as a document, never as clickable. */
body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content {
    max-width: 76ch;
}

/* ==========================================================================
   CONTENT TYPOGRAPHY REFINEMENT (Pinnacle presentation concern only)
   ========================================================================== */

/* Breathable first section: the admin-owned first block is treated as a
   lead/intro when it is a paragraph or list. Presentation only - never
   generates or alters admin content. */
body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content > :first-child {
    margin-top: 0;
}

body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content > p:first-child {
    font-size: var(--lm-font-size-lg, 1.125rem);
    line-height: var(--lm-lh-relaxed, 1.625);
    color: var(--lm-text-primary);
}

/* Section spacing within the panel for a calmer editorial rhythm. */
body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content h2 {
    margin-top: 2.5rem;
}

body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content h3 {
    margin-top: 2rem;
}

/* ==========================================================================
   SECTION MARKERS — CONTENT-AGNOSTIC CSS-ONLY ACCENT RAILS
   ========================================================================== */
body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content h3,
body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content h4 {
    position: relative;
    padding-inline-start: 1.1rem;
}

body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content h3::before,
body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content h4::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.42em;
    width: 3px;
    height: 1.05em;
    border-radius: var(--lm-radius-full, 9999px);
    background: linear-gradient(
        180deg,
        var(--lm-accent-600) 0%,
        rgba(var(--lm-primary-rgb), 0.22) 100%
    );
    pointer-events: none;
}

/* Anchored admin headings (h3/h4[id]) clear the Pinnacle sticky secondary
   nav (`.lm-pinnacle-header-navigation-row`, 37px live-measured at 1440) —
   conservative 8rem at the 14px root, matching the certified Information
   family. */
body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content h3[id],
body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content h4[id] {
    scroll-margin-top: 8rem;
}

/* ==========================================================================
   LINKS WITHIN ADMIN CONTENT (presentation of OJS-authored links)
   ========================================================================== */

body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content a {
    color: var(--lm-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--lm-motion-normal);
}

body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content a:hover,
body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content a:focus {
    color: var(--lm-link-hover);
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

body.lm-layout-pinnacle .page_privacy .lm-privacy-content a:focus-visible {
    outline: var(--lm-focus-ring);
    outline-offset: var(--lm-focus-offset);
    border-radius: var(--lm-radius-sm, 4px);
}

@media (prefers-reduced-motion: reduce) {
    body.lm-layout-pinnacle .page_privacy * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
    body.lm-layout-pinnacle .page_privacy .lm-privacy-head {
        padding: var(--space-lg, 1.5rem) 0 var(--space-xl, 2.5rem);
    }

    body.lm-layout-pinnacle .page_privacy .lm-privacy-content {
        padding: 1.5rem 1.25rem;
    }
}

@media (max-width: 639px) {
    body.lm-layout-pinnacle .page_privacy .lm-privacy-content {
        padding: 1.5rem 1.25rem;
    }

    /* Avoid horizontal overflow from wide admin tables on small screens. */
    body.lm-layout-pinnacle .page_privacy .lm-privacy-content .lm-static-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}