/**
 * Site chrome: topbar, header, mobile menu, footer (tz/03 §4, §5, §13).
 */

/* ==========================================================
 * Topbar
 * ========================================================== */
.topbar {
    font-size: 13px;
    color: var(--c-on-dark);
    background: var(--c-ink);
}

.topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.topbar__zones {
    font-weight: 500;
    color: var(--c-accent);
    text-decoration: none;
}

.topbar__zones:hover {
    color: var(--c-surface);
}

/* ==========================================================
 * Header
 * ========================================================== */
/* Sticky header (all pages): page background, tz/03 §5.
 * The bottom line shows only once the header is stuck (.is-stuck, set in site.js) — customer's request,
 * the spec draws it always. */
.site-header--sticky {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 50;
    background: var(--c-bg);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.site-header--sticky.is-stuck {
    border-bottom-color: var(--c-line-soft);
}

/* Anchors and keyboard focus must not end up under the sticky bar; --header-h is measured in site.js. */
html:has(.site-header--sticky) {
    scroll-padding-top: calc(
        var(--header-h, 80px) + var(--wp-admin--admin-bar--height, 0px) + 16px
    );
}

/* The open burger panel scrolls inside the viewport instead of pushing past it. */
.site-header--sticky .mobile-menu {
    max-height: calc(100vh - var(--header-h, 80px));
    max-height: calc(
        100dvh - var(--header-h, 80px) - var(--wp-admin--admin-bar--height, 0px)
    );
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Below 600px the admin bar scrolls away with the page. */
@media (max-width: 600px) {
    .admin-bar .site-header--sticky {
        top: 0;
    }
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    padding-top: 18px;
    padding-bottom: 18px;
}

/* Logo files from tz/logo (text in curves): 40px high in the header, 34px on phones, dark 36px in the footer (tz/03 §2). */
.logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.logo__img {
    display: block;
    width: auto;
    height: 40px;
}

.logo__img--word {
    display: none;
}

.logo--dark .logo__img {
    height: 36px;
}

.site-nav__list {
    display: flex;
    gap: 28px;
}

.site-nav__link {
    font-size: 15px;
    font-weight: 500;
    color: var(--c-ink);
    text-decoration: none;
}

.site-nav__link:hover {
    color: var(--c-primary);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Language switch */
.lang-switch {
    display: flex;
    padding: 4px;
    background: var(--c-switch);
    border-radius: var(--r-pill);
}

.lang-switch__item {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--c-text-2);
    text-decoration: none;
    border-radius: var(--r-pill);
}

.lang-switch__item[aria-current='true'] {
    color: var(--c-ink);
    background: var(--c-surface);
}

/* Phone button */
.phone-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-surface);
    text-decoration: none;
    white-space: nowrap;
    background: var(--c-ink);
    border-radius: var(--r-pill);
}

.phone-btn:hover {
    color: var(--c-surface);
    background: var(--c-primary);
}

.phone-btn__icon {
    color: var(--c-accent);
}

/* Burger */
.burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
}

.burger__close,
.burger[aria-expanded='true'] .burger__open {
    display: none;
}

.burger[aria-expanded='true'] .burger__close {
    display: block;
}

.mobile-menu {
    padding-bottom: 20px;
}

.mobile-menu .container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--c-surface);
    border-radius: var(--r-card);
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 16px;
    font-size: 17px;
    font-weight: 600;
    color: var(--c-ink);
    text-decoration: none;
    border-radius: var(--r-btn);
}

.mobile-menu__link:hover {
    color: var(--c-ink);
    background: var(--c-aqua-soft);
}

@media (max-width: 959px) {
    .site-nav {
        display: none;
    }

    .burger {
        display: flex;
    }
}

@media (min-width: 960px) {
    .mobile-menu {
        display: none !important;
    }
}

/* 960–1199px: five menu items + language + phone fit in one row only with tighter gaps
 * and the phone as an icon button (the number stays in its aria-label, like on phones). */
@media (min-width: 960px) and (max-width: 1199px) {
    .site-header__inner {
        column-gap: 16px;
    }

    .site-nav__list {
        gap: 16px;
    }

    .phone-btn {
        width: 44px;
        padding: 0;
        justify-content: center;
    }

    .phone-btn__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/*
 * Messenger icons right of the phone button, outside the container (desktop).
 * `.site-header` prefix: must beat the generic .messengers rules defined further down.
 * Shown from 1625px: right of the phone there is (1625 − 17 scrollbar − 1240) / 2 + 20 = 204px,
 * 3 icons take 8 + 3 × 43 + 2 × 8 = 153px; 4 icons take 8 + 4 × 43 + 3 × 8 = 204px — flush with the scrollbar.
 */
.site-header__actions {
    position: relative;
}

.site-header .site-header__social {
    display: none;
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    flex-wrap: nowrap;
    gap: 8px;
    transform: translateY(-50%);
}

.site-header .site-header__social .messengers__link {
    width: 43px;
    height: 43px;
}

.site-header .site-header__social .icon {
    width: 24px;
    height: 24px;
}

@media (min-width: 1625px) {
    .site-header .site-header__social {
        display: flex;
    }
}

/* Phones: everything in one row (the header is sticky, height matters). */
@media (max-width: 639px) {
    .site-header__inner {
        flex-wrap: nowrap;
        gap: 12px;
        padding: 10px 12px;
    }

    .logo__img {
        height: 34px;
    }

    .site-header__actions {
        gap: 8px;
    }

    .lang-switch__item {
        padding-right: 10px;
        padding-left: 10px;
    }

    .phone-btn {
        width: 44px;
        padding: 0;
        justify-content: center;
    }

    .phone-btn__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Narrow phones: wordmark only (markclean-wordmark, tz/03 §2 "where the mark doesn't fit"),
 * so the bar stays in one row with 44px targets. */
@media (max-width: 399px) {
    .site-header .logo__img--full {
        display: none;
    }

    .site-header .logo__img--word {
        display: block;
    }
}

/* ==========================================================
 * Messengers
 * ========================================================== */
.messengers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Round icon buttons, 44px tap target (tz/03 §1.6). */
.messengers__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--c-primary);
    background: var(--c-aqua);
    border-radius: 50%;
    transition:
        background-color 0.15s,
        color 0.15s;
}

.messengers__link:hover {
    color: var(--c-ink);
    background: var(--c-accent);
}

.mobile-menu__messengers {
    justify-content: center;
}

/* ==========================================================
 * Footer
 * ========================================================== */
.site-footer {
    font-size: 15px;
    color: var(--c-on-dark);
    background: var(--c-ink);
}

.site-footer a {
    color: var(--c-surface);
}

.site-footer a:hover {
    color: var(--c-accent);
}

.site-footer__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 24px;
}

/* Logo with the tagline under it */
.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 320px;
}

.site-footer__tagline {
    font-size: 14px;
    line-height: 1.5;
}

.site-footer__tagline strong {
    display: block;
    color: var(--c-surface);
}

.site-footer__hours {
    color: var(--c-accent);
}

/* Phone with the e-mail under it */
.site-footer__contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.site-footer a.site-footer__email {
    font-size: 14px;
    color: var(--c-on-dark);
    text-decoration: none;
}

.site-footer a.site-footer__email:hover {
    color: var(--c-accent);
    text-decoration: underline;
}

@media (max-width: 639px) {
    .site-footer__contacts {
        align-items: flex-start;
    }
}

/* On the dark footer: light icons on a translucent circle. */
.site-footer .messengers__link {
    color: var(--c-surface);
    background: color-mix(in srgb, var(--c-on-dark) 14%, transparent);
}

.site-footer .messengers__link:hover {
    color: var(--c-ink);
    background: var(--c-accent);
}

.site-footer__phone {
    font-weight: 600;
    text-decoration: none;
}

.site-footer a.site-footer__phone {
    color: var(--c-accent);
}

.site-footer__zones,
.site-footer__bottom {
    border-top: 1px solid color-mix(in srgb, var(--c-on-dark) 20%, transparent);
}

/* City links (tz v2 04 §5) */
.site-footer__zones {
    padding-top: 28px;
    padding-bottom: 28px;
}

.site-footer__title {
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-surface);
}

.site-footer__cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 14px;
}

.site-footer__cities a,
.site-footer__legal a,
.site-footer__link-btn {
    color: var(--c-on-dark);
    text-decoration: none;
}

/* "Setări cookie": a button that looks like the legal links */
.site-footer__link-btn {
    padding: 0;
    font: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.site-footer__cities a:hover,
.site-footer__legal a:hover,
.site-footer__link-btn:hover {
    color: var(--c-accent);
    text-decoration: underline;
}

/* Copyright left, legal links right */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-top: 20px;
    padding-bottom: 40px;
    font-size: 14px;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

@media (max-width: 639px) {
    .site-footer__cities {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__cities a,
    .site-footer__legal a,
    .site-footer__link-btn {
        display: inline-block;
        padding: 4px 0;
    }
}