/**
 * Eva Granit — Navigation
 * Top bar + main header + desktop dropdown + mobile panel
 *
 * @package eva-granit
 */

/* ─── Top Bar ─────────────────────────────────────────────────────────────── */
.header-topbar {
    background:  var(--color-primary);
    color:       rgba(255,255,255,.85);
    font-size:   0.8rem;
    padding:     6px 0;
}

.header-topbar .container {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--spacing-md);
    flex-wrap:       wrap;
}

.topbar-left {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
    flex-wrap:   wrap;
}

.topbar-left > span {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
}

.topbar-ico {
    flex-shrink: 0;
    opacity:     .85;
}

.topbar-phone {
    font-weight: 700;
    color:       #fff;
    letter-spacing: .03em;
}

.topbar-phone a {
    color:           inherit;
    text-decoration: none;
}

.topbar-phone a:hover {
    color: var(--color-accent);
}

.topbar-sep {
    opacity: .35;
}

.topbar-address,
.topbar-hours {
    color: rgba(255,255,255,.75);
}

/* ─── Main Header ─────────────────────────────────────────────────────────── */
.header-main {
    background:    #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow:    0 2px 8px rgba(0,0,0,.05);
    padding:       0;
}

.header-main .container {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          72px;
    gap:             var(--spacing-md);
}

/* Sticky wrapper */
.site-header {
    position: sticky;
    top:      0;
    z-index:  500;
}

/* ─── Logo ────────────────────────────────────────────────────────────────── */
.header-logo {
    flex-shrink:     0;
    text-decoration: none;
    display:         flex;
    align-items:     center;
    gap:             10px;
}

.header-logo img,
.header-logo__img {
    height:            56px;
    width:             auto;
    max-width:         180px;
    display:           block;
    object-fit:        contain;
    image-rendering:   -webkit-optimize-contrast;
}

.header-logo__badge {
    flex-shrink:     0;
    width:           36px;
    height:          36px;
    background:      var(--color-accent);
    border-radius:   var(--radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    font-family:     var(--font-heading);
    font-size:       16px;
    font-weight:     700;
}

.header-logo__text {
    font-family:  var(--font-heading);
    font-size:    1.375rem;
    font-weight:  700;
    color:        var(--color-primary);
    line-height:  1.1;
    letter-spacing: .5px;
    text-decoration: none;
    display:      block;
}

.header-logo:hover .header-logo__text {
    color:           var(--color-accent);
    text-decoration: none;
}

/* ─── Desktop Nav ─────────────────────────────────────────────────────────── */
.desktop-nav {
    flex: 1;
}

.desktop-nav ul.nav-list {
    list-style:      none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             32px;
    padding:         0;
    margin:          0;
}

.desktop-nav ul.nav-list > li {
    position: relative;
}

.desktop-nav ul.nav-list > li > a {
    display:         block;
    padding-bottom:  2px;
    font-size:       0.9375rem;
    font-weight:     400;
    color:           var(--color-muted);
    text-decoration: none;
    white-space:     nowrap;
    border-bottom:   2px solid transparent;
    transition:      color var(--transition-base), border-color var(--transition-base);
}

.desktop-nav ul.nav-list > li > a:hover {
    color:         var(--color-primary);
}

.desktop-nav ul.nav-list > li.current-menu-item > a,
.desktop-nav ul.nav-list > li.current-menu-ancestor > a {
    color:        var(--color-primary);
    font-weight:  600;
    border-color: var(--color-accent);
}

/* Dropdown arrow */
.desktop-nav .menu-item-has-children > a::after {
    content:     ' ▾';
    font-size:   0.7rem;
    opacity:     .6;
}

/* Dropdown */
.desktop-nav .sub-menu {
    display:       none;
    position:      absolute;
    top:           100%;
    left:          0;
    min-width:     210px;
    background:    #fff;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow:    0 8px 24px rgba(0,0,0,.08);
    padding:       6px 0;
    z-index:       200;
    list-style:    none;
    margin:        0;
}

.desktop-nav .menu-item-has-children:hover > .sub-menu,
.desktop-nav .menu-item-has-children:focus-within > .sub-menu {
    display: block;
}

.desktop-nav .sub-menu li a {
    display:         block;
    padding:         9px 18px;
    font-size:       0.875rem;
    color:           var(--color-primary);
    text-decoration: none;
    transition:      background var(--transition-base);
}

.desktop-nav .sub-menu li a:hover {
    background: #f4f0eb;
    color:      var(--color-accent);
}

/* ─── Header CTA ──────────────────────────────────────────────────────────── */
.header-cta {
    display:     flex;
    align-items: center;
    gap:         var(--spacing-sm);
    flex-shrink: 0;
}

.header-phone-link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-size:       0.9375rem;
    font-weight:     700;
    color:           var(--color-primary);
    text-decoration: none;
    white-space:     nowrap;
    letter-spacing:  .01em;
}

.header-phone-link__ico { flex-shrink: 0; }

.header-phone-link:hover {
    color:           var(--color-accent);
    text-decoration: none;
}

.btn-callback {
    display:         inline-block;
    padding:         10px 24px;
    background:      var(--color-accent);
    color:           #fff;
    font-size:       0.875rem;
    font-weight:     600;
    border-radius:   var(--radius-md);
    text-decoration: none;
    white-space:     nowrap;
    transition:      background var(--transition-base);
}

.btn-callback:hover {
    background:      #7a6347;
    color:           #fff;
    text-decoration: none;
}

/* ─── Burger ──────────────────────────────────────────────────────────────── */
.header-burger {
    display:     none;
    flex-direction: column;
    gap:         5px;
    background:  none;
    border:      none;
    cursor:      pointer;
    padding:     8px;
    z-index:     600;
}

.header-burger span {
    display:    block;
    width:      24px;
    height:     2px;
    background: var(--color-primary);
    transition: all .25s;
}

.header-burger--open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.header-burger--open span:nth-child(2) { opacity: 0; }
.header-burger--open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ─── Mobile Overlay ──────────────────────────────────────────────────────── */
.mobile-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.35);
    z-index:    700;
}

.mobile-overlay--open { display: block; }

/* ─── Mobile Panel ────────────────────────────────────────────────────────── */
.mobile-panel {
    position:   fixed;
    top:        0;
    left:       -100%;
    bottom:     0;
    width:      300px;
    max-width:  85vw;
    background: #fff;
    z-index:    800;
    overflow-y: auto;
    transition: left .3s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
}

.mobile-panel--open { left: 0; }

.mobile-panel__inner {
    display:        flex;
    flex-direction: column;
    min-height:     100%;
    padding:        0 0 24px;
}

/* Panel header */
.mobile-panel__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 20px;
    border-bottom:   1px solid var(--color-border);
}

.mobile-panel__close {
    background:  none;
    border:      none;
    font-size:   1.3rem;
    cursor:      pointer;
    color:       var(--color-muted);
    line-height: 1;
    padding:     4px;
}

/* Mobile nav list */
.mobile-nav { flex: 1; }

.mobile-nav ul {
    list-style: none;
    padding:    0;
    margin:     0;
}

.mobile-nav > ul > li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-nav > ul > li > a {
    display:         block;
    padding:         14px 20px;
    font-size:       0.95rem;
    font-weight:     500;
    color:           var(--color-primary);
    text-decoration: none;
}

.mobile-nav > ul > li > a:hover {
    color: var(--color-accent);
}

/* Mobile submenu toggle */
.mobile-submenu-toggle {
    display:     flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-submenu-arrow {
    padding:     4px 8px;
    background:  none;
    border:      none;
    font-size:   0.8rem;
    color:       var(--color-muted);
    cursor:      pointer;
    transition:  transform .2s;
    flex-shrink: 0;
}

.mobile-submenu-arrow--open { transform: rotate(180deg); }

.mobile-sub-nav {
    background:  #fafafa;
    display:     none;
    border-left: 3px solid var(--color-accent, #8B7355);
    margin-left: 20px;
}

.mobile-sub-nav[aria-hidden="false"] { display: block; }

.mobile-sub-nav li {
    position: relative;
}

.mobile-sub-nav li a {
    display:         block;
    padding:         14px 20px 14px 16px;
    font-size:       0.95rem;
    color:           var(--color-muted);
    text-decoration: none;
}

.mobile-sub-nav li a:hover {
    color:       var(--color-accent);
    padding-left: 20px;
    transition:  padding-left .15s ease;
}

/* Mobile panel CTA */
.mobile-panel__cta {
    padding:        20px;
    margin-top:     auto;
    border-top:     1px solid var(--color-border);
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.mobile-cta-phone {
    display:         block;
    padding:         12px 16px;
    background:      var(--color-primary);
    color:           #fff;
    text-align:      center;
    font-size:       0.95rem;
    font-weight:     700;
    border-radius:   var(--radius-md);
    text-decoration: none;
    letter-spacing:  .02em;
}

.mobile-cta-phone:hover {
    background:      var(--color-accent);
    color:           #fff;
    text-decoration: none;
}

.mobile-cta-callback {
    display:         block;
    padding:         12px 16px;
    background:      var(--color-accent);
    color:           #fff;
    text-align:      center;
    font-size:       0.875rem;
    font-weight:     600;
    border-radius:   var(--radius-md);
    text-decoration: none;
}

.mobile-cta-callback:hover {
    background:      #7a6347;
    color:           #fff;
    text-decoration: none;
}

/* ─── Admin bar offset ────────────────────────────────────────────────────── */
body.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .desktop-nav {
        display: none;
    }

    .header-cta {
        display: none;
    }

    .header-burger {
        display: flex;
    }

    .header-main .container {
        height: 64px;
    }

    .header-logo img,
    .header-logo__img {
        height:    44px;
        max-width: 140px;
    }

    .header-topbar .topbar-address {
        display: none;
    }
}

@media (max-width: 600px) {
    .header-topbar .topbar-hours {
        display: none;
    }

    .header-topbar {
        padding:    4px 0;
        font-size:  0.75rem;
    }

    .header-topbar .container {
        justify-content: space-between;
        gap:             8px;
    }

    .topbar-left {
        gap: 8px;
    }

    .topbar-phone a {
        font-size: 0.8rem;
    }
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--color-primary);
    color:      #fff;
    padding:    60px 0 24px;
    margin-top: 0;
}

.site-footer a {
    color: rgba(255,255,255,.7);
}

.site-footer a:hover {
    color:           #fff;
    text-decoration: none;
}

.site-footer .footer-grid {
    display:               grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap:                   60px;
    padding-bottom:        40px;
    border-bottom:         1px solid rgba(255,255,255,.1);
}

.footer-col--brand {
    max-width: 340px;
}

.footer-brand {
    font-family: var(--font-heading);
    font-size:   1.375rem;
    font-weight: 700;
    color:       #fff;
    display:     flex;
    align-items: center;
    gap:         10px;
    margin:      0 0 16px;
}

.footer-brand__badge {
    flex-shrink:     0;
    width:           32px;
    height:          32px;
    background:      var(--color-accent);
    border-radius:   var(--radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    font-size:       14px;
    font-weight:     700;
}

.footer-desc {
    font-size:   0.875rem;
    color:       rgba(255,255,255,.5);
    line-height: 1.6;
    margin:      0 0 20px;
}

.footer-social {
    display: flex;
    gap:     12px;
}

.footer-social__link {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    border:          1px solid rgba(255,255,255,.15);
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    color:           rgba(255,255,255,.5);
    font-size:       12px;
    font-weight:     600;
    transition:      border-color .2s, color .2s, background .2s;
}

.footer-social__link:hover {
    color:        #fff;
    border-color: var(--color-accent);
    background:   var(--color-accent);
}

.site-footer .footer-title {
    font-family:    var(--font-body);
    font-size:      13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color:          rgba(255,255,255,.4);
    font-weight:    600;
    margin:         0 0 20px;
}

.site-footer .footer-nav {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.site-footer .footer-nav a {
    color:           rgba(255,255,255,.7);
    font-size:       0.9375rem;
    text-decoration: none;
    transition:      color .2s;
}

.site-footer .footer-nav a:hover { color: #fff; }

.footer-contacts li {
    color:     rgba(255,255,255,.7);
    font-size: 0.9375rem;
}

.site-footer .footer-bottom {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             16px;
    border-top:      none;
    margin-top:      0;
    padding-top:     24px;
    font-size:       13px;
    color:           rgba(255,255,255,.35);
}

.footer-bottom__copy { margin: 0; }

.footer-bottom__links {
    display: flex;
    gap:     24px;
}

.footer-bottom__links a {
    color:           rgba(255,255,255,.35);
    text-decoration: none;
    font-size:       13px;
}

.footer-bottom__links a:hover { color: rgba(255,255,255,.6); }

@media (max-width: 768px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap:                   28px 20px;
    }

    .footer-col--brand {
        grid-column: 1 / -1;
        max-width:   100%;
    }

    .site-footer .footer-bottom {
        flex-direction: column;
        align-items:    flex-start;
    }
}

@media (max-width: 480px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr;
    }
}