/* === Self-hosted fonts ===
   Both families used to load from Google Fonts' CDN. Self-hosted instead so
   the site's typography doesn't depend on fonts.googleapis.com/fonts.gstatic.com
   being reachable -- confirmed 2026-09-23 that Jacob's network/browser setup was
   silently failing that CDN request and falling back to Arial, for both
   Atkinson Hyperlegible (body text) and Archivo Black (page titles). Files are
   the plain Latin subset only (no Latin-Extended) to keep the vendored set
   small, matching this site's English-only content. */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/atkinson-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('vendor/fonts/atkinson-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/atkinson-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('vendor/fonts/atkinson-bolditalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo Black';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/archivoblack-regular.woff2') format('woff2');
}

/* === Color Variables === */
:root {
    /* Brand colors, from BATP Colors.txt (Nicole's cover art palette) */
    --color-navy: #13233A;
    --color-cream: #FFF6E8;
    --color-gold: #F4B942;

    /* UI roles derived from the brand colors */
    --color-primary: var(--color-navy);
    --color-primary-hover: #1C3354;
    --color-secondary: #325D9A;
    /* Deep gold: same hue/saturation as --color-gold, darkened so it still
       passes 4.5:1 text contrast on light backgrounds -- the bright brand gold
       only hits its full contrast (8.93:1, per BATP Colors.txt) against navy. */
    --color-accent: #946300;
    --color-highlight-bg: #FDF4E2;

    --color-bg-light: var(--color-cream);
    --color-text-dark: #1F1F1F;
    --color-neutral-mid: #595959;

    /* Semantic Colors */
    --color-success-bg: #f0fdf4;
    --color-success-border: #16a34a;
    --color-success-text: #166534;

    --color-warning-bg: #fefce8;
    --color-warning-border: #ca8a04;
    --color-warning-text: #854d0e;

    --color-critical-bg: #fef2f2;
    --color-critical-border: #dc2626;
    --color-critical-text: #991b1b;
}

/* === Box Model Normalization & Global Reset === */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-size: 16px;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 400;
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    margin: 0;
}

/* Respect reduced-motion preference everywhere, including the smooth scroll above */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *:before, *:after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Form Controls Typography Inheritance */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* === Accessibility Enhancements === */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

.skip-link:focus {
    position: absolute;
    width: auto;
    height: auto;
    padding: 1rem 1.5rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    top: 1rem;
    left: 1rem;
    background-color: var(--color-primary);
    color: var(--color-cream);
    font-weight: 700;
    border-radius: 0.5rem;
    z-index: 50;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

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

/* === Typography Scale === */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    color: var(--color-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    font-weight: 700;
    text-align: left;
}

/* Archivo Black (Nicole's cover art font) is a single-weight display face --
   reserved for the page title (h1) and the site name lockup, matching how the
   cover art itself uses it for the "BEYOND ALT TEXT" wordmark, not for every
   heading level. h2-h6 stay in Atkinson Hyperlegible: they appear more often,
   in smaller/denser contexts (episode cards, section headings), where a
   single-weight ultra-bold face would fight legibility rather than support it.
   font-weight is reset to 400 here since Archivo Black has no bold variant of
   its own -- requesting 700 on it would trigger the browser's synthetic bold. */
h1 {
    font-size: 2.5rem;
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
}
h2 { font-size: 2.125rem; }
h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.25; }
h4 { font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
h5 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
h6 { font-size: 1rem; line-height: 1.3; }

.display-name {
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
    text-align: center;
    color: var(--color-primary);
}

.tagline {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-neutral-mid);
    margin: 0.25rem 0 0;
}

.text-lead {
    font-size: 1.25rem;
    line-height: 1.6;
}

.text-body {
    font-size: 1.125rem;
    line-height: 1.6;
}

.text-supporting {
    font-size: 1rem;
    line-height: 1.5;
}

.text-metadata {
    font-size: 0.875rem;
    line-height: 1.4;
}

blockquote {
    font-style: italic;
    color: var(--color-neutral-mid);
    border-left: 4px solid var(--color-secondary);
    padding-left: 1rem;
    margin-left: 0;
}

/* === Layout / Container System === */
.container {
    width: 100%;
    max-width: 70ch;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-wide {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* === Component Styles === */

/* Buttons */
.cta-button {
    background-color: var(--color-primary);
    color: var(--color-cream);
    font-weight: 700;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
    text-decoration: none;
    display: inline-block;
}

.cta-button:hover {
    background-color: var(--color-primary-hover);
}

.cta-button-light {
    background-color: white;
    color: var(--color-primary);
    border: 2px solid white;
}

.cta-button-light:hover {
    background-color: var(--color-bg-light);
    color: var(--color-primary);
    border-color: var(--color-bg-light);
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* Universal Focus States */
.cta-button:focus-visible,
.link-default:focus-visible,
.link-cta:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.bg-primary .link-social:focus-visible,
.bg-primary .cta-button:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 3px;
}

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Give Able Player's own controls a visible, on-brand focus ring too */
.able-controller button:focus-visible,
.able-controller [tabindex]:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Links */
.link-default,
.link-cta {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    transition: color 0.2s;
}

.link-cta:hover {
    color: var(--color-accent);
}

.link-social {
    color: var(--color-cream);
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.2s;
}

.link-social:hover {
    color: var(--color-gold);
}

/* Cards */
.content-card {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.h-full {
    height: 100%;
}

/* Profile Image (host photos on About page) */
.profile-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--color-secondary);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Site logo (cover art thumbnail in header) */
.site-logo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Contact / form controls */
.contact-form input,
.contact-form textarea {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    border: 2px solid var(--color-neutral-mid);
    border-radius: 0.5rem;
    padding: 0.75rem;
    width: 100%;
    transition: border-color 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.contact-form label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Footer */
.footer-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-link {
    color: var(--color-cream);
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}

.footer-social-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}
.footer-social-list li { list-style: none !important; padding: 0 !important; margin: 0 !important; }

/* Lists */
.standard-list {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.standard-list li {
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.standard-list li::marker {
    color: var(--color-accent);
    font-size: 1.15em;
}

/* Section Divider */
.section-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(50, 93, 154, 0), rgba(50, 93, 154, 0.4) 20%, rgba(50, 93, 154, 0.4) 80%, rgba(50, 93, 154, 0));
    margin: 4rem auto;
    max-width: 48rem;
}

/* Callout box (used for "no episodes yet" / notice messaging) */
.callout-box {
    background-color: var(--color-highlight-bg);
    border-left: 4px solid var(--color-primary);
    padding: 1.25rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 1.5rem 0;
}

.callout-box p {
    margin: 0;
}

.calendar-links {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

.calendar-links li {
    margin: 0.5rem 0;
}

.calendar-links a:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Native <details>/<summary> disclosure (used for optional show-notes/links sections) */
.disclosure {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0;
    margin-bottom: 1.5rem;
    background-color: white;
}

.disclosure summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-primary);
    padding: 1rem 1.5rem;
    list-style: none;
}

.disclosure summary::-webkit-details-marker {
    display: none;
}

.disclosure summary::before {
    content: "▸ ";
    display: inline-block;
}

.disclosure[open] summary::before {
    content: "▾ ";
}

.disclosure summary:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
}

.disclosure-content {
    padding: 0 1.5rem 1.5rem;
}

/* Tables */
.accessible-table-container {
    overflow-x: auto;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.accessible-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

.accessible-table th,
.accessible-table td {
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    text-align: left;
}

.accessible-table th {
    background-color: #f3f4f6;
    font-weight: 700;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.accessible-table tr:nth-child(even) {
    background-color: #fafafa;
}

/* === Podcast-specific components === */

/* Episode card (used on Home "latest episode" and the Episodes archive) */
.episode-card {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.episode-card h2,
.episode-card h3 {
    margin-top: 0;
}

.episode-meta {
    color: var(--color-neutral-mid);
    font-size: 0.95rem;
    margin: 0 0 1rem;
}

.episode-meta .separator {
    margin: 0 0.5em;
}

/* Able Player wrapper: constrain width, keep spacing consistent with the rest of the page */
.player-wrapper {
    max-width: 700px;
    margin: 1.5rem 0;
}

/* Transcript: published as real text, styled for sustained reading */
.transcript {
    max-width: 70ch;
}

.transcript p {
    margin: 0 0 1.25rem;
}

.transcript .speaker {
    color: var(--color-primary);
    font-weight: 700;
}

/* Subscribe / Where to Listen links */
.subscribe-links {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.subscribe-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--color-text-dark);
    font-weight: 700;
    transition: border-color 0.2s, background-color 0.2s;
}

.subscribe-link:hover {
    border-color: var(--color-primary);
    background-color: var(--color-highlight-bg);
}

.subscribe-link:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* === Base Utilities === */
.mx-auto { margin-left: auto; margin-right: auto; }
.m-0 { margin: 0; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-auto { margin-top: auto; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-16 { margin-bottom: 4rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-0 { padding-left: 0; padding-right: 0; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.pl-5 { padding-left: 1.25rem; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.grow { flex-grow: 1; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.space-y-2>*+* { margin-top: 0.5rem; }
.space-y-4>*+* { margin-top: 1rem; }
.space-y-6>*+* { margin-top: 1.5rem; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-5xl { font-size: 3rem; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }

.text-neutral-mid { color: var(--color-neutral-mid); }
.text-white { color: white; }
.text-cream { color: var(--color-cream); }
.bg-primary { background-color: var(--color-primary); }
.bg-bg-light { background-color: var(--color-bg-light); }
.bg-accent { background-color: var(--color-accent) !important; }

.hidden { display: none !important; }
.inline-block { display: inline-block; }
.w-full { width: 100%; }

.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-6xl { max-width: 72rem; }
.rounded-xl { border-radius: 0.75rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

.list-none { list-style-type: none !important; padding: 0 !important; margin: 0 !important; }
.list-disc { list-style-type: disc; }

.h3-style { font-size: 1.75rem; font-weight: 600; line-height: 1.25; }

/* ========================================== */
/* === RESPONSIVE STYLES (Cascade-Safe) === */
/* ========================================== */

@media (max-width: 900px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3, .h3-style { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:text-left {
        text-align: left;
    }

    .md\:justify-start {
        justify-content: flex-start;
    }

    .md\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .md\:text-xl {
        font-size: 1.25rem;
    }

    .md\:w-auto {
        width: auto;
    }

    .display-name {
        text-align: left;
        font-size: 3rem;
    }

    .subscribe-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}