/*
 * Подвал сайта (редизайн 2026-09 по макету Figma W9ProdtLIYwPZ5qCdXqIQ9, канвас Footer 958:1169).
 * Разметка — footer.php, все классы с префиксом .nf-, чтобы не пересекаться со старыми стилями шаблона.
 * Брейкпоинты макета: <576 / ≥576 / ≥768 / ≥992 / ≥1200 / ≥1440.
 */

/* Глобальный footer {} из styles.css даёт padding 55px 0 15px — у нового подвала свои отступы по зонам. */
footer.nf { padding: 0; }
.nf *, .nf *::before, .nf *::after { box-sizing: border-box; }

/* Сброс глобальных правил шаблона по тегам: a {font-size:14px; font-weight:300}, p a {display:inline-block},
   p, ul {font-size:15px}, * {margin:0}. :where() держит специфичность на уровне одного класса —
   выше тегов шаблона, но ниже классов .nf-*, которые идут следом и переопределяют что нужно. */
.nf :where(a) { font-size: inherit; font-weight: inherit; display: inline; }
.nf :where(p, ul, li) { font-size: inherit; font-weight: inherit; }
.nf :where(p) { margin: 1em 0; }

.nf {
    flex-shrink: 0;
    background: #1a2e35;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.3;
}
.nf a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.nf a:hover { color: #ffffff; }
.nf a:focus-visible {
    outline: 2px solid #0093a6;
    outline-offset: 2px;
    border-radius: 3px;
}

.nf-container {
    max-width: 1520px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ---------- Зона 1: карточка + колонки ссылок ---------- */
.nf-top {
    padding-top: 36px;
    padding-bottom: 40px;
    display: block;
}

.nf-card {
    background: rgba(0, 147, 166, 0.06);
    border-radius: 16px;
    padding: 22px 20px;
    width: 100%;
    max-width: 100%;
}
.nf-card__title {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
}
.nf-card__note {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 18px;
}
.nf-card__btn {
    display: inline-block;
    background: #ffdd00;
    color: #141c22 !important;
    font-size: 13px;
    font-weight: 700;
    border-radius: 15px 5px 10px; /* фирменное скругление кнопок сайта, как у кнопки в шапке */
    padding: 13px 20px;
    transition: background 0.15s ease;
}
.nf-card__btn:hover { background: #ffe94d; color: #141c22 !important; }

.nf-card--mid { display: none; max-width: 320px; }
/* Обёртка «О компании» + соцсети нужна только на ≥1440; на остальных ширинах прозрачна для раскладки */
.nf-mid-center { display: contents; }

.nf-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px 32px;
    margin-top: 28px;
}
.nf-col__title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px;
}
.nf-col__title a { color: inherit; }
.nf-col__title a:hover { color: #00b7cc; }
.nf-col ul {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}
.nf-col li { margin: 0 0 6px; }
.nf-col li a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}
.nf-col li a:hover { color: #ffffff; }
.nf-link-all {
    font-size: 14px;
    font-weight: 600;
    color: #0093a6 !important;
}
.nf-link-all:hover { color: #00b7cc !important; }

/* ---------- Зона 2: бирюзовая полоса контактов ---------- */
.nf-mid { background: rgba(0, 147, 166, 0.09); }
.nf-mid-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 34px;
    padding-bottom: 34px;
}

.nf-contacts__mail,
.nf-contacts__phone {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff !important;
}
.nf-contacts__mail { margin-bottom: 14px; }
.nf-contacts__mail:hover,
.nf-contacts__phone:hover { color: #00b7cc !important; }
.nf-msgs {
    display: flex;
    gap: 18px;
    margin-top: 20px;
}
.nf-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(0, 147, 166, 0.9) !important;
    text-transform: uppercase;
}
.nf-msg:hover { color: #00b7cc !important; }
.nf-msg .ico {
    height: 29px;
    display: flex;
    align-items: center;
}
.nf-msg svg { display: block; }

.nf-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(0, 147, 166, 0.9);
    text-transform: uppercase;
    margin: 0 0 14px;
}

.nf-company__row {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 10px;
}
.nf-company__row a { color: rgba(255, 255, 255, 0.72); }
.nf-company__row a:hover { color: #ffffff; }
.nf-sep { color: rgba(255, 255, 255, 0.35); padding: 0 4px; }
.nf-company__legal {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.32);
    margin: 18px 0 0;
    max-width: 460px;
}
.nf-company__legal a {
    /* !important — в шаблоне p a {display:inline-block !important} */
    display: block !important;
    width: fit-content;
    color: rgba(255, 255, 255, 0.32);
    margin: 0 0 6px;
}
.nf-company__legal a:last-child { margin-bottom: 0; }
.nf-company__legal a:hover { color: rgba(255, 255, 255, 0.6); }

.nf-socials__desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 16px;
    max-width: 260px;
}
.nf-socials__btns { display: flex; flex-wrap: wrap; gap: 14px; }
.nf-btn-soc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: background 0.15s ease;
}
.nf-btn-soc:hover { background: rgba(255, 255, 255, 0.16); }

.nf-rating__row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nf-rating__row svg { width: 16px; height: 16px; flex-shrink: 0; }
.nf-rating__num {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}
.nf-rating__stars { font-size: 15px; letter-spacing: 1px; }
.nf-rating__stars .on { color: #ffcc00; }
.nf-rating__cap {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 5px;
}
a.nf-rating { display: block; }
a.nf-rating:hover .nf-rating__cap { color: rgba(255, 255, 255, 0.75); }

/* ---------- Зона 3: реквизиты, офисы, логотип ---------- */
.nf-bottom {
    padding-top: 40px;
    padding-bottom: 56px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}
.nf-req {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.35);
    max-width: 640px;
}
.nf-req p { margin: 0; }
.nf-offer {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.35);
    max-width: 430px;
    margin-top: 22px;
}
.nf-offer a {
    color: rgba(255, 255, 255, 0.35);
    text-decoration: underline !important; /* p a {text-decoration:none !important} в styles.min.css */
}
.nf-offer a:hover { color: rgba(255, 255, 255, 0.6); }
.nf-copy {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 8px;
}

/* Логотип над рейтингом Яндекса: на ≥1440 — в контактной полосе, ниже — в нижней строке. */
.nf-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}
.nf-brand--bottom { margin-top: 34px; }
.nf-brand--band { display: none; }
.nf-logo { display: inline-block; line-height: 0; }
.nf-logo svg { width: 127px; height: 45px; display: block; }

.nf-offices__title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 20px;
}
.nf-offices__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
}
.nf-office__city {
    font-size: 11px;
    font-weight: 600;
    color: #0093a6;
    margin: 0 0 4px;
}
a.nf-office__city:hover { color: #00b7cc; }
.nf-office__addr {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .nf a, .nf-card__btn, .nf-btn-soc { transition: none; }
}

/* ================= ≥576 ================= */
@media (min-width: 576px) {
    .nf-card--top { display: none; }
    .nf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
    .nf-card--mid { display: block; }
}

/* ================= <768: контактная полоса наверх ================= */
@media (max-width: 767.98px) {
    .nf { display: flex; flex-direction: column; }
    .nf-mid { order: -1; }
    /* во flex-колонке margin: 0 auto сжимает контейнер по содержимому */
    .nf > .nf-container { width: 100%; }
    /* карточка консультации — та, что внутри полосы, чтобы не оказаться ниже неё */
    .nf-card--top { display: none; }
    .nf-card--mid { display: block; }
}
@media (max-width: 575.98px) {
    .nf-card--mid { max-width: none; }
    .nf-cols { margin-top: 0; }
}

/* ================= ≥768 ================= */
@media (min-width: 768px) {
    .nf-container { padding-left: 40px; padding-right: 40px; }

    .nf-top {
        display: grid;
        grid-template-columns: 232px minmax(0, 1fr);
        gap: 32px 38px;
        padding-top: 47px;
    }
    .nf-card--top { display: block; align-self: start; }
    .nf-card--mid { display: none; }

    .nf-mid-grid {
        display: grid;
        grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
        grid-template-areas:
            "contacts company"
            "contacts socials";
        gap: 34px 40px;
        padding-top: 38px;
        padding-bottom: 38px;
    }
    .nf-contacts { grid-area: contacts; }
    .nf-company  { grid-area: company; }
    .nf-socials  { grid-area: socials; }
}

/* ================= ≥992 ================= */
@media (min-width: 992px) {
    .nf-top { display: block; }
    .nf-card--top { display: none; }
    .nf-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Та же сетка, что у колонок ссылок сверху (4 колонки, зазор 32px) — края совпадают. */
    .nf-mid-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas: "contacts company company socials";
        column-gap: 32px;
    }

    .nf-bottom {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 40px 60px;
    }
    .nf-offices { grid-column: 2; grid-row: 1; }
    .nf-bottom-left { grid-column: 1; grid-row: 1; }
}

/* ================= ≥1200 ================= */
@media (min-width: 1200px) {
    /* Обе зоны в одной сетке: 280px (карточка / контакты) + 4 равные колонки, зазор 40px.
       «О компании» встаёт под «Купить серверы», соцсети — под HP, логотип с рейтингом — под Supermicro. */
    .nf-top {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 0 40px;
    }
    .nf-card--top { display: block; align-self: start; }
    .nf-cols { column-gap: 40px; }
    .nf-mid-grid {
        grid-template-columns: 280px repeat(4, minmax(0, 1fr));
        grid-template-areas: "contacts company company socials socials";
        column-gap: 40px;
    }
}

/* ================= ≥1440 ================= */
@media (min-width: 1440px) {
    .nf-mid-grid {
        grid-template-areas: "contacts center center center rating";
    }
    /* «О компании» — от левого края (под «Купить серверы»), соцсети — по центру
       свободного места до логотипа. margin-right: -40px дотягивает обёртку через
       зазор сетки до начала логотипа, чтобы центр считался именно до него. */
    .nf-mid-center {
        display: flex;
        align-items: flex-start;
        grid-area: center;
        margin-right: -40px;
    }
    .nf-mid-center .nf-company { order: -1; }
    .nf-mid-center .nf-socials { margin: 0 auto; }
    .nf-brand--band { display: flex; grid-area: rating; }
    .nf-brand--bottom { display: none; }
}

/* Баннер куки живёт внутри footer.nf (на footer .cookie-window завязан cookie-banner.css):
   не даём ховеру ссылок подвала перекрасить его ссылку в белый на белом фоне. */
.nf .cookie-window a:hover { color: var(--cookie-bar-color); }