/* ============================================================
   SITE CHROME - the shared top information bar, header and buttons of EVERY page (partials/_site_header.php, included by header.php),
   and the footer (partials/_site_footer.php, included by footer.php). Phase B2.
   Scoped to body.sc (header.php adds the class "sc" to the body of every page), so it never touches the content of a page.
   Moved from home-hero.css (the approved home header, unchanged) so the home page and the inner pages use one component.
   Colours: navy #0e1c3f, accent green #87b43e; buttons use a darker green (#56801f) so white text keeps a contrast above 4.5 : 1.
   ============================================================ */

body.sc {
    --hx-navy: #0e1c3f;
    --hx-ink-soft: #364361;
    --hx-muted: #4a5568;
    --hx-line: #e3e8ef;
    --hx-green: #87b43e;
    --hx-green-btn: #56801f;
    --hx-green-btn-hover: #476a19;
    --hx-green-tint: #eaf3da;
    --hx-info-h: 44px;
    --hx-header-h: 84px;
}

/* main.css gives the body height:100% (the screen height); a sticky header can only stick inside its parent, so the body grows with its content */
body.sc {
    height: auto;
    min-height: 100%;
}

body.sc .hx-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding-right: clamp(20px, 3.4vw, 48px);
    padding-left: clamp(20px, 3.4vw, 48px);
}

body.sc .hx-info svg,
body.sc .hx-header svg {
    display: block;
}

body.sc .hx-info {
    color: rgba(255, 255, 255, .88);
    background: var(--hx-navy);
}

body.sc .hx-info__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--hx-info-h);
}

body.sc .hx-info__tag {
    margin: 0;
    font: 500 13px/1.3 "Montserrat", "Segoe UI", Arial, sans-serif;
    color: rgba(255, 255, 255, .88);
}

body.sc .hx-info__list {
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.3;
}

body.sc .hx-info__list li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 18px;
    border-left: 1px solid rgba(255, 255, 255, .22);
}

body.sc .hx-info__list li:first-child {
    padding-left: 0;
    border-left: 0;
}

body.sc .hx-info__list li:last-child {
    padding-right: 0;
}

body.sc .hx-info__item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: 600 13px/1.3 "Montserrat", "Segoe UI", Arial, sans-serif;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

body.sc .hx-info__item svg {
    width: 16px;
    height: 16px;
    color: var(--hx-green);
}

body.sc a.hx-info__item:hover,
body.sc a.hx-info__item:focus-visible {
    color: var(--hx-green);
    text-decoration: none;
}

body.sc .hx-header {
    position: sticky;
    top: 0;
    z-index: 900;
    margin: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--hx-line);
    box-shadow: 0 6px 22px rgba(14, 28, 63, .06);
}

body.sc .hx-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 40px);
    min-height: var(--hx-header-h);
}

body.sc .hx-logo {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

body.sc .hx-logo b {
    font: 800 clamp(22px, 2vw, 27px)/1 "Montserrat", "Segoe UI", Arial, sans-serif;
    letter-spacing: .01em;
    color: var(--hx-navy);
    text-transform: uppercase;
}

body.sc .hx-logo b em {
    font-style: normal;
    color: var(--hx-green);
}

body.sc .hx-logo span {
    padding-left: 14px;
    font: 600 11px/1 "Montserrat", "Segoe UI", Arial, sans-serif;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--hx-ink-soft);
    border-left: 1px solid var(--hx-line);
}

body.sc .hx-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

body.sc .hx-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.9vw, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.sc .hx-nav__list li {
    margin: 0;
    padding: 0;
}

body.sc .hx-nav__list a {
    position: relative;
    display: block;
    padding: 30px 0 27px;
    white-space: nowrap;
    font: 600 15px/1.2 "Montserrat", "Segoe UI", Arial, sans-serif;
    color: var(--hx-navy);
    text-decoration: none;
}

body.sc .hx-nav__list a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    height: 3px;
    background: var(--hx-green);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

body.sc .hx-nav__list a:hover,
body.sc .hx-nav__list a:focus-visible,
body.sc .hx-nav__list a.is-active {
    color: var(--hx-green-btn);
    text-decoration: none;
}

body.sc .hx-nav__list a:hover::after,
body.sc .hx-nav__list a:focus-visible::after,
body.sc .hx-nav__list a.is-active::after {
    transform: scaleX(1);
}

body.sc .hx-nav__extra {
    display: none;
}

body.sc .hx-header__cta {
    flex: none;
}

body.sc .hx-burger {
    display: none;
}

body.sc .hx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 28px;
    font: 700 14px/1.1 "Montserrat", "Segoe UI", Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

body.sc .hx-btn--green {
    color: #ffffff;
    background: var(--hx-green-btn);
    box-shadow: 0 10px 24px rgba(86, 128, 31, .32);
}

body.sc .hx-btn--green:hover,
body.sc .hx-btn--green:focus-visible {
    color: #ffffff;
    text-decoration: none;
    background: var(--hx-green-btn-hover);
    transform: translateY(-2px);
}

body.sc .hx-btn--outline {
    color: #ffffff;
    background: rgba(14, 28, 63, .25);
    border-color: rgba(255, 255, 255, .88);
}

body.sc .hx-btn--outline:hover,
body.sc .hx-btn--outline:focus-visible {
    color: var(--hx-navy);
    text-decoration: none;
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-2px);
}

body.sc .hx-btn--lg {
    min-height: 62px;
    padding: 0 34px;
    font-size: 15px;
}

body.sc .hx-arrow {
    font-size: 1.15em;
    line-height: 1;
}

body.sc .hx-btn:focus-visible,
body.sc .hx-nav__list a:focus-visible,
body.sc .hx-logo:focus-visible,
body.sc .hx-burger:focus-visible {
    outline: 3px solid var(--hx-navy);
    outline-offset: 3px;
}

body.sc .hx-info a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/*
 * Five menu items (Начало, Каталог, Реализирани обекти, Полезно, Контакти) + the offer button need more room than four did:
 *   - the logo tagline "врати за вход" is shown only where there is room for it (1600 px and up, where the header may also be as wide as the page content);
 *   - from 1200 px to 1399 px the menu type and the button are one step smaller;
 *   - up to 1199 px the menu is the button menu (it used to switch at 991 px).
 */
@media (min-width: 1600px) {
    body.sc .hx-header .hx-wrap,
    body.sc .hx-info .hx-wrap {
            max-width: 1480px;
        }
}

@media (max-width: 1599px) {
    body.sc .hx-logo span {
            display: none;
        }
}

@media (max-width: 1399px) {
    body.sc .hx-nav__list a {
            font-size: 14px;
        }

    body.sc .hx-header__cta {
            padding: 0 20px;
            letter-spacing: .04em;
        }
}

@media (max-width: 1199px) {
    body.sc .hx-info__tag {
            display: none;
        }

    body.sc .hx-info__inner {
            justify-content: flex-end;
        }

    body.sc .hx-logo span {
            display: none;
        }
}

@media (max-width: 1199px) {
    body.sc {
            --hx-header-h: 70px;
        }

    body.sc .hx-header__cta {
            display: none;
        }

    body.sc .hx-header__inner {
            justify-content: space-between;
        }

    body.sc .hx-burger {
            position: relative;
            display: block;
            flex: none;
            width: 46px;
            height: 46px;
            padding: 0;
            cursor: pointer;
            background: #ffffff;
            border: 1px solid var(--hx-line);
            border-radius: 10px;
        }

    body.sc .hx-burger span {
            position: absolute;
            left: 50%;
            width: 22px;
            height: 2px;
            background: var(--hx-navy);
            border-radius: 2px;
            transform: translateX(-50%);
            transition: transform .25s ease, opacity .2s ease, top .25s ease;
        }

    body.sc .hx-burger span:nth-child(1) { top: 15px; }

    body.sc .hx-burger span:nth-child(2) { top: 22px; }

    body.sc .hx-burger span:nth-child(3) { top: 29px; }

    body.sc .is-nav-open .hx-burger span:nth-child(1) { top: 22px; transform: translateX(-50%) rotate(45deg); }

    body.sc .is-nav-open .hx-burger span:nth-child(2) { opacity: 0; }

    body.sc .is-nav-open .hx-burger span:nth-child(3) { top: 22px; transform: translateX(-50%) rotate(-45deg); }

    body.sc .hx-nav {
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            max-height: 0;
            overflow: hidden;
            visibility: hidden;
            background: #ffffff;
            border-bottom: 1px solid var(--hx-line);
            box-shadow: 0 24px 40px rgba(14, 28, 63, .18);
            transition: max-height .3s ease, visibility 0s linear .3s;
        }

    body.sc .is-nav-open .hx-nav {
            max-height: calc(100vh - var(--hx-header-h));
            overflow-y: auto;
            visibility: visible;
            transition: max-height .3s ease, visibility 0s;
        }

    body.sc .hx-nav__list {
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            padding: 6px clamp(20px, 3.4vw, 48px) 0;
        }

    body.sc .hx-nav__list a {
            padding: 17px 0;
            font-size: 17px;
            border-bottom: 1px solid var(--hx-line);
        }

    body.sc .hx-nav__list a::after {
            display: none;
        }

    body.sc .hx-nav__extra {
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding: 20px clamp(20px, 3.4vw, 48px) 24px;
        }

    body.sc .hx-nav__phone {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font: 800 19px/1.2 "Montserrat", "Segoe UI", Arial, sans-serif;
            color: var(--hx-navy);
            text-decoration: none;
        }

    body.sc .hx-nav__phone svg {
            width: 20px;
            height: 20px;
            color: var(--hx-green-btn);
        }

    body.sc .hx-nav__extra .hx-btn {
            width: 100%;
        }
}

@media (max-width: 767px) {
    body.sc .hx-info__item {
            font-size: 12px;
        }

    body.sc .hx-info__list li:nth-child(2) {
            display: none; /* the e-mail stays in the footer and on the contacts page */
        }

    body.sc .hx-info__inner {
            justify-content: center;
        }

    body.sc .hx-info__list {
            margin: 0;
        }
}

@media (prefers-reduced-motion: reduce) {
    body.sc .hx-btn,
body.sc .hx-nav,
body.sc .hx-nav__list a::after,
body.sc .hx-burger span {
            transition: none;
        }

    body.sc .hx-btn:hover,
body.sc .hx-btn:focus-visible {
            transform: none;
        }
}

@media (forced-colors: active) {
    body.sc .hx-btn,
body.sc .hx-burger {
            border: 2px solid ButtonText;
        }
}

/* ---------- footer ---------- */

body.sc .sc-footer {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, .74);
    font: 400 15px/1.7 "Montserrat", "Segoe UI", Arial, sans-serif;
    background: var(--hx-navy);
}

body.sc .sc-footer__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1.25fr;
    gap: clamp(28px, 3.4vw, 56px);
    padding-top: clamp(44px, 5vw, 72px);
    padding-bottom: clamp(32px, 4vw, 52px);
}

body.sc .sc-footer__col {
    min-width: 0;
}

body.sc .sc-footer__title {
    display: block;
    margin: 0 0 16px;
    padding: 0;
    font: 800 13px/1.3 "Montserrat", "Segoe UI", Arial, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffffff;
}

body.sc .sc-footer__title a {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    text-decoration: none;
}

body.sc .sc-footer__brand {
    display: block;
    margin: 0 0 14px;
    font: 800 22px/1.1 "Montserrat", "Segoe UI", Arial, sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #ffffff;
}

body.sc .sc-footer__brand em {
    font-style: normal;
    color: var(--hx-green);
}

body.sc .sc-footer p {
    margin: 0 0 12px;
    padding: 0;
    font: inherit;
    color: inherit;
}

body.sc .sc-footer a {
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    transition: color .2s ease;
}

body.sc .sc-footer a:hover,
body.sc .sc-footer a:focus-visible {
    color: var(--hx-green);
    text-decoration: none;
}

body.sc .sc-footer a:focus-visible {
    outline: 3px solid var(--hx-green);
    outline-offset: 3px;
    border-radius: 2px;
}

body.sc .sc-footer__phone {
    font-weight: 800;
    font-size: 20px;
    color: #ffffff;
    white-space: nowrap;
}

body.sc .sc-footer__shops a {
    white-space: nowrap;
}

body.sc .sc-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.sc .sc-footer__list li {
    margin: 0 0 9px;
    padding: 0;
}

body.sc .sc-footer__list--cols {
    columns: 1;
}

body.sc .sc-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-weight: 600;
}

body.sc .sc-footer__social svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.sc .sc-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .14);
}

body.sc .sc-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-top: 20px;
    padding-bottom: 26px;
    font-size: 13px;
    color: rgba(255, 255, 255, .66);
}

body.sc .sc-footer__bottom a {
    color: rgba(255, 255, 255, .8);
}

@media (max-width: 1099px) {
    body.sc .sc-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    body.sc .sc-footer__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}