/*----
  THEME ADAPTER - "Jobs Portal" (ThemeForest #19327698) visual language
  applied onto the EXISTING SunStack structure.

  Scope: presentation only. No new sections. No content changes.
  Strategy: (1) remap the app's design tokens to the template palette,
            (2) restyle the app's existing components to the template style,
            (3) adopt the template typography (Montserrat + Open Sans).

  Loaded LAST so it refines (never replaces) the app's own CSS.
----*/

/*----
  1. FONT + TOKEN REMAP  (EXACT values extracted from the template's own
     css/main.css: accent indigo #263bd6, primary blue #2563eb,
     subtitle green #17d27c, headings #0f172a/#000, body #444/#475569,
     grey bands #f6f6f6, fonts Montserrat + Open Sans)
----*/
:root,
html[data-theme="red"],
html[data-theme="blue"] {
    --ss-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ss-font-display: 'Montserrat', 'Open Sans', -apple-system, 'Segoe UI', sans-serif;

    /* Brand -> template accent indigo (links, accents, outline buttons) */
    --ss-primary: #263bd6;
    --ss-primary-dark: #1d4ed8;
    --ss-primary-hover: #2563eb;
    --ss-primary-light: #5b6ce8;
    --ss-primary-soft: rgba(38, 59, 214, 0.10);
    --ss-primary-glow: rgba(38, 59, 214, 0.26);
    --ss-primary-contrast: #FFFFFF;
    --ss-primary-deep: #1d4ed8;
    --ss-deep: #1d4ed8;
    --ss-accent: #17d27c;
    --ss-accent-hover: #12b96c;
    --ss-accent-soft: rgba(23, 210, 124, 0.12);

    /* Template secondary accents */
    --jp-cta: #2563eb;
    --jp-cta-hover: #1d4ed8;
    --jp-green: #17d27c;
    --jp-band-grey: #f6f6f6;
    --jp-band-dark: #0f172a;
    --jp-hover-border: #5e2dfa;

    /* Canvas / surfaces - clean white + grey bands */
    --ss-canvas: #ffffff;
    --ss-canvas-deep: #f6f6f6;
    --ss-surface: #ffffff;
    --ss-surface-strong: #ffffff;
    --ss-glass: #ffffff;

    --ss-text: #444444;
    --ss-text-strong: #0f172a;
    --ss-text-soft: #475569;
    --ss-muted: #666666;
    --ss-placeholder: #94a3b8;
    --ss-subtle: #94a3b8;

    --ss-border: #e2e8f0;
    --ss-border-strong: rgba(38, 59, 214, 0.30);
    --ss-border-light: #f1f5f9;
    --ss-divider: #f1f5f9;

    /* Gradients - flat template primary (template is largely flat, not glassy) */
    --ss-gradient-primary: linear-gradient(135deg, #263bd6 0%, #2563eb 100%);
    --ss-gradient-primary-hover: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --ss-gradient-primary-reverse: linear-gradient(135deg, #1d4ed8 0%, #263bd6 100%);
    --ss-gradient-warm: var(--ss-gradient-primary);
    --ss-gradient-cool: var(--ss-gradient-primary);
    --ss-gradient-accent: linear-gradient(135deg, #17d27c 0%, #12b96c 100%);
    --ss-gradient-page: #ffffff;
    --ss-gradient-atmosphere: #ffffff;
    --ss-gradient-background: #ffffff;
    --ss-gradient-mesh: #ffffff;

    --ss-grid-line: rgba(38, 59, 214, 0.0);
    --ss-focus-ring-color: rgba(38, 59, 214, 0.28);
    --ss-focus-ring: 0 0 0 3px var(--ss-focus-ring-color);

    /* Shadows - soft, template-like */
    --ss-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --ss-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --ss-shadow-md: 0 8px 22px rgba(15, 23, 42, 0.08);
    --ss-shadow-lg: 0 14px 38px rgba(15, 23, 42, 0.10);
    --ss-shadow-xl: 0 24px 55px rgba(15, 23, 42, 0.12);
    --ss-shadow-2xl: 0 30px 70px rgba(15, 23, 42, 0.15);
    --ss-shadow-glass: 0 2px 8px rgba(15, 23, 42, 0.06);
    --ss-shadow-glass-hover: 0 14px 38px rgba(15, 23, 42, 0.10);
    --ss-shadow-card: 0 8px 22px rgba(15, 23, 42, 0.08);
    --ss-shadow-floating: 0 24px 55px rgba(15, 23, 42, 0.12);
    --ss-shadow-primary: 0 10px 24px rgba(38, 59, 214, 0.22);
    --ss-shadow-accent: 0 10px 24px rgba(23, 210, 124, 0.22);

    /* Legacy aliases used across the app */
    --ss-ink: var(--ss-text);
    --ss-ink-soft: var(--ss-text-soft);
    --ss-ink-light: var(--ss-text-soft);
    --ss-bg-body: #ffffff;
    --ss-bg-canvas: #ffffff;
    --ss-bg-elevated: #ffffff;
    --ss-bg-surface: #ffffff;
    --ss-bg-sunken: #f6f6f6;
    --ss-bg-hover: rgba(38, 59, 214, 0.06);
    --ss-bg-active: rgba(38, 59, 214, 0.12);
    --ss-glass-bg: #ffffff;
    --ss-glass-bg-strong: #ffffff;
    --ss-glass-bg-subtle: #ffffff;
    --ss-glass-border: #e2e8f0;
    --ss-glass-highlight: #ffffff;
    --ss-glass-dark-bg: rgba(15, 23, 42, 0.86);
    --ss-glass-dark-border: rgba(255, 255, 255, 0.12);

    --ss-rail-bg: #ffffff;
    --ss-rail-bg-solid: #ffffff;
    --ss-rail-border: #e2e8f0;
    --ss-rail-text: #333333;
    --ss-rail-muted: #666666;
    --ss-rail-hover: rgba(38, 59, 214, 0.06);
    --ss-nav-active-bg: #263bd6;
    --ss-nav-active-ink: #ffffff;

    --ss-aurora-a: rgba(38, 59, 214, 0.0);
    --ss-aurora-b: rgba(23, 210, 124, 0.0);
    --ss-aurora-c: rgba(38, 59, 214, 0.0);

    /* Template radii */
    --ss-radius-sm: 4px;
    --ss-radius-md: 8px;
    --ss-radius-lg: 12px;
    --ss-radius-xl: 16px;
    --ss-radius-2xl: 18px;
    --ss-radius-3xl: 24px;
}

/*----
  2. KILL THE GLASS/AURORA ATMOSPHERE  (template is flat & clean, not glassy)
----*/
body {
    background: #ffffff !important;
    background-image: none !important;
}

body::before,
body::after {
    display: none !important;
}

.ss-theme-atmosphere,
.ss-atmosphere,
.ss-atmosphere-grid,
.ss-theme-atmosphere__orb,
.ss-theme-atmosphere__sheen {
    display: none !important;
}

.ss-glass-panel,
.ss-glass-card,
.ss-glass-header,
.ss-glass-modal,
.ss-glass,
.ss-glass-strong,
.ss-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--ss-border-light) !important;
    box-shadow: var(--ss-shadow-card) !important;
}

.ss-glass-panel::before,
.ss-glass-card::before,
.ss-glass-header::before,
.ss-glass-modal::before {
    display: none !important;
}

/*----
  3. TYPOGRAPHY - Montserrat headings, Open Sans body (template scale)
----*/
body,
input,
select,
textarea,
button {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
/* Exact template body metrics (css/main.css: body { font-size:16px; color:#555; line-height:24px }). */
body { font-size: 16px; line-height: 24px; color: #555555; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.brand,
.portal-page-title,
.admin-page-title,
.portal-card__title,
.admin-panel__title,
.section-title,
.hero h1 {
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
}

h1, .h1 { font-size: 45px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 25px; }
h4, .h4 { font-size: 20px; }
h5, .h5 { font-size: 18px; }
h6, .h6 { font-size: 16px; }

p {
    line-height: 26px;
    font-size: 16px;
    color: #444;
}

/*----
  4. BUTTONS - template style: uppercase, 4px radius, flat, shadow accent
----*/
.btn,
.ss-btn,
.portal-btn,
.admin-btn,
.btn-jp,
button.btn {
    border-radius: 999px !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn-primary,
.ss-btn-primary,
.portal-btn--primary,
.admin-btn--primary,
.btn-jp {
    background: #2563eb !important;
    background-image: none !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 3px 4px rgba(38, 59, 214, 0.18) !important;
}

.btn-primary:hover,
.ss-btn-primary:hover,
.portal-btn--primary:hover,
.admin-btn--primary:hover,
.btn-jp:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.btn-outline,
.btn-outline-primary,
.ss-btn-secondary,
.portal-btn--ghost,
.admin-btn--ghost,
.btn-ghost {
    background: #ffffff !important;
    border: 1.5px solid #263bd6 !important;
    color: #263bd6 !important;
    box-shadow: none !important;
}

.btn-outline:hover,
.btn-outline-primary:hover,
.ss-btn-secondary:hover,
.portal-btn--ghost:hover,
.admin-btn--ghost:hover,
.btn-ghost:hover {
    background: rgba(38, 59, 214, 0.08) !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
}

/* Template green CTA */
.btn-success,
.ss-btn-success,
.portal-btn--success,
.btn--cta {
    background: #17d27c !important;
    background-image: none !important;
    border-color: #17d27c !important;
    color: #ffffff !important;
    box-shadow: 3px 4px rgba(23, 210, 124, 0.22) !important;
}

.btn-success:hover,
.ss-btn-success:hover,
.portal-btn--success:hover,
.btn--cta:hover {
    background: #12b96c !important;
    border-color: #12b96c !important;
}

.btn-danger,
.ss-btn-danger,
.portal-btn--danger {
    background: #dc2626 !important;
    background-image: none !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/*----
  5. CARDS / PANELS / JOB ITEMS - clean white, soft border + shadow, 12-16px
----*/
.portal-card,
.admin-card,
.admin-panel,
.portal-panel,
.jp-card,
.job-card,
.job-item,
.job-list-item,
.employer-card,
.company-card,
.candidate-card,
.stat-card,
.kpi-card,
.metric-card,
.card {
    background: #ffffff !important;
    border: 1px solid var(--ss-border-light) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.job-card:hover,
.job-item:hover,
.job-list-item:hover,
.employer-card:hover,
.company-card:hover,
.candidate-card:hover,
.portal-card--interactive:hover,
.stat-card:hover,
.kpi-card:hover {
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
    border-color: rgba(38, 59, 214, 0.18) !important;
    transform: translateY(-3px);
}

.portal-card__title,
.admin-panel__title,
.card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #0f172a;
}

/* Section titles (template .titleTop) */
.section-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.section-title {
    font-size: 34px;
    font-weight: 600;
    color: #0f172a;
}

.eyebrow {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #17d27c;
    margin-bottom: 6px;
}

/*----
  6. BADGES / PILLS / TAGS - 999px pills like template job-type tags
----*/
.badge,
.pill,
.tag,
.chip,
.ss-badge,
.job-type,
.status-badge,
.type-pill {
    border-radius: 999px !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-primary,
.pill--primary,
.ss-badge-primary,
.status-badge--primary {
    background: rgba(38, 59, 214, 0.12) !important;
    color: #263bd6 !important;
}

.badge-success,
.pill--success,
.ss-badge-success,
.status-badge--success {
    background: rgba(23, 210, 124, 0.14) !important;
    color: #0f9d58 !important;
}

.badge-warning,
.pill--warning,
.status-badge--warning {
    background: rgba(255, 144, 0, 0.14) !important;
    color: #b45309 !important;
}

.badge-danger,
.pill--danger,
.status-badge--danger {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
}

/*----
  7. FORMS - template inputs: white, 8px radius, 1px border, indigo focus
----*/
.form-control,
.form-select,
.ss-input,
.portal-input,
.admin-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #444444;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.form-select:focus,
.ss-input:focus,
.portal-input:focus,
.admin-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #263bd6 !important;
    box-shadow: 0 0 0 3px rgba(38, 59, 214, 0.15) !important;
    outline: none;
}

.form-label,
.ss-label,
label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #0f172a;
}

/*----
  8. TABLES - template clean tables with grey head band
----*/
.table,
.ss-table,
.admin-table,
.portal-table {
    --bs-table-bg: #ffffff;
    border-color: #ececec;
}

.table thead th,
.ss-table thead th,
.admin-table thead th,
.portal-table thead th,
table thead th {
    background: #f6f6f6 !important;
    color: #0f172a !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-bottom: 2px solid #e2e8f0 !important;
}

.table tbody tr:hover,
table tbody tr:hover {
    background: #f8fafc !important;
}

/*----
  9. SECTIONS - template rhythm: 50px vertical, grey alt bands
----*/
.section,
section {
    padding: 50px 0;
}

.section--grey,
.greybg,
.bg-light,
.bg-band {
    background: #f6f6f6 !important;
}

/*----
  10. LINKS / ACCENTS
----*/
a {
    color: #263bd6;
}

a:hover {
    color: #2563eb;
}

.link-arrow,
.hero-link {
    color: #263bd6;
    font-weight: 600;
}

.text-primary,
.text-brand {
    color: #263bd6 !important;
}

.text-accent,
.text-green {
    color: #17d27c !important;
}

/*----
  11. PUBLIC HEADER / FOOTER - template structure feel (compact, bordered)
----*/
#siteHeader,
header.site-header {
    background: #ffffff !important;
    border-bottom: 1px solid #ececec !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: none !important;
}

.nav {
    padding-top: 14px;
    padding-bottom: 14px;
}

.nav-links a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    opacity: 1;
    color: #333333;
}

.nav-links a:hover,
.nav-links a.active {
    color: #263bd6;
}

.logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

footer,
.site-footer {
    background: #0f172a !important;
    color: #cbd5e1;
}

footer h5,
footer .footer-logo,
.site-footer h5 {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

footer a,
.site-footer a {
    color: #cbd5e1;
}

footer a:hover,
.site-footer a:hover {
    color: #17d27c;
}

/*----
  12. PORTAL / ADMIN SHELL - template sidebar & topbar treatment
----*/
.portal-sidebar,
.admin-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #ececec !important;
    backdrop-filter: none !important;
}

.portal-topbar,
.admin-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #ececec !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

.portal-nav__link.active,
.admin-nav__link.active {
    background: #263bd6 !important;
    color: #ffffff !important;
    border-radius: 8px;
}

.portal-nav__link:hover,
.admin-nav__link:hover {
    background: rgba(38, 59, 214, 0.08) !important;
}

/* KPI value typography */
.kpi-card__value,
.stat-card__value,
.metric-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #0f172a;
}

/*----
  13. HERO - template hero treatment (flat light band, centered)
----*/
.hero {
    background: linear-gradient(135deg, #f0f9ff 0%, #f0fff4 45%, #ffffff 100%) !important;
    padding: 90px 0 70px;
}

.hero h1,
.hero h1 span {
    color: #0f172a;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero p.sub {
    color: #475569;
}

/*----
  14. THEME SWITCHER - template-consistent indigo
----*/
.ss-theme-switch__thumb {
    background: linear-gradient(145deg, #5b6ce8, #263bd6) !important;
    box-shadow: 0 2px 6px rgba(38, 59, 214, 0.35) !important;
}

html[data-theme="blue"] .ss-theme-switch__thumb {
    transform: none;
}

.ss-theme-switch__dot--red { background: #263bd6 !important; }
.ss-theme-switch__dot--blue { background: #17d27c !important; }

/*----
  15. FLAT OVERRIDES - remove leftover glass/gradient effects
----*/
.ss-glow,
.ss-glow-accent {
    box-shadow: var(--ss-shadow-card) !important;
}

.ss-gradient-text {
    background: none !important;
    -webkit-text-fill-color: currentColor;
    color: #263bd6 !important;
}

.ss-gradient-border::before {
    display: none !important;
}

/*----
  16. LEGACY PUBLIC-PAGE VARIABLE REMAP
  Several public views (home, employers, job-seekers, contact, sector pages)
  declare a local --primary (#D42A1F red) in an inline <style>. This stylesheet
  loads AFTER those blocks, so remapping the same variables here converts those
  pages to the template palette without editing the views.
----*/
:root,
html[data-theme="red"],
html[data-theme="blue"] {
    --primary: #263bd6;
    --primary-dark: #2563eb;
    --primary-soft: rgba(38, 59, 214, 0.10);
    --accent: #17d27c;
    --accent-soft: rgba(23, 210, 124, 0.12);

    --white: #FFFFFF;
    --dark: #0f172a;
    --ink: #333333;
    --muted: #666666;
    --sub: #666666;
    --bg-light: #f6f6f6;
    --border: #e2e8f0;
    --divider: #ececec;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    --shadow-hover: 0 16px 40px rgba(15, 23, 42, 0.12);
}

/* Public page body/typography consistency */
body {
    color: #333;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.section-title,
.hero h1 {
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    color: #0f172a;
}

/* Neutralise leftover glassy/backdrop effects on public header variants */
header[style*="backdrop-filter"],
#siteHeader {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Hairline borders used by legacy cards */
.job-card,
.employer-card,
.job-list-item,
.job-item {
    border-radius: 16px;
}

/* Ensure legacy section bands read as the template grey band */
.section-alt,
.band,
.alt-bg,
[class*="section"][style*="#F7F7F8"] {
    background: #f6f6f6 !important;
}
/*----
  17. EXPERIENCE / PUBLIC LANDING LAYER - enforce the template language
  The landing/nav layer (experience-*.css, home-v2.css) carries an editorial
  serif + glass + blob treatment that does not belong to the "Jobs Portal"
  template. The template is flat, sans-serif (Montserrat headings / Open Sans
  body), thin 1px borders, light grey bands, small radii and calm surfaces.
  These rules are loaded last, so they refine - never replace - the markup.
----*/

/* Typography: template headings are Montserrat sans, sentence case, no serif. */
.experience-public,
.experience-public .experience-hero h1,
.experience-public .experience-section h2,
.experience-public .experience-live-card h2,
.experience-public .experience-journey h2,
.experience-public .experience-hero__stats strong,
.experience-public .experience-hero-slide__copy h2 {
    font-family: 'Montserrat', 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

.experience-public .experience-hero h1 { font-size: clamp(2.6rem, 5vw, 4rem) !important; line-height: 1.08 !important; }
.experience-public .experience-section h2 { font-size: clamp(2rem, 3.6vw, 3rem) !important; line-height: 1.12 !important; }

/* Accent words: solid template colour, not a gradient clip. */
.experience-public .experience-hero h1 em,
.experience-public .experience-section h2 em,
.experience-public .experience-hero-slide__copy h2 em {
    color: #263bd6 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-style: normal !important;
}

/* Flat canvas - drop the aurora blobs and glassy atmosphere.
   NOTE: mission-control.css deliberately stacks 90+ rules to force an
   "editorial glass" hero composition. We neutralise it with a one-level-higher
   specificity (body -) so it wins at every breakpoint and inside their media
   queries, without editing that stylesheet. */
body .experience-public { background: #ffffff !important; background-image: none !important; }
body .experience-public .experience-orb,
body .experience-public .experience-orb--a,
body .experience-public .experience-orb--b,
body .experience-public .experience-visual__halo { display: none !important; }

/* Decorative pseudo-elements (the rounded outline aura behind the hero copy,
   and underline/dot ornaments) - not part of the template's flat layout. */
body .experience-public .experience-hero__copy::before,
body .experience-public .experience-hero__copy::after,
body .experience-public .experience-hero__visual::before,
body .experience-public .experience-hero__visual::after,
body .experience-public .experience-hero::before,
body .experience-public .experience-hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Hero copy - plain text column (no glass card, no radius, no inset ring). */
body .experience-public .experience-hero__copy {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Hero visual + live card - flat template card. */
body .experience-public .experience-hero__visual,
body .experience-public .experience-hero-carousel { min-height: 0 !important; }
body .experience-public .experience-live-card,
body .experience-public .experience-hero-slide {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
}
body .experience-public .experience-hero { padding: 116px 15px 0 !important; }

/* Template .searchwrap: a LIGHT full-width band (padding 40px 0) with dark
   heading text and a white search box - not a dark hero. Reproduced here on
   the same DOM, no content change. */
body .experience-public .experience-hero {
    background: #f6f6f6 !important;
    background-image: none !important;
    padding-bottom: 40px !important;
}
/* Template .searchwrap: one centered column - heading, then a full-width flat
   search bar, then the supporting line. The two-column split and the hero
   visual card are re-laid-out into that centered stack (CSS only, same DOM). */
body .experience-public .experience-hero__grid {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 26px !important;
    text-align: center !important;
    justify-items: center !important;
}
body .experience-public .experience-hero__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 860px !important;
    text-align: center !important;
}
body .experience-public .experience-hero__lead { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }
body .experience-public .experience-search { width: 100% !important; max-width: 860px !important; margin-left: auto !important; margin-right: auto !important; }
body .experience-public .experience-search__hints { justify-content: center !important; }
body .experience-public .experience-proof { justify-content: center !important; }
/* The template hero has no right-hand image card in the search band. */
body .experience-public .experience-hero__visual { display: none !important; }
body .experience-public .experience-hero h1,
body .experience-public .experience-proof strong {
    color: #0f172a !important;
}
body .experience-public .experience-hero__lead,
body .experience-public .experience-proof p,
body .experience-public .experience-search__hints,
body .experience-public .experience-search__hints span {
    color: #555555 !important;
}
body .experience-public .experience-eyebrow { color: #17d27c !important; }
body .experience-public .experience-eyebrow span { background: #17d27c !important; }
body .experience-public .experience-search__hints a { color: #263bd6 !important; border-color: #e2e8f0 !important; }
body .experience-public .experience-proof__faces i { border-color: #f6f6f6 !important; }
body .experience-public .experience-hero__stats {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
}

/* Search bar - template .searchbar: plain bordered card, flat button. */
body .experience-public .experience-search {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body .experience-public .experience-search label { border-right-color: #ececec !important; }
body .experience-public .experience-search input { font-family: 'Open Sans', sans-serif !important; }

/* Buttons - template 4px flat buttons. */
body .experience-public .portal-btn,
body .experience-public .experience-search .portal-btn { border-radius: 999px !important; }
body .experience-public .portal-btn--primary {
    background: #2563eb !important;
    background-image: none !important;
    border-color: #2563eb !important;
    box-shadow: 3px 4px rgba(38, 59, 214, 0.18) !important;
}
body .experience-public .portal-btn--primary:hover {
    background: #2563eb !important;
    background-image: none !important;
    border-color: #2563eb !important;
}

/* Hero stat band - template bordered strip, no glass. */
body .experience-public .experience-hero__stats {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
}
body .experience-public .experience-hero__stats > a:hover { background: #f8fafc !important; }
body .experience-public .experience-hero__stats .experience-hero__employer {
    background: linear-gradient(135deg, #1d4ed8, #263bd6) !important;
}

/* Cards - clean white, 1px border, soft shadow, template radii. */
.experience-public .experience-sector-card,
.experience-public .experience-category,
body .experience-public .experience-job-grid .portal-job-card,
body .experience-public .experience-talent-card,
body .experience-public .portal-employer-card,
body .experience-public .experience-hero-slide {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body .experience-public .experience-job-grid .portal-job-card:hover,
body .experience-public .experience-talent-card:hover,
body .experience-public .portal-employer-card:hover,
body .experience-public .experience-sector-card:hover,
body .experience-public .experience-category:hover {
    border-color: rgba(38, 59, 214, 0.28) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
}
/* Template job card: blue "Apply Now" action, flat 4px radius. */
body .experience-public .portal-job-card__actions .portal-btn { border-radius: 999px !important; }
body .experience-public .portal-job-card__actions .portal-btn--primary { background: #2563eb !important;
    background-image: none !important;
    border-color: #2563eb !important; }
/* Template category/step icon badge: outlined blue circle. */
body .experience-public .experience-category__icon {
    border-radius: 999px !important;
    border: 1px solid #263bd6 !important;
    color: #263bd6 !important;
    background: #ffffff !important;
}

/* Section rhythm - template 50px bands, not 130px editorial air. */
body .experience-public .experience-section { padding: 60px 15px 0 !important; }
body .experience-public .experience-section__head {
    margin-bottom: 34px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
body .experience-public .experience-section__head > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
body .experience-public .experience-section__head .experience-text-link { margin-top: 14px !important; }
/* Template .eyebrow uses a small uppercase subtitle above the heading. */
body .experience-public .experience-eyebrow {
    justify-content: center !important;
    color: #666666 !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
}
body .experience-public .experience-section h2 { color: #0f172a !important; }

/* Journey panel - template flat indigo block, not gradient + rings. */
.experience-public .experience-journey__panel {
    border-radius: 18px !important;
    background: linear-gradient(135deg, #2563eb, #263bd6) !important;
}
.experience-public .experience-journey__panel::before,
.experience-public .experience-journey__panel::after { display: none !important; }
.experience-public .experience-journey h2 em { color: #17d27c !important; }

/* Talent / sector media marks - flat template colour. */
.experience-public .experience-talent-card__mark,
.experience-public .portal-job-card__mark { border-radius: 12px !important; }

/* Tags/pills - template 999px pills. */
.experience-public .experience-talent-card__skills span,
.experience-public .experience-search__hints a { border-radius: 999px !important; font-family: 'Montserrat', sans-serif !important; }

/* Footer - template dark band. */
.experience-public .experience-footer { border-top: 1px solid #ececec !important; }
.experience-public .experience-footer > div:last-child a:hover { color: #263bd6 !important; }

@media (max-width: 900px) {
    .experience-public .experience-section { padding: 54px 0 0 !important; }
}

/*----
  18. PUBLIC NAV - template header: white bar, hairline border, compact.
----*/
body .portal-public-nav {
    border: 1px solid #ececec !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body .portal-public-nav__mark { border-radius: 999px !important; background: #263bd6 !important; color: #ffffff !important; }
body .portal-public-nav__brand { font-family: 'Montserrat', sans-serif !important; }
body .portal-public-nav nav > a:not(.portal-btn) { color: #555555 !important; font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; }
body .portal-public-nav nav > a:not(.portal-btn):hover { color: #263bd6 !important; background: rgba(38, 59, 214, 0.06) !important; }
body .portal-public-nav nav > .portal-btn--primary { border-radius: 999px !important; background: #2563eb !important;
    background-image: none !important;
    border-color: #2563eb !important; }

/*----
  19. DIRECTORY / JOBS / EMPLOYERS - template listing surfaces
----*/
.portal-search-hero,
.employer-directory__search-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
}
.employer-directory__filters .portal-card,
.portal-public-latest .portal-card { border-radius: 12px !important; }
.portal-public-latest .portal-page-title { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; }
.portal-category-chip { border-radius: 999px !important; }
.portal-category-chip.is-active { border-color: #263bd6 !important; color: #263bd6 !important; background: rgba(38, 59, 214, 0.08) !important; }/*----
  20. PORTAL (candidate + employer) - template workspace language
  portal-v2.css introduces a serif, glassy, rounded "editorial" skin. Convert it
  to the template's flat, sans-serif, thin-bordered workspace: Montserrat titles,
  Open Sans body, 8-16px radii, plain white surfaces, indigo active nav.
----*/
body.portal-body { background-image: none !important; background-color: #f6f6f6 !important; }

/* Kill decorative blobs / glass on the shell. */
.portal-sidebar::before,
.portal-sidebar::after { display: none !important; }
.portal-sidebar { box-shadow: none !important; border-right: 1px solid #ececec !important; background: #ffffff !important; }
.portal-topbar {
    border: 1px solid #ececec !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: none !important;
}
.portal-topbar__hello strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
.portal-topbar__hello > span { font-family: 'Open Sans', sans-serif !important; }
.portal-topbar-search .form-control { border-radius: 8px !important; }
.portal-topbar-search .portal-btn { border-radius: 999px !important; }

/* Brand + titles - template sans-serif. */
.portal-brand__title,
.portal-page-title,
.portal-card__title,
.portal-score strong,
.portal-job-card__title a,
.portal-application-item__title,
.portal-mobilebar__title,
.job-detail-title {
    font-family: 'Montserrat', 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
.portal-brand__title { font-size: 1.2rem !important; }
.portal-brand__title::before { border-radius: 6px !important; background: #263bd6 !important; color: #ffffff !important; }
.portal-page-title { font-size: clamp(1.6rem, 2.6vw, 2.3rem) !important; line-height: 1.15 !important; }

/* Nav active - flat template indigo. */
.portal-nav__link.is-active {
    background: #263bd6 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}
.portal-nav__link:hover { background: rgba(38, 59, 214, 0.07) !important; }
.portal-nav__link { border-radius: 8px !important; }

/* Cards - template flat white, thin border, soft shadow. */
.portal-card,
.portal-job-card,
.portal-employer-card,
.portal-stat-card,
.portal-score,
.portal-application-item,
.portal-search-hero {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: none !important;
}
.portal-score,
.portal-search-hero { background: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; }
.portal-score strong { color: #0f172a !important; }
.portal-score p { color: #666666 !important; }
.portal-score__ring { background: conic-gradient(#263bd6 calc(var(--pct) * 1%), #e2e8f0 0) !important; }
.portal-score__ring::before { background: #ffffff !important; }
.portal-score__ring span { color: #263bd6 !important; }
.portal-search-hero .portal-card__title,
.portal-search-hero .job-detail-kicker { color: #0f172a !important; opacity: 1 !important; }
.portal-search-hero .form-control { border-color: #e2e8f0 !important; color: #0f172a !important; background: #ffffff !important; }
.portal-search-hero .form-control::placeholder { color: #94a3b8 !important; }

/* Buttons - template 4px flat. */
.portal-btn { border-radius: 999px !important; font-family: 'Montserrat', sans-serif !important; }
.portal-btn--primary {
    background: #2563eb !important;
    background-image: none !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 3px 4px rgba(38, 59, 214, 0.18) !important;
}
.portal-btn--primary:hover { background: #2563eb !important; background-image: none !important; border-color: #2563eb !important; }
.portal-link:hover { color: #2563eb !important; }

/* Job card identity mark - template square tile. */
.portal-job-card__mark { border-radius: 12px !important; background: rgba(38, 59, 214, 0.08) !important; color: #263bd6 !important; }
.portal-job-card__mark::before { display: none !important; }
.portal-job-card__brand-mark { border-radius: 10px !important; font-family: 'Montserrat', sans-serif !important; background: rgba(255, 255, 255, 0.7) !important; }
.portal-badge { font-family: 'Montserrat', sans-serif !important; }
.portal-table th { font-family: 'Montserrat', sans-serif !important; background: #f6f6f6 !important; }
.portal-table td { border-bottom-color: #ececec !important; }

/*----
  21. AUTH + ADMIN - same template language (no serif, no glass).
----*/
.portal-auth-card .brand,
.portal-auth-card .role-pill { font-family: 'Montserrat', sans-serif !important; }
.admin-sidebar::before { display: none !important; }
.admin-sidebar { box-shadow: none !important; border-right: 1px solid #ececec !important; }
.admin-topbar { background: #ffffff !important; border-bottom: 1px solid #ececec !important; backdrop-filter: none !important; }
.admin-page-title,
.admin-card__title,
.admin-panel__title,
.admin-brand__title { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
.admin-nav__link.is-active { background: #263bd6 !important; box-shadow: none !important; border-radius: 8px !important; }
.admin-card,
.admin-panel,
.admin-stat-card { border: 1px solid #e2e8f0 !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important; }
.admin-table thead th { background: #f6f6f6 !important; }
.admin-btn--primary { border-radius: 999px !important; background: #2563eb !important;
    background-image: none !important;
    border-color: #2563eb !important; }
/*----
  22. PUBLIC DIRECTORY SHELL (:not(.experience-public)) + straggler serif titles
  The non-landing public shell (jobs / employers / sectors) and a couple of
  legacy panels still hard-code Georgia serif headings. Bring them onto the
  template's Montserrat/Open Sans type system and flat surfaces.
----*/
.portal-public-shell:not(.experience-public) .portal-page-title,
.portal-public-shell:not(.experience-public) .portal-card__title,
.portal-public-shell:not(.experience-public) .portal-employer-card__body strong,
.portal-public-shell:not(.experience-public) .portal-employer-card__mark,
.portal-public-shell:not(.experience-public) .job-detail-title,
.portal-public-shell:not(.experience-public) .portal-job-card__title a,
.portal-public-shell:not(.experience-public) .job-detail-kicker {
    font-family: 'Montserrat', 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    font-style: normal !important;
}
.portal-public-shell:not(.experience-public) .portal-employer-card__mark { font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; }

/* Flat public directory surfaces - template card language. */
.portal-public-shell:not(.experience-public) .portal-employer-card,
.portal-public-shell:not(.experience-public) .portal-job-card,
.portal-public-shell:not(.experience-public) .portal-category-chip {
    border-color: #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}
.portal-public-shell:not(.experience-public) .portal-employer-card:hover,
.portal-public-shell:not(.experience-public) .portal-job-card:hover {
    border-color: rgba(38, 59, 214, 0.2) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
}

/* Straggler serif titles inside panels. */
aside#job-reach-meter .job-reach-meter__page-title {
    font-family: 'Montserrat', 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}
#employer-job-form .job-post-section__title {
    font-family: 'Montserrat', 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

/* Free-text headings that still inherit a display token where it was serif. */
:root,
html[data-theme="red"],
html[data-theme="blue"] {
    --ss-font-display: 'Montserrat', 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
    --ss-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ss-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}