@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    src: url('/fonts/Urbanist-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --kendo-font-family: 'Urbanist', sans-serif;
    --red-1: #f7e7e1; /* Soft Blush / Cream Rose */
    --red-2: #da3e52; /* Vibrant Warm Red */
    --red-3: #C60C46; /* Deep Red / Crimson */
    --blue-1: #809bbf; /* Steel Blue */
    --blue-2: #005a84; /* Dark Navy Blue */
    --blue-3: #005695; /* Dark Blue */
    --blue-3-rgb: 0, 86, 149;
    --neutral-1: #f5f5f5; /* Neutral 100 */
    --neutral-2: #d6d6d6; /* Neutral 300 */
    --neutral-3: #808080; /* Neutral 500 */
    --neutral-3-rgb: 128, 128, 128;
    --neutral-4: #4d4d4d; /* Neutral 700 */
    --neutral-5: #1a1a1a; /* Neutral 900 */
    --neutral-5-rgb: 26, 26, 26;
    --purple: #682d75; /* Deep Purple */
    --gold: #e8d3a2; /* Light Gold / Sand */
    --gold-rgb: 232, 211, 162;

    /* Fluid type scale - clamp(min, preferred, max), scales between 320px and 1280px
       viewports. Values map onto the hardcoded px sizes used across the site so
       existing text keeps roughly the same size on desktop while shrinking on mobile. */
    --text-sm: clamp(0.9375rem, 0.9095rem + 0.14vw, 1.0625rem);   /* ~15px -> 17px */
    --text-md: clamp(1.0625rem, 1.0205rem + 0.21vw, 1.25rem);     /* ~17px -> 20px */
    --text-lg: clamp(1.25rem, 1.1925rem + 0.28vw, 1.5rem);        /* ~20px -> 24px */
    --text-xl: clamp(1.375rem, 1.2865rem + 0.44vw, 1.75rem);      /* ~22px -> 28px */
    --text-2xl: clamp(1.5rem, 1.396rem + 0.52vw, 1.875rem);       /* ~24px -> 30px */
    --text-3xl: clamp(1.625rem, 1.5045rem + 0.6vw, 2rem);         /* ~26px -> 32px */
    --text-4xl: clamp(1.75rem, 1.613rem + 0.69vw, 2.125rem);      /* ~28px -> 34px */

    /* Fluid spacing scale for section padding/gaps that were hardcoded in px. */
    --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
    --space-sm: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
    --space-md: clamp(1.25rem, 1.05rem + 1vw, 2rem);
    --space-lg: clamp(2rem, 1.6rem + 2vw, 3.5rem);
    --space-xl: clamp(2.5rem, 1.75rem + 3.75vw, 5rem);

    /* Fluid gutter used by .content-container below. */
    --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

    /* Height of the StickyControlBar's mobile/tablet bottom bar (below 1024px).
       Shared with MainLayout/PublicLayout so <main> can reserve space for it. */
    --bottom-bar-height: 72px;
}

/* Reusable page content column. Replaces per-component fixed pixel widths
   (1200px MainLayout column, 850px SurveyCard, etc.) with a single fluid max-width. */
.content-container {
    width: min(1200px, 100% - 2 * var(--gutter));
    margin-inline: auto;
}

/* WCAG 2.5.5/2.5.8 minimum touch target. Applied to nav links, the hamburger
   toggle, carousel pager buttons, and the mobile bottom control bar. */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Background colors */
.bg-red-1 { background-color: var(--red-1); }
.bg-red-2 { background-color: var(--red-2); }
.bg-red-3 { background-color: var(--red-3); }
.bg-blue-1 { background-color: var(--blue-1); }
.bg-blue-2 { background-color: var(--blue-2); }
.bg-blue-3 { background-color: var(--blue-3); }
.bg-neutral-1 { background-color: var(--neutral-1); }
.bg-neutral-2 { background-color: var(--neutral-2); }
.bg-neutral-3 { background-color: var(--neutral-3); }
.bg-neutral-4 { background-color: var(--neutral-4); }
.bg-neutral-5 { background-color: var(--neutral-5); }
.bg-purple { background-color: var(--purple); }
.bg-gold { background-color: var(--gold); }

/* Text colors */
.text-red-1 { color: var(--red-1); }
.text-red-2 { color: var(--red-2); }
.text-red-3 { color: var(--red-3); }
.text-blue-1 { color: var(--blue-1); }
.text-blue-2 { color: var(--blue-2); }
.text-blue-3 { color: var(--blue-3); }
.text-neutral-1 { color: var(--neutral-1); }
.text-neutral-2 { color: var(--neutral-2); }
.text-neutral-3 { color: var(--neutral-3); }
.text-neutral-4 { color: var(--neutral-4); }
.text-neutral-5 { color: var(--neutral-5); }
.text-purple { color: var(--purple); }
.text-gold { color: var(--gold); }

/* Borders */
.border-red-1 { border: 1px solid var(--red-1); }
.border-red-2 { border: 1px solid var(--red-2); }
.border-red-3 { border: 1px solid var(--red-3); }
.border-blue-1 { border: 1px solid var(--blue-1); }
.border-blue-2 { border: 1px solid var(--blue-2); }
.border-neutral-1 { border: 1px solid var(--neutral-1); }
.border-neutral-2 { border: 1px solid var(--neutral-2); }
.border-neutral-3 { border: 1px solid var(--neutral-3); }
.border-neutral-4 { border: 1px solid var(--neutral-4); }
.border-neutral-5 { border: 1px solid var(--neutral-5); }
.border-purple { border: 1px solid var(--purple); }
.border-gold { border: 1px solid var(--gold); }

/* SVG fill colors */
.fill-red-1 { fill: var(--red-1); }
.fill-red-2 { fill: var(--red-2); }
.fill-red-3 { fill: var(--red-3); }
.fill-blue-1 { fill: var(--blue-1); }
.fill-blue-2 { fill: var(--blue-2); }
.fill-neutral-1 { fill: var(--neutral-1); }
.fill-neutral-2 { fill: var(--neutral-2); }
.fill-neutral-3 { fill: var(--neutral-3); }
.fill-neutral-4 { fill: var(--neutral-4); }
.fill-neutral-5 { fill: var(--neutral-5); }
.fill-purple { fill: var(--purple); }
.fill-gold { fill: var(--gold); }

/* SVG stroke colors */
.stroke-red-1 { stroke: var(--red-1); }
.stroke-red-2 { stroke: var(--red-2); }
.stroke-red-3 { stroke: var(--red-3); }
.stroke-blue-1 { stroke: var(--blue-1); }
.stroke-blue-2 { stroke: var(--blue-2); }
.stroke-neutral-1 { stroke: var(--neutral-1); }
.stroke-neutral-2 { stroke: var(--neutral-2); }
.stroke-neutral-3 { stroke: var(--neutral-3); }
.stroke-neutral-4 { stroke: var(--neutral-4); }
.stroke-neutral-5 { stroke: var(--neutral-5); }
.stroke-purple { stroke: var(--purple); }
.stroke-gold { stroke: var(--gold); }

html, body {
    font-family: 'Urbanist', system-ui, sans-serif;
    margin: 0;
    padding: 0;
}

/* Visually hides content while keeping it available to screen readers (e.g. page h1 headings
   used to satisfy WCAG 1.3.1 / 2.4.6 on pages where a duplicate visible title isn't needed). */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link (WCAG 2.4.1 Bypass Blocks) - hidden until keyboard-focused, then shown
   at the top of the viewport so keyboard users can jump past the header/nav. */
.skip-link {
    position: absolute;
    top: -3rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background: #fff;
    color: var(--blue-3);
    font-weight: 700;
    text-decoration: underline;
    border-radius: 0 0 4px 4px;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus {
    top: 0;
}

/* Global fallback focus indicator (WCAG 2.4.7) - covers interactive elements that
   don't define their own :focus-visible style (e.g. the div-based controls
   converted to native <button>/<a> elements during remediation). Components with
   a more specific :focus-visible rule (e.g. .scroll-to-top-btn, .nav-item) keep
   their own styling since a same-specificity later rule would otherwise win. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #007acc;
    outline-offset: 2px;
}

a, .btn-link {
    color: #006bb7;
}

.btn-secondary {
    color: var(--blue-3);
    background-color: white;
    border: none;
}

.btn-secondary:hover {
    color: var(--blue-3);
    background-color: rgb(var(--neutral-5-rgb), .10)
}

/* Default TelerikButton styling */
.k-button-solid-base,
.k-button-solid-base:hover,
.k-button-solid-base.k-hover,
.k-button-solid-base:focus,
.k-button-solid-base.k-focus,
.k-button-solid-base:active,
.k-button-solid-base.k-active,
.k-button-solid-base.k-selected {
    background-color: var(--blue-3);
    background-image: none;
    border-color: var(--blue-3);
    color: #fff;
}

.k-button-solid-base:hover,
.k-button-solid-base.k-hover {
    filter: brightness(0.92);
}

.k-button-solid-base:active,
.k-button-solid-base.k-active,
.k-button-solid-base.k-selected {
    filter: brightness(0.85);
}
/* ----------- */