/*
 * Mesozoic Haven accessibility layer
 * -----------------------------------
 * Accessible defaults and visitor preferences. Loaded after the visual theme so
 * readability settings can override decoration without duplicating page layout.
 */

/* Keep only the two core faces in the critical font family. The browser may
   synthesize semibold/italic from these faces, avoiding extra first-load font
   requests while preserving Atkinson Hyperlegible Next as the default family. */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("/assets/fonts/AtkinsonHyperlegibleNext-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("/assets/fonts/AtkinsonHyperlegibleNext-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
}

:root {
    /* Complete system fallback remains if the local font cannot load. */
    --mh-font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { font-size: 100%; }
html.mh-text-large { font-size: 112.5%; }
html.mh-text-xlarge { font-size: 125%; }

/* Keyboard focus must remain obvious regardless of theme or contrast mode. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #f2c078;
    outline-offset: 3px;
}

:where([id], a, button, input, select, textarea):focus {
    scroll-margin-block: 1rem;
}

.mh-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Second skip link appears beside the primary skip link when focused. */
.mh-skip-link--nav:focus { left: 190px; }

/* Comfortable touch targets for navigation/actions without enlarging every
   inline article link. */
.mh-button,
.mh-footer-links a,
.mh-link-list a,
.mh-breadcrumbs a,
.mh-creature-link,
.mh-nav__link,
.mh-nav__search,
.mh-nav__dropdown a,
.mh-a11y button,
.mh-search-input {
    min-height: 44px;
}

.mh-footer-links a,
.mh-link-list a,
.mh-breadcrumbs a {
    display: inline-flex;
    align-items: center;
}

/* Current/selected state must not depend on color alone. */
.mh-nav a[aria-current="page"],
.mh-breadcrumbs [aria-current="page"] {
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

/* Footer organization. */
.mh-site-footer__inner { align-items: start; }

.mh-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 28px;
}

.mh-footer-links > div {
    display: grid;
    align-content: start;
    gap: 3px;
}

.mh-footer-links__title {
    margin: 0 0 4px;
    color: #e9d7ba;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mh-footer-links a { padding-block: 5px; }

/* Floating accessibility control. */
.mh-a11y {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 120;
}

.mh-a11y__toggle {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid #8a643f;
    border-radius: 50%;
    background: #15110d;
    color: #f0dfc5;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.52);
    cursor: pointer;
}

.mh-a11y__toggle svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}

.mh-a11y__toggle:hover,
.mh-a11y__toggle:focus-visible {
    background: #2a1d13;
    border-color: #c08a55;
}

.mh-a11y__panel {
    position: absolute;
    right: 0;
    bottom: 58px;
    width: min(310px, calc(100vw - 28px));
    max-height: min(560px, calc(100vh - 100px));
    overflow-y: auto;
    padding: 18px;
    border: 1px solid #765439;
    border-radius: var(--mh-radius-md, 14px);
    background: #14110e;
    color: #ead8bd;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.64);
}

.mh-a11y__panel[hidden] { display: none; }
.mh-a11y__title { margin: 0 0 4px; font-size: 1.15rem; }
.mh-a11y__hint { margin: 0 0 14px; color: #c5ad8d; font-size: 0.9rem; }
.mh-a11y fieldset { margin: 0 0 14px; padding: 0; border: 0; }
.mh-a11y legend,
.mh-a11y__label { display: block; margin-bottom: 7px; font-weight: 700; }

.mh-a11y__choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.mh-a11y__choice,
.mh-a11y__reset {
    min-height: 44px;
    padding: 7px 9px;
    border: 1px solid #62462f;
    border-radius: 7px;
    background: #201811;
    color: #ead8bd;
    font: inherit;
    cursor: pointer;
}

.mh-a11y__choice[aria-pressed="true"] {
    border: 3px double #f0c28c;
    background: #5f2a1c;
    color: #fff3df;
    font-weight: 800;
}

.mh-a11y__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.mh-a11y__switch {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 32px;
    border: 1px solid #765439;
    border-radius: 999px;
    background: #2a2119;
    cursor: pointer;
}

.mh-a11y__switch::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d7bea0;
    transition: transform 140ms ease;
}

.mh-a11y__switch[aria-pressed="true"] {
    border-width: 3px;
    background: #7a341f;
}

.mh-a11y__switch[aria-pressed="true"]::after {
    transform: translateX(20px);
    background: #fff4e4;
}

.mh-a11y__reset { width: 100%; }
.mh-embed-fallback { margin-top: 12px; }

/* User-selectable high contrast intentionally simplifies decorative surfaces. */
html.mh-a11y-contrast {
    --mh-page-bg: #000;
    --mh-surface: #090909;
    --mh-surface-soft: #111;
    --mh-surface-raised: #171717;
    --mh-component-bg: #090909;
    --mh-component-bg-soft: #111;
    --mh-component-border: #e2d2b8;
    --mh-component-text: #fff;
    --mh-component-muted: #e7d7bd;
    --mh-text: #fff;
    --mh-muted: #e7d7bd;
    --mh-border: #d9c6a8;
    --mh-border-strong: #fff;
    --mh-link: #ffd08a;
}

html.mh-a11y-contrast body { background: #000; color: #fff; }

html.mh-a11y-contrast .mh-site-header,
html.mh-a11y-contrast .mh-site-footer,
html.mh-a11y-contrast .mh-card,
html.mh-a11y-contrast .mh-columns--cards > *,
html.mh-a11y-contrast .mh-callout,
html.mh-a11y-contrast .mh-details,
html.mh-a11y-contrast .mh-sidebar > section {
    background: #080808;
    color: #fff;
    border-color: #e4d1b1;
}

html.mh-a11y-contrast .mh-hero {
    background: #d9ba91;
    color: #160d07;
    border-color: #fff1d6;
}

html.mh-a11y-contrast .mh-hero__title,
html.mh-a11y-contrast .mh-hero__text,
html.mh-a11y-contrast .mh-hero .mh-eyebrow { color: #160d07; }

html.mh-a11y-contrast a {
    color: #ffd08a;
    text-decoration-thickness: 2px;
}

html.mh-a11y-contrast a:visited { color: #f3c7ff; }
html.mh-a11y-contrast .mh-hero a,
html.mh-a11y-contrast .mh-button--primary { color: #fff; }

/* Respect the user's operating-system motion preference. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Windows High Contrast / forced-color mode. Let the browser choose system
   colors and preserve outlines/borders rather than fighting the OS palette. */
@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline-color: Highlight;
    }

    .mh-card,
    .mh-callout,
    .mh-details,
    .mh-hero,
    .mh-site-header,
    .mh-site-footer,
    .mh-a11y__panel,
    .mh-a11y__toggle,
    .mh-a11y__choice,
    .mh-a11y__reset,
    .mh-a11y__switch {
        forced-color-adjust: auto;
        border-color: CanvasText;
        box-shadow: none;
    }

    .mh-a11y__choice[aria-pressed="true"],
    .mh-a11y__switch[aria-pressed="true"],
    .mh-nav a[aria-current="page"] {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

@media (max-width: 700px) {
    .mh-footer-links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .mh-a11y { right: 12px; bottom: 12px; }
    .mh-a11y__toggle { width: 44px; height: 44px; }
    .mh-a11y__panel {
        position: fixed;
        right: 12px;
        bottom: 66px;
        left: 12px;
        width: auto;
    }
    .mh-footer-links { grid-template-columns: 1fr; }
}

@media print {
    .mh-a11y,
    .mh-skip-link,
    .mh-nav-toggle { display: none !important; }
}