/*VARS & CONFIGURATION*/
:where(:root, ::before, ::after) {
    --color-black-rgb: 20, 22, 33;
    --color-primary: #C94217;
    --color-yellow: #FAB000;
    --color-green: #527326;
    --color-grey: #676973;
    --color-orange: #EF7D00;
    --color-grey-light: #EBEDF5;
    --color-grey-alternate: #F6F6F6;
    --color-dark-blue: #1C1F2E;
    --color-blue: #144066;
    --box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, .1);
    --box-shadow-2: 0px 5px 20px 5px rgba(0, 0, 0, .1);
    --spacing-default: var(--unit-16);
    --border-radius-medium: var(var(--spacing-default));
}

@font-face {
    font-family: "Primary";
    font-weight: 400;
    src: url("../fonts/PlayfairDisplay-Regular.woff2");
}

@font-face {
    font-family: "Primary";
    font-weight: 700;
    src: url("../fonts/PlayfairDisplay-Bold.woff2");
}

@font-face {
    font-family: "Secondary";
    font-weight: 500;
    src: url("../fonts/Montserrat-Medium.woff2");
}

@font-face {
    font-family: "Secondary";
    font-weight: 700;
    src: url("../fonts/Montserrat-Bold.woff2");
}

*[style*="--aspect-ratio:"] {
    aspect-ratio: var(--aspect-ratio);
}

body {
    color: var(--color-black);
}

button {
    background: transparent;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0px;
    cursor: pointer;
}

/*OVERWRITE*/
.menu--classic .menu__item--submenu-container:last-child>.menu__submenu-items {
    right: unset;
    text-align: unset;
    left: -1rem;
    padding: 0 1rem;
}

/*UTILITIES*/
.cta {
    display: block;
    font-family: 'Secondary';
    font-weight: var(--font-bold);
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: var(--border-radius-small);
    padding: var(--unit-8) var(--unit-30);
    text-align: center;
}

.cta--white {
    background-color: var(--color-white);
    color: var(--color-black);
}

.cta--black {
    background-color: var(--color-black);
    color: var(--color-white);
}

.disabled {
    opacity: .65;
    pointer-events: none;
}

.arrow-down {
    position: fixed;
    left: 50%;
    bottom: var(--spacing-default);
    transform: translateX(-50%);
    cursor: pointer;
}

.arrow-down__icon {
    fill: var(--color-white);
    height: var(--unit-40);
    width: auto;
}

svg.color-primary {
    fill: var(--color-primary);
}

.color-yellow {
    color: var(--color-yellow);
}

svg.color-yellow {
    fill: var(--color-yellow);
}

.color-green {
    color: var(--color-green);
}

svg.color-green {
    fill: var(--color-green);
}

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

svg.color-blue {
    fill: var(--color-blue);
}

.color-orange {
    color: var(--color-orange);
}

svg.color-orange {
    fill: var(--color-orange);
}

/*HEADER*/
.top-bar {
    font-family: 'Secondary';
    font-weight: var(--font-bold);
    padding: var(--unit-30) 0;
}

body[data-scroll-y-dir-thresholed] .top-bar {
    background-color: var(--color-white);
}

.top-bar .menu__items {
    gap: var(--unit-24)
}

.top-bar .menu__item {
    font-size: var(--font-18);
    text-transform: uppercase;
}

.top-bar .menu__item[data-active]>a,
.top-bar .menu__submenu-item[data-active]>a,
.footer__legal .menu__item[data-active]>a {
    color: var(--color-primary);
}

.top-bar .menu__submenu-item {
    margin: var(--unit-8) 0;
}

.logo-container__logo {
    width: var(--unit-55);
    height: auto;
    fill: var(--color-black);
}

/*SECTION*/
.section {
    padding: var(--unit-50) 0;
}

:where(.section__title, .h1) {
    font-size: var(--font-48);
    font-weight: var(--font-medium);
    line-height: 1.2;
}

.section__subtitle {
    margin-top: var(--unit-24);
    font-size: var(--font-18);
    color: var(--color-grey);
}

.section__extra {
    margin-top: var(--unit-35);
}

/*SHARE*/

.share .icon {
    border-radius: 50%;
    width: var(--unit-28);
    height: var(--unit-28);
    background-color: var(--color-black);
}

.share svg {
    width: var(--unit-28);
    height: var(--unit-28);
}

/*END SHARE*/

/*FORMS*/
.form-donation {
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-2);
    padding: var(--spacing-default);
}

.form-donation__section {
    padding: var(--spacing-default);
    background-color: var(--color-grey-alternate);
    border-radius: var(--border-radius-small);
}

.form--1 {
    margin: 0;
}

.form--1 input,
.form--1 .select-virtual {
    outline: 0;
    border: var(--unit-1) solid var(--color-black);
    border-radius: var(--border-radius-small);
    padding: var(--unit-8) var(--unit-16);
}

.form--1 .select-virtual {
    position: relative;
    padding: 0;
}

.form--1 .select-virtual select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    padding: 0;
    outline: 0;
    background: transparent;
    padding: var(--unit-8) var(--unit-16);
}

.form--1 .select-virtual select::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.form--1 .select-virtual::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(0deg);
    width: var(--unit-11);
    height: var(--unit-6);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10.3357 1.45248L5.81798 6.25251C5.50741 6.5825 4.983 6.5825 4.67243 6.25251L0.154718 1.45248C-0.184702 1.0918 0.070976 0.5 0.566242 0.5H9.9241C10.4194 0.5 10.6751 1.0918 10.3357 1.45248Z' fill='%23141621'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.form--1 .select-virtual:focus-within::after {
    transform: translateY(-50%) rotate(180deg);
}

.form--1 .checkbox-virtual input[type="checkbox"]+.checkbox-virtual__checkbox,
.form--1 .radio-virtual input[type="radio"]+.radio-virtual__checkbox {
    border-color: var(--color-primary);
}

.form--1 .checkbox-virtual input[type="checkbox"]+.checkbox-virtual__checkbox>*,
.form--1 .radio-virtual input[type="radio"]+.radio-virtual__checkbox>* {
    fill: var(--color-white);
}

.form--1 .checkbox-virtual input[type="checkbox"]:checked+.checkbox-virtual__checkbox,
.form--1 .radio-virtual input[type="radio"]:checked+.radio-virtual__checkbox {
    background-color: var(--color-primary);
}

.form--1 .checkbox-virtual .checkbox-virtual__checkbox {
    border-radius: var(--border-radius-small);
}

.form--reports .select-virtual {
    font-size: var(--font-24);
}

.form-donation__btn-amount {
    font-weight: var(--font-bold);
    border: var(--unit-1) solid var(--color-black);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
}

.form--language-bar .select-virtual {
    border: 0;
}

/*END FORMS*/

/*FOOTER*/
.footer {
    color: var(--color-white);
    background-color: var(--color-dark-blue);
    padding: var(--unit-40) 0;
}

.footer__title {
    font-size: var(--font-30);
    font-weight: var(--font-bold);
    text-transform: uppercase;
}

.footer__links {
    list-style-type: none;
    columns: 2;
    text-transform: uppercase;
}

.social svg {
    width: var(--unit-28);
    height: var(--unit-28);
    border-radius: 50%;
}

.footer__legal {
    list-style-type: none;
}

.footer__legal li {
    position: relative;
}

.newsletter__icon {
    height: var(--unit-100);
    width: var(--unit-100);
}

/*END FOOTER*/

.modal__fullscreen {
    color: var(--color-black);
}

.modal__fullscreen .modal__container,
.modal__fullscreen .modal__wrapper {
    width: 100%;
    height: 100%;
}

.modal__fullscreen .modal__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal__fullscreen .modal__content {
    max-width: unset;
    max-height: unset;
    padding: 0 var(--unit-20);
}

.modal__fullscreen .modal__btn-close {
    transform: translate(-100%, 100%);
}

.modal__fullscreen .modal__btn-close {
    background-color: transparent;
    color: var(--color-black);
}

.modal__fullscreen .modal__btn-close svg {
    width: var(--unit-25);
    height: var(--unit-24);
}

.mt-auto {
    margin-top: auto;
}

/*SMALL ONLY*/
@media (max-width: 63.9375rem) {
    .top-bar .menu__item:last-of-type {
        margin-top: auto;
    }

    a.anchor--underline {
        text-decoration: underline;
    }

    .top-bar .logo-container__logo,
    .top-bar__language form,
    .top-bar .cta {
        transition: var(--transition);
    }

    .top-bar__language form,
    body:has(.top-bar .menu[data-active]) .top-bar .cta {
        opacity: 0;
    }

    body:has(.top-bar .menu[data-active]) .top-bar__language form,
    body:not(:has(.top-bar .menu[data-active])) .top-bar .cta {
        opacity: 1;
    }

    .top-bar .cta {
        padding: var(--unit-8);
    }

    .top-bar .menu__items {
        text-align: center !important;
    }

    .top-bar .menu__item {
        font-family: 'Primary';
        color: var(--color-white);
        font-weight: var(--font-medium);
        font-size: var(--font-36);
    }

    .top-bar .menu--right .menu__toggle {
        justify-content: center;
    }

    .top-bar .menu__submenu-item {
        font-size: var(--font-24);
    }

    .top-bar .menu::before {
        background-color: var(--color-black);
    }

    .top-bar .hamburger[data-active] {
        color: var(--color-white);
    }

    .top-bar__language {
        color: var(--color-white);
    }

    :where(.section__title, .h1) {
        font-size: var(--font-36);
    }

    .form--language-bar .select-virtual::after {
        background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10.3357 1.45248L5.81798 6.25251C5.50741 6.5825 4.983 6.5825 4.67243 6.25251L0.154718 1.45248C-0.184702 1.0918 0.070976 0.5 0.566242 0.5H9.9241C10.4194 0.5 10.6751 1.0918 10.3357 1.45248Z' fill='%23FFFFFF'/></svg>");
    }

    body:has(.top-bar .menu[data-active]) .logo-container__logo {
        fill: var(--color-white);
    }

    .form--language-bar .select-virtual {
        position: relative;
        z-index: 999;
        background-color: transparent;
    }

    .form--language-bar .select-virtual option {
        color: var(--color-black);
    }

    body:has(.top-bar .menu[data-active]) .top-bar__donate,
    body:not(:has(.top-bar .menu[data-active])) .top-bar__language {
        display: none;
    }

    .footer__legal li+li {
        margin-top: var(--unit-16);
    }

    /*TODO: temp fix; it sets height var as 0; fix*/
    .menu__item--submenu-container[data-active] .menu__submenu-items {
        height: auto !important;
    }

    .small-mt-auto {
        margin-top: auto;
    }
}

/*LARGE ONLY*/
@media (min-width: 64rem) {

    .menu__item a,
    .logo-container__logo,
    .arrow-down__icon,
    a.anchor--underline::before,
    .footer__links a,
    .footer__legal a,
    .cta,
    .lazy,
    .footer__social svg path,
    .form-donation__btn-amount,
    .top-bar .menu,
    .top-bar .menu::before {
        transition: var(--transition);
    }

    .large-max-height-100 {
        max-height: 100%;
    }

    .menu__submenu-items {
        background-color: var(--color-white);
    }

    a.anchor--underline {
        position: relative;
        display: inline-block;
    }


    a.anchor--underline::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: var(--unit-1);
        background-color: currentColor;
        opacity: 0;
    }

    a.anchor--underline:hover::before {
        opacity: 1;
    }

    .cta:hover {
        background-color: #8d2b0d;
    }

    .cta--white:hover,
    .cta--black:hover,
    .form-donation__btn-amount:hover {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

    .logo-container:hover .logo-container__logo {
        fill: var(--color-primary);
    }

    .menu__item a:hover {
        color: var(--color-primary);
    }

    .arrow-down:hover .arrow-down__icon {
        transform: scale(1.25);
    }

    .footer__links a:hover,
    .footer__legal a:hover {
        color: var(--color-primary);
    }

    .footer__social a:hover svg {
        background-color: var(--color-white);
    }

    .footer__social a:hover svg path {
        fill: var(--color-primary);
        background-color: var(--color-white);
    }

    .footer__legal {
        display: flex;
        gap: var(--unit-16);
    }

    .footer__legal li+li::before {
        content: '';
        position: absolute;
        left: calc(-1 * var(--unit-8));
        top: 50%;
        transform: translateY(-50%);
        height: 60%;
        width: var(--unit-1);
        background-color: var(--color-white);
    }

    .large-mt-auto {
        margin-top: auto;
    }
}