/* Legacy variable bridge — loaded AFTER a page's own <style> block.

   The older pages (Proxmox, Shop, E-Waste, Website Design, Resources and
   the guides) were written against the previous navy/orange dark theme and
   reference its variables inline: var(--navy), var(--orange), var(--white)
   and so on. Rather than rewrite every inline style, the old names are
   mapped here onto the group palette on a LIGHT page, and re-mapped again
   inside the navy "slab" sections so the same inline styles read correctly
   on dark. */
:root {
    --navy: var(--bg);              /* page background */
    --navy-mid: var(--card-bg);     /* alternate section / card background */
    --navy-light: #E8EEF5;          /* raised panel */
    --orange: var(--teal-ink);      /* accent as text / icon */
    --orange-dark: var(--brand-dark);
    --orange-glow: rgba(0, 164, 189, 0.15);
    --white: var(--brand-dark);     /* headings */
    --off-white: var(--text);
    --gray-light: var(--text);
    --gray-mid: var(--muted);
    --text-body: var(--text);
    --con-red: #b3261e;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Sections that stay navy: hero slabs, closing bands and the like. Inside
   these the old names resolve to on-dark values, so `color: var(--white)`
   is white again and the accent is gold/teal-bright rather than teal-ink. */
.dark-slab, .hero, .page-hero, .res-hero, .shop-hero, .cta-band .cta-box, .final-cta, .why-band,
#it-calculator, .calc-results, .hero-split, .cta-split, .bento-lead, .split-row-aside-mid, .ewaste-hero {
    --navy: transparent;
    --navy-mid: rgba(251,251,251,0.06);
    --navy-light: rgba(251,251,251,0.09);
    --card-bg: rgba(251,251,251,0.07);
    --orange: var(--accent);
    --orange-dark: var(--teal-bright);
    --orange-glow: rgba(248,180,32,0.18);
    --white: var(--soft-white);
    --off-white: rgba(251,251,251,0.92);
    --gray-light: rgba(251,251,251,0.84);
    --gray-mid: rgba(251,251,251,0.68);
    --text-body: rgba(251,251,251,0.84);
}

/* The old pages' hero and band sections, restyled as group slabs. */
.hero, .res-hero, .shop-hero, .final-cta, .why-band {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
    color: var(--soft-white);
    border-radius: 20px;
    padding: 48px 44px !important;
    margin: 12px 0 40px !important;
    position: relative;
    overflow: hidden;
    border: none !important;
    min-height: 0 !important;
}
.hero::after, .res-hero::after, .shop-hero::after, .final-cta::after {
    content: ""; position: absolute; top: -140px; right: -120px; width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 164, 189, 0.38), rgba(0, 164, 189, 0) 68%); pointer-events: none;
}
.hero > *, .res-hero > *, .shop-hero > *, .final-cta > * { position: relative; z-index: 1; }
.hero h1, .res-hero h1, .shop-hero h1, .final-cta h2, .why-band h2 { color: var(--soft-white) !important; font-family: var(--font-body) !important; letter-spacing: -0.4px !important; }
.hero p, .res-hero p, .shop-hero p, .final-cta p { color: rgba(251,251,251,0.84); }
.hero-grid-bg, .page-hero-grid { display: none !important; }

/* Every remaining section of the old pages: no dark backgrounds, group
   spacing, and no fixed-nav top padding (the header is sticky, not fixed). */
main.site-main section:not(.page-hero):not(.hero):not(.res-hero):not(.shop-hero):not(.final-cta):not(.why-band):not(.dark-slab):not(.cta-split),
main.site-main .shop-body { background: none; border-top: none; border-bottom: none; }
main.site-main > section, main.site-main > header { padding-left: 0; padding-right: 0; }
main.site-main > section:first-child, main.site-main > header:first-child { padding-top: 0; }
main.site-main .section-inner { max-width: 1120px; }
main.site-main section[style*="var(--navy"] { background: none !important; }
/* The budget calculator embedded on the Resources page keeps its navy slab. */
main.site-main #it-calculator { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important; border-radius: 20px; padding: 40px 36px !important; margin: 0 0 44px; color: var(--soft-white); }
main.site-main #it-calculator .calc-grid { margin-bottom: 0; }

/* Old typography helpers: the display face is gone, the group uses one family. */
main.site-main [style*="font-family: var(--font-display)"], main.site-main [style*="font-family:var(--font-display)"] { font-family: var(--font-body) !important; }
main.site-main h1, main.site-main h2, main.site-main h3, main.site-main h4 { font-family: var(--font-body); }

/* Orange-tinted borders/fills the old pages hard-coded as rgba(249,115,22,x)
   are rewritten to teal tints at conversion time; white tints are rewritten
   to navy tints. Anything that slips through still reads acceptably. */

/* Outlined secondary buttons on the old pages' navy slabs. */
.hero :is(.btn-secondary, .btn-ghost, .btn-outline), .page-hero :is(.btn-secondary, .btn-ghost, .btn-outline), .res-hero :is(.btn-secondary, .btn-ghost, .btn-outline),
.shop-hero :is(.btn-secondary, .btn-ghost, .btn-outline), .final-cta :is(.btn-secondary, .btn-ghost, .btn-outline), .why-band :is(.btn-secondary, .btn-ghost, .btn-outline),
.cta-inner :is(.btn-secondary, .btn-ghost, .btn-outline), #it-calculator :is(.btn-secondary, .btn-ghost, .btn-outline), .dark-slab :is(.btn-ghost, .btn-outline) {
    background: transparent !important; color: var(--soft-white) !important; border: 1px solid rgba(251,251,251,0.5) !important;
}
.hero :is(.btn-secondary, .btn-ghost, .btn-outline):hover, .page-hero :is(.btn-secondary, .btn-ghost, .btn-outline):hover, .final-cta :is(.btn-secondary, .btn-ghost, .btn-outline):hover,
.cta-inner :is(.btn-secondary, .btn-ghost, .btn-outline):hover, .why-band :is(.btn-secondary, .btn-ghost, .btn-outline):hover { background: rgba(251,251,251,0.14) !important; border-color: var(--soft-white) !important; color: #fff !important; }

/* Proxmox page: the replication diagram and the closing CTA box are navy slabs. */
.dr-figure, .cta-inner { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important; border-color: transparent !important; color: var(--soft-white); }
.dr-figure, .cta-inner {
    --white: var(--soft-white); --off-white: rgba(251,251,251,0.92); --gray-light: rgba(251,251,251,0.84); --gray-mid: rgba(251,251,251,0.68); --text-body: rgba(251,251,251,0.84); --orange: var(--accent); --navy: transparent; --navy-mid: rgba(251,251,251,0.06);
}
.cta-inner h2 { color: var(--soft-white) !important; }