@import 'fonts.css';
@import 'components/app-layout/first-nav.css';
@import 'components/app-layout/brand-header.css';
@import 'components/app-layout/navbar.css';
@import 'components/app-layout/burger-menu.css';
@import 'components/app-layout/footer.css';
@import 'components/app-layout/cookie-banner.css';

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

:root {
    --main: #176949;
    --white: #ffffff;
    --black: #000000;
    --gray: #D2D2D2;

    --padding-container: clamp(10px, calc(10px + (150 - 10) * ((100vw - 320px) / (1440 - 320))), 150px); /* 10px - 150px */

    --font-size-base: clamp(14px, calc(14px + (18 - 14) * ((100vw - 320px) / (1440 - 320))), 18px); /* 14px - 18px */
    --font-size-16-18: clamp(16px, calc(16px + (18 - 16) * ((100vw - 320px) / (1440 - 320))), 18px); /* 16px - 18px */

    --font-family-base: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-esteban: 'Esteban', serif;

    --line-height-classic: 22px;
    --line-height-article-title: clamp(36px, 2vw, 42px);
}

body {
    font-family: var(--font-family-base);
}

body.no-scroll {
    overflow: hidden;
}

.header {
    padding-top: 46px;
}

.footer {
    background-color: var(--main);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 25px 0;
    margin-top: 50px;
}

@media (min-width: 1024px) {
    .header {
        padding-top: 0;
    }
    .footer {
        gap: 20px;
    }
}

[x-cloak] {
    display: none !important;
}

.green-tag {
    background-color: var(--main);
    width: 15px;
    height: 15px;
    border-radius: 100%;
}

.bar-separator-small {
    margin: 36px 0;
    width: 100%;
    height: 1px;
    background-color: var(--gray);
}