/* ===== Theme tokens (global) ===== */
:root {
    --green: hsl(147.63deg 72.38% 41.18%);
    --green-600: hsl(147.63deg 72.38% 36%);
    --page-bg: #FAFCFB;
    --card: #ffffff;
    --text: #0A0A0A;
    --muted: #5f6b6b;
    --radius: 18px;
    /* used by the carousel on small screens to cap the card width nicely */
    --mobile-card-max: 560px;
}


html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Inter, Helvetica, Arial;
    background: var(--page-bg);
    color: var(--text);
}

/* One shared container so every section aligns */
.container {
    max-width: 1200px; /* <— single source of truth */
    margin: 0 auto;
    padding: 2rem 1.25rem;
}

/* Optional generic hero section wrapper */
.hero {
    background: var(--page-bg);
    padding: 0 0 2rem;
}

/* ===== Site chrome ===== */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    background: transparent;
    color: var(--text);
}

.brand {
    text-decoration: none;
    color: var(--text);
    font-weight: 800;
}

.site-nav {
    display: flex;
    gap: .75rem;
}

    .site-nav a {
        color: var(--text);
        text-decoration: none;
        padding: .25rem .5rem;
        border-radius: 8px;
    }

        .site-nav a:hover {
            background: rgba(0,0,0,.05);
        }

.site-footer {
    color: #6b7a7a;
    opacity: .9;
    margin: 2rem 0 1rem;
}


/* Page corner glow (mint) */
html, body {
    background-color: #fff;
}

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(40vw 35vh at -10% -10%, rgba(128,217,177,.22), transparent 60%), radial-gradient(40vw 35vh at 110% -10%, rgba(128,217,177,.18), transparent 60%), radial-gradient(42vw 38vh at -10% 110%, rgba(128,217,177,.18), transparent 62%), radial-gradient(42vw 38vh at 110% 110%, rgba(128,217,177,.22), transparent 62%);
        filter: saturate(110%);
    }

/* ================================
   Global Mobile Compact Layout
   Tightens padding & margins on mobile
   ================================ */
@media (max-width: 640px) {
    /* Make containers hug the sides more */
    .container {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Reduce section vertical space */
    section.section {
        padding-top: 0.9rem !important;
        padding-bottom: 1rem !important;
    }

    /* Optional: make cards themselves slightly wider */
    .r-card,
    .post-card,
    .therapy-card,
    .community-card {
        border-radius: 16px !important;
        padding: 0.75rem !important;
    }

    /* Optional: reduce filter chip gaps */
    .filters {
        gap: 0.5rem !important;
    }

    /* Reduce outer page background margin/padding */
    body {
        padding: 0 !important;
        margin: 0 !important;
    }
}


/* Default: center all sections with comfy gutters */
.section > .container {
  max-width: 1200px;           /* tweak to taste */
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

/* Exception: the hero stays full-bleed */
.hero .container {
  max-width: none;
  padding-inline: 0;
}



/* Scoped to your section to avoid bleeding elsewhere */
.therapy .validation-message {
    color: #e03131;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: .25rem;
    display: block;
}

.therapy input.input-validation-error,
.therapy textarea.input-validation-error,
.therapy select.input-validation-error {
    border-color: #e03131 !important;
    background-color: #fff5f5 !important;
}

    .therapy input.input-validation-error:focus,
    .therapy textarea.input-validation-error:focus,
    .therapy select.input-validation-error:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(224, 49, 49, .15);
    }


/* ===============================
   Free Therapy modal – compact soft inputs
   =============================== */

.therapy .nt-modal input.nt-input,
.therapy .nt-modal textarea.nt-input,
.therapy .nt-modal select.nt-input {
    background: #fff;
    border: 1px solid #e2efe7;
    border-radius: 10px; /* slightly less round since smaller */
    padding: .4rem .65rem; /* reduced padding = smaller height */
    font-size: 0.9rem; /* slightly smaller text */
    line-height: 1.3;
    color: #20302b;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0,0,0,.04);
    transition: border-color .18s, box-shadow .18s, background .18s, transform .12s;
}

    /* Hover */
    .therapy .nt-modal input.nt-input:hover,
    .therapy .nt-modal textarea.nt-input:hover,
    .therapy .nt-modal select.nt-input:hover {
        background: #fbfdfa;
        border-color: #cfeee0;
    }

    /* Focus ring */
    .therapy .nt-modal input.nt-input:focus,
    .therapy .nt-modal textarea.nt-input:focus,
    .therapy .nt-modal select.nt-input:focus {
        outline: none;
        border-color: hsl(147.63deg 72.38% 41.18%);
        box-shadow: 0 0 0 3px rgba(34,197,94,.22), 0 2px 10px rgba(0,0,0,.06);
        transform: translateY(-1px);
    }

    /* Softer placeholder */
    .therapy .nt-modal input.nt-input::placeholder,
    .therapy .nt-modal textarea.nt-input::placeholder {
        color: #a3b2aa;
    }

    /* Number inputs: hide spinners */
    .therapy .nt-modal input.nt-input[type="number"]::-webkit-outer-spin-button,
    .therapy .nt-modal input.nt-input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .therapy .nt-modal input.nt-input[type="number"] {
        -moz-appearance: textfield;
    }

/* Compact textarea (keeps scale consistent) */
.therapy .nt-modal textarea.nt-input {
    min-height: 80px; /* was larger, now half */
    resize: vertical;
}

/* Hide Blazor’s default reconnect banner safely */
#components-reconnect-modal {
    position: fixed !important;
    inset: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important; /* ensure it’s below everything */
}

    /* Optional: if Blazor adds state classes, keep them inert too */
    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal .reconnecting,
    #components-reconnect-modal .components-reconnect-failed,
    #components-reconnect-modal .components-reconnect-rejected {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

/* ===== Global Modal Header Layout (Title + Close Button) ===== */
.modal-header,
[role="dialog"] .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    position: relative;
}

/* Ensure title spacing works with the absolute close button */
.modal h3,
.modal-title,
[role="dialog"] h3 {
    flex: 1;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text, #1a1a1a);
    padding-right: 2.5rem; /* space for the X */
    line-height: 1.3;
}

/* ===== Global Modal Close Button Styling (MentalEase theme) ===== */
.modal-close,
button.close,
[role="dialog"] .close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: #166534; /* deep green text/icon color */
    background-color: #eaf6f0; /* soft light green background */
    border: none;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

    /* Hover / Focus state */
    .modal-close:hover,
    button.close:hover,
    [role="dialog"] .close:hover {
        background-color: var(--green, #22C55E); /* main brand green */
        color: white;
        transform: scale(1.1);
    }

/* Mobile-friendly adjustments */
@media (max-width: 600px) {
    .modal-close,
    button.close,
    [role="dialog"] .close {
        top: 0.6rem;
        right: 0.6rem;
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.7rem;
    }

    .modal h3,
    .modal-title,
    [role="dialog"] h3 {
        padding-right: 3rem; /* slightly more space for larger X on small screens */
    }
}

/* Blazor default reconnect modal sometimes stays around after sleep */
/* Make it invisible and non-blocking — we drive our own UI */
#components-reconnect-modal,
#components-reconnect-banner,
.blazor-error-ui {
    display: none !important;
    pointer-events: none !important;
}