/*
 * DumontJanks child theme — custom.css
 * Loads after Quark 2's theme.css (see quark2-dumontjanks.yaml stream config),
 * so overrides here win without !important.
 */

/* ---------- Typography: Instrument Serif (display) + Inter (body) — both OFL-1.1, self-hosted ---------- */
@font-face {
    font-family: 'Instrument Serif';
    src: url('theme://fonts/InstrumentSerif-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('theme://fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('theme://fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('theme://fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --dj-display-font: 'Instrument Serif', Georgia, serif;
    --dj-body-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body, p, li, dl, .navbar, button, input, textarea, select {
    font-family: var(--dj-body-font);
}
h1, h2, h3, h4, h5, h6, .display, .h-display {
    font-family: var(--dj-display-font);
    font-weight: 400;
}
/* Instrument Serif is a display-only face — never let it render below ~28px (brief §4.3) */
h4, h5, h6 { font-family: var(--dj-body-font); font-weight: 600; }

/* ---------- Category filter nav (projects index) ---------- */
/* Single-line, horizontally scrolling chip strip: keeps all 7 categories
   glanceable without pushing page content down on narrow viewports. Pure
   CSS/HTML — no JS needed for the scroll itself or for the arrows, which are
   just links to fragment ids at the start/end of the list (same "must work
   without JavaScript" requirement as the filter links themselves). */
.dj-filters-wrap { display: flex; align-items: flex-start; gap: 0.25rem; margin: 1.5rem 0 0; }
.dj-filters-arrow {
    flex: none;
    width: 1.75rem;
    height: 44px;
    background: none;
    color: var(--q2-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    text-decoration: none;
}
.dj-filters-arrow:hover,
.dj-filters-arrow:focus-visible { color: var(--q2-text); }
.dj-filters-arrow i { position: relative; top: 8px; }
.dj-filters {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    /* Subtle edge fade as a "there's more" cue — a coincidental exact fit
       just softens the last pill's edge slightly rather than hiding content,
       so this is safe even when nothing actually overflows. */
    mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
    .dj-filters { scroll-behavior: auto; }
}
.dj-filters ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    padding: 0 0 0.5rem;
    margin: 0;
    width: max-content;
    scroll-snap-type: x proximity;
}
.dj-filters a {
    display: inline-block;
    flex: none;
    padding: 0.5rem 1rem;
    min-height: 44px;
    line-height: 1.6rem;
    white-space: nowrap;
    border: 1px solid var(--q2-border-strong);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--q2-text);
    text-decoration: none;
    scroll-snap-align: start;
}
.dj-filters a:hover,
.dj-filters a:focus-visible,
.dj-filters a.is-active { background: var(--q2-text); color: var(--q2-bg); border-color: var(--q2-text); }

/* ---------- Project/people index cards: whole tile clickable ----------
   Only the title carries a real link (the image is now a plain <div>, not
   its own <a> — two links to the same page is a confusing double tab-stop
   for keyboard/screen-reader users). Its ::after is stretched to cover the
   whole card via the positioned .card ancestor, so a click anywhere on the
   tile activates it, while the visible underline stays on the title text. */
.card { position: relative; }
.card-title :is(h1, h2, h3, h4, h5, h6) { position: static; } /* Blades sets headings to relative by default, which would catch the ::after below instead of .card */
.card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* ---------- Footer ---------- */
.dj-footer { text-align: center; }
.dj-footer-line { font-size: 0.85rem; color: var(--q2-text-muted); margin-bottom: 0.35rem; }
.dj-footer-name,
#footer a.dj-footer-name { font-weight: 400; color: var(--q2-text); text-decoration: none; }
a.dj-footer-name:hover { text-decoration: underline; }
.dj-footer-copyright { font-size: 0.75rem; color: var(--q2-text-muted); margin: 0; }

/* ---------- Logo: preserve the brand's exact gray, don't let Quark 2 recolor it to text-strong ---------- */
.navbar-brand svg,
.navbar-brand svg * { fill: #767676; }

/* ---------- Page-title self-links (blog/title.html.twig wraps h1 in <a>) should read as
   plain headings, not accent-colored links ---------- */
.content-title h1 a,
.content-title h2 a { color: var(--q2-text); text-decoration: none; }

/* ---------- Editorial gallery for project pages ---------- */
.dj-gallery { margin: 2.5rem 0; }
.dj-gallery-full { margin: 0 0 1rem 0; }
.dj-gallery-full img { width: 100%; height: auto; display: block; background: #fff; }
.dj-gallery-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.dj-gallery-pair figure { margin: 0; }
.dj-gallery-pair img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
@media (max-width: 640px) {
    .dj-gallery-pair { grid-template-columns: 1fr; }
}

.dj-disclaimer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--q2-border-ring); font-size: 0.8rem; color: var(--q2-text-muted); font-style: italic; }

/* ---------- Mugshot-style person page ---------- */
.dj-person { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; margin: 2rem 0; }
.dj-person img { width: 100%; height: auto; display: block; background: #fff; border-radius: 50%; }
@media (max-width: 640px) {
    .dj-person { grid-template-columns: 1fr; }
    .dj-person img { max-width: 200px; }
}

/* ---------- People index: row list with circular avatars ---------- */
/* A landscape "hero card" crop (like the project cards) distorts portrait
   headshots badly, so people get their own listing: a simple row per person,
   round avatar (any headshot proportions crop sensibly to a circle) + name +
   excerpt — the same visual language as the mugshot-style detail page. */
.dj-people-list { margin: 2.5rem auto 0; padding: 0; max-width: 640px; }
.dj-people-list li { list-style: none; border-top: 1px solid var(--q2-border-ring); }
.dj-people-list li:last-child { border-bottom: 1px solid var(--q2-border-ring); }
.dj-people-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0.5rem;
    text-decoration: none;
    color: inherit;
}
.dj-people-row:hover { background: var(--q2-bg-elev); }
.dj-people-row picture {
    flex: none;
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.dj-people-row img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dj-people-row-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.dj-people-row-name { font-family: var(--dj-display-font); font-size: 1.375rem; color: var(--q2-text); }
.dj-people-row-excerpt {
    font-size: 0.9rem;
    color: var(--q2-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---------- Careers page: drop the generic boxed card, same as About/Contact ---------- */
body.dj-careers #body-wrapper > .container > .content-item {
    max-width: 720px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: clamp(1.75rem, 4vw, 3rem) 0;
}

/* ---------- Accessible homepage carousel ---------- */
.dj-carousel { position: relative; width: 100%; height: min(85vh, 800px); min-height: 420px; overflow: hidden; background: #000; }
.dj-carousel-track { position: relative; width: 100%; height: 100%; }
.dj-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}
.dj-slide.is-active { opacity: 1; pointer-events: auto; }
.dj-slide > a { position: absolute; inset: 0; display: block; }
.dj-slide > a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.dj-slide img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.dj-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 999px; border: none; background: rgba(0,0,0,0.45); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dj-carousel-btn:hover, .dj-carousel-btn:focus-visible { background: rgba(0,0,0,0.7); }
.dj-carousel-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dj-carousel-prev { left: 1.25rem; }
.dj-carousel-next { right: 1.25rem; }
.dj-carousel-playpause { top: auto; bottom: 1.5rem; right: 1.25rem; transform: none; width: 2.5rem; height: 2.5rem; font-size: 0.95rem; }
.dj-carousel-dots { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.6rem; }
.dj-carousel-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.25); padding: 0; cursor: pointer; }
.dj-carousel-dot.is-active { background: #fff; }
.dj-carousel-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
    .dj-slide { transition: none; }
}

/* ---------- About page: editorial redesign ---------- */
/* Drop the generic boxed "card" treatment every default-template page gets —
   About reads better sitting directly on the page, full editorial width. */
body.dj-about #body-wrapper > .container > .content-item {
    max-width: 720px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: clamp(1.75rem, 4vw, 3rem) 0;
}

/* Mission statement as a large-scale opening line — not a blockquote, just
   given real typographic weight so it reads as a statement, not a paragraph. */
.dj-mission-statement {
    font-family: var(--dj-display-font);
    font-size: clamp(1.5rem, 2.2vw + 1rem, 2.25rem);
    line-height: 1.3;
    font-weight: 400;
    color: var(--q2-text);
    margin: 1.5rem 0 3rem;
    max-width: 34ch;
}

body.dj-about .content-item p:not(.dj-mission-statement) {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

/* ---------- Contact page: editorial redesign ---------- */
body.dj-contact #body-wrapper > .container > .content-item {
    max-width: 1040px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: clamp(1.75rem, 4vw, 3rem) 0;
}
.dj-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
@media (max-width: 800px) {
    .dj-contact-grid { grid-template-columns: 1fr; }
}
.dj-contact-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 1.15rem;
    margin: 0 0 1.25rem;
}
.dj-contact-item i {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--q2-text);
    color: var(--q2-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.dj-contact-item a { color: var(--q2-text); text-decoration: none; border-bottom: 1px solid var(--q2-border-strong); }
.dj-contact-item a:hover { border-color: var(--q2-text); }
.dj-contact-note {
    font-size: 0.85rem;
    color: var(--q2-text-muted);
    font-style: italic;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--q2-border-ring);
}
.dj-contact-form .notices { margin-bottom: 1.5rem; }

/* ---------- Site search ---------- */
.dj-search-toggle i { width: 18px; height: 18px; font-size: 16px; line-height: 1; display: block; }

.dj-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(19, 19, 22, 0.4);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10vh 1.25rem 1.25rem;
    overflow-y: auto;
}
:root[data-theme="dark"] .dj-search-overlay { background: rgba(0, 0, 0, 0.6); }

.dj-search-panel {
    width: 100%;
    max-width: 640px;
    background: var(--q2-bg-elev);
    border-radius: var(--q2-radius-lg);
    box-shadow: var(--q2-shadow-dropdown, 0 20px 60px -15px rgba(0,0,0,0.35));
    overflow: hidden;
}

.dj-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 1.375rem;
    border-bottom: 1px solid var(--q2-border-ring);
    color: var(--q2-text-muted);
}
.dj-search-input-wrap:focus-within { color: var(--q2-text); }
.dj-search-input {
    flex: 1;
    border: 0;
    outline: none;
    background: none;
    font-size: 1.0625rem;
    font-family: var(--dj-body-font, inherit);
    color: var(--q2-text);
}
.dj-search-input::placeholder { color: var(--q2-text-muted); }
.dj-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: none;
    color: var(--q2-text-muted);
    cursor: pointer;
    flex: none;
}
.dj-search-close:hover { background: var(--q2-bg-muted); color: var(--q2-text); }
.dj-search-close:focus-visible { outline: 2px solid var(--q2-focus-ring, currentColor); outline-offset: 2px; }

.dj-search-results {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    max-height: 60vh;
    overflow-y: auto;
}
.dj-search-results:empty { padding: 0; }
.dj-search-results a {
    display: block;
    padding: 0.7rem 0.875rem;
    border-radius: var(--q2-radius-md);
    text-decoration: none;
    color: inherit;
}
.dj-search-results a:hover,
.dj-search-results a.is-active { background: var(--q2-bg-muted); }
.dj-search-result-title {
    display: block;
    font-family: var(--dj-display-font);
    font-size: 1.0625rem;
    color: var(--q2-text-strong);
}
.dj-search-result-meta {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--q2-text-muted);
    margin-top: 0.15rem;
}
.dj-search-result-excerpt {
    display: block;
    font-size: 0.875rem;
    color: var(--q2-text-muted);
    margin-top: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dj-search-empty {
    padding: 1.5rem 1.375rem 1.75rem;
    color: var(--q2-text-muted);
    font-size: 0.95rem;
    margin: 0;
}
body.dj-search-open { overflow: hidden; }