/* dark-theme.css — Header and footer flipping dark while over the dark half of the
   page. Must load last: these are overrides.

   Extracted from the old components.css. LOAD ORDER MATTERS: these files were
   cut as contiguous slices of one stylesheet, so they must stay linked in this
   order or the cascade changes:
     timeline -> testimonials -> contact -> track-record -> contact-dark -> chrome -> experience -> dark-theme
*/

/* Footer: continues the dark close of the page */
.site-footer {
    background: var(--color-dark);
    color: rgba(255, 255, 255, 0.55);
}

/* The base rules set these to --color-text, which is the same near-black as
   --color-dark — on this background that is invisible text. Must be light. */
.site-footer p,
.site-footer #year {
    color: rgba(255, 255, 255, 0.65) !important;
    opacity: 1 !important;
}

.site-footer .social-icon {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

.site-footer .social-icon:hover {
    color: #fff;
}

.site-footer .footer-legal-link {
    color: rgba(255, 255, 255, 0.75);
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.35);
}

.site-footer .footer-legal-link:hover {
    color: #fff;
    text-decoration-color: #fff;
}


/* Header flips dark while over the dark half of the page */
body.on-dark .site-header {
    background: rgba(26, 26, 46, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.on-dark .header-logo,
body.on-dark .header-nav-link {
    color: rgba(255, 255, 255, 0.8);
}

body.on-dark .header-nav-link:hover,
body.on-dark .header-logo:hover {
    color: #fff;
}

body.on-dark .header-cta {
    color: var(--color-accent-light);
    border-color: rgba(255, 255, 255, 0.25);
}

body.on-dark .hamburger-line {
    background: rgba(255, 255, 255, 0.85);
}

/* Mobile nav drawer: the link colors above assume the dark header bar, but
   on mobile the links sit inside the slide-in drawer, which chrome.css
   paints white — white-on-white. The drawer must flip dark with the rest
   of the chrome. Scoped to the drawer breakpoint: on desktop .header-nav
   is an inline flex row in the header and must not grow a background. */
@media (max-width: 768px) {
    body.on-dark .header-nav {
        background: rgba(26, 26, 46, 0.97);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.35);
    }
}