/* ── Brand Fonts ── */
@font-face {
    font-family: 'MagnoSans';
    src: url('/fonts/MagnoSans-Bold.woff2') format('woff2'),
         url('/fonts/MagnoSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

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

/* Apply fonts site-wide */
body {
    font-family: 'InterTight', system-ui, sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'MagnoSans', system-ui, sans-serif;
}

:root {
    --brand-blue: #263A45;
    --brand-blue-dark: #1F303A; /* slightly darker for top bar */
    --brand-orange: #DD7D3D;
    --brand-orange-hover: #E58A4A; /* hover */
    --brand-teal: #86A6A0;
}

/* helpers you can use in Razor markup */
.bg-brand {
    background-color: var(--brand-blue);
}

.bg-brand-dark {
    background-color: var(--brand-blue-dark);
}

.bg-accent {
    background-color: var(--brand-orange);
}

    .bg-accent:hover {
        background-color: var(--brand-orange-hover);
    }

.text-brand {
    color: var(--brand-blue);
}

.text-accent {
    color: var(--brand-orange);
}

.border-teal {
    border-color: var(--brand-teal);
}

.ring-teal:focus {
    outline: 3px solid rgba(134,166,160,.45);
    outline-offset: 2px;
}
html, body {
    overflow-x: clip;
}

/* fallback for older browsers */
@supports not (overflow: clip) {
    html, body {
        overflow-x: hidden;
    }
}