/* Nysnö Public CSS */
/* Shared base styles for all public-facing pages (community, checkout, events, etc.) */

/* Font Declarations */
@font-face {
    font-family: 'Avertape';
    src: url('../nysno-images/avertape-semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averta';
    src: url('../nysno-images/averta-light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averta';
    src: url('../nysno-images/averta-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averta';
    src: url('../nysno-images/averta-regular-italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Averta';
    src: url('../nysno-images/averta-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averta';
    src: url('../nysno-images/averta-semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averta';
    src: url('../nysno-images/averta-extrabold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averta';
    src: url('../nysno-images/averta-black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Design Tokens (matching nysno.se) */
:root {
    --c-purple: #75479a;
    --c-pink: #f57aa7;
    --c-bg: #eae0d2;
    --c-text: #1a1b1f;
    --c-text-muted: #8d8579;
    --c-border: #ddd3c4;
    --c-card-bg: #fff;
    --c-card-border: #ddd3c4;
    --c-gradient: linear-gradient(135deg, #75479a 0%, #f57aa7 100%);
    --font-body: 'Averta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Avertape', serif;
    --radius-sm: 4px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --shadow-card: 0 2px 8px rgba(26, 27, 31, 0.06);
    --shadow-hover: 0 4px 16px rgba(26, 27, 31, 0.1);
    --max-width: 1400px;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Page-level flash messages — top-of-page banners for form feedback. */
.page-flash {
    text-align: center;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
.page-flash--ok  { background: #d4edda; color: #155724; }
.page-flash--err { background: #f8d7da; color: #721c24; }

/* Navbar fix: without langpicker the space-between pushes logo away */
.nav-menu.w-nav-menu {
    justify-content: flex-start;
}

/* Our logo link points to external https://nysno.se and never becomes
   Webflow's w--current. Mimic the w--current state so icon vertical alignment
   matches nysno.se at all breakpoints. */
.navbar-logo {
    padding-top: 0;
}

/* Kill whitespace gaps between inline-block .w-dropdown siblings
   (nysno.se live serves minified HTML without whitespace between tags) */
.nav-menu.w-nav-menu > div {
    font-size: 0;
}
.nav-menu.w-nav-menu > div > .w-dropdown {
    font-size: 1rem;
}
/* The in-menu langpicker would inherit the container's font-size:0 and render
   "Swe/Eng" at 0px. Restore it — covers SV (langpicker is a grandchild) and EN
   (langpicker is a direct .nav-menu child / matches the font-size:0 rule). */
.nav-menu.w-nav-menu .langpicker {
    font-size: 1rem;
}

.w-dropdown-list {
    display: none;
}

/* Desktop only: open dropdowns on hover (no JS). Below the burger breakpoint
   the menu uses click toggling instead, so hover must NOT fire there. */
@media (min-width: 1186px) {
    .w-dropdown:hover > .w-dropdown-list {
        display: block !important;
    }
}

/* Match nysno.se inline override (pushes underlines 0.25em below baseline) */
.footer-link,
.link,
.primary-button {
    text-underline-offset: 0.25em;
}

/* Shared main content area */
.nysno-main {
    min-height: calc(100vh - 200px);
    background-color: var(--c-bg);
    font-family: var(--font-body);
    color: var(--c-text);
}

/* Shared alert styles */
.nysno-alert {
    max-width: var(--max-width);
    margin: 16px auto;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: var(--font-body);
}

.nysno-alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.nysno-alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Community subnav (shared — shown for logged-in members on all public pages) */
.community-subnav {
    background-color: var(--c-bg);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 999;
}

.community-subnav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
}

.community-subnav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.community-subnav-link {
    color: var(--c-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.2s ease;
    padding: 12px 0;
    position: relative;
}

.community-subnav-link:hover {
    color: var(--c-purple);
}

.community-subnav-link.active {
    color: var(--c-purple);
}

.community-subnav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-gradient);
}

.community-subnav-user {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--c-text-muted);
}

.community-subnav-logout {
    color: var(--c-text);
    text-decoration: underline;
    font-weight: 600;
    font-size: 14px;
    text-underline-offset: 0.25em;
    transition: color 0.2s ease;
}

.community-subnav-logout:hover {
    color: var(--c-text-muted);
}

/* Logout: text on desktop, sign-out icon on mobile. Base (icon hidden) must
   sit before the mobile media query below so the override wins on small screens. */
.community-subnav-logout .logout-icon { display: none; vertical-align: middle; }

.community-nav-badge {
    background: var(--c-purple);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

@media (max-width: 991px) {
    .community-subnav-inner {
        padding: 0 20px;
        flex-wrap: wrap;
        height: auto;
        min-height: 48px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .community-subnav-links {
        gap: 16px;
    }

    /* On mobile keep the inbox icon + logout reachable; hide only the name. */
    .community-subnav-user > span {
        display: none;
    }
    /* Logout shrinks to just the sign-out icon on mobile. */
    .community-subnav-logout .logout-text { display: none; }
    .community-subnav-logout .logout-icon { display: inline-block; }
}

@media (max-width: 767px) {
    .community-subnav-links {
        gap: 12px;
        flex-wrap: wrap;
    }

    .community-subnav-link {
        font-size: 13px;
    }
}

/* Mobile hamburger menu support — collapse to burger at <= 1185px (overrides
   Webflow's built-in 991px breakpoint so the menu folds earlier). */
@media (max-width: 1185px) {
    /* Show the burger and hide the inline desktop menu until it's toggled open. */
    .navbar .menu-button-3.w-nav-button { display: block; }
    .nav-menu.w-nav-menu:not(.community-mobile-open) { display: none; }

    /* Don't leave a lone Swe/Eng picker hanging in the navbar — hide the
       standalone langpicker and surface it inside the hamburger instead. */
    .langpicker:not(.mobile) { display: none; }
    .langpicker.mobile { display: flex; }

    .nav-menu.w-nav-menu.community-mobile-open {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--c-bg);
        z-index: 10000;
        padding: 24px 1.5rem 32px;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }

    /* Burger → X animation (matches live: 35px bun shrinks to 28px when open) */
    .menu-button-3.community-nav-open .top-bun,
    .menu-button-3.community-nav-open .bottom-bun {
        width: 28px;
    }

    .menu-button-3.community-nav-open .top-bun {
        transform: translate(3.5px, 0) rotate(-45deg);
    }

    .menu-button-3.community-nav-open .patty {
        opacity: 0;
    }

    .menu-button-3.community-nav-open .bottom-bun {
        transform: translate(3.5px, 0) rotate(45deg);
    }

    .top-bun, .patty, .bottom-bun {
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    /* Stack dropdowns vertically */
    .nav-menu.w-nav-menu.community-mobile-open .w-dropdown {
        position: relative;
        width: 100%;
    }

    .nav-menu.w-nav-menu.community-mobile-open .dropdown-toggle {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
    }

    /* Chevron to the LEFT of the label. Webflow positions this icon
       absolutely (right:0), so it must go back into flow for flex order to work. */
    .nav-menu.w-nav-menu.community-mobile-open .w-icon-dropdown-toggle {
        position: static;
        inset: auto;
        order: -1;
        margin: 0 10px 0 0;
    }

    .nav-menu.w-nav-menu.community-mobile-open .w-dropdown-list {
        position: static !important;
        display: none;
        background: transparent;
        box-shadow: none;
    }

    .nav-menu.w-nav-menu.community-mobile-open .w-dropdown-list.w--open {
        display: block;
    }

    /* Indent the expanded sub-menu items under their parent. */
    .nav-menu.w-nav-menu.community-mobile-open .w-dropdown-list .dropdown-link {
        padding-left: 26px;
    }

    .nav-menu.w-nav-menu.community-mobile-open .nav-menu-items {
        display: none;
    }

    /* Disable hover-based dropdown on mobile */
    .nav-menu.w-nav-menu.community-mobile-open .w-dropdown:hover > .w-dropdown-list {
        display: none;
    }

    .nav-menu.w-nav-menu.community-mobile-open .w-dropdown:hover > .w-dropdown-list.w--open {
        display: block;
    }
}

/* Static-page content typography (used by /en, /sv static pages).
   .en-static-content kept as alias for backwards compat. */
.page-static-content,
.en-static-content {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--c-text);
}

.page-static-content p,
.en-static-content p {
    margin-bottom: 1.5rem;
}

.page-static-content a,
.en-static-content a {
    color: var(--c-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.page-static-content a:hover,
.en-static-content a:hover {
    color: var(--c-purple);
}

.page-static-content h2,
.en-static-content h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    margin: 2.5rem 0 1rem;
    color: var(--c-text);
}

.page-static-content h3,
.en-static-content h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    margin: 2rem 0 0.75rem;
    color: var(--c-text);
}

.page-static-content h4,
.en-static-content h4 {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    margin: 1.5rem 0 0.5rem;
    color: var(--c-text);
}

/* Webflow content sometimes wraps headings in <strong>; preserve heading
   weight without doubling up on bold display. */
.page-static-content h2 strong,
.page-static-content h3 strong,
.page-static-content h4 strong,
.en-static-content h2 strong,
.en-static-content h3 strong,
.en-static-content h4 strong {
    font-weight: inherit;
}

.page-static-content strong,
.en-static-content strong {
    font-weight: 700;
}

/* Italics aren't used in body content — strip them off em/i/cite. */
.page-static-content em,
.page-static-content i,
.page-static-content cite,
.en-static-content em,
.en-static-content i,
.en-static-content cite {
    font-style: normal;
}

.page-static-content ul,
.en-static-content ul,
.page-static-content ol,
.en-static-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.page-static-content li,
.en-static-content li {
    margin-bottom: -0.5rem;
}

.page-static-content blockquote,
.en-static-content blockquote {
    border-left: 4px solid var(--c-purple, #75479a);
    margin: 1.5rem 0;
    padding: 0.5rem 1.25rem;
    color: var(--c-text);
}

.page-static-content img,
.en-static-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem 0;
    border-radius: 6px;
}

.lavin-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    margin: 1.5rem 0;
}
.lavin-logos img {
    max-width: 250px;
    width: 50%;
    height: auto;
    margin: 0;
    border-radius: 0;
}


.page-static-content figure,
.en-static-content figure {
    margin: 1.5rem 0;
}

.page-static-content figure img,
.en-static-content figure img {
    margin-bottom: 0.5rem;
}

.page-static-content figcaption,
.en-static-content figcaption {
    font-size: 0.95rem;
    color: var(--c-muted, #666);
}

.page-static-content hr,
.en-static-content hr {
    border: none;
    border-top: 1px solid #e2e2e2;
    margin: 2.5rem 0;
}

/* Stray zero-width-joiners from Webflow rich-text drift; collapse the
   resulting empty paragraphs so they don't add visual gaps. */
.page-static-content p:empty,
.en-static-content p:empty {
    display: none;
}

/* Retreat program list & single ----------------------------------------- */

.retreat-list-intro {
    margin-bottom: 2.5rem;
}

.retreat-list-wrap {
    padding: 0 4vw 4rem;
}

.retreat-list {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.retreat-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e6e3df;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.retreat-card:hover {
    border-color: var(--c-purple, #75479a);
    box-shadow: 0 12px 32px rgba(117, 71, 154, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.retreat-card-image {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
}

.retreat-card-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.5rem 1.75rem 1.75rem;
}

.retreat-card-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.75rem;
    color: var(--c-text);
}

.retreat-card-dates {
    font-size: 1rem;
    color: var(--c-text);
    margin-bottom: 1rem;
}

.retreat-card-date-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-muted, #666);
    margin-bottom: 0.15rem;
}

.retreat-card-location {
    font-size: 1rem;
    color: var(--c-text);
    margin-bottom: 1rem;
}

.retreat-card-pills,
.retreat-single-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.retreat-pill,
.retreat-single-status {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.retreat-pill-open,
.retreat-pill-few_slots,
.retreat-status-open,
.retreat-status-few_slots {
    background: #d8efd6;
    color: #2f6c2a;
}

.retreat-pill-waitlist,
.retreat-pill-not_yet_open,
.retreat-status-waitlist,
.retreat-status-not_yet_open {
    background: #fff1d6;
    color: #7d5400;
}

.retreat-pill-closed,
.retreat-pill-full,
.retreat-pill-hidden,
.retreat-status-closed,
.retreat-status-full,
.retreat-status-hidden {
    background: #f0d8d8;
    color: #7a3535;
}

.retreat-pill-installments {
    background: #ece6f4;
    color: var(--c-purple, #75479a);
}

.retreat-card-cta {
    display: inline-flex;
    align-self: flex-start;
    margin-top: auto;
    background: #fef787;
    color: var(--c-text);
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.retreat-card:hover .retreat-card-cta {
    background: #ffe855;
}

/* Retreat single page form + Hälsodeklaration ---------------------------- */
/* Webflow's shared CSS forces labels uppercase + letter-spaced — override
   that for any form rendered inside our page-static-content wrappers. */

.retreat-signup-form,
.halso-form,
.newsletter-form {
    display: grid;
    gap: 1.25rem;
    margin-top: 1rem;
    max-width: 720px;
}

.retreat-signup-form label,
.halso-form label,
.halso-form legend,
.newsletter-form label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--c-text);
    line-height: 1.45;
    margin: 0;
}

/* Webflow's base CSS adds margins + float to inputs (margin-bottom:10px on
   text inputs, float:left on checkboxes/radios). Reset for our forms. */
.retreat-signup-form input,
.retreat-signup-form textarea,
.retreat-signup-form select,
.halso-form input,
.halso-form textarea,
.halso-form select,
.newsletter-form input {
    margin: 0;
    float: none;
}

.retreat-signup-form > label,
.halso-form .form-field > label,
.newsletter-form > label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Accordion steps -------------------------------------------------------- */
.halso-step {
    background: #fff;
    border: 1px solid #e6e3df;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.halso-step[open] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.halso-step-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    user-select: none;
}

.halso-step-summary::-webkit-details-marker { display: none; }
.halso-step-summary::marker { display: none; content: ''; }

.halso-step-num {
    flex: 0 0 auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-purple, #75479a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #ece6f4;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}

.halso-step-title {
    flex: 1 1 auto;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.3;
}

.halso-step-chevron {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
    color: var(--c-text);
}

.halso-step[open] .halso-step-chevron {
    transform: rotate(180deg);
}

.halso-step-body {
    padding: 0 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Each question wrapper inside a step body. */
.halso-step-body > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Empty marker divs that Webflow used as section dividers — collapse them. */
.halso-step-body > div:empty {
    display: none;
}

/* Outer question label (first label inside each question wrapper). Picks up
   both radio-group question prompts and textarea/input field labels. */
.halso-step-body > div > label:first-child,
.halso-tail > div > label:first-child {
    margin-bottom: 0.35rem;
    font-weight: 600;
}

/* Always-visible block beneath the accordions: emergency contact + consent.
   Mirrors halso-step-body spacing so the form feels continuous. */
.halso-tail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}
.halso-tail > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.halso-tail label:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 400;
    cursor: pointer;
}

/* Inputs and textareas: consistent rounded look, full width of their column. */
.retreat-signup-form input[type="text"],
.retreat-signup-form input[type="email"],
.retreat-signup-form input[type="tel"],
.retreat-signup-form input[type="number"],
.retreat-signup-form textarea,
.halso-form input[type="text"],
.halso-form input[type="email"],
.halso-form input[type="tel"],
.halso-form input[type="number"],
.halso-form textarea,
.newsletter-form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d8d4ce;
    border-radius: 8px;
    font: inherit;
    background: #fff;
    color: var(--c-text);
}
.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--c-purple, #75479a);
    box-shadow: 0 0 0 3px rgba(117, 71, 154, 0.15);
}
.newsletter-form-consent {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 400 !important;
    font-size: 0.95rem !important;
    color: var(--c-muted, #666) !important;
}
.newsletter-form-consent input[type="checkbox"] {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}
.newsletter-form button[type="submit"] {
    justify-self: start;
    border: none;
    cursor: pointer;
}

/* /podden — Spotify episode embeds in a two-column grid */
.podden-episodes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0 2rem;
}
.podden-episode {
    width: 100%;
    height: 152px;
    border: 0;
    border-radius: 12px;
    display: block;
}
@media (max-width: 700px) {
    .podden-episodes { grid-template-columns: 1fr; }
}

.retreat-signup-form textarea,
.halso-form textarea {
    resize: vertical;
    min-height: 110px;
}

.retreat-signup-form input:focus,
.retreat-signup-form textarea:focus,
.halso-form input:focus,
.halso-form textarea:focus {
    outline: 2px solid var(--c-purple, #75479a);
    outline-offset: 1px;
    border-color: var(--c-purple, #75479a);
}

/* Radio option rows — input + visible "Ja"/"Nej" span on the same line. */
.retreat-signup-radio,
.halso-form label:has(input[type="radio"]) {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.65rem;
    font-weight: 400;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    padding: 0.35rem 0;
    line-height: 1.4;
    cursor: pointer;
}

.halso-form label input[type="radio"],
.retreat-signup-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--c-purple, #75479a);
    flex: 0 0 18px;
}

.halso-form label input[type="radio"] + span,
.retreat-signup-radio span {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--c-text);
}

/* MADRS / MDQ-style multi-option questions: stack each label vertically with
   a little gap. Picks the inner radio-wrapping labels, not the outer question
   prompt label. */
.halso-step-body > div:has(input[type="radio"]) > label:has(input[type="radio"]) {
    display: flex !important;
    align-items: flex-start;
    padding: 0.25rem 0;
}

/* Checkbox rows — same alignment treatment. */
.retreat-signup-checkbox,
.halso-form label:has(input[type="checkbox"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 0.65rem;
    font-weight: 400;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.45;
    cursor: pointer;
}

.retreat-signup-checkbox input[type="checkbox"],
.halso-form label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--c-purple, #75479a);
    flex: 0 0 18px;
}

.retreat-signup-checkbox span,
.halso-form > div > label > input[type="checkbox"] + span {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
}

.retreat-signup-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.retreat-signup-fieldset legend {
    margin-bottom: 0.5rem;
    padding: 0;
}

.retreat-signup-form .required,
.halso-form .required {
    color: var(--c-purple, #75479a);
    font-style: normal;
    font-weight: 700;
}

.retreat-signup-submit,
.halso-submit {
    border: none;
    cursor: pointer;
    margin-top: 0.75rem;
    align-self: flex-start;
    font-size: 1rem;
}

/* Inline submit-validation summary: lists every required field the user
   hasn't filled in, grouped by accordion step, with anchor links that open
   the right step and scroll to the field. */
.halso-validation {
    background: #fdeef3;
    border: 1px solid #f3b8cd;
    border-left: 4px solid var(--c-pink, #f57aa7);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 0.5rem 0 0.25rem;
    color: var(--c-text);
    outline: none;
}
.halso-validation:focus { box-shadow: 0 0 0 3px rgba(245, 122, 167, 0.25); }
.halso-validation[hidden] { display: none; }
.halso-validation-heading {
    margin: 0 0 0.75rem;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;
}
.halso-validation-group + .halso-validation-group {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(117, 71, 154, 0.18);
}
.halso-validation-step {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-purple, #75479a);
    margin-bottom: 0.25rem;
}
.halso-validation ul {
    margin: 0;
    padding: 0 0 0 1.1rem;
    list-style: disc;
}
.halso-validation li { margin: 0.15rem 0; }
.halso-validation a {
    color: var(--c-purple, #75479a);
    text-decoration: underline;
    font-weight: 500;
}
.halso-validation a:hover { color: var(--c-pink, #f57aa7); }

/* Persistent visual marker on a question container that is still missing.
   Uses outline rather than border so the layout doesn't shift when the
   marker appears or disappears. */
.halso-step-body > div.halso-field-missing,
.halso-tail > div.halso-field-missing {
    outline: 2px solid rgba(245, 122, 167, 0.55);
    outline-offset: 6px;
    border-radius: 4px;
}

/* Brief flash when the user follows an anchor link to a missing field. */
.halso-field-flash {
    animation: halso-flash 2.2s ease-out;
    border-radius: 6px;
}
@keyframes halso-flash {
    0%   { background-color: rgba(245, 122, 167, 0.35); }
    60%  { background-color: rgba(245, 122, 167, 0.18); }
    100% { background-color: transparent; }
}

.halso-form-wrap {
    max-width: 720px;
}

.halso-form-wrap h1 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 1rem;
    text-transform: none;
    letter-spacing: 0;
}

.retreat-list-empty {
    text-align: center;
    padding: 2rem;
    color: var(--c-text);
}

.retreat-single-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.retreat-single-price {
    font-weight: 600;
    font-size: 1.1rem;
}

.retreat-single-slots {
    color: var(--c-muted, #666);
}

/* Single retreat page hero — autoplay video, no overlay, no play button */
.retreat-single-hero {
    width: 100%;
    aspect-ratio: 21 / 9;
    background: #000;
    overflow: hidden;
}

.retreat-single-hero-video,
.retreat-single-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.retreat-single-title {
    font-family: var(--font-body);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 0.75rem;
    color: var(--c-text);
}

.retreat-single-dates {
    font-size: 1.25rem;
    color: var(--c-text);
    margin: 0 0 0.5rem;
}

.retreat-single-location {
    font-size: 1.1rem;
    color: var(--c-text);
    margin: 0 0 1.5rem;
}

.retreat-single-location a {
    color: var(--c-purple, #75479a);
    text-decoration: underline;
}

@media (max-width: 700px) {
    .retreat-single-title { font-size: 36px; }
    .retreat-single-hero { aspect-ratio: 16 / 9; }
}

/* Single-page body + gallery (mirrors Webflow's two-column layout). */
.retreat-single-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 3rem;
    margin: 2.5rem 0;
}

.retreat-single-body-text > :first-child { margin-top: 0; }

.retreat-single-body-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.retreat-single-body-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    margin: 0;
}

@media (max-width: 900px) {
    .retreat-single-body {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Testimonial carousel ---------------------------------------------------- */

.testimonial-carousel {
    max-width: 880px;
    margin: 4rem auto;
    padding: 3rem 4vw;
    position: relative;
    text-align: center;
}

.testimonial-carousel-track {
    position: relative;
    min-height: 280px;
}

.testimonial-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.testimonial-slide.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.testimonial-mark {
    color: var(--c-purple, #75479a);
    opacity: 0.85;
}

.testimonial-quote {
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1.5;
    font-weight: 500;
    margin: 0;
    color: var(--c-text);
    max-width: 720px;
    text-transform: none;
    letter-spacing: 0;
}

.testimonial-author {
    margin: 0;
    font-size: 1rem;
    color: var(--c-muted, #666);
    font-weight: 600;
}

.testimonial-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.testimonial-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #d8d4ce;
    background: #fff;
    color: var(--c-text);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.testimonial-nav:hover {
    border-color: var(--c-purple, #75479a);
    background: #faf7fd;
}

.testimonial-dots {
    display: flex;
    gap: 0.5rem;
}

.testimonial-dot {
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 50%;
    background: #d8d4ce;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.testimonial-dot.is-active {
    background: var(--c-purple, #75479a);
    transform: scale(1.4);
}

@media (max-width: 700px) {
    .testimonial-quote { font-size: 20px; }
    .testimonial-carousel { padding: 2rem 4vw; }
}

/* Feature card list (om-community activities, samtalskontakt psychologists,
   podcast/Sällskapet feature blocks). Two layout variants:
   - .feature-list--grid (default): image-on-top cards in an auto-fit grid
   - .feature-list--rows: horizontal image-left cards, one per row */

.feature-list {
    max-width: 1100px;
    margin: 1rem auto 2.5rem;
    padding: 0 4vw;
    display: grid;
    gap: 1.5rem;
}

/* When a feature-list sits directly under the hero, match the inter-card
   gap so the visual rhythm is consistent. */
.event-hero-full + .feature-list { margin-top: 1.5rem; }

/* Hero-with-intro (see .event-hero-intro in nysno-events.css) followed by a
   feature list — keep the inter-block rhythm consistent. */
.event-hero-block + .feature-list { margin-top: 2rem; }

/* When a feature-list follows a content-spacing block (intro paragraph),
   the content-spacing's 4vw bottom padding stacks with our top margin;
   pull the list back up so they sit close. */
.event-detail-content-spacing + .feature-list {
    margin-top: calc(-4vw + 2.5rem);
}

.feature-list--grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--feature-list-min, 280px), 1fr));
}

/* Fixed column counts (e.g. cols=2) — fall back to a single column on mobile. */
.feature-list--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-list--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 700px) {
    .feature-list--cols-2,
    .feature-list--cols-3,
    .feature-list--cols-4 { grid-template-columns: 1fr; }
}

.feature-list--rows {
    grid-template-columns: 1fr;
}

/* Partner cards (samarbeten): equal air above and below the card group. */
.partner-cards .feature-list {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* Partner cards (samarbeten): the left image is a brand logo, so contain it on
   a white panel instead of cover-cropping it like a photo. */
.partner-cards .feature-list--rows .feature-card-image {
    flex: 0 0 220px;
    background-size: 160px auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
}
@media (max-width: 700px) {
    .partner-cards .feature-list--rows .feature-card-image {
        min-height: 140px;
        aspect-ratio: auto;
    }
}

/* Lead cell — a text statement that occupies a grid cell beside the cards
   (home top row). No card chrome, so it reads as an intro rather than a card.
   Top-aligned: next to the taller image cards, centring would leave an empty
   gap above the text (visible on tablet/landscape-phone widths). */
.feature-lead {
    display: flex;
    align-items: flex-start;
    padding-right: 1rem;
}

.feature-lead-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--c-text);
}

@media (max-width: 700px) {
    .feature-lead {
        align-items: start;
        padding-right: 0;
        padding-bottom: 0.5rem;
    }
    .feature-lead-text { font-size: 18px; }
}

/* Home top module — the hero card and the feature panel below it form one
   light surface. The panel matches the hero card's width (40px side margins)
   and joins flush to its bottom, so the whole thing reads as a single unit. */
.home-hero-module .event-hero-full {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.home-feature-panel {
    margin: 0 40px;
    background: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    /* 4vw inner padding lines the lead text up with the hero title inset
       (hero margin-left:40px + padding-left:4vw). */
    padding: 24px 4vw 32px;
}

/* The feature list fills the panel — drop its own centred max-width/padding. */
.home-feature-panel .feature-list {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Cards now sit on the white panel, so give them the beige page tint. */
.home-feature-panel .feature-card {
    background: #f8f7f4;
}

/* Wide desktop only: lay the image beside the text within each card so the
   images stay modest. Below 1200px the cards stack (image on top) again, which
   reads better once each card gets narrower. */
@media (min-width: 1201px) {
    .home-feature-panel .feature-card {
        flex-direction: row;
        align-items: stretch;
    }
    .home-feature-panel .feature-card-image {
        flex: 0 0 40%;
        aspect-ratio: auto;
        align-self: stretch;
        min-height: 200px;
    }
    .home-feature-panel .feature-card-body {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    /* Hero drops its 40px side margins on mobile — match the panel to it. */
    .home-feature-panel {
        margin: 0;
        padding: 16px 4vw 24px;
    }
}

.feature-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e3df;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.feature-list--rows .feature-card {
    flex-direction: row;
    align-items: stretch;
}

.feature-card.is-link:hover {
    border-color: var(--c-purple, #75479a);
    box-shadow: 0 12px 32px rgba(117, 71, 154, 0.10);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.feature-card-image {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    flex: 0 0 auto;
}

.feature-list--rows .feature-card-image {
    flex: 0 0 320px;
    aspect-ratio: auto;
    min-height: 220px;
}

@media (max-width: 700px) {
    .feature-list--rows .feature-card { flex-direction: column; }
    .feature-list--rows .feature-card-image {
        flex-basis: auto;
        aspect-ratio: 4 / 3;
        min-height: 0;
    }
}

.feature-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1 1 auto;
    justify-content: flex-start;
}

.feature-list--rows .feature-card-body {
    padding: 1.5rem 2rem;
}

.feature-card-eyebrow {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-muted, #666);
}

.feature-card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--c-text);
}

.feature-card-desc {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--c-text);
}

.feature-card-desc p { margin: 0 0 0.75em; }
.feature-card-desc p:last-child { margin-bottom: 0; }
.feature-card-desc a { color: var(--c-purple, #75479a); }

/* /omdomen — grid of testimonial pull-quote cards */
.testimonial-grid-wrap {
    padding: 0 4vw 3rem;
}
.testimonial-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.testimonial-grid-card {
    position: relative;
    margin: 0;
    padding: 2.25rem 1.75rem 1.75rem;
    background: #fff;
    border: 1px solid #e6e3df;
    border-radius: 16px;
    overflow: hidden;
}
.testimonial-grid-card blockquote {
    margin: 0;
    padding: 0;
    border: none;
    font-style: italic;
    line-height: 1.55;
    color: var(--c-text);
}
.testimonial-grid-mark {
    position: absolute;
    top: -0.4em;
    left: 0.6rem;
    font-family: 'Avertape', 'Averta', Georgia, serif;
    font-size: 6rem;
    line-height: 1;
    color: var(--c-purple, #75479a);
    opacity: 0.15;
    pointer-events: none;
}
@media (max-width: 700px) {
    .testimonial-grid { grid-template-columns: 1fr; }
}

.feature-card-contact {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
}

.feature-card-contact a {
    color: var(--c-purple, #75479a);
    text-decoration: none;
    font-weight: 600;
    word-break: break-all;
}

.feature-card-contact a:hover { text-decoration: underline; }

.feature-card-cta {
    display: inline-flex;
    align-self: flex-start;
    margin-top: auto;
    background: #fef787;
    color: var(--c-text);
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.feature-card.is-link:hover .feature-card-cta {
    background: #ffe855;
}

.home-events-cta {
    text-align: center;
    margin: 0 0 4rem;
}

/* Equalise the visible gap above the CTA across different preceding blocks.
   Each preceding block has a different bottom (padding/margin), so the negative
   top margin is tuned per-case to land at the same ~0.5rem gap. */
.feature-list + .home-events-cta       { margin-top: -2rem; }
.retreat-list-wrap + .home-events-cta  { margin-top: -3.5rem; }
.testimonial-carousel + .home-events-cta { margin-top: -6.5rem; }

/* FAQ accordion ---------------------------------------------------------- */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 880px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border: 1px solid #e6e3df;
    border-radius: 14px;
    overflow: hidden;
}

.faq-item[open] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.faq-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    user-select: none;
}

.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { display: none; content: ''; }

.faq-question {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-text);
}

.faq-chevron {
    flex: 0 0 auto;
    color: var(--c-text);
    transition: transform 0.2s ease;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1.5rem 1.5rem;
    color: var(--c-text);
    line-height: 1.6;
}

.faq-answer p { margin: 0 0 1rem; }
.faq-answer p:last-child { margin-bottom: 0; }

.faq-answer a {
    color: var(--c-purple, #75479a);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* /retreatprogram full-bleed photo between sections */
.retreatprogram-fullbleed {
    width: 100%;
    margin: 3rem 0;
    line-height: 0;
}

.retreatprogram-fullbleed img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 60vh;
    object-fit: cover;
}

/* Full-bleed photo carousel ----------------------------------------------- */

.photo-carousel {
    position: relative;
    width: 100%;
    margin: 3rem 0;
}

.photo-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.photo-carousel-track::-webkit-scrollbar { display: none; }

.photo-carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: var(--carousel-aspect, 21 / 9);
    background: #ddd;
    overflow: hidden;
}

.photo-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
}

.photo-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #1a1b1f;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, background 0.15s ease;
    padding: 0;
    z-index: 5;
}

.photo-carousel-prev { left: 1.5rem; }
.photo-carousel-next { right: 1.5rem; }

.photo-carousel-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}

.photo-carousel-dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 5;
}

.photo-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.photo-carousel-dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

@media (max-width: 700px) {
    .photo-carousel-prev { left: 0.5rem; }
    .photo-carousel-next { right: 0.5rem; }
    .photo-carousel-nav { width: 38px; height: 38px; }
}

/* Retreat program "Fyra steg" cards --------------------------------------- */

.retreat-steps-wrapper {
    padding: 0 4vw;
    margin: 3rem 0;
}

.retreat-steps-card {
    max-width: 880px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.retreat-steps-card .retreat-step + .retreat-step {
    border-top: 1px solid #f0ece6;
}

.retreat-step {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 1.75rem 0;
}

.retreat-steps-card .retreat-step:first-child { padding-top: 0; }
.retreat-steps-card .retreat-step:last-child  { padding-bottom: 0; }

.retreat-step-icon {
    flex: 0 0 120px;
}

.retreat-step-icon img {
    width: 120px;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
    display: block;
}

.retreat-step-body {
    flex: 1 1 auto;
}

.retreat-step-eyebrow {
    font-size: 0.95rem;
    color: var(--c-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.25rem;
}

.retreat-step-title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 0.5rem;
    line-height: 1.2;
    color: var(--c-text);
}

.retreat-step-body p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .retreat-step {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .retreat-step-icon { flex-basis: auto; }
    .retreat-step-icon img { width: 90px; margin: 0 auto; }
}

/* Newsletter promo card --------------------------------------------------- */

.newsletter-promo {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: #fff;
    border-radius: 16px;
    padding: 2.25rem 2.5rem;
    margin: 3rem auto;
    max-width: 900px;
}

.newsletter-promo-image {
    flex: 0 0 auto;
}

.newsletter-promo-image img {
    width: 140px;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
}

.newsletter-promo-text {
    flex: 1 1 auto;
}

.newsletter-promo-eyebrow {
    font-size: 0.95rem;
    color: var(--c-muted, #666);
    margin: 0 0 0.25rem;
}

.newsletter-promo-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.75rem;
    color: var(--c-text);
}

.newsletter-promo-body {
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    color: var(--c-text);
}

.newsletter-promo-cta {
    display: inline-block;
    background: #f7e988;
    color: var(--c-text);
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.newsletter-promo-cta:hover {
    background: #f0dd5a;
    color: var(--c-text);
    text-decoration: none;
}

@media (max-width: 700px) {
    .newsletter-promo {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }
    .newsletter-promo-image img {
        width: 100px;
    }
}

/* Reveal-on-scroll: paired with public/assets/js/reveal.js. Element starts
   slightly translated and faded; gets `.is-revealed` once it enters view.
   Use sparingly — sprinkled on a few hero/section blocks for a subtle feel.
   Add `style="--reveal-delay:0.12s"` on siblings to stagger. */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* Inbox icon in the community subnav — optically nudged down a couple of px
   so it sits level with the adjacent text. */
.community-subnav-inbox { display: inline-flex; align-items: center; }
.community-subnav-inbox svg { display: block; transform: translateY(1px); }