/* ==========================================================
   HEADER
========================================================== */

.site-header{
    position:relative;
    z-index:100;
    background:#fff;
    border-bottom:1px solid var(--color-border);
}

.site-header__inner{

    display:flex;
    align-items:center;

    min-height:72px;

    gap:24px;

}


/* ==========================================================
   LOGO
========================================================== */

.header-logo{

    flex-shrink:0;

    display:flex;
    align-items:center;

}

.header-logo img{

    display:block;

    width:auto;

    max-width:180px;
    max-height:48px;

}


/* ==========================================================
   MENU
========================================================== */

.header-menu{

    flex:1;

    min-width:0;

}

.header-menu__overlay{

    display:none;

}

.header-menu__panel{

    display:block;

}

.header-menu__top{

    display:none;

}

.menu__list{

    display:flex;
    align-items:center;

    gap:32px;

    margin:0;
    padding:0;

    list-style:none;

    justify-content:flex-start;

    width:100%;

}

.menu__item{

    position:relative;

    list-style:none;

}

.menu__link{

    display:flex;
    align-items:center;

    min-height:72px;

    color:var(--color-text);

    transition:.2s;

}

.menu__link:hover{

    color:var(--color-primary);

}
.menu__item-head{

    display:flex;

    align-items:center;

}

.menu__item-head .menu__link{

    flex:1;

}

.menu__toggle{

    display:none;

    border:none;

    background:none;

    cursor:pointer;

    padding:0;

    width:40px;
    height:40px;

}

.menu__arrow{

    display:block;

    /* крупнее и толще, чем «галочка» по умолчанию: в меню это единственный
       управляющий элемент, и он должен читаться с первого взгляда */
    width:10px;
    height:10px;

    margin:auto;

    border-right:3px solid currentColor;
    border-bottom:3px solid currentColor;

    border-radius:0 0 2px 0;

    transform:rotate(45deg);

    transition:.25s;

}


/* ==========================================================
   DROPDOWN
========================================================== */

.menu__dropdown{

    position:absolute;

    top:100%;
    left:0;

    display:none;

    min-width:240px;

    margin:0;
    padding:8px 0;

    background:#fff;

    border:1px solid var(--color-border);

    border-radius:8px;

    list-style:none;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

@media (hover: hover) {

    .menu__item--parent:hover > .menu__dropdown {

        display:block;

    }

}

.menu__dropdown .menu__link{

    min-height:auto;

    padding:12px 18px;

}


/* ==========================================================
   RIGHT
========================================================== */

.site-header__right{

    display:flex;
    align-items:center;

    gap:16px;

    flex-shrink:0;

}


/* ==========================================================
   ACTIONS
========================================================== */

.header-actions{

    display:flex;
    align-items:center;

    gap:10px;

}


/* ==========================================================
   SEARCH
========================================================== */

.header-search{

    display:flex;
    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.header-search__icon{

    position:relative;

    width:18px;
    height:18px;

    border:2px solid var(--color-primary);

    border-radius:50%;

}

.header-search__icon::after{

    content:"";

    position:absolute;

    right:-5px;
    bottom:-2px;

    width:7px;
    height:2px;

    background:var(--color-primary);

    transform:rotate(45deg);

}


/* ==========================================================
   BURGER
========================================================== */

.burger{

    display:none;

    width:42px;
    height:42px;

    padding:0;

    border:none;

    background:none;

    cursor:pointer;

}

.burger span{

    display:block;

    width:24px;
    height:2px;

    margin:5px auto;

    background:#222;

    transition:.2s;

}
/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:var(--btn-height);

    padding:0 var(--btn-padding-x);

    border-radius:var(--btn-radius);

    font-size:var(--btn-font-size);

    font-weight:var(--btn-font-weight);

    text-decoration:none;

    transition:var(--btn-transition);

    cursor:pointer;

}

.btn--primary{

    background:var(--btn-primary-bg);

    color:var(--btn-primary-color);

    border:var(--btn-primary-border);

}

.btn--primary:hover{

    background:var(--btn-primary-hover-bg);

    color:var(--btn-primary-hover-color);

    border:var(--btn-primary-hover-border);

}

.btn--outline{

    background:var(--btn-outline-bg);

    color:var(--btn-outline-color);

    border:var(--btn-outline-border);

}

.btn--outline:hover{

    background:var(--btn-outline-hover-bg);

    color:var(--btn-outline-hover-color);

    border:var(--btn-outline-hover-border);

}

/* ==========================================================
   FOOTER
========================================================== */

.site-footer{

    background:var(--color-surface);

    border-top:1px solid var(--color-border);

}

.site-footer__inner{

    padding:var(--footer-padding) 0;

    text-align:center;

    color:var(--color-text);

    font-size:14px;

    line-height:1.8;

}

/* Ряд бейджей и копирайт + ссылки (шаблон страниц со спец-разделами).
   Цвета текста/ссылок и моно-фильтр бейджа привозятся site.css темы. */

.site-footer__badges{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:center;

    gap:12px 28px;

    padding:28px 0 20px;

}

.site-footer__badge{

    display:inline-flex;

    align-items:center;

    opacity:.9;

    transition:opacity .2s;

}

.site-footer__badge:hover{

    opacity:1;

}

.site-footer__badge img{

    height:44px;

    width:auto;

    display:block;

}

/* Бейджи с прозрачным фоном подстраиваются под фон подвала — фильтры
   привозит theme.css сайта, здесь только точки их применения:

   --mono     цветной плотный бейдж (SPA/MF) приводится к силуэту: белый на
              тёмном футере, чёрный на светлом — как на референс-сайтах;
   --adaptive белый лого на прозрачном (Gambling Therapy): на тёмном футере
              остаётся как есть, на светлом становится чёрным силуэтом */

.site-footer__badge--mono img{

    filter:var(--site-badge-mono, none);

}

.site-footer__badge--adaptive img{

    filter:var(--site-badge-adaptive, none);

}

.site-footer__base{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:space-between;

    gap:12px 24px;

    padding:18px 0 26px;

    border-top:1px solid var(--color-border);

}

.site-footer__copyright{

    font-size:14px;

    line-height:1.8;

    text-align:center;

}

.site-footer__nav{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:center;

    gap:8px 24px;

}

.site-footer__link{

    font-size:14px;

    line-height:1.6;

    text-decoration:none;

}

.site-footer__link:hover{

    text-decoration:underline;

}

@media (max-width: 768px) {

    .site-footer__base{

        justify-content:center;

        text-align:center;

    }

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    padding:48px 0;

}

.hero__title{

    margin:0 0 32px;

}

.hero__body{

    display:flex;

    flex-direction:column;

    gap:32px;

}

.hero--columns .hero__body{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:48px;

    align-items:start;

}

.hero__text{

    line-height:1.8;

}

.hero__image{

    display:flex;
    justify-content:center;

}

.hero__image img{

    display:block;

    width:100%;
    max-width:100%;

    height:auto;

    object-fit:cover;

    border-radius:var(--radius-md);

}