/*
Theme Name: Hockey Theme
Author: Твоё имя
Version: 1.6 (final with gradient cut)
*/

/* ---------- БАЗА / ЛИПКИЙ ФУТЕР ---------- */
html, body { height: 100%; margin: 0; padding: 0; background: #ffffff; }
#page { min-height: 100vh; display: flex; flex-direction: column; }
.site-content { flex: 1; }
img { display: block; }
body { overflow-x: hidden; }

/* ===================== ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ ===================== */
:root{
    /* Цвета/акценты */
    --accent: rgb(255, 74, 51);

    /* Фирменные градиенты */
    --club-grad: linear-gradient(90deg,#e53935 0%,#f4511e 22%,#ffb300 50%,#f4511e 78%,#e53935 100%);
    --club-grad-diag: linear-gradient(135deg,#e53935 0%,#f4511e 22%,#ffb300 50%,#f4511e 78%,#e53935 100%);
    --header-stripe-h: 3px; /* толщина линии под хедером */

    /* Геометрия лого/дуг */
    --logo: 170px;         /* диаметр картинки лого */
    --logo-size: 170px;    /* фактическая ширина img */
    --ring: 3px;           /* толщина красного контура */
    --gap: 0px;            /* зазор между img и контуром */
    --bump: calc(var(--logo) * 0.55);
    --qgap: calc(var(--logo) * 0.10);
    --raise: calc(var(--logo) * -0.257);
    --join: 0px;
    --tiltL: -3deg;
    --tiltR:  3deg;

    /* служебные */
    --clip-extra: calc(var(--ring) + 29px);
    --hair: -1px;
    --outer: calc((var(--logo) + 2*(var(--gap) + var(--ring))) / 2);

    /* Хедер/меню */
    --hdr-height: 124px;
    --logo-spacing: 32px;
    --menu-gap: 36px;
    --menu-font: 20px;
    --menu-pad-y: 6px;
    --menu-pad-x: 14px;
    --menu-letter: .5px;
    --menu-offset-y: 0px;  /* чтобы «формат» не ехал */
}

/* ---------- ТИПОГРАФИКА ---------- */
.site-header, .site-footer{
    font-family: 'Anton', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.site-content, .site-content p,
.site-content h1, .site-content h2, .site-content h3,
.site-content h4, .site-content h5, .site-content h6{
    font-family: 'Roboto', sans-serif;
}

/* ===================== HEADER ===================== */
.site-header{
    background:#000;
    position:relative;
    padding-bottom:0;
    z-index:2;
}

/* === Градиентная полоса с вырезом под логотип и подводом к дугам === */
.site-header::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height: var(--header-stripe-h);

    /* половина выреза: внешний радиус круга + зазор дуг − подвод */
    --cut: calc(var(--outer) + var(--qgap) - var(--join));

    /* две половины градиента, прозрачная середина (кроссбраузерно) */
    background:
            var(--club-grad) left  / calc(50% - var(--cut)) 100% no-repeat,
            var(--club-grad) right / calc(50% - var(--cut)) 100% no-repeat;

    pointer-events:none;
    z-index: 5;
}

/* Сетка: меню | лого | меню */
.header-wrapper{
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    column-gap: var(--logo-spacing);
    height: var(--hdr-height);
    max-width: 2100px;
    margin: 0 auto;
    padding: 20px 16px 0;
    overflow: visible;
    z-index: 6;
}
:root{
    /* ...остальные переменные... */
    --menu-offset-y: -10px;   /* было 0px — меню поднимется вверх */
}
/* Логотип по центру + красный контур */
.logo-container{
    position: relative;
    grid-column: 2;
    justify-self: center;
    align-self: center;
    margin: 0;
    z-index: 10;
}
.logo-container img{
    width: var(--logo-size);
    height: auto;
    border-radius: 50%;
    background:#000;
    box-shadow: 0 0 0 var(--ring) var(--accent);
}

/* Дуги (четверти окружности) */
.logo-container::before,
.logo-container::after{
    content:"";
    position:absolute;
    width: var(--bump);
    height: var(--bump);
    background: transparent;
    border: var(--ring) solid var(--accent);
    border-radius: 50%;
    bottom: calc(-1 * var(--ring) + var(--raise) + var(--hair));
    z-index: 4;
}
.logo-container::before{
    left: calc(49.5% - var(--outer) - var(--qgap) - var(--bump)/2 + var(--ring)/2);
    border-left: none; border-bottom: none;
    clip-path: inset(0 0 calc(50% + var(--clip-extra)) 50%);
    transform: rotate(var(--tiltL));
}
.logo-container::after{
    left: calc(48.8% + var(--outer) + var(--qgap) - var(--bump)/2 - var(--ring)/2);
    border-right: none; border-bottom: none;
    clip-path: inset(0 50% calc(50% + var(--clip-extra)) 0);
    transform: rotate(var(--tiltR));
}

/* ---------- МЕНЮ ---------- */
.nav-left, .nav-right{
    list-style:none;
    display:flex;
    gap: var(--menu-gap);
    margin:0; padding:0;
    flex-wrap: nowrap;
    position:relative;
    top: var(--menu-offset-y);
    z-index: 50;
}
.nav-left  { grid-column: 1; justify-content: flex-end; }
.nav-right { grid-column: 3; justify-content: flex-start; }

.nav-left li, .nav-right li{ position:relative; }

.site-header .nav-left a,
.site-header .nav-right a{
    color:#fff; text-decoration:none; font-weight:700;
    font-size: var(--menu-font);
    padding: var(--menu-pad-y) var(--menu-pad-x);
    letter-spacing: var(--menu-letter);
    border-radius: 9999px;
    transition: color .2s ease, box-shadow .2s ease;
}
.site-header .nav-left a:hover,
.site-header .nav-right a:hover,
.site-header .nav-left a:focus-visible,
.site-header .nav-right a:focus-visible{
    color:#fff;
    box-shadow: inset 0 0 0 2px var(--accent);
    outline:none;
}
.nav-left .current-menu-item > a,
.nav-right .current-menu-item > a{ color: var(--accent); }

/* Подменю */
.nav-left li ul, .nav-right li ul{
    position:absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    padding:10px 0;
    margin:0;
    list-style:none;
    background:#000;
    color:#fff;
    border:1px solid var(--accent);
    border-radius:10px;
    box-shadow:0 12px 28px rgba(0,0,0,.55);
    z-index: 9999;
    opacity:0; visibility:hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nav-right li ul{ left:auto; right:0; }
.nav-left li:hover  > ul,
.nav-right li:hover > ul,
.nav-left li:focus-within  > ul,
.nav-right li:focus-within > ul{
    opacity:1; visibility:visible; transform: translateY(0); transition-delay:0s;
}
.nav-left li ul li a, .nav-right li ul li a{
    display:block; padding:10px 16px; color:#fff; text-decoration:none; white-space:nowrap;
}
.nav-left li ul li a:hover, .nav-right li ul li a:hover{ background:#111; }

/* Родитель без перехода */
li.no-click > a{ cursor: default; }

/* ---------- HERO ---------- */
.hero{
    position:relative;
    height:500px;
    background:url('images/imag.png') no-repeat center center / cover;
}
.hero-content{
    position:absolute;
    top:50%; left:50%; transform:translate(-50%,-50%);
    color:#fff; text-align:center;
    background:rgba(0,0,0,.45);
    padding:50px 10px; border-radius:80px;
}
.hero-content h1{ font-size:36px; margin-bottom:10px; }
.hero-content p { font-size:20px; }

/* ---------- FOOTER ---------- */
.site-footer{
    background:#000; color:#fff;
    padding:20px 40px; margin-top:auto; box-shadow:none;
    border-top:0 !important; position:relative;
}
.site-footer::before{
    content:""; position:absolute; left:0; right:0; top:0;
    height: var(--header-stripe-h); background: var(--club-grad); pointer-events:none; z-index:1;
}
.footer-container{
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; gap:16px; max-width:1200px; margin:0 auto;
}
.footer-social{ justify-self:start; display:flex; gap:16px; align-items:center; font-size:26px; }
.footer-logo{ justify-self:center; text-align:center; }
.footer-contacts{ justify-self:end; text-align:right; font-size:14px; line-height:1.6; }
.footer-logo img{ max-width:100px; height:auto; }
.footer-contacts p{ margin:0; }

/* Иконки соцсетей с градиентным ховером */
.footer-social a{
    color:#fff; display:inline-grid; place-items:center;
    width:36px; height:36px; border-radius:50%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.footer-social a i{
    font-size:26px; line-height:1; color: currentColor;
    transition: color .25s ease, background-position .6s ease;
}
.footer-social a:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(229,57,53,.25);
}
.footer-social a:hover i{
    background-image: var(--club-grad-diag);
    background-size: 200% 200%;
    background-position: 0% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.footer-social a,
.footer-social a:hover,
.footer-social a:focus{
    text-decoration: none;   /* убираем подчёркивание во всех состояниях */
    border-bottom: 0;        /* на всякий случай, если где-то задавалось */
    outline: none;
    line-height: 0;          /* исключаем базовую линию текста */
}

.footer-social a i{
    line-height: 1;          /* сам значок внутри остаётся нормальной высоты */
    display: inline-block;   /* стабильный рендер без «подчёркиваний» */
}

/* ---------- АДАПТИВ ---------- */
@media (max-width: 1300px){
    :root{ --menu-gap:28px; --menu-font:16px; }
}
@media (max-width: 1140px){
    :root{ --menu-gap:20px; --menu-font:15px; }
}
@media (max-width: 768px){
    .header-wrapper{ grid-template-columns: 1fr; gap: 16px; }
    .nav-left, .nav-right{ justify-content:center; gap:24px; top:-8px; }
    .hero{ height:300px; }
    .hero-content h1{ font-size:24px; }
    .footer-container{ grid-template-columns:1fr; gap:15px; text-align:center; }
    .footer-contacts{ justify-self:center; text-align:center; }
    .nav-left li ul, .nav-right li ul{
        left:50%; right:auto; transform: translate(-50%, -6px);
        top: calc(100% + 8px);
    }
}

/* ---------- WP admin bar ---------- */
html { margin-top: 0 !important; }
body.admin-bar .site-header { margin-top: 32px; }
@media (max-width: 682px){
    body.admin-bar .site-header { margin-top: 46px; }
}

/* ---------- ДОП. СТРАНИЦЫ / БЛОКИ ---------- */
body.page-id-100 .page-hero{
    margin-top:-2px !important;
    background:#e63946 !important; color:#fff;
    padding:14px 16px; display:block; text-align:left;
}
body.page-id-100 .page-hero .wp-block-heading{
    margin:0; text-align:left; font-family:'Anton',sans-serif;
    text-transform:uppercase; letter-spacing:1px; color:#fff;
    font-size:clamp(28px,3.2vw,48px);
}
body.page-id-100 .site-content > *:first-child,
body.page-id-100 .entry-content > *:first-child{ margin-top:0 !important; }
body.page-id-100 .layout-split{
    display:grid; grid-template-columns:min(50vw,700px) 1fr;
    gap:32px; align-items:start; max-width:1400px; margin:28px auto; padding:0 16px;
}
body.page-id-100 .layout-split .copy{
    text-align:left; line-height:1.7; font-size:18px;
}
body.page-id-100 .layout-split .visual img{
    width:100%; height:auto; display:block; border-radius:10px;
}
@media (max-width:900px){
    body.page-id-100 .layout-split{ grid-template-columns:1fr; gap:20px; }
    body.page-id-100 .layout-split .copy{ font-size:16px; }
}


/* ====== Металлический перелив для меню ====== */
.site-header .nav-left > li > a,
.site-header .nav-right > li > a{
    position: relative; display:inline-block; color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.25); white-space: nowrap;
}
.site-header .nav-left > li > a .ml,
.site-header .nav-right > li > a .ml{
    display:inline-block;

    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: metal-wave 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 80ms);
}
.site-header .nav-left > li > a .ml-sp,
.site-header .nav-right > li > a .ml-sp{ width:.5ch; }
.site-header .nav-left > li > a:hover .ml,
.site-header .nav-left > li > a:focus-visible .ml,
.site-header .nav-right > li > a:hover .ml,
.site-header .nav-right > li > a:focus-visible .ml{ animation-duration: 1.3s; }
@keyframes metal-wave{
    0%{ background-position: 200% 0; }
    50%{ background-position: 100% 0; }
    100%{ background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce){
    .site-header .nav-left > li > a .ml,
    .site-header .nav-right > li > a .ml{
        animation: none; background: none; color:#fff;
    }
}
/* === Меню: белый текст по умолчанию, красный активный + круг вокруг === */

/* сброс «металлических» градиентов/анимаций, если они были */
.site-header .nav-left > li > a,
.site-header .nav-right > li > a{
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #fff !important;               /* белый текст */
    text-shadow: none;                     /* без теней, если не нужно */
}

/* если в верстке остались .ml-спаны — отключаем им эффекты тоже */
.site-header .nav-left > li > a .ml,
.site-header .nav-right > li > a .ml{
    animation: none !important;
    background: none !important;
    color: inherit !important;
}

/* hover/focus: лёгкий красный обвод (круг) и белый текст */
.site-header .nav-left > li > a:hover,
.site-header .nav-right > li > a:hover,
.site-header .nav-left > li > a:focus-visible,
.site-header .nav-right > li > a:focus-visible{
    color: #fff;
    box-shadow: inset 0 0 0 2px var(--accent);   /* круг */
    border-radius: 9999px;
    outline: none;
}

/* АКТИВНЫЕ пункты (WordPress классы) — остаются красными + круг вокруг */
.site-header .nav-left  li.current-menu-item    > a,
.site-header .nav-right li.current-menu-item    > a,
.site-header .nav-left  li.current_page_item    > a,
.site-header .nav-right li.current_page_item    > a,
.site-header .nav-left  li.current-menu-ancestor > a,
.site-header .nav-right li.current-menu-ancestor > a{
    color: var(--accent) !important;              /* красный текст */
    box-shadow: inset 0 0 0 2px var(--accent);    /* красный круг */
    border-radius: 9999px;
}

/* Подменю — тоже белые ссылки, без подчёркиваний/градиентов */
.nav-left li ul li a,
.nav-right li ul li a{
    color:#fff !important;
    text-decoration: none;
    background: none !important;
    background-image: none !important;
}
.nav-left li ul li a:hover,
.nav-right li ul li a:hover{
    background:#111;
}
<!-- BANNER: Saison 2025–26 (под хедером) -->
<div class="season-banner">
<div class="season-wrap">
<span class="season-title">Saison 2025–26</span>
</div>
</div>
                                                                                                     /* Убираем белую полосу над хедером (WP Admin Bar overlay) */
                                                                                                 html { margin-top: 0 !important; }

/* делаем админ-бар фиксированным, чтобы он не толкал страницу вниз */
#wpadminbar{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 999999;  /* поверх всего */
}

/* не смещаем хедер вниз, даже когда admin-bar активен */
body.admin-bar .site-header{
    margin-top: 0 !important;
}

/* мобильный брейкпоинт WP */
@media (max-width: 782px){
    body.admin-bar .site-header{
        margin-top: 0 !important;
    }
}

/* на новых версиях WP может быть CSS-переменная высоты admin bar — обнулим */
:root{
    --wp-admin--admin-bar--height: 0px !important;
}

/* на всякий случай: если где-то добавляли паддинг сверху — убираем */
body.admin-bar,
body.admin-bar #page{
    padding-top: 0 !important;
}