/* ==========================================================================
   accessibility42 — Branding & layout tweaks on top of Quark
   ========================================================================== */

:root {
    --a42-accent: #1c6cff;
    --a42-accent-ink: #ffffff;
    --a42-ink: #14181f;
    --a42-muted: #4a5568;
    --a42-bg: #ffffff;
    --a42-surface: #f7fafc;
    --a42-border: #e2e8f0;
}

/* Dark palette — applied when html[data-theme="dark"] is set */
[data-theme="dark"] {
    --a42-accent: #4c8dff;
    --a42-accent-ink: #0f1319;
    --a42-ink: #e6eaf0;
    --a42-muted: #a7b0be;
    --a42-bg: #0f1319;
    --a42-surface: #171c24;
    --a42-border: #2a323d;
}

/* Slightly stronger body contrast than Quark's default grey */
body {
    color: var(--a42-ink);
}

/* Hero for the simple landing page */
.a42-hero {
    text-align: center;
    padding: 6rem 1rem 4rem;
}

.a42-hero h1 {
    font-size: 2.75rem;
    line-height: 1.15;
    margin-bottom: 0.5rem;
}

.a42-hero .a42-tagline {
    font-size: 1.25rem;
    color: var(--a42-muted);
    max-width: 42rem;
    margin: 0 auto;
}

/* Generic centered lead section */
.a42-lead {
    max-width: 46rem;
    margin: 0 auto;
}

/* Language switcher — pushed to the far right, away from the dropdown menu */
.langswitcher {
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
    margin-left: auto;
    padding-left: 1.5rem;
    list-style: none;
    position: relative;
    z-index: 1;                 /* stays below the dropdown submenu */
}

.langswitcher li { display: inline; }

.langswitcher a { font-weight: 700; }

.langswitcher .active > * {
    text-decoration: underline;
}

/* Fix: Quark's dropdown submenu has no z-index, so it was covered by the
   language links. Lift it above and give it a readable, opaque panel. */
.dropmenu ul ul {
    z-index: 50;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 8px 8px;
    padding: 0.25rem 0;
    min-width: 12rem;
}
.dropmenu ul ul li a { color: var(--a42-ink) !important; }

/* Donation buttons on project pages */
.a42-support {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.a42-support .btn-donate {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
}

.a42-support .btn-coffee {
    background: #ffdd00;
    color: #0a0a0a;
}

.a42-support .btn-paypal {
    background: #003087;
    color: #ffffff;
}

.a42-support .btn-github {
    background: #14181f;
    color: #ffffff;
}

.a42-support .btn-donate:focus,
.a42-support .btn-donate:hover {
    filter: brightness(0.95);
}

/* When the mobile overlay menu is open, hide the header so its logo doesn't
   show through / duplicate the overlay's own logo. display:none (not
   visibility) so Quark's inner visibility:visible rules can't override it. */
body.mobile-nav-open #header { display: none; }

/* Overlay logo: keep it aligned with a little breathing room */
.overlay .mobile-logo { padding: 0.4rem 1rem; }

/* Project header with app icon */
.a42-project-header.has-icon {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.25rem;
    align-items: center;
}
.a42-project-icon {
    grid-row: 1 / span 2;
    width: 96px;
    height: 96px;
    border-radius: 20px;
    align-self: start;
}
.a42-project-header.has-icon h1 { margin-bottom: 0; }
.a42-project-header.has-icon .a42-tagline { grid-column: 2; margin-top: 0.35rem; }
@media (max-width: 520px) {
    .a42-project-header.has-icon { grid-template-columns: 64px 1fr; }
    .a42-project-icon { width: 64px; height: 64px; border-radius: 14px; }
}

/* Brand wordmark: "accessibility" + 42 icon chip */
.a42-logo-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    line-height: 1;
}
.a42-logo-mark {
    height: 1.5em;
    width: 1.5em;
    display: block;
    border-radius: 6px;
}

/* Footer */
#footer .a42-footer-nav ul {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
#footer .a42-footer-nav li { margin: 0; }
#footer .a42-copyright {
    color: var(--a42-muted);
    margin: 0;
}

/* Screenshot / media grid for project pages */
.a42-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.a42-media-grid figure { margin: 0; }

.a42-media-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.a42-media-grid figcaption {
    font-size: 0.9rem;
    color: var(--a42-muted);
    margin-top: 0.35rem;
}

/* Demo video (Warp-style looping clip) */
.a42-demo {
    margin: 1.5rem 0;
}
.a42-demo video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(20, 24, 31, 0.18);
    background: #14181f;
}
.a42-demo figcaption {
    font-size: 0.9rem;
    color: var(--a42-muted);
    margin-top: 0.5rem;
    text-align: center;
}

/* Placeholder shown until real screenshots are added */
.a42-media-placeholder {
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--a42-muted);
    background: #f7fafc;
}

/* "Coming soon" status badge */
.a42-coming-soon {
    display: inline-block;
    vertical-align: middle;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #ffe4a1;
    color: #7a4f00;
    white-space: nowrap;
}
h1 .a42-coming-soon { font-size: 0.9rem; }
[data-theme="dark"] .a42-coming-soon { background: #4a3712; color: #ffcf7a; }

/* Tech / license badges */
.a42-badges { margin: 0.75rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.a42-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: #edf2f7;
    color: var(--a42-ink);
}
.a42-badge--license { background: var(--a42-accent); color: #fff; }

/* Feature list */
.a42-features {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.5rem 1.5rem;
}
.a42-features li {
    position: relative;
    padding-left: 1.6rem;
}
.a42-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--a42-accent);
    font-weight: 700;
}

/* Project hub cards */
.a42-project-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.a42-project-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}
.a42-project-card h2 { margin-top: 0; }
.a42-project-card h3 { margin-top: 0; }

/* Home intro + teaser section */
.a42-home-intro { margin-bottom: 2.5rem; }
.a42-teasers-heading { text-align: center; margin-top: 1rem; }
.a42-teasers {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 60rem;
    margin: 1.5rem auto 0;
}
.a42-teasers .a42-project-card { display: flex; flex-direction: column; }
.a42-teasers .a42-more { font-weight: 700; margin-top: auto; }

/* ==========================================================================
   Lecture / slide-set grid
   ========================================================================== */
.a42-lecture-grid {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}
.a42-lecture-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--a42-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--a42-surface);
}
.a42-lecture-thumb {
    display: block;
    background: #ffffff;
    border-bottom: 1px solid var(--a42-border);
}
.a42-lecture-thumb img { display: block; width: 100%; height: auto; }
.a42-lecture-meta {
    padding: 0.85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}
.a42-lecture-meta h3 { font-size: 1rem; margin: 0; line-height: 1.3; }
.a42-lecture-actions {
    margin: auto 0 0;
    display: flex;
    gap: 1.25rem;
    font-weight: 700;
    font-size: 0.9rem;
}
.a42-lecture-actions .a42-dl::before { content: "↓ "; }

/* ==========================================================================
   Theme toggle button
   ========================================================================== */
.a42-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    margin-left: 0.75rem;
    border: 1px solid var(--a42-border);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.a42-theme-toggle svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.a42-theme-toggle .icon-sun { display: none; }
.a42-theme-toggle .icon-moon { display: inline-block; }
[data-theme="dark"] .a42-theme-toggle .icon-sun { display: inline-block; }
[data-theme="dark"] .a42-theme-toggle .icon-moon { display: none; }

/* Toggle inside the mobile overlay menu */
.overlay .a42-theme-toggle { margin: 1rem auto 0; }

/* ==========================================================================
   Dark mode — override Quark's light surfaces
   ========================================================================== */
[data-theme="dark"] body { background: var(--a42-bg); color: var(--a42-ink); }

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 { color: var(--a42-ink); }

[data-theme="dark"] a { color: var(--a42-accent); }

/* Header (transparent, sits over the dark body) */
[data-theme="dark"] #header {
    background: var(--a42-bg) !important;
    color: var(--a42-ink);
    border-bottom-color: var(--a42-border);
}
[data-theme="dark"] #header a,
[data-theme="dark"] .dropmenu ul li a,
[data-theme="dark"] .langswitcher a { color: var(--a42-ink) !important; }
[data-theme="dark"] .a42-logo-text { color: var(--a42-ink); }

/* Dropdown submenu panel */
[data-theme="dark"] .dropmenu ul ul {
    background: var(--a42-surface);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .dropmenu ul ul li a { color: var(--a42-ink) !important; }
[data-theme="dark"] .dropmenu ul li a:hover,
[data-theme="dark"] .dropmenu ul li a:focus { color: var(--a42-accent) !important; }

/* Footer */
[data-theme="dark"] #footer,
[data-theme="dark"] .bg-gray {
    background: var(--a42-surface) !important;
    color: var(--a42-ink);
}
[data-theme="dark"] #footer a { color: var(--a42-accent); }

/* Cards, badges, media, placeholders */
[data-theme="dark"] .a42-project-card { border-color: var(--a42-border); background: var(--a42-surface); }
[data-theme="dark"] .a42-badge { background: #232b36; color: var(--a42-ink); }
[data-theme="dark"] .a42-media-grid img,
[data-theme="dark"] .a42-demo video { border-color: var(--a42-border); }
[data-theme="dark"] .a42-media-placeholder {
    background: var(--a42-surface);
    border-color: var(--a42-border);
    color: var(--a42-muted);
}

/* Mobile overlay background */
[data-theme="dark"] .overlay { background: rgba(15, 19, 25, 0.97); }