/* ============================================================
   ProfesLink — Brand palette & components
   Single source of truth for the new colour system.
   Core colours are also wired into the MudBlazor theme
   (Models/ConfigurationModels/ThemeConfigModel.cs); this file
   holds the variables + brand classes for everything else so
   colours are not scattered inline across pages/components.
   ============================================================ */

:root {
    /* Core brand colours (per Master Developer Spec v1) */
    --pfl-navy:         #0F1F4B;  /* deep brand navy */
    --pfl-indigo:       #2B2E7C;  /* primary indigo */
    --pfl-accent:       #F2A35B;  /* warm orange — use sparingly */
    --pfl-bg:           #FFFFFF;  /* page background */
    --pfl-section:      #F8FAFC;  /* alternating section bg */
    --pfl-border:       #E2E8F0;  /* hairline borders */
    --pfl-indigo-light: #EEF2FF;  /* FAQ / soft panels */

    /* Text */
    --pfl-text:         #1A2233;  /* primary text */
    --pfl-text-muted:   #5B6478;  /* secondary text */
    --pfl-on-dark:      #FFFFFF;  /* text on navy/indigo */

    /* Gradients */
    --pfl-grad-primary: linear-gradient(135deg, var(--pfl-navy) 0%, var(--pfl-indigo) 100%);

    /* Radius / elevation */
    --pfl-radius:       12px;
    --pfl-radius-lg:    18px;
    --pfl-shadow-sm:    0 2px 8px rgba(15, 31, 75, 0.08);
    --pfl-shadow-md:    0 8px 24px rgba(15, 31, 75, 0.12);

    /* Typography */
    --pfl-font: 'Plus Jakarta Sans', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Buttons ---------- */

/* Primary — navy→indigo gradient, white text */
.pfl-btn-primary,
.pfl-btn-primary.mud-button-root {
    background: var(--pfl-grad-primary) !important;
    color: var(--pfl-on-dark) !important;
    border: none !important;
    border-radius: var(--pfl-radius) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: none !important;
    box-shadow: var(--pfl-shadow-sm) !important;
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.pfl-btn-primary:hover,
.pfl-btn-primary.mud-button-root:hover {
    filter: brightness(1.08);
    box-shadow: var(--pfl-shadow-md) !important;
    transform: translateY(-1px);
}

/* Secondary — white with indigo border + indigo text */
.pfl-btn-secondary,
.pfl-btn-secondary.mud-button-root {
    background: var(--pfl-bg) !important;
    color: var(--pfl-indigo) !important;
    border: 1.5px solid var(--pfl-indigo) !important;
    border-radius: var(--pfl-radius) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: none !important;
    transition: background .2s ease, color .2s ease, transform .2s ease !important;
}
.pfl-btn-secondary:hover,
.pfl-btn-secondary.mud-button-root:hover {
    background: var(--pfl-indigo-light) !important;
    transform: translateY(-1px);
}

/* On-dark — transparent with white border/text, for navy hero bands */
.pfl-btn-on-dark,
.pfl-btn-on-dark.mud-button-root {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: var(--pfl-radius) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: background .2s ease !important;
}
.pfl-btn-on-dark:hover,
.pfl-btn-on-dark.mud-button-root:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* Accent — warm orange, sparing use (CTAs that need to pop) */
.pfl-btn-accent,
.pfl-btn-accent.mud-button-root {
    background: var(--pfl-accent) !important;
    color: var(--pfl-navy) !important;
    border: none !important;
    border-radius: var(--pfl-radius) !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

/* ---------- Surfaces ---------- */

.pfl-section {
    background: var(--pfl-section) !important;
}
.pfl-section-white {
    background: var(--pfl-bg) !important;
}

.pfl-card {
    background: var(--pfl-bg);
    border: 1px solid var(--pfl-border);
    border-radius: var(--pfl-radius-lg);
    box-shadow: var(--pfl-shadow-sm);
}

/* Soft indigo panel — used for FAQ answers */
.pfl-panel-soft {
    background: var(--pfl-indigo-light) !important;
    border-radius: var(--pfl-radius);
}

/* ---------- Text helpers ---------- */

.pfl-text-navy   { color: var(--pfl-navy) !important; }
.pfl-text-indigo { color: var(--pfl-indigo) !important; }
.pfl-text-muted  { color: var(--pfl-text-muted) !important; }
.pfl-text-accent { color: var(--pfl-accent) !important; }

/* Gradient heading text */
.pfl-heading-gradient {
    background: var(--pfl-grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--pfl-indigo); /* fallback */
}

/* ---------- Header ---------- */

/* White header with a hairline bottom border */
.mud-appbar.mud-appbar-dense,
header.mud-appbar {
    background-color: var(--pfl-bg) !important;
    color: var(--pfl-navy) !important;
    border-bottom: 1px solid var(--pfl-border);
}

/* Clients / Professionals segmented toggle */
.pfl-aud-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--pfl-section);
    border: 1px solid var(--pfl-border);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.pfl-aud-toggle-item {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    color: var(--pfl-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.pfl-aud-toggle-item:hover {
    color: var(--pfl-indigo);
}
.pfl-aud-toggle-item.active {
    background: var(--pfl-grad-primary);
    color: var(--pfl-on-dark);
}

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

.faq-accordion {
    text-align: left;
}
.faq-accordion .mud-expand-panel {
    border: 1px solid var(--pfl-border);
    border-radius: var(--pfl-radius) !important;
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--pfl-bg);
}
.faq-accordion .mud-expand-panel-header {
    border-radius: var(--pfl-radius);
}
.faq-accordion .mud-expand-panel-text {
    color: var(--pfl-navy);
    font-weight: 600;
}
/* Soft indigo answer panel */
.faq-accordion .mud-expand-panel-content,
.faq-accordion .mud-collapse-container .mud-expand-panel-content {
    background: var(--pfl-indigo-light);
}
.faq-accordion .mud-expand-panel-content .mud-typography {
    color: var(--pfl-text);
}

/* ---------- Typography base ---------- */

.pfl-font { font-family: var(--pfl-font) !important; }