/* QGA NAV TEAL FIX v1
   Goal: remove harsh black text, keep a very dark turquoise identity,
   and make header links physically clickable above decorative layers. */

:root {
    --qga-deep-teal: #0a4f4a;
    --qga-deep-teal-strong: #073f3b;
    --qga-deep-teal-hover: #0d6b63;
    --qga-deep-teal-muted: #3b6f6a;
    --qga-teal-soft: #d9efec;
}

/* Interaction hardening: nav sits above decorative/pseudo layers. */
header,
.qga-header,
.qga-site-header,
.site-header {
    isolation: isolate;
}

header nav,
.qga-header nav,
.qga-site-header nav,
.site-header nav,
header nav ul,
header nav li,
header nav a,
.qga-header a[href],
.qga-site-header a[href],
.site-header a[href] {
    pointer-events: auto !important;
}

header nav,
.qga-header nav,
.qga-site-header nav,
.site-header nav {
    position: relative !important;
    z-index: 500 !important;
}

header::before,
header::after,
.qga-header::before,
.qga-header::after,
.qga-site-header::before,
.qga-site-header::after,
.site-header::before,
.site-header::after,
header nav::before,
header nav::after {
    pointer-events: none !important;
}

/* Main light-surface text: very dark turquoise instead of black. */
body {
    color: var(--qga-deep-teal-muted);
}

h1,
h2,
h3,
h4,
h5,
h6,
.qga-page-title,
.qga-page-shell h1,
.qga-page-shell h2,
.qga-page-shell h3,
.qga-brand,
.qga-brand-name,
.qga-brand-text {
    color: var(--qga-deep-teal-strong);
}

header a,
.qga-header a,
.qga-site-header a,
.site-header a,
.qga-nav a,
.qga-main-nav a,
.primary-navigation a,
.main-navigation a {
    color: var(--qga-deep-teal) !important;
    text-decoration: none !important;
}

/* Human nav feel: slightly roomier, calm hover, no pills or frames. */
header nav ul,
.qga-nav ul,
.qga-main-nav ul,
.primary-navigation ul,
.main-navigation ul {
    gap: clamp(14px, 1.35vw, 23px);
}

header nav a,
.qga-nav a,
.qga-main-nav a,
.primary-navigation a,
.main-navigation a {
    position: relative;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: color 150ms ease, transform 150ms ease;
}

header nav a:hover,
header nav a:focus-visible,
.qga-nav a:hover,
.qga-nav a:focus-visible,
.qga-main-nav a:hover,
.qga-main-nav a:focus-visible,
.primary-navigation a:hover,
.primary-navigation a:focus-visible,
.main-navigation a:hover,
.main-navigation a:focus-visible {
    color: var(--qga-deep-teal-hover) !important;
    transform: translateY(-1px);
}

header nav a::after,
.qga-nav a::after,
.qga-main-nav a::after,
.primary-navigation a::after,
.main-navigation a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--qga-deep-teal-hover);
    opacity: 0;
    transform: translateX(-50%) scaleX(.45);
    transition: opacity 150ms ease, transform 150ms ease;
    pointer-events: none;
}

header nav a:hover::after,
header nav a:focus-visible::after,
header nav a[aria-current="page"]::after,
.qga-nav a:hover::after,
.qga-nav a:focus-visible::after,
.qga-nav a[aria-current="page"]::after,
.qga-main-nav a:hover::after,
.qga-main-nav a:focus-visible::after,
.qga-main-nav a[aria-current="page"]::after,
.primary-navigation a:hover::after,
.primary-navigation a[aria-current="page"]::after,
.main-navigation a:hover::after,
.main-navigation a[aria-current="page"]::after {
    opacity: .9;
    transform: translateX(-50%) scaleX(1);
}

/* Keep language/dark controls above the nav where layouts overlap. */
.qga-header-actions,
.qga-actions,
.qga-language,
.qga-language-control,
.qga-theme-toggle,
.qga-dark-mode {
    position: relative;
    z-index: 600;
}

/* Common manual-dark-mode fallbacks: dark teal is only for light surfaces. */
html[data-theme="dark"] body,
body[data-theme="dark"],
html.dark body,
body.dark,
body.dark-mode,
body.qga-dark {
    color: #c8d9d7;
}

html[data-theme="dark"] header a,
body[data-theme="dark"] header a,
html.dark header a,
body.dark header a,
body.dark-mode header a,
body.qga-dark header a {
    color: #9ad0ca !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.qga-dark h1,
body.qga-dark h2,
body.qga-dark h3 {
    color: #e5f3f1;
}

@media (max-width: 980px) {
    header nav a::after,
    .qga-nav a::after,
    .qga-main-nav a::after,
    .primary-navigation a::after,
    .main-navigation a::after {
        display: none;
    }
}