/* ============================================================================
   FairTalk theme overrides
   Maps the FairTalk website design system onto Radzen's Material base theme.
   Loaded AFTER the Radzen theme CSS so these variables win the cascade.
   Source of truth: fairtalk-design-system.md (sage green, Fraunces + Inter).
   Only theming here — no layout/structure changes.
   ============================================================================ */

:root {
    /* ── Brand / primary (sage) ───────────────────────────────────────── */
    --rz-primary:            #385544;  /* sage-800  */
    --rz-primary-light:      #d5e4d9;  /* sage-200  */
    --rz-primary-lighter:    #e7f1ea;  /* sage-100  */
    --rz-primary-dark:       #20392b;  /* sage-900 (hover/pressed) */
    --rz-primary-darker:     #20392b;  /* sage-900  */
    --rz-on-primary:         #fafcfb;  /* near-white text on primary */
    /* Text colours for the pale primary shades (bg is light → text must be dark).
       Radzen's defaults here were white / leftover indigo, causing poor contrast. */
    --rz-on-primary-light:   #20392b;  /* dark sage on sage-200 bg */
    --rz-on-primary-lighter: #20392b;  /* dark sage on sage-100 bg */

    /* ── Surfaces ─────────────────────────────────────────────────────── */
    --rz-body-background-color: #f2f7f3;  /* sage-50  (warm off-white page) */
    --rz-base-background-color: #ffffff;  /* cards / raised surfaces */
    --rz-panel-background-color: #ffffff;

    /* ── Text ─────────────────────────────────────────────────────────── */
    --rz-text-color:           #1c1a18;  /* stone-900 */
    --rz-text-secondary-color: #5a544f;  /* muted     */
    --rz-text-title-color:     #385544;  /* sage-800 (headings) */

    /* ── Borders ──────────────────────────────────────────────────────── */
    --rz-border-color:         #d2dad3;  /* default border */
    --rz-border-radius:        0.75rem;  /* default radius */
    --rz-button-border-radius: 999px;    /* pill buttons   */
    --rz-card-border-radius:   1.5rem;   /* large card radius */
    --rz-input-border-radius:  0.75rem;

    /* ── Links ────────────────────────────────────────────────────────── */
    --rz-link-color:           #5a544f;  /* muted */
    --rz-link-hover-color:     #385544;  /* sage-800 */

    /* ── Typography ───────────────────────────────────────────────────── */
    --rz-text-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --rz-body-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;

    /* ── Status colours (from waitlist form) ──────────────────────────── */
    --rz-success:  #0F6E56;
    --rz-success-lighter: #E1F5EE;
    --rz-danger:   #993C1D;
    --rz-danger-lighter:  #FAECE7;
}

/* ── Headings use the serif display face, in sage ──────────────────────── */
h1, h2, h3, h4, h5, h6,
.rz-text-display-h1, .rz-text-display-h2, .rz-text-display-h3,
.rz-text-display-h4, .rz-text-display-h5, .rz-text-display-h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3,
.rz-text-h4, .rz-text-h5, .rz-text-h6 {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #385544;
}

/* ── Cards: subtle border + soft, green-tinted hover elevation ─────────── */
.rz-card {
    border: 1px solid #e7f1ea;                 /* sage-100 hairline */
    transition: box-shadow .2s ease, border-color .2s ease;
}

.rz-card:hover {
    box-shadow: 0 4px 20px rgba(56, 85, 68, 0.08);
}

/* ── Pill buttons keep a calm weight + smooth transitions ──────────────── */
.rz-button {
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease,
                border-color .2s ease, box-shadow .2s ease;
}

/* ── Inputs: 1.5px sage border, sage focus ─────────────────────────────── */
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-numeric,
.rz-datepicker {
    --rz-input-border: 1.5px solid #d5e4d9;        /* sage-200 */
    --rz-input-hover-border: 1.5px solid #b9d1c0;
    --rz-input-focus-border: 1.5px solid #385544;  /* sage-800 */
}

/* ── Section label helper (uppercase, tracked, faded sage) ─────────────── */
.ft-section-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: rgba(56, 85, 68, 0.6);
}

/* ── Themed loading spinner to match brand ─────────────────────────────── */
.loading-progress circle:last-child {
    stroke: #385544;
}

/* ── Top bar (replaces the sidebar) ───────────────────────────────────────── */
.ft-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 56px;
    padding: 0 14px;
}

.ft-topbar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    flex-shrink: 0;
}

.ft-topbar-name {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-size: 1.15rem;
    color: var(--rz-on-primary, #fafcfb);
    letter-spacing: -0.01em;
}

.ft-topbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 10px;
    overflow-x: auto;          /* small screens scroll rather than wrap */
    scrollbar-width: none;
}
.ft-topbar-nav::-webkit-scrollbar { display: none; }

.ft-nav-link {
    color: rgba(250, 252, 251, 0.85);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 7px 13px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}
.ft-nav-link:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.ft-nav-link-solid { background: rgba(255, 255, 255, 0.16); }

.ft-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    flex-shrink: 0;
}

.ft-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--rz-on-primary, #fafcfb);
    cursor: pointer;
    transition: background-color .2s ease;
}
.ft-bell:hover { background: rgba(255, 255, 255, 0.14); }

.ft-bell-badge {
    position: absolute;
    top: 2px;
    right: 0;
    background: #d85a30;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
}

.ft-profile-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px 4px 5px;
    border-radius: 999px;
    color: var(--rz-on-primary, #fafcfb);
    cursor: pointer;
    transition: background-color .2s ease;
}
.ft-profile-chip:hover { background: rgba(255, 255, 255, 0.14); }

.ft-profile-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    flex-shrink: 0;
    background: #ffffff;
}

.ft-profile-name {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

.ft-profile-menu {
    position: absolute;
    top: 50px;
    right: 0;
    background: #ffffff;
    border: 1px solid #e7f1ea;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(56, 85, 68, 0.16);
    min-width: 210px;
    padding: 6px;
    z-index: 1200;
}

.ft-profile-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 9px;
    color: #1c1a18;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color .15s ease;
}
.ft-profile-menu a:hover { background: #e7f1ea; color: #20392b; }
.ft-profile-menu a .rzi { font-size: 18px; color: #385544; }

@media (max-width: 560px) {
    .ft-topbar-name { display: none; }
    .ft-profile-name { display: none; }
    .ft-nav-link { padding: 7px 10px; font-size: 0.85rem; }
}

/* ── Analysis / content section headings (bigger than the old overline) ───── */
.ft-section-heading {
    font-family: 'Fraunces', ui-serif, Georgia, serif !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: #385544 !important;
    letter-spacing: -0.01em;
    margin: 0 !important;
}

/* ── Dashboard action groups: clear separation between topics ─────────────── */
.ft-action-group {
    padding: 10px 12px;
    border-radius: 12px;
}
.ft-action-group:nth-child(odd) { background: #f4f9f5; }
.ft-action-group + .ft-action-group { margin-top: 4px; }

/* ── App footer ───────────────────────────────────────────────────────────── */
.ft-footer {
    background: #385544;
    color: rgba(250, 252, 251, 0.85);
    margin-top: 40px;
    padding: 24px 24px 16px;
}

.ft-footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 64px;
    max-width: 1200px;
    margin: 0 auto;
}

.ft-footer-heading {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 252, 251, 0.55);
    margin: 0 0 9px;
}

.ft-footer a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(250, 252, 251, 0.85);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 3px 0;
    transition: color .2s ease;
}
.ft-footer a:hover { color: #ffffff; }

.ft-footer-small {
    max-width: 1200px;
    margin: 18px auto 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.75rem;
    line-height: 1.6;
    color: rgba(250, 252, 251, 0.6);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    justify-content: space-between;
}

/* Compact mobile footer: brand full-width, the two link columns share a row,
   tighter rhythm — roughly half the height of naive stacking. */
@media (max-width: 640px) {
    .ft-footer { margin-top: 28px; padding: 18px 18px 12px; }
    .ft-footer-cols { gap: 14px 20px; }
    .ft-footer-cols > div:first-child { flex-basis: 100%; max-width: none !important; }
    .ft-footer-cols > div:not(:first-child) { flex: 1 1 40%; }
    .ft-footer-heading { margin-bottom: 5px; }
    .ft-footer a { font-size: 0.8rem; padding: 2px 0; }
    .ft-footer-small { margin-top: 12px; padding-top: 9px; gap: 4px 16px; font-size: 0.72rem; }
}

/* ── Desktop: slim fixed footer bar, always visible ────────────────────────
   The rich in-flow footer is mobile-only; on desktop a compact one-line bar
   pins to the bottom of the viewport (Explore links live in the top nav). */
.ft-footer-bar { display: none; }

/* Radzen's sidebar-slide animation leaves an identity transform on .rz-body,
   which turns it into the containing block for position:fixed descendants.
   We removed the sidebar, so kill the transform — fixed/sticky behave
   correctly everywhere again. */
.rz-body { transform: none !important; }

@media (min-width: 641px) {
    .ft-footer-full { display: none; }
    .ft-content-pad { padding-bottom: 54px; }   /* keep content clear of the bar */

    .ft-footer-bar {
        display: flex;
        align-items: center;
        gap: 6px 18px;
        flex-wrap: nowrap;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1100;
        background: #385544;
        color: rgba(250, 252, 251, 0.75);
        padding: 9px 20px;
        font-size: 0.76rem;
        box-shadow: 0 -2px 14px rgba(28, 26, 24, 0.14);
    }

    .ft-footer-bar a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: rgba(250, 252, 251, 0.85);
        text-decoration: none;
        white-space: nowrap;
        transition: color .2s ease;
    }
    .ft-footer-bar a:hover { color: #ffffff; }

    .ft-footer-bar .ft-bar-brand {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: 'Fraunces', ui-serif, Georgia, serif;
        font-size: 0.9rem;
        color: #fafcfb;
        white-space: nowrap;
    }

    .ft-footer-bar .ft-bar-note {
        margin-left: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .ft-footer-bar .ft-bar-copy { white-space: nowrap; }
}

@media (min-width: 641px) and (max-width: 1000px) {
    .ft-footer-bar .ft-bar-note { display: none; }  /* keep the bar to one clean line */
}

/* ── Light-only brand: hard guard against dark mode ────────────────────────
   FairTalk has no dark theme. The appearance toggle is removed, but in case a
   stale "dark" cookie ever applies the .rz-dark class, keep surfaces, text and
   the grey scale light so buttons/text never render dark-on-dark. */
.rz-dark {
    --rz-text-color:           #1c1a18;
    --rz-text-secondary-color: #5a544f;
    --rz-text-title-color:     #385544;
    --rz-body-background-color: #f2f7f3;
    --rz-base-background-color: #ffffff;
    --rz-base-50:  #ffffff;
    --rz-base-100: #f7faf8;
    --rz-base-200: #eef4f0;
    --rz-base-300: #e2ece6;
    --rz-base-400: #c3d3c9;
    color-scheme: light;
}