@font-face {
    font-family: 'Courier Prime';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/courier-prime-v11-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Courier Prime';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/courier-prime-v11-latin-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Courier Prime';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/courier-prime-v11-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Courier Prime';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/courier-prime-v11-latin-700italic.woff2') format('woff2');
}

:root {
    --doni-consolas: Consolas, monospace;
    --doni-courier-prime: 'Courier Prime', monospace;
    --doni-primary: #344F40;
    --doni-primary-dark: #243B2E;
    --doni-primary-light: #3c5e4a;
    --doni-primary-extra-light: #5c9b78;
    --doni-underline: #9bd5b9;
    --doni-accent: #3F542B;
    --doni-cream: #DED0B6;
    --doni-orange: #AD8505;
}

.font-courier-prime,
.font-doni-courier {
    font-family: var(--doni-courier-prime) !important;
}

body {
    font-family: var(--doni-courier-prime);
    color: #000;
}

h1,
h2,
h3 {
    font-family: var(--doni-courier-prime);
    letter-spacing: 0.5px;
}

.text-content {
    h2 {
        font-size: 35px;
        color: var(--doni-accent);
    }

    p {
        font-size: 18px;
        line-height: normal;
        margin: 18px 0;
    }
}

.doniemlektura {

    /* ============================================================
    * Navbar
    * ============================================================ */

    .hmz-sf-nav {
        gap: 1.25rem;
    }

    .hmz-sf-nav-link,
    .hmz-sf-nav-dropdown a {
        font-family: var(--doni-courier-prime);
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.08em;
        text-transform: none !important;
    }

    .hmz-sf-nav-link {
        color: var(--doni-primary);
        position: relative;
        padding: 0.4rem 0.25rem;
        transition: color 0.2s ease;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--doni-underline);
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.2s ease-in-out;
        }

        &:hover,
        &:focus-visible {
            color: var(--doni-primary-dark) !important;

            &::after {
                transform: scaleX(1);
            }
        }

        &.toborzas {
            color: var(--doni-orange) !important;
        }
    }

    /* ============================================================
    * Dropdown menu
    * ============================================================ */

    .hmz-sf-nav-dropdown {
        background-color: var(--doni-primary);
        border: 1px solid var(--doni-primary);
        border-radius: 0;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
        min-width: 16rem;
        padding: 0.5rem;

        a {
            color: #ffffff !important;
            border-radius: 0;
            padding: 0.5rem 0.75rem;
            transition: background-color 0.15s ease;

            &:hover {
                background-color: var(--doni-primary-light);
                color: #ffffff !important;
            }
        }
    }

    /* ============================================================
    * Mobile menu
    * ============================================================ */

    .hmz-sf-nav-mobile {
        background: #ffffff !important;
        border-bottom: 2px solid var(--doni-primary);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        position: relative !important;
        bottom: auto !important;
        padding: 1.25rem 1.5rem !important;
        z-index: 70 !important;

        &.toborzas {
            color: var(--doni-orange) !important;
        }

        .hmz-sf-nav-link {
            color: var(--doni-primary);

            &:hover {
                color: var(--doni-primary-light);
            }
        }

        div[x-show="open"] {
            background-color: var(--doni-primary);
            border: 1px solid var(--doni-primary);
            padding: 0.5rem 0.75rem;
            margin-top: 0.25rem;
            margin-bottom: 0.5rem;

            .hmz-sf-nav-link {
                color: #ffffff !important;
                padding: 0.35rem 0.5rem;

                &:hover {
                    background-color: var(--doni-primary-light);
                    color: #ffffff !important;
                }
            }
        }
    }

    .information ul {
        list-style: disc !important;
        list-style-type: disc !important;
        padding-left: 3rem !important;
        margin: 1rem 0 !important;
    }

    /* ============================================================
    * Form
    * ============================================================ */

    .hmz-sf-label {
        font-size: 20px;
        text-transform: uppercase;
    }

    .hmz-sf-field--checkbox {

        .hmz-sf-label {
            font-size: 16px;
            text-transform: none;
        }

        .hmz-sf-check {
            accent-color: var(--doni-accent);
        }
    }

    .hmz-sf-input,
    .hmz-sf-select {
        background-color: #f9f9f9 !important;
        color: var(--doni-primary) !important;
        min-height: 30px;
        height: 50px;
        border-radius: 10px;
        padding-left: 20px;
        padding-right: 20px;
        border: 1px solid #222;
        width: 100%;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;

        &:hover {
            border: 1px solid #222;
        }

        &:focus {
            outline: none;
            border-color: var(--doni-primary);
            box-shadow: 0 0 0 3px var(--doni-primary-light);
        }
    }

    .hmz-sf-field:has(.hmz-sf-select) {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            right: 22px;
            bottom: 20px;
            width: 10px;
            height: 10px;
            border-right: 3px solid var(--doni-primary);
            border-bottom: 3px solid var(--doni-primary);
            transform: rotate(45deg);
            pointer-events: none;
        }
    }

    .hmz-sf-btn {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        margin: 10px 0;
        border-radius: 8px;
        border: 1px solid #222;
        background-color: var(--doni-primary);
        color: #fff;
        text-transform: uppercase;
        font-size: 20px;
        transition: background-color 0.15s ease, color 0.15s ease;

        &:hover,
        &:focus,
        &:focus-visible,
        &:active {
            background-color: var(--doni-primary-light);
            color: #fff;
        }
    }

    .hmz-sf-check {
        accent-color: var(--doni-accent);
    }

    /* ============================================================
    * Page Hero
    * ============================================================ */

    .hmz-sf-page-hero {
        .breadcrumb {
            display: none;
        }
    }

    /* ============================================================
    * Carousel flag (overlay on left of carousel, not stacked above)
    * ============================================================ */

    .carousel-flag {
        position: absolute;
        top: 135px;
        left: -182px;
        width: 218px;
        height: auto;
        z-index: 3;
        pointer-events: none;
        object-fit: contain;
    }

    .carousel-container.carousel--flag-hidden .carousel-flag {
        display: none;
    }

    /* ============================================================
    * Footer
    * ============================================================ */

    #sf-chrome-footer {
        background-color: #19222d;
        color: #ffffff;

        h3 {
            color: #ffffff;
            font-family: var(--doni-courier-prime);
            letter-spacing: 0.5px;
        }

        a {
            color: #ffffff;
        }
    }
}