/* ==========================================================================
   4Schools / C4XP Design System
   Generated from Figma: "4Schools website (Internal)"

   This CSS defines the complete design token system and component styles
   for the Channel 4 Schools (4Schools) work experience portal.
   ========================================================================== */


/* ==========================================================================
   1. FONT FACES

   The Figma design references two typefaces:
   - "4 Headline" — Display/heading typeface (bold, condensed sans-serif)
   - "4 Text" — Body/UI typeface (clean, readable sans-serif)

   [!] VERIFY: The existing C4XP project ships Collidge + Gilroy.
       Confirm whether "4 Headline" = Collidge and "4 Text" = Gilroy,
       or whether new font files are needed from the Channel 4 brand team.

   The @font-face declarations below use the existing fonts as fallbacks.
   Update the font-family names once the correct mapping is confirmed.
   ========================================================================== */

/* ── 4Headline (Display / Heading typeface) ──────────────────────────────── */

@font-face {
    font-family: '4Headline';
    src: url('../fonts/4Headline/4Headline-Regular.woff') format('woff'),
         url('../fonts/4Headline/4Headline-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '4Headline';
    src: url('../fonts/4Headline/4Headline-Medium.woff') format('woff'),
         url('../fonts/4Headline/4Headline-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '4Headline';
    src: url('../fonts/4Headline/4Headline-Bold.woff') format('woff'),
         url('../fonts/4Headline/4Headline-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '4Headline';
    src: url('../fonts/4Headline/4Headline-Italic.woff') format('woff'),
         url('../fonts/4Headline/4Headline-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: '4Headline';
    src: url('../fonts/4Headline/4Headline-BoldItalic.woff') format('woff'),
         url('../fonts/4Headline/4Headline-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: '4Headline';
    src: url('../fonts/4Headline/4Headline-MediumItalic.woff') format('woff'),
         url('../fonts/4Headline/4Headline-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: '4Headline';
    src: url('../fonts/4Headline/4Headline-ExtraBoldItalic.woff') format('woff'),
         url('../fonts/4Headline/4Headline-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}


/* ── 4Text (Body / UI typeface) ──────────────────────────────────────────── */

@font-face {
    font-family: '4Text';
    src: url('../fonts/4Text/4Text-ExtraLight.woff') format('woff'),
         url('../fonts/4Text/4Text-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '4Text';
    src: url('../fonts/4Text/4Text-Light.woff') format('woff'),
         url('../fonts/4Text/4Text-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '4Text';
    src: url('../fonts/4Text/4Text-Regular.woff') format('woff'),
         url('../fonts/4Text/4Text-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '4Text';
    src: url('../fonts/4Text/4Text-Medium.woff') format('woff'),
         url('../fonts/4Text/4Text-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '4Text';
    src: url('../fonts/4Text/4Text-Bold.woff') format('woff'),
         url('../fonts/4Text/4Text-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '4Text';
    src: url('../fonts/4Text/4Text-Italic.woff') format('woff'),
         url('../fonts/4Text/4Text-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: '4Text';
    src: url('../fonts/4Text/4Text-BoldItalic.woff') format('woff'),
         url('../fonts/4Text/4Text-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: '4Text';
    src: url('../fonts/4Text/4Text-MediumItalic.woff') format('woff'),
         url('../fonts/4Text/4Text-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}


/* ==========================================================================
   2. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

:root {
    /* ── Colour Palette ───────────────────────────────────────────────────── */

    /* Primary brand colours */
    --c4-arsenic-blue:   #72DDE8;   /* Vibrant cyan — primary accent, links on dark bg */
    --c4-green:          #89FFA0;   /* Mint green — primary CTA, success, highlights */
    --c4-dark-navy:      #15162A;   /* Near-black navy — primary background, text on light */
    --c4-dark-powder:    #1B2A96;   /* Deep blue — secondary dark background, card bg */

    /* Accent / Subject colours */
    --c4-candy:          #FF99DD;   /* Pink — Humanities, decorative accent */
    --c4-beach:          #FFE589;   /* Warm yellow — English, highlights */
    --c4-sky:            #89CDFF;   /* Soft blue — Careers Information */
    --c4-leaf:           #E2FF89;   /* Yellow-green — Arts & Design */

    /* Neutral */
    --c4-grey:           #EDEDED;   /* Light grey — borders, disabled states, subtle bg */
    --c4-white:          #FFFFFF;
    --c4-black:          #000000;

    /* ── Semantic aliases ─────────────────────────────────────────────────── */
    --c4-bg-primary:     var(--c4-dark-navy);
    --c4-bg-secondary:   var(--c4-dark-powder);
    --c4-bg-surface:     var(--c4-white);
    --c4-bg-muted:       var(--c4-grey);

    --c4-text-primary:   var(--c4-dark-navy);     /* Text on light backgrounds */
    --c4-text-inverse:   var(--c4-white);          /* Text on dark backgrounds */
    --c4-text-accent:    var(--c4-arsenic-blue);   /* Accent text on dark backgrounds */
    --c4-text-muted:     #6B7280;                  /* Subdued text (estimated) */

    --c4-link-light:     var(--c4-dark-navy);      /* Links on light bg */
    --c4-link-dark:      var(--c4-green);          /* Links on dark bg */

    --c4-cta-bg:         var(--c4-green);
    --c4-cta-text:       var(--c4-dark-navy);
    --c4-cta-alt-bg:     var(--c4-dark-navy);
    --c4-cta-alt-text:   var(--c4-white);

    /* ── Typography ───────────────────────────────────────────────────────── */
    --c4-font-headline:  '4Headline', 'Arial Black', 'Helvetica Neue', sans-serif;
    --c4-font-body:      '4Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* ── Spacing scale (8px base) ─────────────────────────────────────────── */
    --c4-space-xs:       4px;
    --c4-space-sm:       8px;
    --c4-space-md:       16px;
    --c4-space-lg:       24px;
    --c4-space-xl:       32px;
    --c4-space-2xl:      48px;
    --c4-space-3xl:      64px;
    --c4-space-4xl:      96px;

    /* ── Border radius ────────────────────────────────────────────────────── */
    --c4-radius-none:    0;
    --c4-radius-sm:      4px;
    --c4-radius-md:      8px;
    --c4-radius-lg:      12px;
    --c4-radius-xl:      16px;
    --c4-radius-full:    9999px;

    /* ── Shadows ──────────────────────────────────────────────────────────── */
    --c4-shadow-sm:      0 1px 2px rgba(21, 22, 42, 0.08);
    --c4-shadow-md:      0 4px 12px rgba(21, 22, 42, 0.12);
    --c4-shadow-lg:      0 8px 24px rgba(21, 22, 42, 0.16);

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --c4-transition-fast:   150ms ease;
    --c4-transition-base:   250ms ease;
    --c4-transition-slow:   400ms ease;

    /* ── Layout ───────────────────────────────────────────────────────────── */
    --c4-max-width:      1200px;
    --c4-gutter:         24px;
}


/* ==========================================================================
   3. TYPOGRAPHY

   Scale derived from Figma "Styles" page.
   All headings use the "4 Headline" typeface.
   All body text uses the "4 Text" typeface.
   ========================================================================== */

/* ── Headings ─────────────────────────────────────────────────────────────── */

.c4-h1, h1 {
    font-family: var(--c4-font-headline);
    font-size: 80px;
    line-height: 83px;    /* ~1.04 ratio — very tight */
    font-weight: 700;     /* Bold */
    letter-spacing: -0.02em;
    margin: 0 0 var(--c4-space-lg);
}

.c4-h2, h2 {
    font-family: var(--c4-font-headline);
    font-size: 50px;
    line-height: 53px;    /* ~1.06 ratio */
    font-weight: 700;     /* Bold */
    letter-spacing: -0.01em;
    margin: 0 0 var(--c4-space-md);
}

.c4-h3, h3 {
    font-family: var(--c4-font-headline);
    font-size: 36px;
    line-height: 39px;    /* ~1.08 ratio */
    font-weight: 700;     /* Bold */
    margin: 0 0 var(--c4-space-md);
}

.c4-h4, h4 {
    font-family: var(--c4-font-headline);
    font-size: 30px;
    line-height: 33px;    /* ~1.10 ratio */
    font-weight: 700;     /* Bold */
    margin: 0 0 var(--c4-space-sm);
}

/* H5 — intentionally LARGER than H4 but lighter weight.
   Used for decorative/feature text, pull quotes, or large subtitles.
   The visual hierarchy comes from weight contrast, not size. */
.c4-h5, h5 {
    font-family: var(--c4-font-headline);
    font-size: 40px;
    line-height: 43px;    /* ~1.08 ratio */
    font-weight: 400;     /* Regular — deliberately lighter than H3/H4 */
    margin: 0 0 var(--c4-space-md);
}

.c4-h6, h6 {
    font-family: var(--c4-font-headline);
    font-size: 20px;
    line-height: 23px;    /* ~1.15 ratio */
    font-weight: 700;     /* Bold */
    margin: 0 0 var(--c4-space-sm);
}

/* Subheader — thin, elegant display text for section intros or quotes */
.c4-subheader {
    font-family: var(--c4-font-headline);
    font-size: 33px;
    line-height: 40px;    /* ~1.21 ratio — more open than headings */
    font-weight: 200;     /* Extra Light */
    margin: 0 0 var(--c4-space-md);
}


/* ── Body text ────────────────────────────────────────────────────────────── */

.c4-body-large {
    font-family: var(--c4-font-body);
    font-size: 19px;
    line-height: 23px;    /* ~1.21 ratio */
    font-weight: 500;     /* Medium */
}

.c4-body, .c4-body-medium, body {
    font-family: var(--c4-font-body);
    font-size: 17px;
    line-height: 23px;    /* ~1.35 ratio */
    font-weight: 400;     /* Regular */
}

.c4-body-small {
    font-family: var(--c4-font-body);
    font-size: 16px;
    line-height: 22px;    /* ~1.375 ratio */
    font-weight: 400;     /* Regular */
}


/* ── Responsive typography (mobile scale-down) ────────────────────────────── */

@media (max-width: 768px) {
    .c4-h1, h1 {
        font-size: 44px;
        line-height: 48px;
    }

    .c4-h2, h2 {
        font-size: 32px;
        line-height: 36px;
    }

    .c4-h3, h3 {
        font-size: 26px;
        line-height: 30px;
    }

    .c4-h4, h4 {
        font-size: 22px;
        line-height: 26px;
    }

    .c4-h5, h5 {
        font-size: 28px;
        line-height: 32px;
    }

    .c4-h6, h6 {
        font-size: 18px;
        line-height: 22px;
    }

    .c4-subheader {
        font-size: 24px;
        line-height: 30px;
    }
}

/* ── Extra-small screen typography (phones ≤ 480px) ─────────────────────── */

@media (max-width: 480px) {
    .c4-h1, h1 {
        font-size: 32px;
        line-height: 36px;
    }

    .c4-h2, h2 {
        font-size: 26px;
        line-height: 30px;
    }

    .c4-h3, h3 {
        font-size: 22px;
        line-height: 26px;
    }

    .c4-subheader {
        font-size: 20px;
        line-height: 26px;
    }

    .c4-btn {
        padding: 12px 24px;
        font-size: 15px;
    }

    .c4-section {
        padding: 48px 0;
    }
}


/* ── Touch device polish ─────────────────────────────────────────────────── */

@media (hover: none) {
    /* Prevent sticky hover states on touch devices */
    .c4-btn-primary:hover {
        background-color: var(--c4-green);
        border-color: var(--c4-green);
        box-shadow: none;
    }
    .c4-btn-secondary:hover {
        border-color: var(--c4-dark-navy);
        box-shadow: none;
    }
}

/* Remove iOS tap highlight */
a, button, [role="button"] {
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   4. BUTTONS

   Two variants visible in Figma:
   - Primary (Green): bright green bg, dark navy text
   - Secondary (Dark): dark navy bg, white text, coloured border on hover

   Both have Normal and Hover states.
   ========================================================================== */

.c4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--c4-font-body);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: all var(--c4-transition-fast);
    white-space: nowrap;
}

.c4-btn:focus-visible {
    outline: 2px solid var(--c4-arsenic-blue);
    outline-offset: 2px;
}

/* Primary — Green CTA */
.c4-btn-primary {
    background-color: var(--c4-green);
    color: var(--c4-dark-navy);
    border-color: var(--c4-green);
}

.c4-btn-primary:hover {
    background-color: #6EE88A;           /* Slightly darker green on hover */
    border-color: #6EE88A;
    color: var(--c4-dark-navy);
    box-shadow: var(--c4-shadow-md);
}

.c4-btn-primary:active {
    background-color: #5DD878;
    transform: scale(0.97);
}

/* Secondary — Dark Navy */
.c4-btn-secondary {
    background-color: var(--c4-dark-navy);
    color: var(--c4-white);
    border-color: var(--c4-dark-navy);
}

.c4-btn-secondary:hover {
    background-color: var(--c4-dark-navy);
    color: var(--c4-white);
    border-color: var(--c4-arsenic-blue);   /* Cyan border appears on hover */
    box-shadow: var(--c4-shadow-md);
}

.c4-btn-secondary:active {
    background-color: #0F1020;
    transform: scale(0.97);
}

/* Ghost / Outline variant (for use on coloured backgrounds) */
.c4-btn-ghost {
    background-color: transparent;
    color: var(--c4-white);
    border-color: var(--c4-white);
}

.c4-btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--c4-white);
}

/* Small button modifier */
.c4-btn-sm {
    padding: 10px 20px;
    font-size: 15px;
}

/* Large button modifier */
.c4-btn-lg {
    padding: 18px 40px;
    font-size: 19px;
}

/* Full-width button */
.c4-btn-block {
    width: 100%;
}


/* ==========================================================================
   5. CARDS

   Three card variants identified in Figma Components page:

   A) Light Subject Card (4-column grid)
      — Coloured header band + white body
      — Used for subject/topic browsing

   B) Dark Subject Card (4-column grid, dark variant)
      — Coloured header band + dark navy body
      — Alternative theme for dark page sections

   C) Large Feature Card (2-column grid)
      — Full dark navy/powder background
      — Coloured heading text (Arsenic Blue or Green)
      — Used for featured/promoted content (e.g. "4Schools Introduction")

   Subject colour mapping:
   - Arts & Design  → Leaf    (#E2FF89)
   - Careers Info    → Sky     (#89CDFF)
   - English         → Beach   (#FFE589)
   - Humanities      → Candy   (#FF99DD)
   ========================================================================== */

/* ── Base card ────────────────────────────────────────────────────────────── */

.c4-card {
    display: flex;
    flex-direction: column;
    border-radius: 0;              /* Cards appear to have sharp corners in Figma */
    overflow: hidden;
    transition: transform var(--c4-transition-fast), box-shadow var(--c4-transition-fast);
}

.c4-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--c4-shadow-lg);
}

/* ── Card header (coloured band) ─────────────────────────────────────────── */

.c4-card__header {
    padding: var(--c4-space-lg);
    min-height: 100px;
    display: flex;
    align-items: flex-end;
}

.c4-card__header-title {
    font-family: var(--c4-font-headline);
    font-size: 30px;
    line-height: 33px;
    font-weight: 700;
    color: var(--c4-dark-navy);
    margin: 0;
}

/* ── Card body ────────────────────────────────────────────────────────────── */

.c4-card__body {
    padding: var(--c4-space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.c4-card__text {
    font-family: var(--c4-font-body);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    margin: 0 0 var(--c4-space-md);
    flex: 1;
}

/* ── Card link (Download > ) ─────────────────────────────────────────────── */

.c4-card__link {
    font-family: var(--c4-font-body);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--c4-transition-fast);
}

.c4-card__link:hover {
    gap: 10px;
    text-decoration: none;
}

.c4-card__link::after {
    content: ">";
    font-weight: 700;
}


/* ── Variant A: Light Subject Card ────────────────────────────────────────── */

.c4-card--light .c4-card__body {
    background-color: var(--c4-white);
}

.c4-card--light .c4-card__text {
    color: var(--c4-dark-navy);
}

.c4-card--light .c4-card__link {
    color: var(--c4-dark-navy);
}


/* ── Variant B: Dark Subject Card ─────────────────────────────────────────── */

.c4-card--dark .c4-card__body {
    background-color: var(--c4-dark-navy);
}

.c4-card--dark .c4-card__text {
    color: rgba(255, 255, 255, 0.8);
}

.c4-card--dark .c4-card__link {
    color: var(--c4-white);
}


/* ── Variant C: Large Feature Card ────────────────────────────────────────── */

.c4-card--feature {
    background-color: var(--c4-dark-powder);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.c4-card--feature .c4-card__header {
    background-color: transparent;
    min-height: auto;
}

.c4-card--feature .c4-card__header-title {
    font-size: 36px;
    line-height: 39px;
    color: var(--c4-arsenic-blue);     /* Coloured heading on dark bg */
}

.c4-card--feature .c4-card__body {
    background-color: transparent;
}

.c4-card--feature .c4-card__text {
    color: rgba(255, 255, 255, 0.8);
}

.c4-card--feature .c4-card__link {
    color: var(--c4-green);
}


/* ── Subject colour modifiers (applied to card header) ───────────────────── */

.c4-card--arts .c4-card__header       { background-color: var(--c4-leaf); }
.c4-card--careers .c4-card__header    { background-color: var(--c4-sky); }
.c4-card--english .c4-card__header    { background-color: var(--c4-beach); }
.c4-card--humanities .c4-card__header { background-color: var(--c4-candy); }

/* Feature card title colour by subject */
.c4-card--feature.c4-card--intro .c4-card__header-title     { color: var(--c4-arsenic-blue); }
.c4-card--feature.c4-card--careers .c4-card__header-title   { color: var(--c4-sky); }
.c4-card--feature.c4-card--arts .c4-card__header-title      { color: var(--c4-leaf); }
.c4-card--feature.c4-card--english .c4-card__header-title   { color: var(--c4-beach); }
.c4-card--feature.c4-card--humanities .c4-card__header-title { color: var(--c4-candy); }

/* Feature card link colour by subject */
.c4-card--feature.c4-card--intro .c4-card__link     { color: var(--c4-arsenic-blue); }
.c4-card--feature.c4-card--careers .c4-card__link   { color: var(--c4-sky); }
.c4-card--feature.c4-card--arts .c4-card__link      { color: var(--c4-leaf); }
.c4-card--feature.c4-card--english .c4-card__link   { color: var(--c4-beach); }
.c4-card--feature.c4-card--humanities .c4-card__link { color: var(--c4-candy); }


/* ==========================================================================
   6. CARD GRID LAYOUTS
   ========================================================================== */

.c4-grid {
    display: grid;
    gap: var(--c4-space-lg);
    width: 100%;
}

/* 4-column grid — subject cards */
.c4-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

/* 2-column grid — feature cards */
.c4-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

/* 3-column grid — general purpose */
.c4-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .c4-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    .c4-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .c4-grid--4col,
    .c4-grid--3col,
    .c4-grid--2col {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   7. LAYOUT UTILITIES
   ========================================================================== */

.c4-container {
    max-width: var(--c4-max-width);
    margin: 0 auto;
    padding: 0 var(--c4-gutter);
}

.c4-section {
    padding: var(--c4-space-3xl) 0;
}

.c4-section--dark {
    background-color: var(--c4-dark-navy);
    color: var(--c4-white);
}

.c4-section--powder {
    background-color: var(--c4-dark-powder);
    color: var(--c4-white);
}

.c4-section--grey {
    background-color: var(--c4-grey);
    color: var(--c4-dark-navy);
}

.c4-section--white {
    background-color: var(--c4-white);
    color: var(--c4-dark-navy);
}


/* ==========================================================================
   8. UTILITY CLASSES
   ========================================================================== */

/* Text colours */
.c4-text-navy       { color: var(--c4-dark-navy) !important; }
.c4-text-white      { color: var(--c4-white) !important; }
.c4-text-arsenic    { color: var(--c4-arsenic-blue) !important; }
.c4-text-green      { color: var(--c4-green) !important; }
.c4-text-candy      { color: var(--c4-candy) !important; }
.c4-text-beach      { color: var(--c4-beach) !important; }
.c4-text-sky        { color: var(--c4-sky) !important; }
.c4-text-leaf       { color: var(--c4-leaf) !important; }

/* Background colours */
.c4-bg-navy         { background-color: var(--c4-dark-navy) !important; }
.c4-bg-powder       { background-color: var(--c4-dark-powder) !important; }
.c4-bg-white        { background-color: var(--c4-white) !important; }
.c4-bg-grey         { background-color: var(--c4-grey) !important; }
.c4-bg-green        { background-color: var(--c4-green) !important; }
.c4-bg-arsenic      { background-color: var(--c4-arsenic-blue) !important; }
.c4-bg-candy        { background-color: var(--c4-candy) !important; }
.c4-bg-beach        { background-color: var(--c4-beach) !important; }
.c4-bg-sky          { background-color: var(--c4-sky) !important; }
.c4-bg-leaf         { background-color: var(--c4-leaf) !important; }

/* Font families */
.c4-font-headline   { font-family: var(--c4-font-headline) !important; }
.c4-font-body       { font-family: var(--c4-font-body) !important; }

/* Font weights */
.c4-fw-extralight   { font-weight: 200 !important; }
.c4-fw-light        { font-weight: 300 !important; }
.c4-fw-regular      { font-weight: 400 !important; }
.c4-fw-medium       { font-weight: 500 !important; }
.c4-fw-bold         { font-weight: 700 !important; }

/* ═══ Scrollbar styling ═══ */

/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #15162A;
}

::-webkit-scrollbar-thumb {
    background: #89FFA0;
    border: 2px solid #15162A;
}

::-webkit-scrollbar-thumb:hover {
    background: #a5ffb8;
}

::-webkit-scrollbar-corner {
    background: #15162A;
}

/* Dialog/modal scrollbars — thinner, subtler */
.rz-dialog-content::-webkit-scrollbar,
.rz-dialog-wrapper::-webkit-scrollbar {
    width: 6px;
}

.rz-dialog-content::-webkit-scrollbar-track,
.rz-dialog-wrapper::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.rz-dialog-content::-webkit-scrollbar-thumb,
.rz-dialog-wrapper::-webkit-scrollbar-thumb {
    background: #72DDE8;
    border: 1px solid #f5f5f5;
}

.rz-dialog-content::-webkit-scrollbar-thumb:hover,
.rz-dialog-wrapper::-webkit-scrollbar-thumb:hover {
    background: #0CBBCD;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #89FFA0 #15162A;
}

.rz-dialog-content,
.rz-dialog-wrapper {
    scrollbar-color: #72DDE8 #f5f5f5;
}

/* ═══ Global: C4-branded Radzen dialog chrome ═══ */

/* Dialog container — sharp corners, dark navy title bar */
.rz-dialog {
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(21, 22, 42, 0.35) !important;
    border: 1px solid rgba(21, 22, 42, 0.1) !important;
}

/* Title bar */
.rz-dialog-titlebar {
    background: #15162A !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 14px 20px !important;
    border-bottom: 3px solid #89FFA0 !important;
    font-family: var(--c4-font-headline, '4Headline', sans-serif) !important;
}

.rz-dialog-titlebar .rz-dialog-title {
    font-family: var(--c4-font-headline, '4Headline', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #fff !important;
}

/* Close button in title bar */
.rz-dialog-titlebar .rz-dialog-titlebar-close {
    color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 0 !important;
    transition: color 150ms ease, background 150ms ease;
}

.rz-dialog-titlebar .rz-dialog-titlebar-close:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Content area */
.rz-dialog-content {
    border-radius: 0 !important;
    background: #fff !important;
}

/* Overlay backdrop */
.rz-dialog-mask {
    background: rgba(21, 22, 42, 0.6) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Tabs inside dialogs */
.rz-dialog-content .rz-tabview-nav {
    border-bottom: 2px solid #e5e7eb !important;
}

.rz-dialog-content .rz-tabview-selected .rz-tabview-nav-link {
    border-color: #89FFA0 !important;
    color: #15162A !important;
    font-weight: 700 !important;
}

/* Progress bars inside dialogs */
.rz-dialog-content .rz-progressbar-value {
    background: #89FFA0 !important;
}

/* Text inputs inside dialogs */
.rz-dialog-content .rz-textbox,
.rz-dialog-content .rz-inputtext,
.rz-dialog-content textarea.rz-textarea {
    border-radius: 0 !important;
    border: 1px solid #d1d5db !important;
    font-family: var(--c4-font-body, '4Text', sans-serif) !important;
}

.rz-dialog-content .rz-textbox:focus,
.rz-dialog-content .rz-inputtext:focus,
.rz-dialog-content textarea.rz-textarea:focus {
    border-color: #89FFA0 !important;
    box-shadow: 0 0 0 2px rgba(137, 255, 160, 0.2) !important;
}

/* Dropdowns inside dialogs */
.rz-dialog-content .rz-dropdown {
    border-radius: 0 !important;
}

/* Strip rounded corners from all step content inside dialogs (C4 sharp-edge design) */
.rz-dialog-content .rz-button,
.rz-dialog-content [class*="rounded-lg"],
.rz-dialog-content [class*="rounded-xl"],
.rz-dialog-content [class*="rounded-2xl"],
.rz-dialog-content [class*="rounded-md"] {
    border-radius: 0 !important;
}

/* Keep small pill badges rounded (intentional design element) */
.rz-dialog-content [class*="rounded-full"] {
    border-radius: 9999px !important;
}

/* Step type action buttons inside dialogs */
.rz-dialog-content .step-root .rz-button {
    border-radius: 0 !important;
    font-family: var(--c4-font-body, '4Text', sans-serif) !important;
    font-weight: 700 !important;
}


/* ═══ Global: C4 fonts on Radzen dialogs (rendered at document root) ═══ */
.rz-dialog-content,
.rz-dialog-content *,
.rz-dialog-wrapper *,
.rz-dialog-content p,
.rz-dialog-content span,
.rz-dialog-content div,
.rz-dialog-content li,
.rz-dialog-content label,
.rz-dialog-content button,
.rz-dialog-content a,
.rz-dialog-content input,
.rz-dialog-content textarea,
.rz-dialog-content select {
    font-family: var(--c4-font-body, '4Text', sans-serif) !important;
}

.rz-dialog-content h1,
.rz-dialog-content h2,
.rz-dialog-content h3,
.rz-dialog-content h4,
.rz-dialog-content h5,
.rz-dialog-content h6 {
    font-family: var(--c4-font-headline, '4Headline', sans-serif) !important;
}

.rz-dialog-content .material-symbols-outlined,
.rz-dialog-content .material-icons {
    font-family: 'Material Symbols Outlined', 'Material Icons' !important;
}

/* ═══ Global: Force C4 fonts on ALL page content including raw HTML blocks ═══ */
body {
    font-family: var(--c4-font-body, '4Text', sans-serif) !important;
}

body p, body span, body div, body a, body button, body input, body textarea, body select,
body label, body li, body td, body th, body dt, body dd, body blockquote, body figcaption,
body summary, body details, body strong, body em, body b, body i, body small, body pre, body code {
    font-family: inherit !important;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: var(--c4-font-headline, '4Headline', sans-serif) !important;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
}

.material-icons {
    font-family: 'Material Icons' !important;
}

.rzi, i.rzi, .rz-button-icon-left, .rz-button-icon-right {
    font-family: 'Material Symbols Outlined', 'Material Icons' !important;
}

/* ═══ Global: C4 branded buttons on step types, dialogs, and Radzen components ═══ */

/* Primary buttons (Continue, Next, Submit, Complete, Close, etc.) */
.rz-button.rz-primary,
.rz-button.rz-variant-filled.rz-primary,
button.rz-button.rz-primary {
    background: #89FFA0 !important;
    color: #15162A !important;
    border-color: #89FFA0 !important;
    border-radius: 0 !important;
}

.rz-button.rz-primary:hover,
.rz-button.rz-variant-filled.rz-primary:hover {
    background: #6EE88A !important;
    border-color: #6EE88A !important;
}

/* Secondary/outline buttons */
.rz-button.rz-secondary,
.rz-button.rz-variant-outlined {
    background: transparent !important;
    color: #15162A !important;
    border: 2px solid #15162A !important;
    border-radius: 0 !important;
}

.rz-button.rz-secondary:hover,
.rz-button.rz-variant-outlined:hover {
    background: #15162A !important;
    color: #fff !important;
}

/* Danger/warning buttons (e.g. close, cancel) */
.rz-button.rz-danger {
    background: #15162A !important;
    color: #fff !important;
    border-color: #15162A !important;
    border-radius: 0 !important;
}

/* Info/light buttons */
.rz-button.rz-info,
.rz-button.rz-light {
    background: #1B2A96 !important;
    color: #fff !important;
    border-color: #1B2A96 !important;
    border-radius: 0 !important;
}

/* Success buttons */
.rz-button.rz-success {
    background: #89FFA0 !important;
    color: #15162A !important;
    border-color: #89FFA0 !important;
    border-radius: 0 !important;
}

/* All Radzen buttons — remove border radius */
.rz-button {
    border-radius: 0 !important;
}

/* Step navigation buttons (btn-primary/btn-secondary from Bootstrap) */
.rz-dialog-content .btn-primary,
.rz-dialog-content .btn {
    background: #89FFA0 !important;
    color: #15162A !important;
    border-color: #89FFA0 !important;
    border-radius: 0 !important;
}

.rz-dialog-content .btn-primary:hover,
.rz-dialog-content .btn:hover {
    background: #6EE88A !important;
    border-color: #6EE88A !important;
}

.rz-dialog-content .btn-secondary {
    background: #15162A !important;
    color: #fff !important;
    border-color: #15162A !important;
    border-radius: 0 !important;
}

.rz-dialog-content .btn-outline-primary {
    background: transparent !important;
    color: #15162A !important;
    border: 2px solid #15162A !important;
    border-radius: 0 !important;
}

/* Progress bars in steps */
.rz-dialog-content .rz-progressbar-value,
.rz-progressbar-value {
    background: #89FFA0 !important;
}

/* Radzen tabs in steps */
.rz-tabview-nav .rz-tabview-selected .rz-tabview-nav-link {
    border-color: #89FFA0 !important;
    color: #15162A !important;
}