/* ========================================
   PostSecret Archival Gallery Theme
   Mood: archival but alive, gallery-like, voyeuristic
   Palette: strict black/white + PostSecret red
   ======================================== */

/* ----- Typography: clean modern sans-serif ----- */
:root {
    --font-main: 'Inter', -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
    --font-mono: 'DM Mono', 'Courier New', courier, monospace;
    --font-display: var(--font-main);

    /* Layout */
    --content-max-width: 1216px;
    --breathing-room: clamp(2rem, 5vw, 4rem);
    --ps-layout-full: 1440px;
    --ps-layout-wide: 1216px;
    --ps-layout-content: 800px;
    --ps-layout-gutter: 24px;

    /* Shared mobile L/R gutter for non-full-width components — postcards,
       hero content at narrow widths, etc. With clamp(0.75rem, 3vw, 1rem)
       and a 16px root, it stays at 12px below ~400px viewport, scales
       from 12→16px between ~400–533px, then caps at 16px. Kept smaller
       than the desktop gutter so postcards don't feel cramped on phones.
       (See docs/known_issues.md row 63.) */
    --ps-mobile-gutter: clamp(0.75rem, 3vw, 1rem);

    /* Color tokens (--ps-red, --ps-red-dark, --ps-helpline-bg, scrims,
       facet palette, match-badge colors, etc.) live in overrides.css :root.
       That file is the single source of truth; don't re-declare them here. */

    /* Spacing scale */
    --ps-space-1: 4px;
    --ps-space-2: 8px;
    --ps-space-3: 12px;
    --ps-space-4: 16px;
    --ps-space-5: 24px;
    --ps-space-6: 32px;
    --ps-space-7: 40px;
    --ps-space-8: 48px;
    --ps-space-9: 64px;
    --ps-space-10: 80px;
    --ps-space-11: 96px;
    --ps-space-12: 112px;
    --ps-space-13: 144px;
}

body {
    font-family: var(--font-main);
    margin: 0;
    padding: 0;

    /* WCAG 1.4.4: 1rem honors the user's browser root font-size preference,
       so readers who bump their default font get a proportionally larger
       body. 16px is the default root, so existing visual sizing is
       preserved for the common case. */
    font-size: 1rem;
    line-height: 1.6;
    background: var(--wp--preset--color--bg);
    color: var(--wp--preset--color--text);
}

/* ----- Skip link (WCAG 2.4.1 Bypass Blocks) -----
   Visible only when focused; lets keyboard / AT users jump past the
   header straight to the page's main region (#primary / #main).
   Pairs with `screen-reader-text` in `dark-overrides.css` which hides
   the link in its non-focused state. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
}

.skip-link:focus,
.skip-link:focus-visible {
    position: absolute;
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    padding: 0.75rem 1rem;
    clip: auto;
    overflow: visible;
    background: #fff;
    color: #000;
    text-decoration: underline;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    outline: 3px solid var(--wp--preset--color--accent, var(--ps-red));
    outline-offset: 2px;
}

/* ----- Headlines: large and confident ----- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    margin: 0 0 1rem 0;
}

h1 { font-size: clamp(2.625rem, 2.625rem + 2.46vw, 3.9375rem); font-weight: 500; line-height: 1.15; }
h2 { font-size: clamp(2.375rem, 2.375rem + 1.76vw, 3.3125rem); font-weight: 500; line-height: 1.2; }
h3 { font-size: clamp(2.1875rem, 2.1875rem + 1.06vw, 2.75rem); font-weight: 500; line-height: 1.1; }
h4 { font-size: clamp(1.9375rem, 1.9375rem + 0.59vw, 2.25rem); font-weight: 500; line-height: 1.2; }
h5 { font-size: clamp(1.625rem, 1.625rem + 0.59vw, 1.9375rem); font-weight: 600; line-height: 1.2; }
h6 { font-size: clamp(1.375rem, 1.375rem + 0.47vw, 1.625rem); font-weight: 600; line-height: 1.2; }

/* ----- Eyebrow labels: small uppercase in red ----- */
.ps-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--accent);
    margin-bottom: 0.5rem;
    display: block;
}

/* ----- Body text: compact, readable, left-aligned ----- */
p {
    margin: 0 0 1rem 0;
    text-align: left;
}

/* ----- Narrow centered content column ----- */
.ps-container,
.wp-block-group.alignfull {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--breathing-room);
    padding-right: var(--breathing-room);
}

/* ----- Red up-right arrow motif ↗ ----- */
.ps-arrow::after {
    content: " ↗";
    color: var(--wp--preset--color--accent);
    font-weight: 700;
    font-size: 1.1em;
    display: inline-block;
    transition: transform 0.2s ease;
}

.ps-arrow:hover::after {
    transform: translate(2px, -2px);
}

/* ----- Links: minimal styling ----- */
a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--wp--preset--color--accent);
}

/* ----- Focus states: accessible ----- */

/* WCAG 2.4.7 Focus Visible. Use `:focus` as a global fallback for browsers
   that don't yet support `:focus-visible` (older Safari/Edge/Firefox, some
   AT/kiosk browsers). Modern browsers that DO support :focus-visible will
   match the :not(:focus-visible) rule below for mouse focus and suppress
   the outline — preserving the "only show ring for keyboard" UX while
   guaranteeing visible focus on legacy stacks. */
@supports not selector(:focus-visible) {
    *:focus {
        outline: 2px solid var(--wp--preset--color--accent);
        outline-offset: 2px;
    }
}

*:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

/* ----- Form inputs: maintain borders ----- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
select {
    border: 1px solid var(--wp--preset--color--border);
    padding: 0.5rem 0.75rem;
    background: var(--wp--preset--color--bg);
    color: var(--wp--preset--color--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0;
    transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    border-color: var(--wp--preset--color--accent);
    outline: none;
}

/* ========================================
   CATALOG CARD COMPONENT
   Thumbnail left, content right, red arrow
   ======================================== */
.ps-catalog-card {
    border: none;
    padding: var(--breathing-room) 0;
    transition: background-color 0.2s ease;
}

.ps-catalog-card:hover {
    background-color: var(--wp--preset--color--tint);
}

.ps-catalog-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ps-catalog-card__inner {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: start;
}

.ps-catalog-card__thumbnail {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
}

.ps-catalog-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.ps-catalog-card:hover .ps-catalog-card__thumbnail img {
    transform: scale(1.05);
}

.ps-catalog-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ps-catalog-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--wp--preset--color--text);
}

.ps-catalog-card__facets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Catalog-card facet chip.
 *
 * Issue #141: previously rendered as a borderless uppercase
 * accent-colored label, while the single-postcard detail page renders
 * the same data as outlined pills (`.ps-facet--link` in
 * secret-detail.css). Sonja flagged this as confusing — same data,
 * two visual styles. Match the single-postcard pill aesthetic so
 * a "tag" looks like the same affordance everywhere it appears.
 * Tokens come from the global preset palette so the chip works in
 * any context the catalog card renders (homepage, archives, search
 * results, similar-secrets grid).
 */
.ps-facet-chip {
    display: inline-block;
    padding: 6px 16px;
    background: transparent;
    border: 1px solid var(--wp--preset--color--muted, #c5c5c5);
    color: var(--wp--preset--color--muted, #c5c5c5);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: normal;
    border-radius: 4px;
}

.ps-facet-chip--more {
    opacity: 0.7;
}

.ps-catalog-card__excerpt {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--wp--preset--color--muted);
    margin: 0;
}

/* Mobile responsive: stack vertically */
@media (max-width: 768px) {
    .ps-catalog-card__inner {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ps-catalog-card__thumbnail {
        aspect-ratio: 16/9;
        max-width: 100%;
    }
}

/* Tablet: smaller thumbnail */
@media (min-width: 769px) and (max-width: 1024px) {
    .ps-catalog-card__inner {
        grid-template-columns: 150px 1fr;
        gap: 1.5rem;
    }
}

/* ========================================
   BUTTONS & CALLS TO ACTION
   Minimal and confident
   ======================================== */

/* (Primary .ps-btn definition is below in the stream actions section) */

/* ========================================
   SECTIONS & SPACING
   Long scrollable panels with breathing room
   ======================================== */
.ps-section {
    padding: clamp(3rem, 8vw, 6rem) 0;
    border: none;
}

.ps-section--tinted {
    background: var(--wp--preset--color--tint);
}

.ps-section__header {
    margin-bottom: clamp(2rem, 5vw, 4rem);
    text-align: left;
}

.ps-section__title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 0.5rem;
}

/* ========================================
   FOOTER & HEADER
   Utilitarian, small caps, negative space
   ======================================== */

/* Hide WordPress default navigation overlay toggle */
.ps-header .wp-block-navigation__responsive-container-open,
.ps-header .wp-block-navigation__responsive-container-close,
.ps-header .wp-block-navigation__responsive-dialog,
.ps-header .wp-block-navigation-item,
.ps-header .wp-block-navigation__responsive-container {
    display: none !important;
}

.ps-header {
    background: #000 !important;
    color: #fff !important;
    border: none;
    width: 100%;
    height: 84px;
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Header inner container - 3-column flex layout */
.ps-header__inner {
    max-width: 1216px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 24px;
}

/* Logo */
.ps-header__logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.ps-logo {
    height: 52px;
    width: auto;
}

/* Header right group - contains nav + social */
.ps-header__right {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Primary Navigation */
.ps-nav--primary {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ps-nav--primary .ps-nav__link {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #fff !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    white-space: nowrap;
    padding: 2px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.ps-nav--primary .ps-nav__link:hover {
    color: var(--wp--preset--color--accent) !important;
    text-decoration: none !important;
}

/* Social Icons - Right */
.ps-social {
    display: flex;
    align-items: center;
    gap: 0;
}

.ps-social__link {
    color: #fff;
    font-size: 1.5rem;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.ps-social__link:hover {
    color: var(--wp--preset--color--accent);
}

/* Theme toggle button in header */
.ps-theme-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: color 0.2s ease, border-color 0.2s ease;
    margin-left: 8px;
    flex-shrink: 0;
}

.ps-theme-toggle:hover {
    color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
}

.ps-theme-toggle:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

/* Mobile menu toggle button - HIDDEN on desktop */
button.ps-menu-toggle {
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    border: none !important;
    padding: 16px;
    margin: -16px;
    cursor: pointer;
    color: #fff;
    box-shadow: none !important;
    outline: none;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

button.ps-menu-toggle:hover {
    color: var(--wp--preset--color--accent);
}

.ps-menu-icon {
    display: block;
}

/* ---- Mobile Full-Screen Overlay ---- */
.ps-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: var(--ps-red-dark);
    flex-direction: column;
    align-items: center;
    padding: 70px 24px 40px;
    gap: 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
}

.ps-mobile-overlay.is-open {
    display: flex;
}

/* When overlay is open, header turns red and sits above overlay */
.ps-header.ps-header--menu-open {
    background: var(--ps-red-dark) !important;
    z-index: 1002;
}

/* Close icon must be white on red background */
.ps-header.ps-header--menu-open .ps-menu-toggle {
    color: #fff !important;
}

.ps-mobile-overlay__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.ps-mobile-overlay__link {
    font-family: var(--font-main);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 18px;
    padding: 2px 24px;
}

.ps-mobile-overlay__link:hover {
    opacity: 0.8;
}

.ps-mobile-overlay__link:focus {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.ps-mobile-overlay__link:focus:not(:focus-visible) {
    outline: none;
}

.ps-mobile-overlay__social {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.ps-mobile-overlay__social-link {
    color: #fff;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    text-decoration: none !important;
}

.ps-mobile-overlay__social-link:hover {
    opacity: 0.8;
}

/* Theme toggle in mobile overlay */
.ps-mobile-overlay__theme-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 12px 24px;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: opacity 0.2s ease;
    width: auto;
    margin-left: 0;
}

.ps-mobile-overlay__theme-toggle:hover {
    opacity: 0.8;
}

.ps-mobile-overlay__theme-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* Responsive header */
@media (max-width: 768px) {
    .ps-header {
        height: 70px;
    }

    .ps-header__inner {
        flex-wrap: nowrap !important;
        gap: 0;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .ps-header__logo {
        order: 1;
    }

    .ps-logo {
        width: 125px;
        height: 37px;
    }

    /* Show hamburger menu toggle on mobile */
    button.ps-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        order: 2;
        margin-left: auto;
    }

    /* Hide desktop right group on mobile */
    .ps-header__right {
        display: none !important;
    }
}

/* Tablet - tighter spacing */
@media (min-width: 769px) and (max-width: 1024px) {
    .ps-nav--primary .ps-nav__link {
        padding: 2px 16px;
    }
}

/* Footer styles are defined inline in parts/footer.html */

/* ========================================
   IMAGERY
   Postcards dominate, generous, crisp
   ======================================== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ps-hero-collage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.ps-hero-collage__item {
    position: relative;
    transform: rotate(-1deg);
    transition: transform 0.3s ease;
}

.ps-hero-collage__item:nth-child(even) {
    transform: rotate(1deg);
}

.ps-hero-collage__item:hover {
    transform: rotate(0deg) scale(1.02);
    z-index: 10;
}

.ps-hero-collage__item img {
    border: none;
    box-shadow: none;
}

/* ========================================
   HERO SECTION - Full viewport centered search
   ======================================== */

/* Hero container - full viewport minus header */
.ps-hero {
    min-height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--wp--preset--color--bg);
    position: relative;
    overflow: hidden;
    padding-top: var(--ps-space-13, 144px);
}

/* Decorative circle image (Frank's pile of secrets) */

/* Standard desktop default: 500x500, hanging 100px past the viewport's
   right edge so the circle is *partially* offscreen — matches the
   2026-04-30 design QA mockup (issue #136). The earlier
   "anchored to content column" formula (calc(50% - (...)) ) shipped a
   constant ~48px overlap with the search field on every viewport
   width. Pulling the circle 100px past the right edge fixes the
   overlap AND lands the visual the mockup specified.
   Wide-desktop override below restores the anchored formula on
   viewports ≥ 1600px where the full circle fits without overlap. */
.ps-hero__decor {
    position: absolute;
    top: 157px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid var(--ps-red-dark);
    box-shadow: 0 0 60px 0 var(--ps-red-dark);
    opacity: 0.9;
    overflow: hidden;
    pointer-events: none;
}

/* object-fit: cover with inset:0 guarantees the image fills the entire
   circle. The previous magic-number positioning
   (top:-1.5%; left:-16%; width:116%; height:155%) left an empty
   crescent in the upper-left of the circle on the production image —
   that was the "image needs to cover the full circle to avoid empty
   gap" half of issue #136.
   `object-position: center bottom` crops the top of the source
   (the pyramid-shaped peak with dark sky around it) so the densest
   pile region fills the entire circle without exposing the
   sloping-sides dark area. */
.ps-hero__decor img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

/* Headline — inside .ps-hero__content, constrained with subhead/search */
.ps-hero__headline {
    margin: 0 0 var(--ps-space-9, 64px) 0;
    font-size: clamp(42px, 5vw, 63px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--wp--preset--color--text);
    z-index: 1;
}

/* Hero content wrapper — 1216px centered container like the nav */
.ps-hero__content {
    text-align: left;
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    padding: 0 var(--ps-space-2, 8px) var(--ps-space-13, 144px);
    position: relative;
    z-index: 1;
}

/* Inner content constrained to 864px, left-aligned within the container */
.ps-hero__headline,
.ps-hero__subhead,
.ps-hero__search,
.ps-hero__helper {
    max-width: 864px;
}

/* Subheadline — Figma: Inter Bold 22px, line-height 1.6 */
.ps-hero__subhead {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 var(--ps-space-5, 24px) 0;
    color: var(--wp--preset--color--text);
    text-align: left;
}

/* Search form — full width within content area */
.ps-hero__search {
    display: flex;
    margin: 0 0 var(--ps-space-3, 12px);
    width: 100%;
}

/* Search input — Figma: 16px, 24px padding, white bg, grey placeholder */
.ps-hero__search-input {
    flex: 1;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1.6;
    border: none;
    border-radius: 4px 0 0 4px !important;
    background: #fff;
    color: #000;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ps-hero__search-input::placeholder {
    color: #757575;
}

.ps-hero__search-input:focus {
    box-shadow: 0 0 0 2px var(--wp--preset--color--accent);
}

/* Search button — Figma: 64px height, 22px bold, red bg, 32px horizontal padding */
.ps-hero__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 64px;
    padding: 16px 32px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    border: 1px solid var(--wp--preset--color--accent);
    border-radius: 0 4px 4px 0;
    background: var(--wp--preset--color--accent);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.ps-hero__search-btn:hover {
    opacity: 0.85;
    color: #fff;
}

/* Helper text — Figma: 14px, centered */
.ps-hero__helper {
    font-size: 14px;
    margin: 0;
    color: var(--wp--preset--color--text);
    text-align: left;
    line-height: 1.6;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Mid-narrow desktop (1101–1400): scale the circle down and push it
   further offscreen so it doesn't crowd the search field at viewport
   widths where the standard 500x500 still wouldn't clear. Issue #136
   regression band. */
@media (max-width: 1400px) and (min-width: 1101px) {
    .ps-hero__decor {
        width: 400px;
        height: 400px;
        right: -180px;
        top: 100px;
    }
}

/* Wide desktop (≥1600): viewport has room to anchor the circle to the
   content column's right edge with the original 100px overhang AND
   keep the search field clear. Restores the "full circle visible"
   visual the wide-screen Figma mockup (#136) calls for. */
@media (min-width: 1600px) {
    .ps-hero__decor {
        right: calc(50% - (var(--ps-layout-wide) / 2 + 100px));
    }
}

/* Responsive — Mid-size screens: scale, raise, and fade the hero decoration */
@media (max-width: 1100px) and (min-width: 641px) {
    .ps-hero__decor {
        width: 350px;
        height: 350px;
        right: -150px;
        top: 60px;
        opacity: 0.6;
    }
}

@media (max-width: 800px) and (min-width: 641px) {
    .ps-hero__decor {
        width: 250px;
        height: 250px;
        right: -120px;
        top: 30px;
        opacity: 0.4;
    }
}

/* Responsive — Mobile */
@media (max-width: 640px) {
    .ps-hero {
        min-height: calc(100vh - 70px);
        padding-top: 48px;
    }

    .ps-hero__headline {
        font-size: 42px;
        margin-bottom: 24px;
    }

    .ps-hero__content {
        padding: 0 var(--ps-mobile-gutter) 48px;
        order: 1; /* text first on mobile */
    }

    .ps-hero__subhead {
        font-size: 22px;
    }

    .ps-hero__search-input {
        font-size: 14px;
        min-width: 0;
    }

    .ps-hero__search-btn {
        padding: 16px;
        gap: 0;
    }

    .ps-hero__search-btn-label {
        display: none;
    }

    /* Mobile: full-width strip below the search showing the tip of
       the postcard pile per the design QA mockup. Sonja reopened
       after PR #161 — 110px was too short to recognize as a pile of
       postcards; the prior 200px attempt showed the centered middle
       slab instead of the pile peak. 220px + `object-position:
       center top` shows several visible layers of the stack while
       keeping the framing at the top of the source so the visual
       still reads as a pile peeking out, not a slab. */
    .ps-hero__decor {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: 220px;
        border-radius: 0;
        border: none;

        /* Red divider sits flush BELOW the image per Sonja design QA (#136).
           The decor is order:2 (below the hero content), so a bottom border
           draws the accent line directly under the pile image as in the mockup. */
        border-bottom: 2px solid var(--ps-red-dark);
        box-shadow: none;
        opacity: 0.85;
        order: 2; /* push below .ps-hero__content */
        margin: 0;
    }

    .ps-hero__decor img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        transform: none;
    }
}

/* ========================================
   404 HERO
   Centered headline, subtext, and CTA
   ======================================== */
.ps-404-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1216px;
    margin: 0 auto;
    padding: 144px 0 0;
}

.ps-404-hero__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 802px;
    max-width: 100%;
    padding: 0 24px;
}

.ps-404-hero__headline {
    font-size: clamp(42px, 5vw, 63px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--wp--preset--color--muted, #c5c5c5);
    margin: 0;
    text-align: center;
    width: 100%;
}

.ps-404-hero__subtext {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--wp--preset--color--muted, #c5c5c5);
    margin: 0;
    text-align: center;
    width: 100%;
}

.ps-404-hero__actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ps-404-hero__divider {
    width: 100%;
    max-width: 1216px;
    border: none;
    border-top: 1px solid var(--wp--preset--color--border, #e6eaf0);
    margin: 64px 0 0;
}

/* "Browse latest secrets" heading above stream on 404 */
.ps-404-heading {
    text-align: center;
    max-width: 800px;
    margin: 0 auto clamp(48px, 6vw, 80px);
}

.ps-404-heading h2 {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--wp--preset--color--text, white);
    margin: 0;
}

@media (max-width: 640px) {
    .ps-404-hero {
        padding-top: 96px;
    }
    .ps-404-hero__content {
        width: 100%;
        gap: 24px;
    }
}

/* ========================================
   TOPIC ARCHIVE HEADER
   Centered eyebrow + title + count
   ======================================== */
.ps-topic-archive {
    max-width: 1216px;
    margin: 0 auto;
    padding: 85px 24px 0;
}

.ps-topic-archive__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: var(--wp--preset--color--text, white);
}

.ps-topic-archive__eyebrow {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0;
}

.ps-topic-archive__title {
    font-size: clamp(36px, 4vw, 44px);
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

.ps-topic-archive__count {
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

/* Breadcrumb back-link — subtle, always above the eyebrow so the user
   has a way out beyond the browser back button or the logo. */
.ps-topic-archive__breadcrumb {
    align-self: flex-start;
    width: 100%;
    text-align: left;
    margin-bottom: 4px;
}

.ps-topic-archive__breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted, #aaa);
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.15s ease;
}

.ps-topic-archive__breadcrumb a:hover,
.ps-topic-archive__breadcrumb a:focus-visible {
    color: var(--wp--preset--color--text, #fff);
}

.ps-topic-archive__breadcrumb a i {
    font-size: 12px;
}

/* Related facets — "Also try another Feeling" chip row. */
.ps-topic-archive__related {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    width: 100%;
}

.ps-topic-archive__related-label {
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    color: var(--wp--preset--color--muted, #aaa);
}

.ps-topic-archive__related-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.ps-topic-archive__related-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;

    /* Consistent light-grey border per Sonja design QA (#141). */
    border: 1px solid #c5c5c5;

    /* Square corners to match `.ps-facet-chip` on single-postcard
       pages. Previously 999px (pill), which Sonja flagged as
       visually inconsistent between facet archive and single
       postcard surfaces — same data, different shape. */
    border-radius: 4px;
    color: var(--wp--preset--color--text, #fff);
    font-size: 14px;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ps-topic-archive__related-chip:hover,
.ps-topic-archive__related-chip:focus-visible {
    border-color: var(--wp--preset--color--accent, var(--ps-red));
    background: rgba(224, 42, 42, 0.08);
}

.ps-topic-archive__related-chip-count {
    font-size: 12px;
    color: var(--wp--preset--color--muted, #aaa);
    font-variant-numeric: tabular-nums;
}

/* In-page archive search on facet pages (#175). The form reuses the unified
   -search field styles; this just gives it spacing + a constrained column so
   it reads as a deliberate "search the whole archive" affordance below the
   facet header rather than the full-bleed homepage hero treatment.

   The side margins must stay `auto` (#283). This block is a SIBLING of
   .ps-topic-archive__header, not a child, so it gets none of that header's
   `align-items: center`. Its parent .ps-topic-archive is an ordinary block at
   max-width 1216px, so without auto margins a 640px box hangs off the left
   edge while the header directly above it sits centered. */
.ps-facet-search {
    margin: 28px auto 0;
    max-width: 640px;
}

.ps-facet-search__label {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--wp--preset--color--muted, #aaa);
}

@media (max-width: 640px) {
    .ps-topic-archive {
        padding-top: 48px;
    }

    .ps-topic-archive__breadcrumb {
        margin-bottom: 0;
    }

    .ps-topic-archive__related-chips {
        gap: 6px;
    }

    .ps-topic-archive__related-chip {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* ========================================
   LATEST SECRETS SECTION
   Archive stream with heading and subtitle
   ======================================== */
.ps-latest {
    text-align: left;
}

/* Stream actions (Load more / Try the Search buttons) */
.ps-stream__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    max-width: var(--ps-layout-wide, 1216px);
    margin-left: auto;
    margin-right: auto;
}

/* Base button styles (Figma: 56px height, 18px bold, 4px radius) */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    min-height: 56px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--wp--preset--color--text);
}

/* Solid / Filled button */
.ps-btn--solid {
    background: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
    color: #fff;
}

.ps-btn--solid:hover {
    opacity: 0.85;

    /* Keep white text on hover: the global `a:hover` rule would otherwise
       recolor it to the accent red, making it vanish on the red fill.
       Mirrors .ps-btn--primary:hover below. */
    color: #fff;
}

/* Outline / Secondary button */
.ps-btn--outline {
    background: transparent;
    color: var(--wp--preset--color--text);
    border: 1px solid var(--wp--preset--color--text);
}

.ps-btn--outline:hover {
    opacity: 0.8;
}

.ps-btn--outline.ps-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary button (filled accent) */
.ps-btn--primary {
    background: var(--wp--preset--color--accent);
    color: #fff;
    border: 1px solid var(--wp--preset--color--accent);
}

.ps-btn--primary:hover {
    opacity: 0.85;
    color: #fff;
}

/* Large button */
.ps-btn--large {
    padding: 16px 32px;
    font-size: 1.125rem;
    min-height: 56px;
}

/* Option buttons (More like this, Download, Copy link) */
.ps-option-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    border: none;
    background: #fff;
    color: #000;
}

.ps-option-btn:hover {
    opacity: 0.85;
}

/* Option button — outlined variant (SERP filters) */
.ps-option-btn--outline {
    background: transparent;
    border: 1px solid var(--wp--preset--color--text);
    color: var(--wp--preset--color--text);
}

.ps-option-btn--outline:hover {
    opacity: 0.8;
}

/* Topic tags (Figma: 36px radius pill, 14px regular, light-grey border).
   #C5C5C5 gives the ghostly border/text that reads clearly on the dark bg
   without the token muted (#999999), which is tuned for body-text contrast. */
.ps-topic-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    text-decoration: none;
    border-radius: 36px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    border: 1px solid var(--ps-ghost);
    background: var(--wp--preset--color--bg);
    color: var(--ps-ghost);
}

.ps-topic-tag:hover {
    opacity: 0.85;
}

.ps-topic-tag:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

/* ========================================
   STATS — "1 Million+ Postcards"
   Full-bleed photo with dark gradient overlay
   ======================================== */
.ps-stats {
    position: relative;
    width: 100%;
    height: clamp(500px, 60vw, 760px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: var(--ps-space-12) max(var(--ps-space-12), calc((100% - var(--ps-layout-wide, 1216px)) / 2));
}

.ps-stats__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ps-stats__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-stats__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(219deg, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.54) 52%, rgba(0, 0, 0, 0.81) 84%);
}

.ps-stats__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    max-width: 591px;
}

.ps-stats__headline {

    /* Standardized to 40px on desktop per design QA #139 — was
       clamp(38px, 5vw, 53px) which scaled the headline above the
       sibling section titles. All featured-section h2s now share
       the same 40px / 500 typography. */
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ps-red);
    margin: 0;
}

.ps-stats__text {
    font-size: clamp(16px, 1.5vw, 18px);
    font-weight: 400;
    line-height: 1.6;
    color: #fff;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.85);
    margin: 0;
}

/* Tighten gap between headline and text (16px), keep 40px before button */
.ps-stats__content .ps-stats__headline + .ps-stats__text {
    margin-top: -24px; /* 40px gap - 24px = 16px effective */
}

@media (max-width: 640px) {

    /* Stack on mobile: image on top, text below with solid background */
    .ps-stats {
        height: auto;
        flex-direction: column;
        padding: 0;
    }

    .ps-stats__bg {
        position: relative;
        height: 280px;

        /* Without explicit width, the parent flex's `align-items:
           flex-start` collapses the bg div to its 0-width content
           (the inner img is `width: 100%` of zero). Force full
           viewport width so the "1 Million+ Postcards" image fills
           the section between viewports 498–640px (design QA #139). */
        width: 100%;
    }

    .ps-stats__overlay {
        background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
    }

    .ps-stats__content {
        position: relative;
        gap: 16px;
        max-width: 100%;
        padding: 24px clamp(1rem, 3vw, 2rem) 32px;
        background: #1a1a1a;

        /* Center the headline, body text, and CTA on mobile. Desktop
           keeps the left-aligned editorial column; on phones the
           narrow viewport reads better with everything centered and
           matches the centered Patreon/footer pattern below. */
        align-items: center;
        text-align: center;
    }

    .ps-stats__content .ps-stats__headline + .ps-stats__text {
        margin-top: 0;
    }

    .ps-stats__text {
        text-shadow: none;
    }
}

/* ========================================
   HELPLINE SUPPORT BAND
   Full-bleed soft green band, dark text, clear hierarchy
   ======================================== */
.ps-helpline-section {
    background: var(--ps-helpline-bg) !important;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

.ps-helpline-section {
    background: var(--ps-helpline-bg) !important;
}

/* Ensure inner WordPress group doesn't add padding */
.ps-helpline-section > .wp-block-group {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ps-helpline-card {
    display: grid;
    grid-template-columns: 1fr minmax(0, 600px);
    gap: 48px;
    align-items: center;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    padding-left: 0;
    padding-right: 0;
    color: #1a1a1a;
    overflow: hidden;
}

.ps-helpline-card__content {
    max-width: 65ch;
    min-width: 0;
}

.ps-helpline-card__visual {
    width: 100%;
    max-width: 600px;
    min-width: 0;
}

.ps-helpline-card__visual img,
.ps-helpline-card__visual img[src*="helpline.png"] {
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    display: block !important;
}

.ps-helpline-card__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);

    /* Standardized to 500 across featured-section h2s per design QA
       #139. Previously 700, which read as the heaviest title on the
       page and broke the rhythm against the other sections. */
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 1.5rem 0;
    color: #1a1a1a;
    max-width: 32ch;
    text-decoration: none;
}

.ps-helpline-card__text {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.7;
    margin: 0 0 1rem 0;
    color: #1a1a1a;
    max-width: 65ch;
}

.ps-helpline-card__text:last-of-type {
    margin-bottom: 2rem;
}

/* Inline links - red, underline on hover/focus */
.ps-helpline-card__link {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    font-weight: inherit;
    transition: text-decoration 0.2s ease;
}

.ps-helpline-card__link:hover,
.ps-helpline-card__link:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.ps-helpline-card__link:focus {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

/* Primary CTA link with red arrow.
   Colour is the lighter --ps-red-accessible (not the brand --accent
   #E02A2A) because the CTA sits on the helpline band's #1a1a1a and
   the brand red fails WCAG AA contrast (3.55:1 vs required 4.5:1)
   at body-size text. */
.ps-helpline-card__cta {
    display: inline-block;
    color: var(--ps-red-accessible);
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
    transition: all 0.2s ease;
}

.ps-helpline-card__cta:hover {
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
    color: var(--ps-red);
}

/* Focus indicator: thicker outline + offset so the focused state is
   unambiguously visible against the dark band. Uses :focus-visible
   only — mouse activation should not paint the ring. */
.ps-helpline-card__cta:focus-visible {
    outline: 3px solid var(--ps-red-accessible);
    outline-offset: 4px;
    border-radius: 2px;
}

.ps-helpline-card__cta span {
    color: var(--ps-red-accessible);
    margin-left: 6px;
    font-size: 1.1em;
}

/* Hide WordPress external link icon */
.ps-helpline-card__cta .external-link-icon,
.ps-helpline-card__cta svg,
.ps-helpline-card__cta img,
.ps-helpline-card__cta::after {
    display: none !important;
}

/* Also hide any auto-inserted icons */
a.ps-helpline-card__cta .external-link-icon,
a.ps-helpline-card__cta svg,
a.ps-helpline-card__cta img {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Responsive: stack earlier (was 768, now 900) so the illustration
   doesn't crowd the text block on medium-size screens per design QA
   #139. The 768-900 band fits the side-by-side grid mathematically
   but visually the illustration ends up too small and competing. */
@media (max-width: 900px) {
    .ps-helpline-card {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .ps-helpline-card__visual {
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .ps-helpline-card__visual img {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }

    .ps-helpline-card__content {
        order: 1;

        /* Center heading, body, and CTA on small viewports — same
           pattern as `.ps-stats__content` and the footer Patreon
           band above. The desktop layout keeps the left-aligned
           editorial reading column; phones get a centered stack. */
        text-align: center;
    }

    /* Re-center max-width-constrained children so they don't pin
       to the left edge of the now-text-centered column. */
    .ps-helpline-card__title,
    .ps-helpline-card__text {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================
   FACET PILLS
   Rounded filter tags for search/time-machine
   ======================================== */
.ps-facet-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: var(--wp--preset--color--bg);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 9999px;
    color: var(--wp--preset--color--text);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}

.ps-facet-pill:hover {
    border-color: var(--wp--preset--color--accent);
    background: var(--wp--preset--color--tint);
    transform: translateY(-1px);
}

.ps-facet-pill:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

.ps-facet-pill.selected {
    background: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
    color: #fff;
    font-weight: 600;
}

/* ROYGBV color variants — lighter tint-400 shades for legibility on the dark bg */
.ps-facet-pill--feeling { border-color: var(--ps-facet-feeling); }
.ps-facet-pill--feeling.selected { background: var(--ps-facet-feeling); border-color: var(--ps-facet-feeling); }
.ps-facet-pill--location { border-color: var(--ps-facet-location); }
.ps-facet-pill--location.selected { background: var(--ps-facet-location); border-color: var(--ps-facet-location); }
.ps-facet-pill--meaning { border-color: var(--ps-facet-meaning); }
.ps-facet-pill--meaning.selected { background: var(--ps-facet-meaning); border-color: var(--ps-facet-meaning); }
.ps-facet-pill--style { border-color: var(--ps-facet-style); }
.ps-facet-pill--style.selected { background: var(--ps-facet-style); border-color: var(--ps-facet-style); }
.ps-facet-pill--topic { border-color: var(--ps-facet-topic); }
.ps-facet-pill--topic.selected { background: var(--ps-facet-topic); border-color: var(--ps-facet-topic); }
.ps-facet-pill--vibe { border-color: var(--ps-facet-vibe); }
.ps-facet-pill--vibe.selected { background: var(--ps-facet-vibe); border-color: var(--ps-facet-vibe); }

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ------------------------------
   Trigger Warning Banner
------------------------------ */
.ps-trigger-warning {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.ps-trigger-warning[data-visible="true"] {
    transform: translateY(0);
}

.ps-trigger-warning__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    background: var(--ps-red);
    color: #fff;
}

.ps-trigger-warning__text {
    margin: 0;
    font-size: 15px;
    font-family: var(--font-main);
    line-height: 1.4;
}

.ps-trigger-warning__text strong {
    font-weight: 700;
}

.ps-trigger-warning__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;

    /* WCAG 2.5.5 AAA / 2.5.8 AA target-size: lock in the minimum so parent
       flex/grid constraints can't shrink the hit area below 44x44. */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.ps-trigger-warning__close:hover {
    opacity: 1;
}

.ps-trigger-warning__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
    opacity: 1;
}