/* 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; }

/* Site-wide rebuild notice — shown above the navbar during the
   Webflow → admin transition. Remove this rule + the banner div in
   layout/header.php once the migration has settled. */
.site-rebuild-banner {
    background: #fef787;
    color: var(--c-text);
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}

/* 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;
}

/* Webflow dropdown hover (no JS needed) */
.w-dropdown:hover > .w-dropdown-list {
    display: block !important;
}

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

/* 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);
}

.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;
    }

    .community-subnav-user {
        display: none;
    }
}

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

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

/* Mobile hamburger menu support */
@media (max-width: 991px) {
    .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 7.5px 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 30px 10px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .nav-menu.w-nav-menu.community-mobile-open .w-icon-dropdown-toggle {
        order: 2;
        margin-left: auto;
        margin-right: 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;
    }

    .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-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;
}

.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 1.5rem;
}

@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; }

/* 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;
}

.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;
    }
}