/*
 * Deafened — main stylesheet
 * Black + neon green. System fonts. Mobile-first.
 *
 * Above-the-fold rules are inlined via deafened_inline_critical_css() in
 * functions.php — keep that subset and this file in sync if you change
 * core layout/typography tokens.
 */

:root {
    /* Warm dark — feels like ink on paper, not a computer screen. */
    --bg: #0e0d0b;
    --bg-alt: #16140f;
    --bg-card: #131210;
    --fg: #ece8df;
    --fg-muted: #9a948a;
    --fg-dim: #6a655c;

    /* Lime — still green, but muted (HSL 81 75 56). Reads as designed,
       not as a screensaver. */
    --accent: #b6e84f;
    --accent-dim: #92c130;
    --accent-soft: #6b8a26;

    --border: #25221c;
    --border-strong: #3a342b;

    --max: 1140px;
    --max-prose: 720px;
    --radius: 6px;
    --radius-lg: 10px;
    --gap: clamp(1rem, 2vw, 1.5rem);

    /* Display type stack — system serif (New York on macOS, Georgia on
       Windows, Iowan Old Style fallback). Editorial without loading
       webfonts. */
    --font-display: ui-serif, Georgia, "Iowan Old Style", "Source Serif Pro", "Apple Garamond", serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
iframe { border: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 1.5em 0 0.65em;
    color: var(--fg);
    font-weight: 700;
}
h1 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
    font-size: clamp(1.85rem, 2.2vw + 1rem, 2.65rem);
    margin-top: 0;
}
h2 {
    font-size: clamp(1.35rem, 1.2vw + 0.9rem, 1.65rem);
    letter-spacing: -0.018em;
}
h3 { font-size: 1.15rem; }
p, ul, ol, blockquote, figure, pre { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.5em; }
li { margin-bottom: 0.3em; }
blockquote {
    border-left: 3px solid var(--accent);
    margin: 1.5em 0;
    padding: 0.25em 0 0.25em 1em;
    color: var(--fg-muted);
    font-style: italic;
}
code, pre, kbd, samp {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
}
code { background: var(--bg-alt); padding: 0.15em 0.4em; border-radius: 4px; }
pre {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 1em;
    border-radius: var(--radius);
    overflow-x: auto;
}

a {
    color: var(--accent);
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color .12s ease;
}
a:hover { text-decoration: underline; }
a:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
    border-radius: 1px;
}

::selection { background: var(--accent); color: #0e0d0b; }

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

/* ---------- Skip link ---------- */
.skip-link {
    position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
    position: fixed; left: 1rem; top: 1rem; width: auto; height: auto;
    padding: 0.5rem 1rem; background: var(--accent); color: #000; z-index: 9999;
    border-radius: 4px; font-weight: 600;
}

/* ---------- Header ---------- */
.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(10, 10, 10, 0.92);
}
.site-header__inner {
    max-width: var(--max); margin: 0 auto;
    padding: 1rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-branding a { color: var(--fg); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
.site-branding a:hover { color: var(--accent); text-decoration: none; }
.site-branding img, .custom-logo, .custom-logo-link img {
    max-height: 40px;
    width: auto;
}

.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; }
.site-nav a {
    color: var(--fg);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.site-nav .current-menu-item > a { color: var(--accent); border-color: var(--accent); }

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--fg);
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 760px) {
    .nav-toggle { display: inline-flex; }
    .site-nav ul {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--bg);
        flex-direction: column;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border);
        gap: 0.5rem;
    }
    .site-nav[data-open="true"] ul { display: flex; }
    .site-nav ul a {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border);
    }
    .site-header { position: relative; }
}

/* ---------- Layout ---------- */
main {
    display: block;
    max-width: var(--max);
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

/* ---------- Breadcrumbs ---------- */
.asl-breadcrumbs, .deafened-crumbs {
    margin: 0 0 1.5em;
    font-size: 0.88rem;
    color: var(--fg-muted);
}
.asl-breadcrumbs a, .deafened-crumbs a { color: var(--fg-muted); }
.asl-breadcrumbs a:hover, .deafened-crumbs a:hover { color: var(--accent); }
.asl-breadcrumbs span[aria-current], .deafened-crumbs span[aria-current] { color: var(--fg); }

/* ---------- Hero ----------
 * Editorial, left-aligned. No glows. Serif display heading. The accent
 * tagline sits as a small kicker above the title rather than below — more
 * editorial than the Apple-style centered subtitle.
 */
.hero {
    padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--border);
    margin-bottom: 3rem;
}
.hero__inner { max-width: 820px; }
.hero__accent {
    display: inline-block;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.hero__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 3.5vw + 1rem, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 0 1.2rem;
}
.hero__title-line { display: block; }
.hero__lede {
    color: var(--fg-muted);
    font-size: 1.08rem;
    max-width: 580px;
    margin: 0 0 1.75rem;
    line-height: 1.55;
}
.hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 0.7em 1.35em;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.3;
}
.btn--primary {
    background: var(--accent);
    color: #0e0d0b;
    border-color: var(--accent);
}
/* Invert on hover — clearly visible without resorting to glow. */
.btn--primary:hover, .btn--primary:focus-visible {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}
.btn--ghost {
    background: transparent;
    color: var(--fg);
    border-color: var(--border-strong);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
    background: var(--accent);
    color: #0e0d0b;
    border-color: var(--accent);
    text-decoration: none;
}

/* ---------- Section heads ----------
 * Editorial pattern: small uppercase kicker above the title (set via the
 * sibling .section-head__kicker, optional), title in display serif. Type
 * weight does the work — no decorative accent bar.
 */
.section-head {
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.section-head__kicker {
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0;
}
.section-head__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    letter-spacing: -0.025em;
    margin: 0;
}
.section-head__lede {
    color: var(--fg-muted);
    margin: 0.35rem 0 0;
    max-width: 580px;
    font-size: 1rem;
}

/* ---------- Language picker ----------
 * Inline-list pattern rather than a grid of identical boxes. Each language
 * is a row with the code as a small index marker and the name as the link.
 */
.languages { margin: 0 0 4.5rem; }
.lang-grid {
    list-style: none;
    margin: 0; padding: 0;
    border-top: 1px solid var(--border);
}
.lang-card { border-bottom: 1px solid var(--border); }
.lang-card a {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.1rem 0.25rem;
    color: var(--fg);
    transition: color .12s ease;
}
.lang-card a:hover, .lang-card a:focus-visible {
    color: var(--accent);
    text-decoration: none;
}
.lang-card a:hover .lang-card__arrow { transform: translateX(4px); }
.lang-card__code {
    color: var(--fg-dim);
    font-size: 0.85rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}
.lang-card__name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.lang-card__arrow {
    color: var(--fg-dim);
    font-size: 1rem;
    transition: transform .12s ease;
}
.lang-card a:hover .lang-card__arrow { color: var(--accent); }

/* ---------- Post grid ----------
 * Asymmetric: first card spans the full row with a side-by-side image +
 * content layout (a magazine-style feature). The rest fall into a 3-column
 * sub-grid below.
 */
.recent { margin: 0 0 4.5rem; }
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.75rem;
}

/* Cards (default — used for items 2..N) */
.card {
    grid-column: span 1;
    background: transparent;
    border: 0;
    overflow: visible;
}
.card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-alt);
    border-radius: var(--radius);
    margin-bottom: 0.85rem;
}
.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.card:hover .card__media img { transform: scale(1.02); }
.card__body { padding: 0; }
.card__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.018em;
    margin: 0 0 0.45rem;
}
.card__title a { color: var(--fg); }
.card__title a:hover { color: var(--accent); text-decoration: none; }
.card__excerpt {
    color: var(--fg-muted);
    font-size: 0.92rem;
    margin: 0 0 0.6rem;
    line-height: 1.55;
}
.card__meta { color: var(--fg-dim); font-size: 0.78rem; margin: 0; letter-spacing: 0.01em; }

/* Featured (first card in a strip) — full width, side-by-side */
.post-grid > .card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
}
.post-grid > .card:first-child .card__media { aspect-ratio: 4 / 3; margin: 0; }
.post-grid > .card:first-child .card__title {
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    line-height: 1.1;
    margin-bottom: 0.75rem;
}
.post-grid > .card:first-child .card__excerpt {
    font-size: 1rem;
    margin-bottom: 0.85rem;
}

@media (max-width: 760px) {
    .post-grid { grid-template-columns: repeat(2, 1fr); }
    .post-grid > .card:first-child {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}
@media (max-width: 480px) {
    .post-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Single post / page ---------- */
.post-single__header, .page-single__header { margin-bottom: 1.75rem; max-width: var(--max-prose); }
.post-single__title, .page-single__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 2.5vw + 1rem, 2.9rem);
    margin: 0 0 0.85rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.post-meta {
    color: var(--fg-muted);
    font-size: 0.88rem;
    margin: 0;
    letter-spacing: 0.01em;
}
.post-meta a { color: var(--fg-muted); }
.post-meta a:hover { color: var(--accent); }

.post-single__media, .page-single__media {
    margin: 0 0 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.post-single__content, .page-single__content {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: var(--max-prose);
}
.post-single__content p, .page-single__content p { margin-bottom: 1.35em; }
.post-single__content h2, .page-single__content h2 {
    font-family: var(--font-display);
    font-weight: 500;
    margin-top: 2.2em;
    margin-bottom: 0.65em;
}
.post-single__content img, .page-single__content img {
    border-radius: var(--radius);
    margin: 1.5em 0;
}
.post-single__content iframe, .page-single__content iframe {
    border-radius: var(--radius);
    margin: 1.5em 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}
.post-single__content table, .page-single__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95em;
}
.post-single__content th, .post-single__content td {
    padding: 0.6em 0.8em;
    border: 1px solid var(--border);
    text-align: left;
}
.post-single__content th { background: var(--bg-alt); font-weight: 600; }

/* ---------- Auto-injected article TOC ----------
 * Article content embeds a Table of Contents block with hardcoded inline
 * styles (background:#f8f9fa, blue links — see ARTICLE-TEMPLATE.md).
 * That clashes on the dark theme, so we re-skin it. Inline styles have
 * higher specificity than classes, so each rule needs !important.
 */
.post-single__content div[style*="background:#f8f9fa"],
.post-single__content div[style*="background: #f8f9fa"] {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--fg) !important;
    margin: 1.75em 0 !important;
    padding: 1.25em 1.5em !important;
}
.post-single__content div[style*="background:#f8f9fa"] p,
.post-single__content div[style*="background: #f8f9fa"] p {
    color: var(--fg) !important;
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin: 0 0 0.85em !important;
    color: var(--fg-muted) !important;
}
.post-single__content div[style*="background:#f8f9fa"] ul,
.post-single__content div[style*="background: #f8f9fa"] ul {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}
.post-single__content div[style*="background:#f8f9fa"] li,
.post-single__content div[style*="background: #f8f9fa"] li {
    margin: 0 !important;
    padding: 0.35em 0 !important;
    border-bottom: 1px solid var(--border) !important;
}
.post-single__content div[style*="background:#f8f9fa"] li:last-child,
.post-single__content div[style*="background: #f8f9fa"] li:last-child {
    border-bottom: 0 !important;
}
.post-single__content div[style*="background:#f8f9fa"] a,
.post-single__content div[style*="background: #f8f9fa"] a {
    color: var(--fg) !important;
    text-decoration: none !important;
    display: block !important;
    font-size: 0.95rem !important;
    transition: color .12s ease !important;
}
.post-single__content div[style*="background:#f8f9fa"] a:hover,
.post-single__content div[style*="background: #f8f9fa"] a:hover {
    color: var(--accent) !important;
}

.post-tags {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.post-tags li {
    margin: 0;
}
.post-tags a {
    display: inline-block;
    padding: 0.3em 0.75em;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--fg-muted);
}
.post-tags a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ---------- Archive ---------- */
.archive-header {
    margin: 0 0 2.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.archive-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.85rem, 2vw + 1rem, 2.5rem);
    margin: 0 0 0.5rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.archive-title em { color: var(--accent); font-style: normal; }
.archive-description { color: var(--fg-muted); max-width: var(--max-prose); }

.empty { color: var(--fg-muted); font-style: italic; }

/* ---------- Pagination ---------- */
.pagination, .nav-links {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    margin: 3rem 0 0;
    flex-wrap: wrap;
}
.page-numbers {
    display: inline-block;
    padding: 0.5rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    font-size: 0.92rem;
    text-decoration: none;
    transition: all .15s ease;
}
.page-numbers:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.page-numbers.current {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    font-weight: 600;
}

/* ---------- Search form ---------- */
.searchform {
    display: flex;
    gap: 0.5rem;
    max-width: 540px;
    margin: 1rem 0;
}
.searchform input[type="search"] {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--fg);
    padding: 0.6em 0.85em;
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.95rem;
}
.searchform input[type="search"]:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
.searchform input[type="search"]::placeholder { color: var(--fg-dim); }
.searchform button {
    background: var(--accent);
    color: #000;
    border: 0;
    padding: 0.6em 1.25em;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.searchform button:hover { background: var(--accent-dim); }

/* ---------- 404 ---------- */
.not-found {
    text-align: center;
    padding: 3rem 0;
    max-width: 540px;
    margin: 0 auto;
}
.not-found__title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 11vw, 7rem);
    color: var(--accent);
    margin: 0;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.04em;
}
.not-found__lede {
    font-size: 1.1rem;
    color: var(--fg-muted);
    margin: 1rem 0 2rem;
}
.not-found .searchform { margin: 1rem auto 2rem; }
.not-found__home a { font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
    margin-top: 4rem;
    padding: 3.5rem 0 1.75rem;
    color: var(--fg-muted);
    font-size: 0.92rem;
}
.site-footer__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    /* Brand column wider; three link columns equal */
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
.site-footer__brand .custom-logo,
.site-footer__brand img {
    max-height: 40px;
    width: auto;
    margin-bottom: 0.75rem;
}
.site-footer__name {
    color: var(--fg);
    font-weight: 700;
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}
.site-footer__name a { color: var(--fg); }
.site-footer__name a:hover { color: var(--accent); text-decoration: none; }
.site-footer__tagline {
    margin: 0;
    max-width: 320px;
    line-height: 1.55;
    color: var(--fg-muted);
}

.site-footer__col-title {
    color: var(--fg);
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0 0 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.site-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.site-footer__col li { margin: 0; }
.site-footer__col a {
    color: var(--fg-muted);
    font-size: 0.92rem;
    transition: color .12s ease;
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible {
    color: var(--accent);
    text-decoration: none;
}

.site-footer__bottom {
    grid-column: 1 / -1;
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.site-footer__bottom-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.site-footer__bottom-nav a { color: var(--fg-muted); font-size: 0.88rem; }
.site-footer__bottom-nav a:hover { color: var(--accent); }
.site-footer__copy {
    font-size: 0.85rem;
    color: var(--fg-dim);
    margin: 0;
}

@media (max-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Plugin (ASL Directory) overrides for dark theme ---------- */
.asl-related-signs {
    border-top: 1px solid var(--border);
    margin-top: 3em;
    padding-top: 2em;
}
.asl-related-heading { color: var(--fg); }
.asl-related-browse a { color: var(--accent); font-weight: 600; }
.asl-related-browse a:hover { color: var(--accent-dim); }

.asl-letter-bar { padding: 1em 0; }
.asl-letter-bar .asl-letter {
    background: var(--bg-card);
    color: var(--fg-muted);
    border: 1px solid var(--border);
}
.asl-letter-bar .asl-letter:hover,
.asl-letter-bar .asl-letter.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}

/* ---------- Gutenberg button block (wp:buttons) ----------
 * Selectors below use double-class specificity to beat both `a:hover`
 * (specificity 0,1,1) and Gutenberg's own `:where(.wp-block-button__link)`
 * defaults (specificity 0,0,0). Color is explicitly forced for every
 * interactive state so the text never matches the background.
 */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5em 0;
}
.wp-block-button { margin: 0; }

.wp-block-button .wp-block-button__link,
.wp-block-button a.wp-block-button__link {
    display: inline-block;
    background-color: var(--accent);
    color: #000;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 0.75em 1.5em;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link:link,
.wp-block-button .wp-block-button__link:visited,
.wp-block-button .wp-block-button__link:active {
    color: #0e0d0b;
    text-decoration: none;
}

/* Invert on hover — transparent background with accent text. Visually
   distinct without using a glow. */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
    background-color: transparent;
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}

/* Outline variant: any wp:button with the "is-style-outline" class */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link:link,
.wp-block-button.is-style-outline .wp-block-button__link:visited {
    background-color: transparent;
    color: var(--fg);
    border-color: var(--border-strong);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
    background-color: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- Custom forms (asl_contact_form / asl_newsletter) ---------- */
.asl-form {
    max-width: 600px;
    margin: 1.5rem 0;
}
.asl-form__row { margin: 0 0 1.1rem; }
.asl-form__row label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--fg);
    margin-bottom: 0.4rem;
}
.asl-form__req { color: var(--accent); margin-left: 0.15em; }
.asl-form input[type="text"],
.asl-form input[type="email"],
.asl-form textarea {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--fg);
    padding: 0.65em 0.85em;
    border-radius: var(--radius);
    font: inherit;
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.asl-form input:focus,
.asl-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.asl-form input::placeholder,
.asl-form textarea::placeholder { color: var(--fg-dim); }
.asl-form textarea { resize: vertical; min-height: 140px; line-height: 1.5; }

.asl-form__actions { margin-top: 1.5rem; }
.asl-form__submit {
    background: var(--accent);
    color: #0e0d0b;
    border: 0;
    padding: 0.7em 1.5em;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color .12s ease;
}
.asl-form__submit:hover:not(:disabled),
.asl-form__submit:focus-visible:not(:disabled) {
    background: var(--accent-dim);
}
.asl-form__submit:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* Newsletter inline variant */
.asl-form--newsletter {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin: 2rem 0;
}
.asl-form__heading {
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
}
.asl-form__lede {
    color: var(--fg-muted);
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}
.asl-form__inline {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.asl-form__inline input[type="email"] {
    flex: 1 1 240px;
    min-width: 0;
}
.asl-form__inline .asl-form__submit { flex: 0 0 auto; }

/* Honeypot — invisible to humans, present in the DOM for bots */
.asl-form__honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Status messages */
.asl-form__status {
    margin: 1rem 0 0;
    font-size: 0.95rem;
    min-height: 1.5em;
}
.asl-form__status.is-success {
    color: var(--accent);
    font-weight: 600;
}
.asl-form__status.is-error {
    color: #ff6b6b;
}
.asl-form__noscript {
    color: #ff9a3c;
    font-size: 0.92rem;
    margin: 0.75rem 0 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Print ---------- */
@media print {
    .site-header, .site-footer, .skip-link, .post-tags { display: none; }
    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
}