/* =============================================================
   GLOBALS.CSS
   Heart of Yorkshire — Employer Services Microsite
   Bootstrap 5 base overrides, fonts, spacing & typography
   ============================================================= */


/* -------------------------------------------------------------
   1. FONT FACES
   ------------------------------------------------------------- */

@font-face {
    font-family: "CaustenRound-Thin";
    src: url('/_fonts/CaustenRoundThin.woff2') format('woff2'), url('/_fonts/CaustenRoundThin.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-ExtraLight";
    src: url('/_fonts/CaustenRoundExtraLight.woff2') format('woff2'), url('/_fonts/CaustenRoundExtraLight.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-LightOblique";
    src: url('/_fonts/CaustenRoundLightOblique.woff2') format('woff2'), url('/_fonts/CaustenRoundLightOblique.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-ExtraLightOblique";
    src: url('/_fonts/CaustenRoundExtraLightOblique.woff2') format('woff2'), url('/_fonts/CaustenRoundExtraLightOblique.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-ThinOblique";
    src: url('/_fonts/CaustenRoundThinOblique.woff2') format('woff2'), url('/_fonts/CaustenRoundThinOblique.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-ExtraBold";
    src: url('/_fonts/CaustenRoundExtraBold.woff2') format('woff2'), url('/_fonts/CaustenRoundExtraBold.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-Bold";
    src: url('/_fonts/CaustenRoundBold.woff2') format('woff2'), url('/_fonts/CaustenRoundBold.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-BlackOblique";
    src: url('/_fonts/CaustenRoundBlackOblique.woff2') format('woff2'), url('/_fonts/CaustenRoundBlackOblique.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-Black";
    src: url('/_fonts/CaustenRoundBlack.woff2') format('woff2'), url('/_fonts/CaustenRoundBlack.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-BoldOblique";
    src: url('/_fonts/CaustenRoundBoldOblique.woff2') format('woff2'), url('/_fonts/CaustenRoundBoldOblique.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-SemiBoldOblique";
    src: url('/_fonts/CaustenRoundSemiBoldOblique.woff2') format('woff2'), url('/_fonts/CaustenRoundSemiBoldOblique.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-SemiBold";
    src: url('/_fonts/CaustenRoundSemiBold.woff2') format('woff2'), url('/_fonts/CaustenRoundSemiBold.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-MediumOblique";
    src: url('/_fonts/CaustenRoundMediumOblique.woff2') format('woff2'), url('/_fonts/CaustenRoundMediumOblique.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-RegularOblique";
    src: url('/_fonts/CaustenRoundRegularOblique.woff2') format('woff2'), url('/_fonts/CaustenRoundRegularOblique.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-ExtraBoldOblique";
    src: url('/_fonts/CaustenRoundExtraBoldOblique.woff2') format('woff2'), url('/_fonts/CaustenRoundExtraBoldOblique.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-Regular";
    src: url('/_fonts/CaustenRoundRegular.woff2') format('woff2'), url('/_fonts/CaustenRoundRegular.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-Light";
    src: url('/_fonts/CaustenRoundLight.woff2') format('woff2'), url('/_fonts/CaustenRoundLight.woff') format('woff'); }

@font-face {
    font-family: "CaustenRound-Medium";
    src: url('/_fonts/CaustenRoundMedium.woff2') format('woff2'), url('/_fonts/CaustenRoundMedium.woff') format('woff'); }

.fab {
    font-family: 'Font Awesome 5 Brands';
    font-weight: 400; }


/* -------------------------------------------------------------
   2. OVERRIDE BOOTSTRAP ROOT VARIABLES
   ------------------------------------------------------------- */

:root {
    --bs-font-sans-serif:   'CaustenRound-Regular', system-ui, -apple-system, sans-serif;
    --bs-font-monospace:    'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    --bs-body-font-family:  var(--bs-font-sans-serif);
    --bs-body-font-weight:  normal;
    --bs-body-line-height:  1.5;
    --bs-gutter-x:          1.5rem; }

body {
    font-family: var(--bs-body-font-family);
    font-weight: var(--bs-body-font-weight); }


/* -------------------------------------------------------------
   3. WIDER GUTTERS & SIDE MARGINS
   ------------------------------------------------------------- */

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
    .container,
    .container-fluid,
    .container-sm {
        --bs-gutter-x: 2.75rem; }

    .row {
        --bs-gutter-x: 2.5rem; } }

/* Tablet (576px – 991px) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .container,
    .container-fluid,
    .container-sm,
    .container-md {
        --bs-gutter-x: 2.5rem; }

    .row {
        --bs-gutter-x: 2rem; } }

/* Desktop (992px+) */
@media (min-width: 992px) {
    .container,
    .container-fluid,
    .container-lg,
    .container-xl,
    .container-xxl {
        --bs-gutter-x: 2rem; }

    .row {
        --bs-gutter-x: 2rem; } }


/* -------------------------------------------------------------
   4. EXTENDED SPACING SCALE (p-6 through p-12, m-6 through m-12)
   Spacer base = 1rem
   p-6 = 4rem / p-7 = 5rem / p-8 = 6rem / p-9 = 7rem
   p-10 = 8rem / p-11 = 10rem / p-12 = 12rem
   ------------------------------------------------------------- */

/* Padding — all sides */
.p-6  { padding: 4rem !important; }
.p-7  { padding: 5rem !important; }
.p-8  { padding: 6rem !important; }
.p-9  { padding: 7rem !important; }
.p-10 { padding: 8rem !important; }
.p-11 { padding: 10rem !important; }
.p-12 { padding: 12rem !important; }

/* Padding — top */
.pt-6  { padding-top: 4rem !important; }
.pt-7  { padding-top: 5rem !important; }
.pt-8  { padding-top: 6rem !important; }
.pt-9  { padding-top: 7rem !important; }
.pt-10 { padding-top: 8rem !important; }
.pt-11 { padding-top: 10rem !important; }
.pt-12 { padding-top: 12rem !important; }

/* Padding — bottom */
.pb-6  { padding-bottom: 4rem !important; }
.pb-7  { padding-bottom: 5rem !important; }
.pb-8  { padding-bottom: 6rem !important; }
.pb-9  { padding-bottom: 7rem !important; }
.pb-10 { padding-bottom: 8rem !important; }
.pb-11 { padding-bottom: 10rem !important; }
.pb-12 { padding-bottom: 12rem !important; }

/* Padding — left */
.ps-6  { padding-left: 4rem !important; }
.ps-7  { padding-left: 5rem !important; }
.ps-8  { padding-left: 6rem !important; }
.ps-9  { padding-left: 7rem !important; }
.ps-10 { padding-left: 8rem !important; }
.ps-11 { padding-left: 10rem !important; }
.ps-12 { padding-left: 12rem !important; }

/* Padding — right */
.pe-6  { padding-right: 4rem !important; }
.pe-7  { padding-right: 5rem !important; }
.pe-8  { padding-right: 6rem !important; }
.pe-9  { padding-right: 7rem !important; }
.pe-10 { padding-right: 8rem !important; }
.pe-11 { padding-right: 10rem !important; }
.pe-12 { padding-right: 12rem !important; }

/* Padding — x axis */
.px-6  { padding-left: 4rem !important; padding-right: 4rem !important; }
.px-7  { padding-left: 5rem !important; padding-right: 5rem !important; }
.px-8  { padding-left: 6rem !important; padding-right: 6rem !important; }
.px-9  { padding-left: 7rem !important; padding-right: 7rem !important; }
.px-10 { padding-left: 8rem !important; padding-right: 8rem !important; }
.px-11 { padding-left: 10rem !important; padding-right: 10rem !important; }
.px-12 { padding-left: 12rem !important; padding-right: 12rem !important; }

/* Padding — y axis */
.py-6  { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-7  { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-8  { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-9  { padding-top: 7rem !important; padding-bottom: 7rem !important; }
.py-10 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
.py-11 { padding-top: 10rem !important; padding-bottom: 10rem !important; }
.py-12 { padding-top: 12rem !important; padding-bottom: 12rem !important; }

/* Margin — all sides */
.m-6  { margin: 4rem !important; }
.m-7  { margin: 5rem !important; }
.m-8  { margin: 6rem !important; }
.m-9  { margin: 7rem !important; }
.m-10 { margin: 8rem !important; }
.m-11 { margin: 10rem !important; }
.m-12 { margin: 12rem !important; }

/* Margin — top */
.mt-6  { margin-top: 4rem !important; }
.mt-7  { margin-top: 5rem !important; }
.mt-8  { margin-top: 6rem !important; }
.mt-9  { margin-top: 7rem !important; }
.mt-10 { margin-top: 8rem !important; }
.mt-11 { margin-top: 10rem !important; }
.mt-12 { margin-top: 12rem !important; }

/* Margin — bottom */
.mb-6  { margin-bottom: 4rem !important; }
.mb-7  { margin-bottom: 5rem !important; }
.mb-8  { margin-bottom: 6rem !important; }
.mb-9  { margin-bottom: 7rem !important; }
.mb-10 { margin-bottom: 8rem !important; }
.mb-11 { margin-bottom: 10rem !important; }
.mb-12 { margin-bottom: 12rem !important; }

/* Margin — left */
.ms-6  { margin-left: 4rem !important; }
.ms-7  { margin-left: 5rem !important; }
.ms-8  { margin-left: 6rem !important; }
.ms-9  { margin-left: 7rem !important; }
.ms-10 { margin-left: 8rem !important; }
.ms-11 { margin-left: 10rem !important; }
.ms-12 { margin-left: 12rem !important; }

/* Margin — right */
.me-6  { margin-right: 4rem !important; }
.me-7  { margin-right: 5rem !important; }
.me-8  { margin-right: 6rem !important; }
.me-9  { margin-right: 7rem !important; }
.me-10 { margin-right: 8rem !important; }
.me-11 { margin-right: 10rem !important; }
.me-12 { margin-right: 12rem !important; }

/* Margin — x axis */
.mx-6  { margin-left: 4rem !important; margin-right: 4rem !important; }
.mx-7  { margin-left: 5rem !important; margin-right: 5rem !important; }
.mx-8  { margin-left: 6rem !important; margin-right: 6rem !important; }
.mx-9  { margin-left: 7rem !important; margin-right: 7rem !important; }
.mx-10 { margin-left: 8rem !important; margin-right: 8rem !important; }
.mx-11 { margin-left: 10rem !important; margin-right: 10rem !important; }
.mx-12 { margin-left: 12rem !important; margin-right: 12rem !important; }

/* Margin — y axis */
.my-6  { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.my-7  { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.my-8  { margin-top: 6rem !important; margin-bottom: 6rem !important; }
.my-9  { margin-top: 7rem !important; margin-bottom: 7rem !important; }
.my-10 { margin-top: 8rem !important; margin-bottom: 8rem !important; }
.my-11 { margin-top: 10rem !important; margin-bottom: 10rem !important; }
.my-12 { margin-top: 12rem !important; margin-bottom: 12rem !important; }


/* -------------------------------------------------------------
   5. RESPONSIVE SPACING — scale down large spacing on mobile
   ------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .py-8,
    .py-9,
    .py-10,
    .py-11,
    .py-12 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important; }

    .pt-8, .pt-9, .pt-10, .pt-11, .pt-12 { padding-top: 4rem !important; }
    .pb-8, .pb-9, .pb-10, .pb-11, .pb-12 { padding-bottom: 4rem !important; }

    .my-8,
    .my-9,
    .my-10,
    .my-11,
    .my-12 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important; }

    .mt-8, .mt-9, .mt-10, .mt-11, .mt-12 { margin-top: 3rem !important; }
    .mb-8, .mb-9, .mb-10, .mb-11, .mb-12 { margin-bottom: 3rem !important; } }


/* -------------------------------------------------------------
   6. TYPOGRAPHY
   ------------------------------------------------------------- */

h1, .h1 { font-weight: normal; letter-spacing: -0.02em; }
h2, .h2 { font-weight: normal; letter-spacing: -0.01em; }
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 { font-weight: normal; }

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-weight: normal;
    letter-spacing: -0.03em; }

.lead {
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 1.7; }

/* Font weight utility classes — map to CaustenRound variants */
.fw-thin        { font-family: "CaustenRound-Thin" !important; }
.fw-extralight  { font-family: "CaustenRound-ExtraLight" !important; }
.fw-light       { font-family: "CaustenRound-Light" !important; }
.fw-normal      { font-weight: normal !important; }
.fw-regular     { font-family: "CaustenRound-Regular" !important; }
.fw-medium      { font-family: "CaustenRound-Medium" !important; }
.fw-semibold    { font-family: "CaustenRound-SemiBold" !important; }
.fw-bold        { font-family: "CaustenRound-Bold" !important; }
.fw-extrabold   { font-family: "CaustenRound-ExtraBold" !important; }
.fw-black       { font-family: "CaustenRound-Black" !important; }

.fs-1 { font-size: calc(1.375rem + 1.5vw) !important; }
.fs-2 { font-size: calc(1.325rem + 0.9vw) !important; }
.fs-3 { font-size: calc(1.3rem + 0.6vw) !important; }
.fs-4 { font-size: calc(1.275rem + 0.3vw) !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1.1rem !important; }
.fs-7 { font-size: 1rem !important; }
.fs-8 { font-size: 0.9rem !important; }
.fs-9 { font-size: 0.8rem !important; }

/* All weight classes must suppress Bootstrap's numeric font-weight */
.fw-thin,
.fw-extralight,
.fw-light,
.fw-normal,
.fw-regular,
.fw-medium,
.fw-semibold,
.fw-bold,
.fw-extrabold,
.fw-black { font-weight: normal !important; }

/* -------------------------------------------------------------
   LETTER SPACING UTILITIES
   ------------------------------------------------------------- */

.ls-tight   { letter-spacing: -0.03em !important; }
.ls-snug    { letter-spacing: -0.02em !important; }
.ls-normal  { letter-spacing: 0 !important; }
.ls-wide    { letter-spacing: 0.04em !important; }
.ls-wider   { letter-spacing: 0.08em !important; }
.ls-widest  { letter-spacing: 0.16em !important; }