/* ==========================================================================
   Auxentia — cold palette layer (aux-theme)
   Loaded AFTER ncg-a11y.css + the parent ncg-theme style.css, so these win.

   Single palette — "noir": near-black chrome + electric-blue accents.
   Redefines the ncg --ncg-color-* tokens for the a11y toolbar's three modes
   (default / dark / high-contrast, via html[data-ncg-theme=…]); loaded last so
   it wins over the plugin/theme pine defaults by load order. Contrast targets:
   body/link text ≥ 4.5:1, large/UI ≥ 3:1. High-contrast is pure black/white +
   yellow links (luminance-max — NOT blue). Chrome tokens (--aux-hero-*,
   --aux-chrome) are MODE-STABLE so heroes/nav stay dark in every mode;
   high-contrast forces them black.
   ========================================================================== */

/* ---- Base / light ----------------------------------------------------- */
:root {
    --ncg-color-primary:    #0A0F1A; /* near-black — nav text, brand ink */
    --ncg-color-secondary:  #33455F;
    --ncg-color-accent:     #1568D0; /* electric blue — button bg (white text ~4.8:1), spines, icons */
    --ncg-color-heading:    #05080F;
    --ncg-color-body:       #12202E; /* ~13:1 on paper */
    --ncg-color-muted:      #45566B; /* ~5.3:1 on white */
    --ncg-color-bg-paper:   #F4F6FA;
    --ncg-color-bg-surface: #FFFFFF;
    --ncg-color-border:     #6E7C90; /* ~3.6:1 boundary on white */
    --ncg-link:             #1B6BE0; /* links stand out from body */

    /* mode-stable chrome (heroes, nav bar, dark bands): near-black w/ electric edge */
    --aux-hero-1:  #05070C;
    --aux-hero-2:  #0B1524;
    --aux-hero-3:  #12325A;
    --aux-chrome:  #0A0F1A;
    --aux-on-chrome: #FFFFFF;
    --aux-accent-2: #12B5CE; /* brighter turquoise/teal — card numbers + accent borders */
}
/* ---- Dark ------------------------------------------------------------- */
html[data-ncg-theme="dark"] {
    --ncg-color-primary:    #8CC6FF;
    --ncg-color-secondary:  #93A9C4;
    --ncg-color-accent:     #1568D0; /* button-safe (white text) */
    --ncg-color-heading:    #F6FAFF;
    --ncg-color-body:       #E7EEF7;
    --ncg-color-muted:      #A6B4C6;
    --ncg-color-bg-paper:   #05070C;
    --ncg-color-bg-surface: #0E1420;
    --ncg-color-border:     #263449;
    --ncg-link:             #63C6FF; /* electric */
    --aux-accent-2: #2AD0E6; /* brighter teal on dark */
}

/* ---- HIGH CONTRAST — shared by both schemes (black / white / yellow) --- */
html[data-ncg-theme="high-contrast"] {
    --ncg-color-primary:    #FFFFFF;
    --ncg-color-secondary:  #FFFFFF;
    --ncg-color-accent:     #FFFF00;
    --ncg-color-heading:    #FFFFFF;
    --ncg-color-body:       #FFFFFF;
    --ncg-color-muted:      #FFFFFF;
    --ncg-color-bg-paper:   #000000;
    --ncg-color-bg-surface: #000000;
    --ncg-color-border:     #FFFFFF;
    --ncg-link:             #FFFF00;

    --aux-hero-1:  #000000;
    --aux-hero-2:  #000000;
    --aux-hero-3:  #000000;
    --aux-chrome:  #000000;
    --aux-on-chrome: #FFFFFF;
    --aux-accent-2: #FFFF00; /* high-contrast: teal -> yellow */
}

/* ==========================================================================
   PAGE SURFACES — make body follow the tokens in light mode too
   (the parent already handles dark via html[data-ncg-theme="dark"] body).
   ========================================================================== */
body { background-color: var(--ncg-color-bg-paper); color: var(--ncg-color-body); }

/* ==========================================================================
   LINKS — cold, and made to stand out (the parent points a{} at --primary).
   Underline is inherited from the parent (kept for color-blind users).
   ========================================================================== */
a { color: var(--ncg-link); }
a:hover, a:focus { color: var(--ncg-color-accent); background-color: rgba(24, 87, 196, 0.10); }
html[data-ncg-theme="high-contrast"] a:hover,
html[data-ncg-theme="high-contrast"] a:focus { background-color: transparent; }

/* ==========================================================================
   FOCUS + SKIP LINK — beat the plugin's copper (!important, inline in
   a11y-frontend.php) with the cold accent. Override colour only.
   ========================================================================== */
.ncg-skip-link { background: var(--aux-chrome) !important; color: var(--aux-on-chrome) !important; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
summary:focus-visible,
.ncg-skip-link:focus { outline-color: var(--ncg-color-accent) !important; }
html[data-ncg-theme="high-contrast"] :focus-visible { outline-color: #FFFF00 !important; }

/* ==========================================================================
   CONTACT FORM — the parent hardcodes pine/copper (+ !important) here.
   Re-assert cold, matching the parent's selectors/specificity.
   ========================================================================== */
.ncg-form-group label { color: var(--ncg-color-heading) !important; }
.ncg-form-group input,
.ncg-form-group textarea {
    background-color: var(--ncg-color-bg-surface) !important;
    color: var(--ncg-color-body) !important;
    border: 2px solid var(--ncg-color-border) !important;
}
.ncg-form-group input::placeholder,
.ncg-form-group textarea::placeholder { color: var(--ncg-color-muted) !important; }
.ncg-form-group input:focus,
.ncg-form-group textarea:focus {
    border-color: var(--ncg-color-accent) !important;
    box-shadow: 0 0 0 3px rgba(14, 90, 167, 0.25) !important;
}
.ncg-submit-btn { background-color: var(--ncg-color-accent) !important; color: #ffffff !important; }
.ncg-submit-btn:hover { background-color: var(--aux-chrome) !important; }
html[data-ncg-theme="high-contrast"] .ncg-submit-btn { background-color: #FFFF00 !important; color: #000 !important; }

/* ==========================================================================
   HEADER / FOOTER CHROME — the parent gives the dark theme a pine backdrop
   (#16211B) and a copper hover; recolor to the cold scheme.
   ========================================================================== */
html[data-ncg-theme="dark"] .site-header { background-color: var(--aux-chrome); }
.ncg-header-cta:hover,
.ncg-header-cta:focus-visible { background: var(--aux-chrome); color: #fff; }
/* Parent uses a lighter copper (#E4BE97) for dark-theme nav hover/active — cold it. */
html[data-ncg-theme="dark"] .site-header .site-navigation ul.menu > li > a:hover,
html[data-ncg-theme="dark"] .site-header .site-navigation ul.menu > li > a:focus-visible,
html[data-ncg-theme="dark"] .site-header .site-navigation ul.menu > li.current-menu-item > a,
html[data-ncg-theme="dark"] .site-footer .site-navigation ul.menu > li > a:hover,
html[data-ncg-theme="dark"] .site-footer .site-navigation ul.menu > li > a:focus-visible,
html[data-ncg-theme="dark"] .site-footer .site-navigation ul.menu > li.current-menu-item > a {
    color: var(--ncg-color-primary);
    border-bottom-color: var(--ncg-color-primary);
}
html[data-ncg-theme="dark"] .site-header .site-navigation ul.menu > li > a:focus-visible,
html[data-ncg-theme="dark"] .site-footer .site-navigation ul.menu > li > a:focus-visible { outline-color: var(--ncg-color-primary); }

/* ==========================================================================
   FOOTER — grouped 4-column, on the mode-stable dark chrome (always dark;
   forced black in high-contrast). Text is white on chrome in every mode.
   ========================================================================== */
.aux-footer { background: var(--aux-chrome); color: #fff; padding: 56px 0 0; }
/* Full-bleed footer (the parent caps .site-footer width) so the dark band spans
   edge-to-edge like the hero; content stays centered via .aux-footer-inner. */
#site-footer.aux-footer { max-width: none; width: 100%; }
.aux-footer-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 40px;
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
}
.aux-footer-head {
    font-family: 'Playfair Display', Georgia, serif; font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px; color: #fff; opacity: .65; margin: 0 0 16px;
}
.aux-footer-col ul { list-style: none; margin: 0; padding: 0; }
.aux-footer-col li { margin-bottom: 11px; }
.aux-footer-col a { color: #fff; text-decoration: none; opacity: .9; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.aux-footer-col a:hover, .aux-footer-col a:focus-visible { opacity: 1; border-bottom-color: currentColor; }
.aux-footer-brand .aux-footer-wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; color: #fff; margin: 0 0 10px; letter-spacing: -.01em; }
.aux-footer-tagline { color: rgba(255,255,255,.82); line-height: 1.6; margin: 0 0 14px; max-width: 34ch; }
.aux-footer-parent { color: rgba(255,255,255,.7); font-size: .9rem; margin: 0; line-height: 1.6; }
.aux-footer-parent a { color: #fff; }
.aux-footer .site-footer-legal { max-width: 1200px; margin: 48px auto 0; padding: 20px 40px; border-top: 1px solid rgba(255,255,255,.16); text-align: center; }
.aux-footer .site-footer-legal p { margin: 0; font-size: .82rem; color: rgba(255,255,255,.75); }
/* High-contrast: keep a visible divider + white text on the forced-black chrome. */
html[data-ncg-theme="high-contrast"] .aux-footer .site-footer-legal { border-top-color: #fff; }
html[data-ncg-theme="high-contrast"] .aux-footer-head,
html[data-ncg-theme="high-contrast"] .aux-footer-tagline,
html[data-ncg-theme="high-contrast"] .aux-footer-parent,
html[data-ncg-theme="high-contrast"] .aux-footer .site-footer-legal p { opacity: 1; color: #fff; }

@media (max-width: 900px) { .aux-footer-inner { grid-template-columns: 1fr 1fr; } .aux-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .aux-footer-inner { grid-template-columns: 1fr; padding: 0 24px; } .aux-footer .site-footer-legal { padding: 20px 24px; } }

/* ==========================================================================
   HEADER LOGO — dark & high-contrast use the Auxentia white/reverse wordmark
   (the parent points at an NCG white logo). Only the image swaps; the parent's
   "left center / contain no-repeat" positioning is inherited.
   ========================================================================== */
html[data-ncg-theme="dark"] .site-header .custom-logo-link,
html[data-ncg-theme="high-contrast"] .site-header .custom-logo-link {
    background-image: url('../img/auxentia-logo-white.png');
}
/* Slightly larger wordmark in the header (parent caps it at 50px). */
.site-header .custom-logo { height: 64px; }
@media (max-width: 600px) { .site-header .custom-logo { height: 48px; } }
/* Dark/high-contrast uses the same box height as light (above): the "auxentia"
   word band is identical in both logo files (same size + position), so at an
   equal box height the wordmark renders the same in every mode. */

/* ==========================================================================
   SMOOTH FLOW — fade the dark hero into the body and the body into the footer,
   so the banner + footer don't hard-cut the light page. Token-driven, so it
   stays seamless in dark / high-contrast (where body + chrome are already dark).
   ========================================================================== */
.ncg-split-header-v2, .ncg-split-header { position: relative; }
.ncg-split-header-v2::after, .ncg-split-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), var(--ncg-color-bg-paper));
    pointer-events: none; z-index: 1;
}
.aux-footer { position: relative; }
.aux-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: -56px; height: 56px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), var(--aux-chrome));
    pointer-events: none;
}