/* =============================================================================
   rsm-seo.css — ReferenceSearchManager overrides for the shared SEO surface
   (com.aldecorp.seo.SeoPageRenderer + /css/yak-seo.css). Linked LAST by
   RsmSeoServlet.stylesheets, so it wins the cascade without touching the
   shared renderer/stylesheet (which four products share). Two jobs:

     1. Standardize the palette to the app's brand steel-blue (the same
        --accent RSM uses in referencesearchmanager.css: #245a8d / #5b9bd5).
     2. Upgrade the visual design — hero, sticky header, refined plan cards,
        gradient CTA band, primary + secondary buttons — while leaving the
        shared HTML structure untouched.

   Theme-aware via prefers-color-scheme (these are static docs — no cookie),
   REM sizing + fluid clamp()s, WCAG AA contrast, mobile-first.
   ============================================================================= */

:root {
    --rsm-brand:        #245a8d;   /* brand steel blue (light) */
    --rsm-brand-strong: #1d4a75;
    --rsm-hero-1:       #eef5fd;   /* soft brand-tinted hero wash */
    --rsm-hero-2:       #ffffff;
    /* Re-skin the shared neutrals to a slightly cooler, on-brand palette. */
    --seo-surface:      #f4f8fd;
    --seo-border:       rgba(28, 60, 95, 0.14);
    --seo-band-bg:      #173a5e;   /* brand-tinted navy (was flat #0e1a2e) */
}
@media (prefers-color-scheme: dark) {
    :root {
        --rsm-brand:        #5b9bd5;
        --rsm-brand-strong: #7db1e0;
        --rsm-hero-1:       #0f1d31;
        --rsm-hero-2:       #0c1626;
        --seo-surface:      #121f33;
        --seo-border:       rgba(140, 170, 210, 0.18);
        --seo-band-bg:      #0a1626;
    }
}

/* ── Page background: a subtle hero wash fading into the page ─────────────── */
body.seo-page {
    background:
        linear-gradient(180deg, var(--rsm-hero-1) 0%, var(--seo-bg) 42rem),
        var(--seo-bg);
}

/* ── Sticky, frosted header ──────────────────────────────────────────────── */
.seo-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.85rem clamp(1rem, 5vw, 3.5rem);
    background: var(--seo-bg);   /* fallback where color-mix is unsupported */
    background: color-mix(in srgb, var(--seo-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--seo-border);
}
.seo-brand { letter-spacing: -0.01em; }
.seo-brand::before {
    content: "";
    display: inline-block;
    width: 0.62rem;
    height: 0.62rem;
    margin-right: 0.5rem;
    border-radius: 3px;
    background: var(--rsm-brand);
    vertical-align: baseline;
}
.seo-nav a { font-weight: 500; }
.seo-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.seo-btn {
    border-radius: 10px;
    padding: 0.6rem 1.25rem;
    box-shadow: 0 6px 18px -8px rgba(28, 74, 117, 0.65);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.seo-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(28, 74, 117, 0.7); }

.seo-btn-secondary {
    border-radius: 10px;
    padding: 0.55rem 1.2rem;
    border-width: 1.5px;
    transition: background .12s ease, transform .12s ease;
}
.seo-btn-secondary:hover { transform: translateY(-1px); }
/* Header: brand-outline on the light bar. Band: light-outline on dark navy. */
.seo-bar .seo-btn-secondary { color: var(--rsm-brand); border-color: var(--rsm-brand); }
.seo-band .seo-btn-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.seo-band .seo-btn-secondary:hover { background: rgba(255, 255, 255, 0.14); }

/* ── Hero (first screen of .seo-main) ────────────────────────────────────── */
.seo-main { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.seo-main h1 {
    letter-spacing: -0.02em;
    font-weight: 700;
    max-width: 20ch;
}
.seo-lead {
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    line-height: 1.6;
}

/* ── Feature check-list ──────────────────────────────────────────────────── */
.seo-features { list-style: none; padding-left: 0; }
.seo-features li { position: relative; padding-left: 1.6rem; margin-bottom: 0.5rem; }
.seo-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.02em;
    font-weight: 700;
    color: var(--rsm-brand);
}

/* ── Plan cards ──────────────────────────────────────────────────────────── */
.seo-plans { gap: 1.5rem; }
.seo-plan {
    border-radius: 16px;
    padding: 1.6rem 1.5rem;
    box-shadow: 0 12px 30px -20px rgba(20, 40, 70, 0.55);
    transition: transform .14s ease, box-shadow .14s ease;
}
.seo-plan:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(20, 40, 70, 0.6); }
.seo-plan-highlight {
    position: relative;
    border: 2px solid var(--rsm-brand);
    box-shadow: 0 16px 40px -18px rgba(28, 74, 117, 0.55);
}
.seo-plan-highlight::before {
    content: "Most popular";
    position: absolute;
    top: -0.75rem;
    left: 1.5rem;
    background: var(--rsm-brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}
.seo-plan h2 { color: var(--rsm-brand-strong); }
.seo-price { letter-spacing: -0.02em; }
.seo-plan .seo-btn { align-self: flex-start; margin-top: 0.4rem; }

/* ── CTA band: brand gradient ────────────────────────────────────────────── */
.seo-band {
    background: linear-gradient(135deg, var(--seo-band-bg) 0%, var(--rsm-brand-strong) 140%);
    padding: clamp(2.4rem, 5vw, 3.4rem) 5vw;
}
.seo-band p { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 600; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.seo-footer { padding-top: 1.6rem; padding-bottom: 2.4rem; }
.seo-footer nav a { font-weight: 500; }

/* Frosted header + gradient wash degrade gracefully where unsupported. */
@supports not (backdrop-filter: blur(10px)) {
    .seo-bar { background: var(--seo-bg); }
}