/* ─── TOPBAR ─────────────────────────────────────────────────────────────────*/
.ch-topbar {
    background: var(--color-bg-darker);
    height: 36px;
    display: flex;
    align-items: center;
}

.ch-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.ch-topbar__left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ch-topbar__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(248,250,252,0.6);
    font-family: var(--font-body);
    transition: color 0.2s;
    text-decoration: none;
}

.ch-topbar__item:hover {
    color: var(--color-primary);
}

.ch-topbar__divider {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.1);
}

.ch-topbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ch-topbar__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary);
    font-family: var(--font-body);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ch-topbar__social {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 16px;
    border-left: 1px solid rgba(255,255,255,0.1);
}

.ch-topbar__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: rgba(248,250,252,0.5);
    border-radius: var(--border-radius);
    transition: color 0.2s, background 0.2s;
    font-size: 12px;
    text-decoration: none;
}

.ch-topbar__social-link:hover {
    color: var(--color-primary);
    background: rgba(255,255,255,0.05);
}


/* ─── MAIN NAV ───────────────────────────────────────────────────────────────*/
.ch-header {
    position: relative;
    z-index: 99999;
}

.ch-nav {
    background: var(--color-bg-dark);
    height: var(--header-height);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    z-index: 99998;
}

.ch-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 32px;
}


/* ─── LOGO ───────────────────────────────────────────────────────────────────*/
.ch-nav__logo {
    flex-shrink: 0;
    width: auto;
}

.ch-nav__logo-img {
    height: 64px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

.ch-nav__logo a {
    display: flex;
    align-items: center;
}

.ch-nav__logo-text {
    font-family: var(--font-heading);
    font-size: 22px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}


/* ─── MENU DESKTOP ───────────────────────────────────────────────────────────*/
.ch-nav__menu {
    flex: 1;
    display: flex;
    justify-content: center;
}

.ch-menu__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ch-menu__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-nav-text, rgba(248,250,252,0.85));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s;
    white-space: nowrap;
    text-decoration: none;
}

.ch-menu__link:hover,
.ch-menu__link.active {
    color: var(--color-primary);
}

.ch-menu__chevron {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.ch-menu__item--mega:hover .ch-menu__chevron {
    transform: rotate(180deg);
}


/* ─── MEGA BASE ──────────────────────────────────────────────────────────────*/
.ch-menu__item--mega {
    position: relative;
}

.ch-mega {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #ffffff;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.15);
    border: 1px solid var(--color-border-light);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 9999;
    overflow: hidden;
    min-width: 320px;
}

.ch-menu__item--mega:hover .ch-mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.ch-mega__inner {
    display: flex;
    flex-direction: column;
}

/* ─── MEGA SERVICES ──────────────────────────────────────────────────────────*/
.ch-mega--services {
    min-width: 340px;
}

.ch-mega__col {
    padding: 20px;
}

.ch-mega__col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 11px;
    color: var(--color-text-mid);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
}

.ch-mega__col-header i {
    color: var(--color-primary);
    font-size: 13px;
}

.ch-mega__items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ch-mega__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: background 0.15s;
}

.ch-mega__item:hover {
    background: var(--color-bg-soft);
}

.ch-mega__item-icon {
    width: 34px;
    height: 34px;
    background: var(--color-bg-soft);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.ch-mega__item:hover .ch-mega__item-icon {
    background: var(--color-primary);
    color: var(--color-button-text, #ffffff);
}

.ch-mega__item-text {
    flex: 1;
    min-width: 0;
}

.ch-mega__item-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-bg-dark);
    font-family: var(--font-body);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-mega__item-desc {
    font-size: 11px;
    color: var(--color-text-mid);
    font-family: var(--font-body);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-mega__item-arrow {
    font-size: 10px;
    color: var(--color-border-light);
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}

.ch-mega__item:hover .ch-mega__item-arrow {
    color: var(--color-primary);
    transform: translateX(3px);
}

.ch-mega__view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-body);
    text-decoration: none;
    margin-top: 12px;
    padding: 6px 10px;
    transition: gap 0.2s;
}

.ch-mega__view-all:hover {
    gap: 10px;
}

/* ─── MEGA SERVICE AREAS ─────────────────────────────────────────────────────*/
.ch-mega--areas {
    min-width: 500px;
}

.ch-mega__col--full {
    width: 100%;
    padding: 20px;
}

.ch-mega__areas-grouped {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ch-mega__area-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ch-mega__area-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 11px;
    color: var(--color-bg-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--color-primary);
}

.ch-mega__area-group-title i {
    color: var(--color-primary);
    font-size: 12px;
}

.ch-mega__area-group-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ch-mega__area-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: var(--border-radius);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-body);
    font-family: var(--font-body);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-mega__area-link:hover {
    background: var(--color-bg-soft);
    color: var(--color-primary);
    padding-left: 12px;
}

.ch-mega__area-link i {
    color: var(--color-primary);
    font-size: 10px;
    flex-shrink: 0;
}

/* ─── MEGA FOOTER CTA ────────────────────────────────────────────────────────*/
.ch-mega__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: var(--color-bg-dark);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.ch-mega__footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ch-mega__footer-left > i {
    color: var(--color-primary);
    font-size: 20px;
}

.ch-mega__footer-label {
    font-size: 10px;
    color: rgba(248,250,252,0.5);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 2px;
}

.ch-mega__footer-phone {
    font-family: var(--font-heading);
    font-size: 16px;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s;
}

.ch-mega__footer-phone:hover {
    color: var(--color-primary);
}

.ch-mega__footer-btn {
    flex-shrink: 0;
    font-size: 12px;
    padding: 10px 18px;
}


/* ─── PHONE + CTA ────────────────────────────────────────────────────────────*/
.ch-nav__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.ch-nav__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(248,250,252,0.9);
    transition: color 0.2s;
    text-decoration: none;
}

.ch-nav__phone:hover {
    color: var(--color-primary);
}

.ch-nav__phone > i {
    color: var(--color-primary);
    font-size: 18px;
    flex-shrink: 0;
}

.ch-nav__phone-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ch-nav__phone-label {
    font-size: 10px;
    font-family: var(--font-body);
    color: rgba(248,250,252,0.45);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ch-nav__phone-number {
    font-family: var(--font-heading);
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.ch-nav__cta {
    font-size: 13px;
    padding: 11px 20px;
}


/* ─── HAMBURGER ──────────────────────────────────────────────────────────────*/
.ch-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--border-radius);
    cursor: pointer;
    padding: 10px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

.ch-hamburger:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--color-primary);
}

.ch-hamburger.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.ch-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    transition: all 0.25s ease;
    transform-origin: center;
    border-radius: 2px;
}

.ch-hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.ch-hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.ch-hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ─── STICKY ─────────────────────────────────────────────────────────────────*/
.ch-header.scrolled .ch-nav {
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.ch-header.scrolled .ch-topbar {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}


/* ─── MOBILE MENU ────────────────────────────────────────────────────────────*/
.ch-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding-top: calc(var(--header-height) + 36px);
    background: var(--color-bg-dark);
    overflow-y: auto;
    z-index: 99997;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: block;
    visibility: hidden;
}

.ch-mobile.open {
    transform: translateX(0);
    visibility: visible;
}

.ch-mobile__inner {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ch-mobile__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 24px 0;
    padding: 0;
}

.ch-mobile__link,
.ch-mobile__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 4px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: rgba(248,250,252,0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
}

.ch-mobile__link:hover,
.ch-mobile__toggle:hover {
    color: var(--color-primary);
}

.ch-mobile__submenu {
    list-style: none;
    display: none;
    flex-direction: column;
    background: rgba(0,0,0,0.2);
    padding: 0;
    margin: 0;
}

.ch-mobile__submenu.open {
    display: flex;
}

.ch-mobile__sublink {
    padding: 12px 24px;
    font-size: 13px;
    font-family: var(--font-body);
    color: rgba(248,250,252,0.65);
    border-bottom: 1px solid var(--color-border);
    display: block;
    transition: color 0.2s;
    text-decoration: none;
}

.ch-mobile__sublink:hover {
    color: var(--color-primary);
}

.ch-mobile__sublink--all {
    color: var(--color-primary) !important;
    font-weight: 700 !important;
}

.ch-mobile__sublink--area {
    padding-left: 32px !important;
    font-size: 12px !important;
}

.ch-mobile__sublink--area i {
    color: var(--color-primary);
    font-size: 10px;
    margin-right: 4px;
}

.ch-mobile__subgroup-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-body);
    padding: 10px 24px 4px;
    display: block;
}

.ch-mobile__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-family: var(--font-heading);
    font-size: 20px;
    color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: 8px;
    text-decoration: none;
    transition: border-color 0.2s;
}

.ch-mobile__phone:hover {
    border-color: var(--color-primary);
}

.ch-mobile__phone i {
    color: var(--color-primary);
}


/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────*/
@media ( max-width: 1024px ) {
    .ch-nav__menu  { display: none; }
    .ch-hamburger  { display: flex; }
    .ch-mobile     { display: block; }
    .ch-topbar     { display: none; }
    .ch-nav__phone { display: none; }
    .ch-nav__actions { gap: 10px; }
}

@media ( max-width: 480px ) {
    .ch-nav__cta {
        font-size: 12px;
        padding: 10px 14px;
    }
}

/* ─── FIX BRICKS OVERFLOW ────────────────────────────────────────────────────*/
#brx-header,
#brx-header > *,
#brx-header section,
#brx-header .brxe-section,
#brx-header .brxe-container,
#brx-header .brxe-block,
#brx-header .brxe-code {
    overflow: visible !important;
}