/*
 * INATGI Theme Six — universal pale panel treatment
 * 2026-10-01
 *
 * Purpose
 * -------
 * Keep each journal's own Theme Six hue while reducing the visual weight of
 * the custom policy / special-issue / contact page blocks used across INATGI.
 * The stylesheet deliberately changes only the custom inline-layout patterns
 * introduced on static journal pages. Core OJS navigation, workflow, article
 * pages and submission UI are not targeted.
 *
 * Colour source
 * ------------
 * --inatgi-topbar / --inatgi-header / --inatgi-button / --inatgi-link are
 * journal-specific Theme Six options. color-mix() therefore creates a pale
 * version of the current journal's palette rather than imposing one colour on
 * every journal.
 */

:root {
    --inatgi-soft-surface: #f7f9fa;
    --inatgi-soft-surface-2: #f3f7f8;
    --inatgi-soft-text: #4f606b;
}

/* -------------------------------------------------------------------------
 * 1. Large custom-page hero panels
 *    Matches the source-code hero pattern used for Author Guidelines,
 *    Publication Policies, Special Issues, Publisher Transparency, etc.
 * ---------------------------------------------------------------------- */
.page div[style*="linear-gradient(135deg"][style*="border-radius: 14px"] {
    background: var(--inatgi-soft-surface) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--inatgi-topbar, #15537F) 7%, #ffffff) 0%,
        color-mix(in srgb, var(--inatgi-header, #1E6292) 12%, #ffffff) 100%
    ) !important;
    border: 1px solid color-mix(in srgb, var(--inatgi-header, #1E6292) 17%, #ffffff) !important;
    box-shadow: 0 6px 18px rgba(31, 55, 72, 0.055) !important;
}

/* The thin identity strip remains recognisable but is less saturated. */
.page div[style*="linear-gradient(135deg"][style*="border-radius: 14px"]
    > div[style*="position: absolute"][style*="height: 5px"] {
    background: color-mix(in srgb, var(--inatgi-button, #246494) 68%, #ffffff) !important;
}

/* Hero kicker / title / body become dark-on-pale instead of white-on-dark. */
.page div[style*="linear-gradient(135deg"][style*="border-radius: 14px"]
    > div[style*="text-transform: uppercase"] {
    color: var(--inatgi-link, #19527D) !important;
}

.page div[style*="linear-gradient(135deg"][style*="border-radius: 14px"]
    > div[style*="font-size: 31px"],
.page div[style*="linear-gradient(135deg"][style*="border-radius: 14px"]
    > div[style*="font-size: 32px"],
.page div[style*="linear-gradient(135deg"][style*="border-radius: 14px"]
    > div[style*="font-size: 30px"] {
    color: var(--inatgi-link, #19527D) !important;
}

.page div[style*="linear-gradient(135deg"][style*="border-radius: 14px"]
    > div[style*="line-height: 1.78"],
.page div[style*="linear-gradient(135deg"][style*="border-radius: 14px"]
    > div[style*="line-height: 1.75"] {
    color: var(--inatgi-soft-text) !important;
}

/* -------------------------------------------------------------------------
 * 2. Standard section-heading bands
 *    These previously used a fully saturated journal header colour.
 * ---------------------------------------------------------------------- */
.page div[style*="padding: 17px 22px"][style*="border-bottom: 4px solid"] {
    background: var(--inatgi-soft-surface-2) !important;
    background: color-mix(in srgb, var(--inatgi-header, #1E6292) 9%, #ffffff) !important;
    border-bottom-color: color-mix(in srgb, var(--inatgi-button, #246494) 58%, #ffffff) !important;
}

.page div[style*="padding: 17px 22px"][style*="border-bottom: 4px solid"]
    > div[style*="text-transform: uppercase"] {
    color: var(--inatgi-button, #246494) !important;
}

.page div[style*="padding: 17px 22px"][style*="border-bottom: 4px solid"]
    > div[style*="color: #ffffff"],
.page div[style*="padding: 17px 22px"][style*="border-bottom: 4px solid"]
    > h2,
.page div[style*="padding: 17px 22px"][style*="border-bottom: 4px solid"]
    > h3 {
    color: var(--inatgi-link, #19527D) !important;
}

/* -------------------------------------------------------------------------
 * 3. Contact-page card headings (shared template)
 * ---------------------------------------------------------------------- */
.page_contact div[style*="padding: 16px 20px"][style*="border-bottom: 4px solid"] {
    background: var(--inatgi-soft-surface-2) !important;
    background: color-mix(in srgb, var(--inatgi-header, #1E6292) 9%, #ffffff) !important;
    border-bottom-color: color-mix(in srgb, var(--inatgi-button, #246494) 58%, #ffffff) !important;
}

.page_contact div[style*="padding: 16px 20px"][style*="border-bottom: 4px solid"]
    > div[style*="text-transform: uppercase"] {
    color: var(--inatgi-button, #246494) !important;
}

.page_contact div[style*="padding: 16px 20px"][style*="border-bottom: 4px solid"]
    > div[style*="font-size: 20px"] {
    color: var(--inatgi-link, #19527D) !important;
}

/* -------------------------------------------------------------------------
 * 4. Bottom / callout blocks which used a full dark fill
 * ---------------------------------------------------------------------- */
.page div[style*="padding: 25px 27px"][style*="border-bottom: 4px solid"] {
    background: var(--inatgi-soft-surface-2) !important;
    background: color-mix(in srgb, var(--inatgi-header, #1E6292) 10%, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--inatgi-header, #1E6292) 16%, #ffffff) !important;
    border-bottom: 4px solid color-mix(in srgb, var(--inatgi-button, #246494) 58%, #ffffff) !important;
}

.page div[style*="padding: 25px 27px"][style*="border-bottom: 4px solid"]
    > div[style*="text-transform: uppercase"] {
    color: var(--inatgi-button, #246494) !important;
}

.page div[style*="padding: 25px 27px"][style*="border-bottom: 4px solid"]
    > div[style*="color: #ffffff"] {
    color: var(--inatgi-link, #19527D) !important;
}

.page div[style*="padding: 25px 27px"][style*="border-bottom: 4px solid"] p {
    color: var(--inatgi-soft-text) !important;
}

/* -------------------------------------------------------------------------
 * 5. Gentle surfaces and shadows for the standard content cards.
 *    This reduces the boxed / heavy visual feeling without flattening the page.
 * ---------------------------------------------------------------------- */
.page div[style*="box-shadow: 0 5px 18px rgba(23,58,79,0.05)"],
.page div[style*="box-shadow: 0 5px 18px rgba(23,58,79,0.055)"],
.page div[style*="box-shadow: 0 4px 14px rgba(23,58,79,0.045)"] {
    box-shadow: 0 3px 12px rgba(31, 55, 72, 0.035) !important;
}

/* Keep status badges / action buttons saturated enough to remain actionable. */
.page a[style*="background: #168b4d"],
.page span[style*="background: #168b4d"] {
    /* No forced background replacement here. Intentionally retained. */
}

/* Narrow screens keep the same pale system without introducing extra layout. */
@media (max-width: 700px) {
    .page div[style*="linear-gradient(135deg"][style*="border-radius: 14px"] {
        box-shadow: 0 3px 12px rgba(31, 55, 72, 0.04) !important;
    }
}