/*
 * hannanore.fi — accessibility and colour-scheme overrides on top of the
 * Casper theme (assets/built/screen.css), which is left untouched.
 *
 * Loaded after the theme on every page (tools/apply_fixes.py adds the tag).
 * Colours follow the shop, nahanjaljilla.fi: forest green #2c332f/#3f5147,
 * warm light grey #efecec, text #252525.
 *
 * Dark-mode rules sit in @media (prefers-color-scheme: dark), like the
 * theme's own; assets/js/theme.js flips those queries when a visitor picks a
 * scheme other than their system's, so the theme and these rules switch together.
 */

:root {
    --hn-green-dark: #2c332f;
    --hn-green: #3f5147;
    --hn-grey-light: #efecec;
    /* Focus ring on the light page: green, 8.7:1 on white (WCAG 2.4.7, 1.4.11). */
    --hn-focus: var(--hn-green);
    /* Link hover in body text: green, 8.7:1 on white. The theme's #3eb0ef was 2.4:1. */
    --hn-link-hover: var(--hn-green);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* 14.6:1 on the theme's dark background #191b1f. */
        --hn-focus: var(--hn-grey-light);
        --hn-link-hover: var(--hn-grey-light);
    }
}

/* ---- Links in body text: a real underline (WCAG 1.4.1) ----
 * The theme drew the underline with box-shadow, which Windows high-contrast
 * mode removes and automated checkers do not recognise. */
.post-full-content a {
    box-shadow: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.post-full-content a:hover {
    color: var(--hn-link-hover);
    box-shadow: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* ---- Visible keyboard focus (WCAG 2.4.7) ----
 * The theme's ring used the near-black accent colour, invisible in dark mode. */
:focus-visible {
    outline: 3px solid var(--hn-focus);
    outline-offset: 2px;
}

/* The nav, header photo and footer are dark in both schemes. */
.site-nav-main :focus-visible,
.site-header :focus-visible,
.site-home-header :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--hn-grey-light);
}

/* ---- Header photo: darker overlay so the white title stays readable ----
 * The site title sat partly on pale leather at under 3:1 (WCAG 1.4.3 for large
 * text); the theme already uses 0.6 in dark mode. */
.site-header-background:before {
    background: rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
    .site-header-background:before {
        background: rgba(0, 0, 0, 0.6);
    }
}

/* ---- The nav logo on the front pages too ----
 * The theme hid it there; shown for consistency with the other pages
 * (on its own front page it is text, not a link: tools/apply_fixes.py). */
.site-home-header .site-nav-logo {
    display: inline-block;
}

/* ---- Skip link (WCAG 2.4.1): hidden until focused ---- */
.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 10px 16px;
    border-radius: 6px;
    color: #fff;
    background: var(--hn-green-dark);
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: underline;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
    outline: 3px solid var(--hn-grey-light);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Light/dark button in the nav ---- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 4px 0 8px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
}

.theme-toggle[hidden] {
    display: none;
}

.theme-toggle:hover {
    color: #fff;
}

.theme-toggle[aria-pressed="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

/* ---- Phones: the whole nav, wrapped, instead of a hidden scroll strip ----
 * The theme showed only the first two links in a sideways-scrolling strip
 * and hid the language links and social icons below 700px (WCAG 1.4.10).
 * Wrapped onto several rows the nav is taller than 64px, so it scrolls away
 * with the page instead of staying fixed over the content. */
@media (max-width: 700px) {
    .site-nav-main {
        position: relative;
    }

    .site-nav {
        flex-wrap: wrap;
        height: auto;
        overflow: visible;
    }

    .site-nav-left-wrapper:after {
        display: none;
    }

    /* The theme's flex: 1 0 auto keeps these as wide as their unwrapped
       content; let them shrink to the screen so the menu can wrap. */
    .site-nav-left-wrapper,
    .site-nav-left {
        flex: 1 1 100%;
        min-width: 0;
    }

    .site-nav-left {
        flex-wrap: wrap;
        padding-bottom: 6px;
        overflow: visible;
        white-space: normal;
    }

    /* The theme positions the menu absolutely (to swap it with the post
       title on scroll); in flow it can wrap and push the content down. */
    .site-nav-content {
        flex: 1 1 100%;
    }

    .site-nav-left .nav {
        position: relative;
        flex-wrap: wrap;
    }

    .site-nav-left .nav li:last-of-type {
        padding-right: 0;
    }

    .site-nav-right {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        height: auto;
        padding: 0 5vw 10px;
    }

    /* Same -12px as the menu, so both rows of links line up. */
    .site-nav-right .nav {
        flex-wrap: wrap;
        margin-left: -12px;
    }

    .page-template .site-main,
    .post-template .site-main,
    .site-header-background {
        margin-top: 0;
    }
}

/* ---- Long words never run off a narrow screen (WCAG 1.4.10) ----
 * Finnish compounds like "Nahanparkintakurssit" were cut off at 320px.
 * Hyphenation follows each page's lang attribute. */
h1,
h2,
h3,
.post-full-content {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ---- Less motion for those who ask for it (WCAG 2.3.3, AAA, cheap to honour) ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}