/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ───────────────────────────────────────────────────────────────────────────
   Cert Buy block — "Riserva quest'opera"
   Uses Archivia design tokens (--primary, --secondary, --space-*, --text-*).
   Theme-style primary button as visual base, with uppercase / letter-spaced
   treatment and an arrow that nudges on hover.
   ─────────────────────────────────────────────────────────────────────────── */

.cert-buy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-s);
    margin-block: var(--space-l, 2rem);
    padding: var(--space-m, 1.25rem);
    border: 1px solid var(--primary-l-3);
    background: var(--secondary-10);
    font-family: "Jost", sans-serif;
    color: var(--primary);
}

.cert-buy__available {
    margin: 0;
    font-size: var(--text-m, 1rem);
    line-height: 1.5;
    color: var(--primary-l-1);
    letter-spacing: 0.01em;
}

.cert-buy__button {
    --_bg:     var(--primary);
    --_fg:     var(--secondary);
    --_border: var(--primary);

    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    padding: var(--btn-space, var(--space-s) var(--space-m));
    background: var(--_bg);
    color: var(--_fg);
    border: 1px solid var(--_border);
    font-family: inherit;
    font-size: var(--text-m, 1rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cert-buy__button::after {
    content: "→";
    display: inline-block;
    transition: transform 0.25s ease;
}

.cert-buy__button:hover,
.cert-buy__button:focus-visible {
    --_bg:     var(--secondary);
    --_fg:     var(--primary);
    outline: none;
}

.cert-buy__button:hover::after,
.cert-buy__button:focus-visible::after {
    transform: translateX(4px);
}

.cert-buy__button:disabled {
    opacity: 0.55;
    cursor: progress;
}

.cert-buy__pickup {
    margin: 0;
    font-size: var(--text-s, 0.95rem);
    color: var(--primary-l-2);
    text-align: center;
    letter-spacing: 0.04em;
}

/* States other than "available" */

.cert-buy--sold {
    border-style: dashed;
    background: transparent;
    text-align: center;
}

.cert-buy__sold {
    margin: 0;
    font-size: var(--text-m, 1rem);
    font-style: italic;
    color: var(--primary-l-1);
}

.cert-buy--success {
    border-color: var(--primary);
    background: var(--secondary);
    text-align: center;
}

.cert-buy__success {
    margin: 0;
    font-size: var(--text-m, 1rem);
    font-weight: 500;
    color: var(--primary);
}

.cert-buy__cancel,
.cert-buy__error {
    margin: 0;
    font-size: var(--text-xs, 0.8rem);
    text-align: center;
    color: var(--primary-l-1);
}

.cert-buy__error {
    color: #b3261e;
}

/* ───────────────────────────────────────────────────────────────────────────
   Artists Reveal — homepage roster, words fade in random order.
   White, Jost 400, uppercase. Initial opacity 0.5; on viewport entry items
   stagger to opacity 1 in random order, with per-item fade duration.
   --stagger and --transition are set inline by the PHP render.
   ─────────────────────────────────────────────────────────────────────────── */

.archivia-artists-reveal {
    --transition: 600ms;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    /* var(--text-3xl) in Core Framework is clamp(4rem, …, 3.55rem) — MIN > MAX,
       so it pegs to 4rem at all viewports and never shrinks. Use it as the upper
       bound and let the middle term scale fluidly down to a mobile-friendly floor. */
    font-size: clamp(1.5rem, 6vw, var(--text-3xl));
    text-transform: uppercase;
    color: var(--text-body);
    line-height: 1.1;
    letter-spacing: 0.01em;
    word-break: keep-all;
}

.archivia-artists-reveal__item {
    color: inherit;
    text-decoration: none;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--transition) ease;
    will-change: opacity;
    /* default display: inline — lets names break across lines at the internal
       space (NAME ↵ COGNOME), so the block reads as a continuous wall. */
}

.archivia-artists-reveal__item.is-revealed {
    opacity: 1;
}

/* When ANY item in the list is hovered/focused, fade them all to 50%… */
.archivia-artists-reveal:has(.archivia-artists-reveal__item:hover)         .archivia-artists-reveal__item,
.archivia-artists-reveal:has(.archivia-artists-reveal__item:focus-visible) .archivia-artists-reveal__item {
    opacity: 0.5;
}

/* …except the one actually pointed at, which stays fully on. */
.archivia-artists-reveal:has(.archivia-artists-reveal__item:hover)         .archivia-artists-reveal__item:hover,
.archivia-artists-reveal:has(.archivia-artists-reveal__item:focus-visible) .archivia-artists-reveal__item:focus-visible {
    opacity: 1;
    outline: none;
}

.archivia-artists-reveal__sep {
    opacity: 0.5;
    padding: 0 0.15em;
    user-select: none;
}

/* Builder-only preview helper */
.archivia-artists-reveal--builder-preview {
    color: #fff;
    background: #2b446433;
    padding: 1rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   Inauguration Hero — heading + descrizione + sottotitolo + footer.
   Stacked vertical layout, uppercase, --text-body color.
   Same reveal pattern as artists-reveal (opacity 0.5 → 1, random stagger).
   ─────────────────────────────────────────────────────────────────────────── */

.inauguration-hero {
    --transition: 800ms;
    display: flex;
    flex-direction: column;
    gap: var(--space-m, 1.5rem);
    font-family: "Jost", sans-serif;
    color: var(--text-body);
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.inauguration-hero__item {
    margin: 0;
    opacity: 0.5;
    transition: opacity var(--transition) ease;
    will-change: opacity;
}

.inauguration-hero__item.is-revealed {
    opacity: 1;
}

.inauguration-hero__heading {
    /* --text-3xl pegs to 4rem on every viewport (see artists-reveal note). */
    font-size: clamp(2rem, 7vw, var(--text-3xl));
    font-weight: 500;
    line-height: 1.05;
    max-width: 16ch;
    color: var(--text-body);
    opacity: 1; /* container always visible — chars handle the reveal */
}

.inauguration-hero__word {
    display: inline-block;
    white-space: nowrap;
}

.inauguration-hero__char {
    display: inline-block;
    color: inherit;
}

.inauguration-hero__description {
    font-size: var(--text-m);
    font-weight: 400;
    line-height: 1.45;
    max-width: 52ch;
    letter-spacing: 0.03em;
}

.inauguration-hero__subtitle {
    font-size: var(--text-l);
    font-weight: 500;
    line-height: 1.25;
    max-width: 36ch;
    letter-spacing: 0.02em;
}

.inauguration-hero__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-s, 0.75rem);
    margin-top: var(--space-l, 2rem);
    padding-top: var(--space-m, 1.5rem);
    border-top: 1px solid var(--primary-l-3, currentColor);
    font-size: var(--text-s);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.inauguration-hero__date,
.inauguration-hero__location {
    display: block;
}

.inauguration-hero--builder-preview {
    padding: 1rem;
    background: rgba(43, 68, 100, 0.05);
}

/* ───────────────────────────────────────────────────────────────────────────
   Archivia Logo (Pianeta) — elemento standalone.
   Fade-in al load + scala continua, da "pianeta in avvicinamento"
   (riferimento: Melancholia di Lars Von Trier).
   Il colore eredita da var(--text-body) → si inverte col mode del sito.
   L'elemento riempie il proprio container Bricks: dimensione e posizione
   si gestiscono dal builder con flex/grid sul wrapper.
   ─────────────────────────────────────────────────────────────────────────── */

.archivia-logo {
    --planet-duration: 20s;
    --planet-scale-min: 0.65;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    color: var(--text-body);
    opacity: 0;
    pointer-events: none;
    overflow: hidden; /* sicurezza: il logo non sborda mai dal container */
    animation: archivia-logo-fade 1.2s ease-out 0.1s both;
    will-change: opacity;
}

.archivia-logo--no-fade {
    animation: none;
    opacity: 0.97;
}

.archivia-logo__inner {
    width: 100%;
    height: 100%;
    transform-origin: center;
    /* Avvicinamento "pianeta": scala fino a --planet-scale-max nel tempo
       --planet-duration, curva asimmetrica (accelerazione in entrata, decelerazione
       lunga in uscita) → niente respiro simmetrico, l'occhio legge "approach". */
    animation: archivia-logo-planet var(--planet-duration) cubic-bezier(0.6, 0, 0.4, 1) infinite alternate;
    will-change: transform;
}

.archivia-logo--no-scale .archivia-logo__inner {
    animation: none;
}

.archivia-logo__svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes archivia-logo-fade {
    from { opacity: 0; }
    to   { opacity: 0.97; }
}

@keyframes archivia-logo-planet {
    from { transform: scale(var(--planet-scale-min)); }
    to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .archivia-logo {
        animation: none;
        opacity: 0.97;
    }
    .archivia-logo__inner {
        animation: none;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Newsletter signup form (Mailchimp embed).
   Posts to the Mailchimp endpoint in a new tab; styling stays in-site.
   Uses the same design tokens as the rest of the child theme.
   ─────────────────────────────────────────────────────────────────────────── */

.archivia-newsletter {
    --field-border: var(--primary-l-3, currentColor);
    display: flex;
    flex-direction: column;
    gap: var(--space-m, 1.5rem);
    max-width: 36rem;
    width: 100%;
    margin-inline: auto;
    padding: var(--space-l, 2rem);
    border: 1px solid var(--primary-l-3, currentColor);
    background: var(--secondary-10, transparent);
    font-family: "Jost", sans-serif;
    color: var(--primary, currentColor);
}

.archivia-newsletter__heading {
    margin: 0;
    font-size: clamp(1.5rem, 3.5vw, var(--text-xl, 1.75rem));
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--primary);
}

.archivia-newsletter__description {
    margin: 0;
    font-size: var(--text-m, 1rem);
    line-height: 1.5;
    color: var(--primary-l-1, inherit);
    letter-spacing: 0.01em;
}

.archivia-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s, 1rem);
    margin: 0;
}

.archivia-newsletter__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-s, 1rem);
}

@media (max-width: 480px) {
    .archivia-newsletter__row {
        grid-template-columns: 1fr;
    }
}

.archivia-newsletter__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.archivia-newsletter__label {
    font-size: var(--text-xs, 0.8rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-l-1, inherit);
}

.archivia-newsletter__required {
    color: var(--primary);
    margin-inline-start: 0.15em;
}

.archivia-newsletter__input {
    appearance: none;
    width: 100%;
    padding: var(--space-xs, 0.65rem) var(--space-s, 0.85rem);
    background: var(--secondary, #fff);
    color: var(--primary);
    border: 1px solid var(--field-border);
    border-radius: 0;
    font-family: inherit;
    font-size: var(--text-m, 1rem);
    line-height: 1.4;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.archivia-newsletter__input::placeholder {
    color: var(--primary-l-2, rgba(0,0,0,0.4));
    opacity: 0.6;
}

.archivia-newsletter__input:focus {
    outline: none;
    border-color: var(--primary);
}

.archivia-newsletter__input:invalid:not(:placeholder-shown) {
    border-color: #b3261e;
}

.archivia-newsletter__field--consent {
    margin-top: var(--space-xs, 0.5rem);
}

.archivia-newsletter__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-size: var(--text-xs, 0.85rem);
    line-height: 1.45;
    color: var(--primary-l-1, inherit);
    letter-spacing: 0.01em;
}

.archivia-newsletter__checkbox {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    accent-color: var(--primary);
    cursor: pointer;
}

.archivia-newsletter__consent-text {
    font-size: var(--text-s, 0.95rem);
}

.archivia-newsletter__consent-text a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.archivia-newsletter__submit {
    margin-top: var(--space-xs, 0.5rem);
}

.archivia-newsletter__button {
    --_bg:     var(--primary);
    --_fg:     var(--secondary);
    --_border: var(--primary);

    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    padding: var(--btn-space, var(--space-s) var(--space-m));
    background: var(--_bg);
    color: var(--_fg);
    border: 1px solid var(--_border);
    font-family: inherit;
    font-size: var(--text-m, 1rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.archivia-newsletter__button::after {
    content: "→";
    display: inline-block;
    transition: transform 0.25s ease;
}

.archivia-newsletter__button:hover,
.archivia-newsletter__button:focus-visible {
    --_bg:     var(--secondary);
    --_fg:     var(--primary);
    outline: none;
}

.archivia-newsletter__button:hover::after,
.archivia-newsletter__button:focus-visible::after {
    transform: translateX(4px);
}

/* Loading state: swap label → "iscrizione in corso…", suppress the arrow. */
.archivia-newsletter__button-label,
.archivia-newsletter__button-loading {
    display: inline-block;
}
.archivia-newsletter__button-loading {
    display: none;
}
.archivia-newsletter__button[aria-busy="true"] {
    cursor: progress;
    opacity: 0.7;
}
.archivia-newsletter__button[aria-busy="true"] .archivia-newsletter__button-label {
    display: none;
}
.archivia-newsletter__button[aria-busy="true"] .archivia-newsletter__button-loading {
    display: inline-block;
}
.archivia-newsletter__button[aria-busy="true"]::after {
    content: "";
}

/* Inline status message (success/error from Mailchimp JSONP response). */
.archivia-newsletter__message {
    margin: 0;
    padding: var(--space-s, 0.85rem) var(--space-m, 1rem);
    border: 1px solid currentColor;
    font-size: var(--text-s, 0.9rem);
    line-height: 1.45;
    letter-spacing: 0.01em;
}

.archivia-newsletter__message a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.archivia-newsletter__message--success {
    color: var(--primary);
    background: var(--secondary, transparent);
    border-color: var(--primary);
}

.archivia-newsletter__message--error {
    color: #b3261e;
    background: transparent;
    border-color: #b3261e;
}

/* Done state: form has been submitted successfully — center the message. */
.archivia-newsletter--done .archivia-newsletter__form {
    gap: 0;
}
.archivia-newsletter--done .archivia-newsletter__message {
    text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   ROF 2026 — landing page (Agnese Franchini × Archivia)
   Uses Archivia design tokens (--primary, --secondary, --space-*, --text-*).
   ─────────────────────────────────────────────────────────────────────────── */

.rof2026 {
    font-family: "Jost", sans-serif;
    color: var(--primary);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-m, 1.25rem);
}

.rof2026__hero {
    text-align: center;
    padding-block: var(--space-2xl, 4rem) var(--space-xl, 3rem);
}

.rof2026__title {
    margin: 0 0 var(--space-s, 0.75rem);
    /* --text-3xl pegs to 4rem on every viewport (see artists-reveal note above). */
    font-size: clamp(2rem, 7vw, var(--text-3xl, 2.5rem));
    letter-spacing: 0.02em;
}

.rof2026__subtitle {
    margin: 0 auto var(--space-s, 0.75rem);
    max-width: 42em;
    font-size: var(--text-l, 1.15rem);
    color: var(--primary-l-1);
}

.rof2026__place {
    margin: 0;
    font-size: var(--text-s, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary-l-2);
}

.rof2026__status {
    margin-bottom: var(--space-l, 2rem);
    padding: var(--space-m, 1.25rem);
    text-align: center;
    border: 1px solid var(--primary-l-3);
    font-size: var(--text-m, 1rem);
}

.rof2026__status--success {
    border-color: var(--primary);
    background: var(--secondary);
}

.rof2026__status--cancel {
    color: var(--primary-l-1);
}

.rof2026__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-l, 2rem);
    padding-bottom: var(--space-2xl, 4rem);
}

.rof2026-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--primary-l-3);
    background: var(--secondary-10);
}

.rof2026-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.rof2026-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.5rem);
    padding: var(--space-m, 1.25rem);
}

.rof2026-card__title {
    margin: 0;
    font-size: var(--text-l, 1.15rem);
    letter-spacing: 0.01em;
}

.rof2026-card__artist {
    margin: 0 0 var(--space-xs, 0.5rem);
    font-size: var(--text-s, 0.95rem);
    color: var(--primary-l-1);
}

.rof2026-card__format {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s, 0.75rem) var(--space-m, 1.25rem);
    font-size: var(--text-m, 1rem);
}

.rof2026-card__format-option {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}

.rof2026-card__format-option input[type="radio"] {
    width: 1.25em;
    height: 1.25em;
    accent-color: var(--primary);
}

.rof2026-card__price {
    margin: var(--space-xs, 0.5rem) 0 0;
    font-size: var(--text-l, 1.15rem);
    font-weight: 500;
}

.rof2026-card__price--onrequest {
    font-style: italic;
    font-size: var(--text-m, 1rem);
    color: var(--primary-l-1);
}

.rof2026-card__availability {
    margin: 0;
    font-size: var(--text-xs, 0.8rem);
    color: var(--primary-l-2);
}

.rof2026-card__buy {
    appearance: none;
    cursor: pointer;
    width: 100%;
    margin-top: var(--space-xs, 0.5rem);
    padding: var(--space-s) var(--space-m);
    background: var(--primary);
    color: var(--secondary);
    border: 1px solid var(--primary);
    font-family: inherit;
    font-size: var(--text-m, 1rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background 0.25s ease, color 0.25s ease;
}

.rof2026-card__buy:hover,
.rof2026-card__buy:focus-visible {
    background: var(--secondary);
    color: var(--primary);
    outline: none;
}

.rof2026-card__buy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rof2026-card__pickup {
    margin: 0;
    font-size: var(--text-xs, 0.8rem);
    color: var(--primary-l-2);
}

.rof2026-card__sold {
    margin: var(--space-xs, 0.5rem) 0 0;
    font-style: italic;
    color: var(--primary-l-1);
}

.rof2026-card__error {
    margin: 0;
    font-size: var(--text-xs, 0.8rem);
    color: #b3261e;
}

.rof2026-card__inquiry-link {
    margin-top: var(--space-xs, 0.5rem);
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.rof2026__inquiry {
    max-width: 42em;
    margin: 0 auto;
    padding-block: var(--space-2xl, 4rem);
    border-top: 1px solid var(--primary-l-3);
}

.rof2026__inquiry-heading {
    margin: 0 0 var(--space-xs, 0.5rem);
    /* --text-2xl pegs to 2.83rem on every viewport (same MIN>MAX bug as --text-3xl). */
    font-size: clamp(1.5rem, 5vw, var(--text-2xl, 1.75rem));
    text-align: center;
}

.rof2026__inquiry-description {
    margin: 0 0 var(--space-l, 2rem);
    text-align: center;
    color: var(--primary-l-1);
}

.rof2026-richiesta {
    display: flex;
    flex-direction: column;
    gap: var(--space-m, 1.25rem);
}

.rof2026-richiesta__row {
    display: flex;
    gap: var(--space-m, 1.25rem);
}

.rof2026-richiesta__row .rof2026-richiesta__field {
    flex: 1;
}

.rof2026-richiesta__field {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.rof2026-richiesta__field label {
    font-size: var(--text-s, 0.95rem);
    color: var(--primary-l-1);
}

.rof2026-richiesta__field input,
.rof2026-richiesta__field select,
.rof2026-richiesta__field textarea {
    padding: var(--space-xs, 0.5rem) var(--space-s, 0.75rem);
    border: 1px solid var(--primary-l-3);
    background: var(--secondary);
    color: var(--primary);
    font-family: inherit;
    font-size: var(--text-m, 1rem);
}

.rof2026-richiesta__opera-picker {
    display: flex;
    align-items: center;
    gap: var(--space-s, 0.75rem);
}

.rof2026-richiesta__opera-picker select {
    flex: 1;
}

.rof2026-richiesta__opera-preview {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border: 1px solid var(--primary-l-3);
    flex-shrink: 0;
}

.rof2026-richiesta__field--consent {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5em;
    font-size: var(--text-xs, 0.8rem);
}

.rof2026-richiesta__field--consent label {
    display: flex;
    gap: 0.5em;
    align-items: flex-start;
}

.rof2026-richiesta__submit {
    appearance: none;
    cursor: pointer;
    padding: var(--space-s) var(--space-m);
    background: var(--primary);
    color: var(--secondary);
    border: 1px solid var(--primary);
    font-family: inherit;
    font-size: var(--text-m, 1rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rof2026-richiesta__submit:hover,
.rof2026-richiesta__submit:focus-visible {
    background: var(--secondary);
    color: var(--primary);
    outline: none;
}

.rof2026-richiesta__submit:disabled {
    opacity: 0.55;
    cursor: progress;
}

.rof2026-richiesta__message {
    margin: 0;
    padding: var(--space-s, 0.75rem);
    text-align: center;
    border: 1px solid var(--primary-l-3);
}

.rof2026-richiesta__message--success {
    border-color: var(--primary);
    background: var(--secondary);
}

.rof2026-richiesta__message--error {
    color: #b3261e;
    border-color: #b3261e;
}

/* ───────────────────────────────────────────────────────────────────────────
   ROF 2026 — homepage popup
   ─────────────────────────────────────────────────────────────────────────── */

.rof2026-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-m, 1.25rem);
}

/* The [hidden] attribute is how the JS shows/hides this — without this rule,
   the plain-class display:flex above (an author style) outranks the
   browser's default [hidden]{display:none} (a UA style) in the cascade, so
   toggling the attribute would have no visible effect. */
.rof2026-popup[hidden] {
    display: none;
}

.rof2026-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.rof2026-popup__card {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--secondary);
    color: var(--primary);
    font-family: "Jost", sans-serif;
    box-shadow: var(--shadow-xl, 0 6px 48px rgba(0,0,0,0.3));
    animation: rof2026-popup-in 0.3s ease;
}

@keyframes rof2026-popup-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rof2026-popup__close {
    position: absolute;
    top: var(--space-xs, 0.5rem);
    right: var(--space-xs, 0.5rem);
    z-index: 1;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    cursor: pointer;
    background: var(--secondary);
    color: var(--primary);
    border: 1px solid var(--primary-l-3);
    font-size: 1.5rem;
    line-height: 1;
}

.rof2026-popup__image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 45vh;
    overflow: hidden;
    background: var(--secondary-d-1, #b6b4af);
}

.rof2026-popup__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 45vh;
    object-fit: contain;
}

.rof2026-popup__body {
    padding: var(--space-l, 2rem);
    text-align: center;
}

.rof2026-popup__title {
    margin: 0 0 var(--space-xs, 0.5rem);
    font-size: var(--text-xl, 1.5rem);
    letter-spacing: 0.02em;
}

.rof2026-popup__text {
    margin: 0 0 var(--space-m, 1.25rem);
    font-size: var(--text-s, 0.95rem);
    color: var(--primary-l-1);
}

.rof2026-popup__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-s) var(--space-l);
    background: var(--primary);
    color: var(--secondary);
    border: 1px solid var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-m, 1rem);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}

.rof2026-popup__cta:hover,
.rof2026-popup__cta:focus-visible {
    background: var(--secondary);
    color: var(--primary);
    outline: none;
}