/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* ============================================================
   The Bob Godfrey Collection — shop styles
   Neutral colours so it reads well in both light and dark mode.
   ============================================================ */
.shop-section-title {
    margin: 2.4rem 0 1.2rem;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
}

/* Responsive product grid */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.4rem;
    margin: 0 0 2.5rem;
}

.product-card {
    display: flex; flex-direction: column;
    border: 1px solid rgba(127,127,127,.22);
    overflow: hidden;
    background: rgba(127,127,127,.05);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}
/* Same lift-and-grow hover language as BG Player's film cards, just a
   gentler scale since this is a bordered box rather than a bare thumbnail. */
.product-card:hover {
    transform: scale(1.04);
    z-index: 5;
    position: relative;
    box-shadow: 0 18px 34px rgba(0,0,0,.22);
}

.product-card-media {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; background: rgba(127,127,127,.10);
    overflow: hidden;
}
.product-card-media img {
    width: 100%; height: 100%;
    object-fit: contain;          /* show the whole artwork, never crop */
}
.product-card-noimg {
    font-size: .85rem; opacity: .55; padding: 1rem; text-align: center;
}

.product-card-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.product-card-title { font-size: 1rem; line-height: 1.3; margin: 0; }
.product-card-title a { text-decoration: none; color: #1a1a1a; }
.product-card-title a:hover { color: inherit; }
.product-card-price { font-weight: 400; margin: 0; }
.product-card-buy { margin-top: auto; }
.product-card-buy a { max-width: 100%; box-sizing: border-box; }

/* ---- Individual product page ---- */
.product-back { margin-bottom: 1.2rem; }
.product-back a { text-decoration: none; opacity: .8; }

/* Product page: image on top (sole focus), details stacked below */
.product-detail-media {
    max-width: 820px; margin: 0 auto 1.8rem;
    background: rgba(127,127,127,.08); border: 1px solid rgba(127,127,127,.18);
    border-radius: 10px; padding: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.product-detail-info { max-width: 720px; margin: 0 auto; }
.product-detail-media img {
    max-width: 100%; height: auto; display: block; border-radius: 4px;
}
.product-detail-title { margin: 0 0 .4rem; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.2; overflow-wrap: normal; word-break: normal; hyphens: none; }
.product-detail-price { font-size: 1.5rem; font-weight: 800; margin: 0 0 1.1rem; }
.product-detail-buy { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.product-detail-desc { line-height: 1.6; }
.product-detail-desc p { margin: 0 0 1rem; }

@media (max-width: 720px) {
    .product-detail-media { max-width: 100%; }
}

/* ============================================================
   Artwork protection (deterrents — not absolute).
   Baked-in watermark is applied to the image files themselves.
   ============================================================ */
.product-card-media img,
.product-detail-media img {
    -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none;
    -o-user-drag: none; user-drag: none;
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
    -webkit-touch-callout: none;
}
/* Transparent shield over product images to deter drag/save — sits above the
   <img> itself, so a right-click or long-press lands on empty space (no
   "Save Image As" target) even if JavaScript is disabled. */
.product-card-media, .product-detail-media { position: relative; }
.product-card-media::after,
.product-detail-media::after {
    content: ""; position: absolute; inset: 0; z-index: 3;
    background: transparent;
}
/* Hide the artwork when printing; show a notice instead */
@media print {
    .product-card-media img,
    .product-detail-media img { display: none !important; }
    .product-detail-media::before,
    .product-card-media::before {
        content: "Artwork (c) The Bob Godfrey Collection, not licensed for reproduction";
        display: block; padding: 1.5rem; text-align: center; font-weight: 700;
    }
    .product-detail-buy, .product-card-buy { display: none !important; }
}

/* Persistent cart link, top-right in the header on every page */
.header-cart {
    display: inline-flex; align-items: center; gap: .4rem;
    text-decoration: none; font-weight: 600; font-size: .95rem;
    padding: .35rem .7rem; border-radius: 6px; white-space: nowrap;
    line-height: 1;
}
.header-cart:hover { background: rgba(127,127,127,.14); }
.header-cart i { font-size: 1.05rem; }
@media (max-width: 560px) {
    .header-cart span { display: none; }   /* icon-only on small screens */
}

/* Logo sizing in header */
.navbar-brand img { height: 46px; width: auto; display: block; }

/* Narrower navbar than the theme default (72px) */
#header .navbar { min-height: 58px; gap: 2.5rem; }

/* Wider, more spaced-out menu — closer to how BFI Player/Netflix-style
   nav bars breathe, with more room between nav items than the theme
   default. The shared .container (1200px) is what the header sits in, so
   widening it here also widens every "boxed" page that uses the same
   container — the film watch page, Store, FAQ, etc. — to match, without
   needing a separate override on each. The BG Player browse grid stays
   deliberately wider than even this, via its own full-bleed rule. */
.container { max-width: 1440px; }
.dropmenu > ul, .dropmenu ul.navigation { gap: 1.75rem; }
.dropmenu a { padding: 0.5rem 0.25rem; }

/* Header background — pure white, matching the logo's own white background
   (the theme default is a hair off-white, #fbfbfc, which left a faint seam
   where the logo met the header). */
:root,
:root[data-theme="light"] {
    --q2-nav-bg: #ffffff;
}
/* Safari's translucent address bar (and the overscroll "bounce" past the
   top of the page) reveals whatever's behind the visible content — which
   was the page's own off-white canvas colour, #fbfbfc, mismatched against
   the pure-white header right next to it. Matching html's own background
   to the header, and turning off the bounce entirely, removes both. */
/* Smooth scrolling for in-page jumps (anchor links etc.) — the
   prefers-reduced-motion override already in blades.min.css takes
   precedence over this for anyone who's asked for reduced motion. */
html { scroll-behavior: smooth; }
html { background: #ffffff; }
html, body { overscroll-behavior-y: none; }

/* Link colour: subtle by default — close to body text with a soft underline,
   the brand red only reveals itself on hover instead of shouting everywhere */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
    --q2-link: #34302e;
}
a {
    color: var(--q2-link);
    text-decoration: underline;
    text-decoration-color: rgba(52,48,46,.32);
    text-underline-offset: 2px;
    transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: inherit; text-decoration-color: currentColor; }

/* The Cart link is a persistent call-to-action, not prose — keep it in the
   brand red so it still reads as a button, unaffected by the subtler default */
.header-cart, .header-cart:hover { color: #e30a02; text-decoration: none; }

/* Merged store hero: narrower banner with white overlay title */
.store-hero { position: relative; width: 100%; overflow: hidden; margin: 0 0 1.5rem; }
.store-hero img {
    display: block; width: 100%; height: 520px;
    object-fit: cover; object-position: center 68%;
}
.store-hero-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; justify-content: center;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
    padding: 0 1.2rem 2.6rem;
}
.store-hero-overlay h1 {
    margin: 0; color: #fff; text-align: center; line-height: 1.1;
    font-size: clamp(1.9rem, 5vw, 3.6rem);
    text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
@media (max-width: 720px) {
    .store-hero img { height: 340px; }
}
.bgplayer-hero img { object-position: center 55%; }

/* Footer text, site-wide — a bit smaller than the default body copy */
#footer { font-size: .85rem; }
#footer p { font-size: inherit; }

/* Footer contact email */
.footer-contact { margin: 0 0 .4rem; }

/* Footer social links */
.footer-social { margin: 0 0 .4rem; }
.footer-social-sep { margin: 0 .4rem; opacity: .5; }

/* Footer legal / company line */
.footer-legal { margin: 0; font-size: .68rem; opacity: .45; }

/* The theme's default #footer a rule sets font-weight: 500, which reads as
   bold next to the rest of the footer text — match the normal body weight. */
#footer a { font-weight: 400; }

/* <picture> wrappers shouldn't affect layout — let the inner <img> size as before */
.product-card-media picture,
.product-detail-media picture,
.store-hero picture { display: contents; }

/* Remove the theme's decorative accent bar before the store section headings */
.shop-section-title::before { content: none !important; }

/* Store intro text sits on the page background, separate from the products box */
.store-intro { max-width: 960px; margin: 0 auto 1.6rem; }
.store-intro p { margin: 0 0 1rem; }
.store-intro > :last-child { margin-bottom: 0; }

/* Tighter top spacing on product pages only */
.page-product #body-wrapper { padding-top: clamp(0.75rem, 2vw, 1.5rem); }
.page-product #body-wrapper > .container > .content-item { padding-top: clamp(1rem, 2.5vw, 1.5rem); }
.page-product .product-back { margin-bottom: 0.9rem; }

/* ============================================================
   Home / front page — collection tiles (BG Player | Store)
   ============================================================ */
.collection-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    margin: 0 0 2.2rem;
}
.collection-tile {
    position: relative; display: block; overflow: hidden;
    text-decoration: none; aspect-ratio: 3 / 2;
    background: rgba(127,127,127,.10);
}
.collection-tile-media, .collection-tile-media picture { display: contents; }
.collection-tile img, .collection-tile video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s ease;
}
.collection-tile:hover img, .collection-tile:hover video { transform: scale(1.04); }

/* BG Player tile: a bit more zoom than the shared collection-tile hover,
   plus a subtle glowing border, since this one also swaps to a playing
   preview on hover (see home.html.twig) and benefits from a stronger cue
   that something is now active. */
.collection-tile-store img { object-position: center 78%; }
.collection-tile-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: #1a1a1a; color: #fff; font-size: 2.4rem;
}
.collection-tile-label {
    position: absolute; inset: auto 0 0 0;
    padding: 1rem 1.1rem 1.2rem;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
    color: #fff; font-weight: 700; font-size: 1.15rem; line-height: 1.3;
    pointer-events: none;
}
.collection-tile-label small { display: block; font-weight: 400; font-size: .8rem; opacity: .9; margin-top: .15rem; }
@media (max-width: 640px) {
    .collection-tiles { grid-template-columns: 1fr; }
}

/* Home intro paragraph — sits on the page background like the store intro */
.home-intro { max-width: 960px; margin: 4rem auto 4.5rem; }
.home-intro p { margin: 0 0 1rem; }
.home-intro > :last-child { margin-bottom: 0; }

/* ============================================================
   BG Player page — styled like a browse/watch streaming platform:
   no boxed "card" container, minimal top padding, cards-first.
   ============================================================ */
.page-bg-player #body-wrapper { padding-top: clamp(0.5rem, 1.5vw, 1.1rem); }
/* The watch page gets noticeably more breathing room than the browse grid
   — it was feeling cramped, sitting almost flush under the header. */
.page-film #body-wrapper { padding-top: clamp(1rem, 2.5vw, 1.8rem); }

/* Utility: fully built but not shown yet — see bg-player.html.twig for the
   tag filter and sort-by controls this hides. */
.is-hidden { display: none !important; }

/* Everything above the grid (intro text, the "showing films featuring X"
   banner, tag/sort controls) as one group — a fixed gap between whichever
   of them are present, and ONE fixed margin below the whole group, so the
   grid sits the same distance down whether nothing, just the intro, or the
   intro plus a person filter banner is showing above it. Each child below
   has its own margin zeroed out so this wrapper is the only thing setting
   that spacing. */
.bg-player-pre-grid {
    display: flex; flex-direction: column; gap: 1rem;
    margin-bottom: 1.6rem;
}
.bg-player-intro { max-width: 800px; margin: 0 auto; }

/* "Showing films featuring X" banner, from clicking a credited name.
   Already renders inside the header's own .container (see
   .bg-player-grid-section above), so no extra max-width/padding here. */
.bg-player-active-filter {
    margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
    font-size: .95rem;
}
.bg-player-clear-filter { font-size: .85rem; opacity: .75; }
.bg-player-no-results { padding: 1rem 0; opacity: .75; }

/* Tag filter pills (hidden for now via .is-hidden) */
.bg-player-filters {
    margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.bg-player-filter-tag {
    font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    background: rgba(127,127,127,.10); color: var(--q2-text);
    border: 1px solid rgba(127,127,127,.18); border-radius: 999px;
    padding: .3rem .8rem; cursor: pointer;
}
.bg-player-filter-tag.is-active { background: #e30a02; border-color: #e30a02; color: #fff; }

/* Sort-by control (hidden for now via .is-hidden) */
.bg-player-sort {
    margin: 0 auto;
    display: flex; align-items: center; gap: .6rem; font-size: .9rem;
}
.bg-player-sort select {
    width: auto; padding: .3rem .6rem; margin: 0;
}

/* This already renders inside the same #body-wrapper > .container the
   header's menu uses (max-width 1200px, with its own edge padding) — so
   matching that width means filling 100% of it, not re-applying a
   max-width/padding here on top of the container's. */
/* Deliberately wider than the header's menu — a full-bleed browse grid,
   like BFI Player/Netflix/Disney+, rather than boxed to the same width as
   the nav above it. (An earlier version matched the menu width exactly;
   this reverses that specifically for the grid, on request — the film
   page's own player still matches the menu, see .film-page below.) */
.bg-player-grid-section {
    margin: 0 0 2.5rem;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-inline: clamp(1.5rem, 6vw, 4rem);
}
/* More breathing room between rows than between columns — cards felt
   cramped top-to-bottom, especially now they lift on hover. */
.bg-player-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.4rem;
    row-gap: 2.6rem;
}
.film-card {
    display: block; text-decoration: none; color: inherit;
}
/* Cards are 4:3, not square — overrides the shared .bg-player-embed
   padding-top used by the big player and by the "coming soon" state.
   Square corners here too — no rounding on any card on the site. */
.film-card .bg-player-embed { padding-top: 75%; border-radius: 0; transition: box-shadow .3s ease; }
/* A subtle zoom on the image and a subtle border around the frame on
   hover — not a shadow (was reading as too heavy, and sat oddly close to
   the title text below). Both live on the thumbnail box only, not the
   whole card, so the border doesn't touch the text either. */
.film-card .film-card-thumb { transition: transform .4s ease; }
.film-card:hover .film-card-thumb { transform: scale(1.04); }
.film-card:hover .bg-player-embed { box-shadow: 0 0 0 2px rgba(127,127,127,.55); }
@media (max-width: 900px) {
    .bg-player-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .bg-player-grid { grid-template-columns: 1fr; }
}
.bg-player-embed {
    position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
    background: #000; overflow: hidden;
}
.bg-player-embed iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Watch page hero card (BFI Player-style) — a poster image with a
   centered "Watch" button, shown instead of the player until clicked. */
.film-hero-watch {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; padding: 0; margin: 0; cursor: pointer;
    background: #000; display: block; overflow: hidden;
}
.film-hero-image {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.film-hero-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.15);
    transition: background .2s ease;
}
.film-hero-watch:hover .film-hero-overlay { background: rgba(0,0,0,.35); }
.film-hero-watch-label {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: .6rem;
    background: #fff; color: #111;
    font-weight: 700; font-size: 1.05rem;
    padding: .85rem 1.8rem; border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    transition: transform .2s ease, box-shadow .2s ease;
}
.film-hero-watch-label i { font-size: .9em; }
.film-hero-watch:hover .film-hero-watch-label {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.film-card-thumb {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.bg-player-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.85); font-weight: 600; letter-spacing: .03em;
    background: rgba(0,0,0,.5);
}
.bg-player-countdown { text-align: center; color: rgba(255,255,255,.8); }
.bg-player-coming-label { display: block; font-weight: 700; letter-spacing: .03em; margin-bottom: .4rem; }
.bg-player-countdown-timer { font-size: .95rem; font-variant-numeric: tabular-nums; font-weight: 400; letter-spacing: normal; }
.bg-player-countdown-timer .cd-num { font-weight: 700; }
.bg-player-title { margin: .8rem 0 .4rem; font-size: 1rem; font-family: var(--pico-font-family-sans-serif); font-weight: 700; }
.bg-player-year { font-weight: 400; opacity: .65; }

/* Individual film page — video first (no boxed card around it), title and
   details below, like a typical streaming platform's watch page. */
/* This content already renders inside the same #body-wrapper > .container
   the header's menu uses (max-width 1200px, with its own edge padding) —
   so matching that width means filling 100% of it, not re-applying a
   max-width/padding here, which would just add a second, narrower inset on
   top of the container's. */
.film-page { max-width: 100%; margin: 0 auto; }
.film-embed { max-width: 100%; margin: 0 0 2rem; }

/* Text content sits in a comfortable reading column rather than
   stretching the full width of the wide player above it — same idea as a
   typical video watch page (wide player, narrower text underneath). */
.film-title, .film-year, .film-description {
    max-width: 900px;
}
.film-title { margin: 0 0 .3rem; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.2; }
.film-year { margin: 0 0 1.3rem; font-size: 1.05rem; font-weight: 400; opacity: .55; }

/* Tags + credits (left third) alongside the synopsis (right two-thirds) —
   BFI Player-style: compact metadata beside the prose, not stacked above
   it. Wider than the .film-description reading column below, since it's
   a structured layout rather than long-form prose. */
.film-info-columns {
    display: grid; grid-template-columns: 1fr 2fr; gap: 3rem;
    align-items: start;
    margin: 0 0 2.5rem;
    max-width: 1200px;
}
.film-info-left { display: flex; flex-direction: column; gap: 1.5rem; }
@media (max-width: 780px) {
    .film-info-columns { grid-template-columns: 1fr; gap: 1.5rem; }
}

.film-tags {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.film-tag {
    list-style: none; /* override Pico's `ul li { list-style: square }` */
    font-size: .78rem; font-weight: 600; letter-spacing: .02em;
    background: rgba(127,127,127,.12); color: var(--q2-text);
    padding: .3rem .8rem; border-radius: 999px; white-space: nowrap;
}
.film-synopsis { margin: 0; line-height: 1.7; font-size: 1.05rem; }
.film-credits {
    list-style: none; margin: 0; padding: 0; opacity: .7;
    display: flex; flex-direction: column; gap: .4rem;
}
.film-credit { list-style: none; }
.film-credit-title { font-weight: 600; }
.film-credit-title::after { content: ':'; margin-right: .35em; }
/* Credit names are links (to "films featuring this person"), but read as
   part of the sentence rather than calls to action — same color as the
   surrounding text, just a fainter underline until hovered. */
.film-credit-link {
    color: inherit;
    text-decoration-color: rgba(36,36,36,.32);
}
.film-description { line-height: 1.7; }
.film-description p { margin: 0 0 1.2rem; }

/* 4:3 player option (per-film "Player shape" setting) — overrides the
   default 16:9 padding-top hack on .bg-player-embed. */
/* 4:3 player option (per-film "Player shape" setting). The box itself is
   4:3 — the iframe just fills it normally (same as the default 16:9 case),
   letting Bunny's own responsive player redraw its video AND its controls
   to fit that shape. An earlier version of this oversized the iframe and
   clipped the overflow to crop the picture to 4:3, but that clips Bunny's
   control bar along with it — the controls are part of the same iframe,
   positioned by Bunny's own player relative to the iframe's real (oversized)
   size, not the smaller visible window, and there's no way to reach into a
   cross-origin iframe to reposition just the controls separately. Bunny's
   own support has confirmed this isn't fixable from outside the iframe.
   Net effect: 4:3 now letterboxes the widescreen picture within the frame
   instead of cropping it — less "true 4:3", but the controls work. #}
.film-embed-43 {
    padding-top: 0;
    aspect-ratio: 4 / 3;
}

/* "More films" row on an individual film page — kept in the same full
   width as the player and title above it (see .film-page), not the old
   narrower 900px column. */
.film-more-section {
    margin: 3rem auto 3rem;
    max-width: 100%;
    padding-inline: 0;
}
.film-more-heading {
    font-size: clamp(1.15rem, 1.2vw + 0.5rem, 1.4rem);
    font-weight: 400;
    margin-bottom: 1.5rem;
}
.film-more-heading::before { content: none; }
/* More breathing room between these cards than the dense main browse grid
   — this is a small curated row, not a wall of titles. */
.film-more-section .bg-player-grid { column-gap: 2.2rem; row-gap: 3rem; }

.bg-donate-section {
    max-width: 100%; margin: 0 auto 1.6rem; padding: 1.2rem 1.4rem;
    background: rgba(227,10,2,.06); border: 1px solid rgba(227,10,2,.18);
    border-radius: 10px;
}
.bg-donate-section h2 {
    margin: 0 0 .4rem; font-size: 1.15rem;
    font-family: var(--pico-font-family-sans-serif); font-weight: 700;
}
.bg-donate-section h2::before { content: none; }
.bg-donate-section p { margin: 0 0 .9rem; max-width: 60ch; }

/* Post-film donation pop-up (see film.html.twig) — "all but black" full-
   screen overlay with the donate box centered on top. */
.bg-donate-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.bg-donate-modal[hidden] { display: none; }
.bg-donate-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.92);
    animation: bg-donate-fade-in .3s ease;
}
.bg-donate-modal-panel {
    position: relative; max-width: 500px; width: 100%;
    background: var(--q2-bg-elev); border-radius: 12px;
    padding: 2rem 1.6rem 1.6rem;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    animation: bg-donate-pop-in .35s cubic-bezier(.2, .9, .3, 1.3);
}
@keyframes bg-donate-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes bg-donate-pop-in {
    from { opacity: 0; transform: scale(.92); }
    to { opacity: 1; transform: scale(1); }
}
.bg-donate-modal-panel .bg-donate-section h2 {
    font-size: 1.4rem;
}
.bg-donate-modal-close {
    position: absolute; top: .6rem; right: .6rem;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    border: none; background: rgba(127,127,127,.15);
    font-size: 1.4rem; line-height: 1; cursor: pointer; color: inherit;
}
.bg-donate-modal-close:hover { background: rgba(127,127,127,.28); }
/* The donate section's own red-tinted card styling doesn't make sense
   nested inside the modal's own panel — strip it back to plain content. */
.bg-donate-modal .bg-donate-section {
    max-width: 100%; margin: 0; padding: 0; border: none; background: transparent;
}

/* ============================================================
   FAQ page
   ============================================================ */
.faq-intro {
    max-width: 800px; margin: 0 0 3rem;
    display: flex; align-items: center; gap: 1.8rem;
}
.faq-portrait { flex: 0 0 auto; }
.faq-portrait img {
    display: block; width: 140px; height: 140px; border-radius: 50%;
    object-fit: cover; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.faq-intro-text { flex: 1 1 auto; margin: 0; line-height: 1.7; }
.faq-intro-text p { margin: 0; }
@media (max-width: 560px) {
    .faq-intro { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .faq-portrait img { width: 110px; height: 110px; }
}
.faq-list { max-width: 800px; display: flex; flex-direction: column; gap: 2.6rem; }
.faq-item { margin: 0; }
.faq-question {
    margin: 0 0 .7rem; font-size: 1.15rem;
    font-family: var(--pico-font-family-sans-serif); font-weight: 700;
}
.faq-answer { line-height: 1.75; }
.faq-answer p { margin: 0; }

/* ============================================================
   404 / error page — full-page hero using the robot-animator photo
   ============================================================ */
.error-hero { position: relative; width: 100%; overflow: hidden; }
.error-hero picture { display: contents; }
.error-hero img {
    display: block; width: 100%; height: 88vh; min-height: 480px; max-height: 900px;
    object-fit: cover; object-position: center 30%;
}
.error-hero-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem 1.4rem;
    background: linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.6) 65%, rgba(0,0,0,.78) 100%);
}
.error-hero-code {
    margin: 0; color: #fff; font-weight: 800; line-height: 1;
    font-size: clamp(3.5rem, 12vw, 7rem);
    text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.error-hero-overlay h1 {
    margin: .2rem 0 0; color: #fff;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.error-hero-overlay h1::before { content: none; }