:root {
    --base-color-primary: #CE9B57;
    --base-color-primary-rgb: 205, 159, 97;
    --base-color-primary-light: #FFD59D;
    --base-color-primary-btn: #EBB771;
    --base-color-primary-hover: rgba(205, 159, 97, 0.3);
    --base-color-light: #FFFFFF;
    --base-color-dark: #505050;
    --base-color-bg: #FBF9F6;
    --base-font-title: "PT Serif", serif;
    --base-font-text: "PT Sans Caption", sans-serif;
    --site-header-height: 155px;
    --container-max-width: 1760px;
}

/* Основные стили сайта */

html {
    scroll-behavior: smooth;
}
html, body {
    min-height: 100%;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #FBF9F6;
    color: var(--base-color-dark);
    font-family: var(--base-font-title);
}
main {
    flex: 1;
}
a {
    color: var(--base-color-dark);
    font-family: var(--base-font-title);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--base-color-primary);
}
.title-1, .title-2, .title-3 {
    font-family: var(--base-font-title);
    font-weight: 400;
    line-height: 1.2;
    color: var(--base-color-dark);
}
.title-1 {
    font-size: clamp(30px, calc(25.2px + 1.5vw), 54px);
}
.title-2 {
    font-size: clamp(22px, calc(19.6px + 0.75vw), 34px);
}
.title-3 {
    font-size: clamp(24px, calc(20px + 1.25vw), 44px);
}
.title-4 {
    font-family: var(--base-font-title);
    font-weight: 700;
    font-size: clamp(14px, calc(12px + 0.625vw), 24px);
    line-height: 1.2;
    color: var(--base-color-primary);
    letter-spacing: 0.18em;
}
.text {
    font-family: var(--base-font-title);
    font-weight: 400;
    font-size: clamp(16px, 1.05vw, 20px);
    line-height: 1.3;
    color: var(--base-color-dark);
}
.text-2 {
    font-family: var(--base-font-title);
    font-weight: 400;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 1.5;
    color: var(--base-color-dark);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: clamp(15px, 1vw, 19px) clamp(28px, 2.9vw, 55px);
    border-radius: 4px;
    border: 2px solid var(--base-color-primary);
    color: var(--base-color-primary);
    font-family: var(--base-font-text);
    font-weight: 400;
    font-size: clamp(12px, 0.73vw, 14px);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.btn-large {
    font-size: clamp(14px, calc(13px + 0.26vw), 18px);
}
.btn:hover {
    transform: scale(1.03);
    background-color: var(--base-color-primary-hover);
    color: var(--base-color-primary);
}
.btn:active {
    transform: scale(0.95);
}
.btn:focus {
    box-shadow: none;
}
.btn--primary {
    background-color: var(--base-color-primary);
    color: var(--base-color-light);
}
.btn--primary:hover {
    background-color: var(--base-color-primary-btn);
    border-color: var(--base-color-primary-btn);
    color: var(--base-color-light);
}
.btn--outline {
    background-color: transparent;
}
.btn--outline:hover {
    background-color: var(--base-color-primary-hover);
}
.menu {
    font-family: var(--base-font-text);
    font-weight: 400;
    font-size: clamp(12px, 0.73vw, 14px);
    line-height: 2;
    color: var(--base-color-dark);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.container {
    width: calc(100% - clamp(32px, 3.33vw, 64px));
    max-width: var(--container-max-width);
    margin: 0 auto;
}
.main--contained .main__content {
    padding-bottom: 60px;
}

/* Шапка */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: var(--base-color-light);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.header--main {
    background: transparent;
}
.header.header--fixed {
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.header--main + .main .wide-banner {
    margin-top: calc(var(--site-header-height) * -1);
}
.header--main + .main .wide-banner .wide-banner__container {
    padding-top: var(--site-header-height);
}
.header__inner {
    display: flex;
    align-items: center;
    min-height: var(--site-header-height);
    transition: min-height 0.3s ease;
}
.header__logo {
    flex: 0 0 auto;
}
.header__logo a {
    display: block;
    color: var(--base-color-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}
.header__logo svg {
    display: block;
    width: clamp(190px, 13.3vw, 255px);
    height: auto;
    transition: width 0.3s ease, height 0.3s ease;
}
.header--main:not(.header--fixed) .header__logo a {
    color: var(--base-color-light);
}
.header__right {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-top: 20px;
    transition: padding-top 0.3s ease;
}
.header__right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(80, 80, 80, 0.3);
    border-radius: 999px;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}
.header--main:not(.header--fixed) .header__right::before {
    background: rgba(255, 255, 255, 0.3);
}
.header__nav {
    margin: 0;
}
.header__donate {
    flex: 0 0 auto;
    margin-left: 62px;
    white-space: nowrap;
}
.header__donate:hover {
    background: var(--base-color-primary-btn);
    border-color: var(--base-color-primary-btn);
    color: var(--base-color-light);
}
.page-heading {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    text-align: center;
    margin-bottom: clamp(40px, calc(33px + 2.19vw), 75px);
}
.page-heading__title span {
    color: var(--base-color-primary);
}

/* Мобильная шапка */

.header__burger {
    display: none;
    flex: 0 0 auto;
    width: 32px;
    height: 24px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 120;
}
.header__burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--base-color-dark);
    border-radius: 999px;
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.header__burger span:nth-child(1) {
    top: 2px;
}
.header__burger span:nth-child(2) {
    top: 11px;
}
.header__burger span:nth-child(3) {
    top: 20px;
}
.header--main:not(.header--fixed) .header__burger span {
    background: var(--base-color-light);
}
.header.is-menu-open .header__burger span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
}
.header.is-menu-open .header__burger span:nth-child(2) {
    opacity: 0;
}
.header.is-menu-open .header__burger span:nth-child(3) {
    top: 11px;
    transform: rotate(-45deg);
}
.header.is-menu-open .header__burger span {
    background: var(--base-color-dark);
}
body.menu-open {
    overflow: hidden;
}
@media screen and (max-width: 1600px) {
    .header-menu {
        gap: clamp(18px, 2.5vw, 62px) !important;
    }
    .header__donate {
        margin-left: clamp(18px, 2.5vw, 62px);
    }
}
@media screen and (max-width: 1200px) {
    .header {
        position: fixed;
        top: var(--header-top-offset, 0px);
        left: 0;
        right: 0;
        width: 100%;
    }
    .header:not(.header--main) + .main {
        padding-top: 90px;
    }
    .header__inner {
        position: relative;
        min-height: 90px;
    }
    .header__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .header__logo svg {
        width: auto;
        height: clamp(58px, 7vw, 72px);
        max-width: 220px;
    }
    .header__burger {
        display: block;
        margin-left: 0;
        margin-right: auto;
    }
    .header__right {
        position: fixed;
        top: var(--header-top-offset, 0px);
        left: 0;
        right: 0;
        width: 100%;
        height: calc(100dvh - var(--header-top-offset, 0px));
        margin-left: 0;
        padding: 110px 30px 30px;
        background: var(--base-color-light);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        transform: translateX(-100%);
        transition: transform 0.35s ease;
        overflow-y: auto;
        z-index: 110;
    }
    .header__right::before {
        display: none;
    }
    .header.is-menu-open .header__right {
        transform: translateX(0);
    }
    .header__nav {
        width: 100%;
    }
    .header-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .header-menu > li {
        width: 100%;
        border-bottom: 1px solid rgba(80, 80, 80, 0.12);
    }
    .header-menu > li > a {
        padding: 16px 0;
        color: var(--base-color-dark);
        white-space: normal;
    }
    .header--main:not(.header--fixed) .header-menu > li > a, .header--main.is-menu-open .header-menu > li > a {
        color: var(--base-color-dark) !important;
    }
    .header-menu > li > .root-item-selected::before {
        display: none;
    }
    .header__donate {
        align-self: flex-start;
        margin: 30px 0 0;
        width: auto;
        min-width: 220px;
        text-align: center;
    }
    .header--main + .main .wide-banner {
        margin-top: 0;
    }
    .header--main + .main .wide-banner .wide-banner__container {
        padding-top: 90px;
    }
}
@media screen and (max-width: 576px) {
    .header__logo svg {
        height: 54px;
        max-width: 180px;
    }
}
@media screen and (max-width: 400px) {
    .header__logo {
        left: auto;
        right: 0;
        transform: none;
    }
}

/* Карта */

#map {
    scroll-margin-top: 120px;
}
.address-map {
    position: relative;
    height: clamp(360px, calc(329px + 9.69vw), 515px);
    overflow: hidden;
}
.address-map__frame {
    position: absolute;
    inset: 0;
}
.address-map__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1) sepia(.14) saturate(.55) brightness(1.10) contrast(.82);
}
.address-map__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(242, 235, 225, 0.10);
    pointer-events: none;
}
.address-map__container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    pointer-events: none;
    height: 100%;
}
.address-map__info {
    width: min(100%, clamp(330px, calc(182.4px + 20.08vw), 568px));
    padding: clamp(36px, calc(26.4px + 3vw), 84px) clamp(44px, calc(32.8px + 3.5vw), 100px);
    background-color: var(--base-color-light);
    pointer-events: auto;
    border-radius: 4px;
}
.address-map__title {
    margin: 0 0 clamp(20px, calc(16.6px + 1.06vw), 37px);
    text-align: center;
}
.address-map__title span {
    color: var(--base-color-primary);
}
.address-map__info p {
    margin: 0;
}
@media screen and (max-width: 1200px) {
    #map {
        scroll-margin-top: 100px;
    }
}
@media screen and (max-width: 992px) {
    .address-map {
        height: 400px;
    }
    .address-map__info {
        padding: clamp(30px, 3.4vw, 36px) clamp(32px, 4vw, 40px);
    }
}
@media screen and (max-width: 768px) {
    .address-map {
        display: flex;
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .address-map__container {
        order: 1;
        height: auto;
        padding-top: clamp(24px, 5vw, 36px);
        padding-bottom: clamp(24px, 5vw, 36px);
        pointer-events: auto;
    }
    .address-map__info {
        width: 100%;
    }
    .address-map__frame {
        position: relative;
        inset: auto;
        order: 2;
        width: 100%;
        height: clamp(260px, 48vw, 340px);
    }
}

/* Футер */

.footer {
    background-color: #F6F2EC;
    padding: clamp(30px, calc(26px + 1.25vw), 50px) 0;
}
.footer .container {
    max-width: 1520px;
}
.footer__inner {
    display: grid;
    grid-template-columns: minmax(0, clamp(360px, 42vw, 780px)) minmax(0, 1fr);
    column-gap: clamp(60px, 8.2%, 124px);
    align-items: center;
    min-height: 220px;
}
.footer__logo {
    width: 100%;
    max-width: 780px;
}
.footer__logo a {
    display: block;
}
.footer__logo svg {
    display: block;
    width: 100%;
    height: auto;
}
.footer__menu {
    width: 100%;
    min-width: 0;
}
@media screen and (max-width: 992px) {
    .footer__inner {
        grid-template-columns: 1fr;
        align-items: center;
        row-gap: clamp(24px, calc(15.4px + 2.68vw), 42px);
        min-height: 0;
    }
    .footer__logo {
        max-width: clamp(280px, 70vw, 600px);
        margin: 0 auto;
    }
    .footer__menu {
        text-align: center;
    }
}

/* 404 */

.page-404 {
    position: relative;
    display: flex;
    align-items: center;
   /* min-height: clamp(520px, calc(464px + 17.5vw), 800px);  */
    min-height: calc(100vh - var(--site-header-height));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}
.page-404 .container {
    position: relative;
    z-index: 1;
}
.page-404__inner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: inherit;
    text-align: center;
}
.page-404__number {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    transform: translate(-50%, -50%);
    font-family: var(--base-font-title);
    font-size: clamp(170px, calc(67px + 32.19vw), 685px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.08em;
    color: rgba(var(--base-color-primary-rgb), 0.13);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}
.page-404__content {
    position: relative;
    z-index: 1;
    max-width: clamp(520px, calc(474px + 14.38vw), 750px);
}
.page-404__title {
    margin-bottom: clamp(18px, calc(15px + 0.94vw), 33px);
    text-transform: uppercase;
}
.page-404__text {
    margin-bottom: clamp(24px, calc(19.6px + 1.38vw), 46px);
}

.wo-cookie-consent {
    max-width: min(800px, calc(100vw - 32px)) !important;
}
.wo-cookie-consent__button {
    display: flex !important;
    margin: 16px auto 0;
}
@media (max-width: 767px) {
    .wo-cookie-consent__button {
        width: min(100px, 100%) !important;
    }
}