/**
 * @file plugins/themes/lumina/styles/layouts/pinnacle-static-page.css
 *
 * Copyright (c) 2026 Lumina Project contributors
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Pinnacle Experience - Generic static page presentation layer.
 *
 * ARCHITECTURE (separation of concerns):
 *   - Generic static page FOUNDATION (wrapper, typography, lists, tables,
 *     images, blockquotes) lives in styles/components/static-page.css and is
 *     shared by all experiences. It is intentionally NOT duplicated here.
 *   - This file owns only the PINNACLE PRESENTATION: content panel chrome,
 *     breathing room, responsive behaviour and active-state affordances for
 *     generic DEFAULT static pages rendered through the Pinnacle layout.
 *
 * SCOPE:
 *   - Selectors are prefixed with .lm-layout-pinnacle so they never leak into
 *     other experiences (Zenith, Vanguard, portal).
 *   - The panel targets only generic DEFAULT static pages, discriminated by the
 *     structural marker .page_static_content (present ONLY in the generic
 *     navigationMenuItemViewContent.tpl) combined with an exclusion of
 *     DEDICATED presentations: content classified DEDICATED (SACF containers,
 *     e.g. focus-scope) or rendered by the people framework (lm-person-card,
 *     e.g. reviewers) keeps its dedicated design untouched. Native OJS pages
 *     (about, information, contact, privacy) use different page markers
 *     (page_about, page_information, ...) and therefore never receive the panel.
 */

/* ==========================================================================
   CONTENT PANEL (generic DEFAULT static page only)
   ========================================================================== */

/* The panel wraps the admin-authored document while staying out of the way
   of SACF/people dedicated presentations. */
.lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--lm-surface-card, #ffffff);
    border: 1px solid var(--lm-border, #e2e8f0);
    border-radius: var(--lm-radius-xl, 12px);
    box-shadow: var(--lm-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
    padding: 1.75rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

@media (min-width: 768px) {
    .lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) {
        padding: 2.5rem 2.75rem;
    }
}

@media (min-width: 1024px) {
    .lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) {
        padding: 3rem;
    }
}

.lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)):hover {
    border-color: var(--lm-border-accent, var(--lm-primary, #2563eb));
}

/* ==========================================================================
   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. */
.lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) .lm-static-content > :first-child {
    margin-top: 0;
}

.lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) .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, #0f172a);
}

/* Section spacing within the panel for a calmer editorial rhythm. */
.lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) .lm-static-content h2 {
    margin-top: 2.5rem;
}

.lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) .lm-static-content h3 {
    margin-top: 2rem;
}

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

.lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) .lm-static-content a {
    color: var(--lm-link, #2563eb);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) .lm-static-content a:hover,
.lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) .lm-static-content a:focus {
    color: var(--lm-link-hover, #1d4ed8);
}

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

.lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) a:focus-visible {
    outline: var(--lm-focus-ring, 2px solid var(--lm-primary, #2563eb));
    outline-offset: var(--lm-focus-offset, 2px);
    border-radius: var(--lm-radius-sm, 4px);
}

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

@media (max-width: 639px) {
    .lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) {
        padding: 1.5rem 1.25rem;
    }

    /* Avoid horizontal overflow from wide admin tables on small screens. */
    .lm-layout-pinnacle .lm-static-page:has(.page_static_content):not(:has(.sacf-academic, .lm-person-card)) .lm-static-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}