/* Centralized font-face declarations for walkers-site */

@font-face {
    font-family: 'Selawik';
    src: url('fonts/Selawik-Bold.woff2') format('woff2'),
         url('fonts/Selawik-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Selawik';
    src: url('fonts/Selawik-Regular.woff2') format('woff2'),
         url('fonts/Selawik-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Selawik Semilight';
    src: url('fonts/Selawik-Semilight.woff2') format('woff2'),
         url('fonts/Selawik-Semilight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Selawik';
    src: url('fonts/Selawik-Light.woff2') format('woff2'),
         url('fonts/Selawik-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Selawik';
    src: url('fonts/Selawik-Semibold.woff2') format('woff2'),
         url('fonts/Selawik-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Josefin';
    src: url('fonts/JosefinSans-Regular.woff2') format('woff2'),
         url('fonts/JosefinSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aleo';
    src: url('fonts/Aleo-Regular.woff2') format('woff2'),
         url('fonts/Aleo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aleo-SemiBold';
    src: url('fonts/Aleo-SemiBold.woff2') format('woff2'),
         url('fonts/Aleo-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aleo-Medium';
    src: url('fonts/Aleo-Medium.woff2') format('woff2'),
         url('fonts/Aleo-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'nexa_rust_sansblack';
    src: url('fonts/nexa-rust.sans-black-webfont.woff2') format('woff2'),
         url('fonts/nexa-rust.sans-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-selawik: 'Selawik', Arial, sans-serif;
    --font-josefin: 'Josefin', serif;
    --font-aleo: 'Aleo', Arial, sans-serif;
    --font-nexa: 'nexa_rust_sansblack', Arial, sans-serif;
}

.font-selawik {
    font-family: var(--font-selawik) !important;
}

.font-josefin {
    font-family: var(--font-josefin) !important;
}

/* .font-aleo {
    font-family: var(--font-aleo) !important;
}

.font-nexa {
    font-family: var(--font-nexa) !important;
} */

:root {
    --text-size: clamp(14px,1vw,32px);
    --heading-size: clamp(18px, 1.6vw, 50px);
    --big-heading-size: clamp(50px,3vw,92px);
}

p,
label,
input,
textarea,
button,
select,
option {
    font-size: var(--text-size)!important;
    font-family: var(--font-selawik);
    font-weight: 400;
}

h2,
h3,
h4,
h5,
h6 {
    font-size: var(--heading-size);
    font-family: var(--font-selawik);
    font-weight: 400;
}

h1 {
    font-size: var(--big-heading-size);
    font-family: var(--font-josefin);
}

@media screen and (max-width: 768px) {
    :root {
        --text-size: clamp(18px, 1vw, 32px);
        --heading-size: clamp(24px, 1.6vw, 50px);
        --big-heading-size: clamp(50px, 3vw, 92px);
    }
}