/* ==========================================================================
   ClimaCore — Header (reference construction-company-02 layout)
   Row 1: logo · phone · Contact CTA. Row 2: primary nav.
   Absolutely positioned over the hero, transparent. Scrolls away with page.
   ========================================================================== */

.cc-header {
    position: absolute;
    top: 0;
    inset-inline: 0;
    z-index: var(--cc-z-header);
    background: transparent;
    color: #FFFFFF;
}

.cc-header__row { width: 100%; }
.cc-header__row-inner {
    max-width: var(--cc-content-max);
    margin: 0 auto;
    padding-inline: var(--cc-page-pad);
    display: flex;
    align-items: center;
    gap: var(--cc-space-6);
}

/* ----- Row 1: logo + phone + CTA + (mobile) toggle -------------------- */
.cc-header__row--top .cc-header__row-inner {
    min-height: 80px;
    padding-block: var(--cc-space-3);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--cc-space-6);
}
@media (max-width: 1023px) {
    .cc-header__row--top .cc-header__row-inner {
        grid-template-columns: auto 1fr auto;
    }
}

.cc-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.cc-header__logo img {
    height: 56px;
    width: auto;
    max-width: 260px;
    filter:
        drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55))
        drop-shadow(0 2px 14px rgba(0, 0, 0, 0.5));
}
@media (min-width: 1024px) {
    .cc-header__logo img { height: 64px; max-width: 300px; }
}
/* On dark hero, swap to the brand's reversed-text variant (crimson hex preserved) */
.cc-header__logo img { content: url('../svg/logos/CN-light-on-dark.svg'); }

.cc-header__phone {
    justify-self: center;
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--cc-font-display);
    font-size: 16px;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    transition: color 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.cc-header__phone-label {
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--cc-font-body);
    font-size: 13px;
    letter-spacing: 0.02em;
}
.cc-header__phone strong {
    color: var(--cc-warm);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.02em;
}
.cc-header__phone:hover strong { color: var(--cc-warm-hover); }

.cc-header__cta {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    min-height: 44px;
    padding-block: var(--cc-space-2);
    padding-inline: var(--cc-space-6);
    font-size: 13px;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

/* Mobile toggle (hidden on desktop) */
.cc-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 0;
    color: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
}
.cc-header__toggle svg { width: 22px; height: 22px; }

/* ----- Row 2: primary nav -------------------------------------------- */
.cc-header__row--main {
    border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}
.cc-header__row--main .cc-header__row-inner {
    min-height: 60px;
    padding-block: var(--cc-space-3);
    justify-content: flex-start;
}
.cc-header__nav,
.cc-header__nav ul {
    display: flex;
    align-items: center;
    gap: var(--cc-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cc-header__nav li,
.cc-mobile-menu__nav ul,
.cc-mobile-menu__nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cc-header__nav a {
    font-family: var(--cc-font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    padding-block: var(--cc-space-2);
    border-block-end: 2px solid transparent;
    transition:
        border-color 200ms cubic-bezier(0.2, 0.6, 0.2, 1),
        color 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.cc-header__nav a:hover {
    color: var(--cc-warm);
    border-block-end-color: var(--cc-warm);
}
.cc-header__nav a.current-menu-item,
.cc-header__nav a[aria-current='page'] {
    color: var(--cc-warm);
    border-block-end-color: var(--cc-warm);
}

/* ----- Mobile breakpoint -------------------------------------------- */
@media (max-width: 1023px) {
    .cc-header__row--main { display: none; }
    .cc-header__cta { display: none; }
    .cc-header__toggle { display: inline-flex; }
    .cc-header__phone strong { font-size: 17px; }
}
@media (max-width: 768px) {
    .cc-header__row--top .cc-header__row-inner {
        min-height: 64px;
        gap: var(--cc-space-3);
        padding-inline: var(--cc-space-4);
    }
    .cc-header__logo img { height: 44px; max-width: 200px; }
    .cc-header__phone-label { display: none; }
    .cc-header__phone { font-size: 13px; }
    .cc-header__phone strong { font-size: 15px; }
}

/* ----- Mobile menu overlay (slide-in panel) ------------------------ */
.cc-mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--cc-bg);
    z-index: var(--cc-z-overlay);
    transform: translateX(100%);
    transition: transform var(--cc-dur-mid) var(--cc-ease-inout);
    display: flex;
    flex-direction: column;
    padding: var(--cc-space-16) var(--cc-page-pad);
}
.cc-mobile-menu.is-open { transform: translateX(0); }
.cc-mobile-menu__close {
    position: absolute;
    top: var(--cc-space-4);
    inset-inline-end: var(--cc-space-4);
    width: 44px; height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--cc-text);
}
.cc-mobile-menu__close svg { width: 22px; height: 22px; }
.cc-mobile-menu__nav { display: flex; flex-direction: column; gap: var(--cc-space-6); flex: 1; }
.cc-mobile-menu__nav a {
    font-size: var(--cc-fs-h2);
    font-weight: var(--cc-fw-medium);
    color: var(--cc-text);
    text-decoration: none;
}
.cc-mobile-menu__cta { margin-block-start: auto; }

body.cc-menu-open { overflow: hidden; }