/* =========================================================
   SITE TYPE SCALE
   67px  home page hero titles only
   55px  every other big heading
   16px  reading text, navigation, card titles, footer
   13px  labels, buttons, captions, top bar, breadcrumbs
========================================================= */

:root {
    --aei-display-size: 55px;
    --aei-text-size: 16px;
    --aei-small-size: 13px;
}

html body [class][class][class][class][class] :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    li,
    button,
    label,
    small,
    strong,
    span,
    address,
    input,
    textarea,
    select
) {
    font-size: var(--aei-text-size) !important;
}

html body [class][class][class][class][class] :is(h1, h2) :is(span, strong) {
    font-size: inherit !important;
}

html body [class][class][class][class][class] :is(
    .topbar-item,
    .uninterrupted-label,
    .electrician-benefits-label,
    .service-process-label,
    .industries-power-label,
    .contact-section-label,
    .pd-category,
    .pd-image-zoom-label,
    .hero-breadcrumb,
    .products-breadcrumb,
    .contact-breadcrumb,
    .pd-breadcrumb,
    .desktop-about-breadcrumb,
    .stable-button,
    .service-primary-button,
    .service-secondary-button,
    .view-products-button,
    .electrician-benefits-button,
    .about-performance-button,
    .contact-submit-button,
    .contact-support-button,
    .pd-button,
    button
),
html body [class][class][class][class][class] :is(
    .topbar-item,
    .hero-breadcrumb,
    .products-breadcrumb,
    .contact-breadcrumb,
    .pd-breadcrumb,
    .desktop-about-breadcrumb
) :is(a, span, i),
html body [class][class][class][class][class] .topbar-item :is(span, i),
html body [class][class][class][class][class] .journey-heading > span,
html body [class][class][class][class][class] .pd-cta-copy > span,
html body [class][class][class][class][class] .power-feature small,
html body [class][class][class][class][class] .aei-stat-item > span,
html body [class][class][class][class][class] .footer-bottom p,
html body [class][class][class][class][class] .footer-bottom a,
html body [class][class][class][class][class] .journey-information p {
    font-size: var(--aei-small-size) !important;
    line-height: 1.35 !important;
}

html body [class][class][class][class][class] .journey-information h3 {
    font-size: var(--aei-text-size) !important;
    line-height: 1.25 !important;
}

html body [class][class][class][class][class] .industries-power-item h3,
html body [class][class][class][class][class] .industries-power-description,
html body [class][class][class][class][class] .industries-power-description strong {
    font-size: var(--aei-small-size) !important;
    line-height: 1.35 !important;
}

html body [class][class][class][class][class] .products-category-tab {
    font-size: var(--aei-text-size) !important;
    line-height: 1.25 !important;
}

html body [class][class][class][class][class] .products-catalog-name,
html body [class][class][class][class][class] .products-quality-kicker,
html body [class][class][class][class][class] .products-quality-image-badge,
html body [class][class][class][class][class] .products-quality-points,
html body [class][class][class][class][class] .products-quality-points li,
html body [class][class][class][class][class] .products-quality-points span,
html body [class][class][class][class][class] .products-quality-test h3 {
    font-size: var(--aei-small-size) !important;
    line-height: 1.3 !important;
}

.fault-power-information p,
.fault-power-item-2 .fault-power-information p,
.fault-power-item-4 .fault-power-information p {
    max-width: 100% !important;
}

.fault-power-item-2,
.fault-power-item-4 {
    height: auto !important;
    min-height: 430px !important;
}

@media (min-width: 992px) {
    html body [class][class][class][class][class] :is(h1, h2) {
        font-size: var(--aei-display-size) !important;
        line-height: 1.05 !important;
        max-width: 100%;
        white-space: normal !important;
    }

    html body .hero-section[class][class][class][class][class] :is(
        .stable-heading,
        .quality-heading,
        .uninterrupted-heading
    ) {
        font-size: 67px !important;
    }

    html body [class][class][class][class][class] .power-feature strong {
        font-size: var(--aei-text-size) !important;
        line-height: 1.35 !important;
        white-space: nowrap;
    }

    html body [class][class][class][class][class] .power-feature small {
        max-width: none !important;
        font-size: var(--aei-small-size) !important;
        line-height: 1.4 !important;
        white-space: nowrap;
    }

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

    .topbar-divider {
        display: none;
    }

    .topbar-email,
    .topbar-phone,
    .topbar-address {
        width: auto;
        flex: 1 1 0;
        margin: 0;
        padding: 0;
    }

    .topbar-email {
        justify-content: flex-start;
    }

    .topbar-phone {
        justify-content: center;
    }

    .topbar-address {
        justify-content: flex-end;
    }

    .aei-navbar,
    .aei-navbar .navbar-content {
        height: 82px;
        min-height: 82px;
        max-height: 82px;
    }

    .aei-navbar .aei-logo-link {
        width: 168px;
        height: 76px;
        min-height: 0;
        padding: 0;
    }

    .aei-navbar .aei-logo {
        width: 152px !important;
        height: 76px !important;
        max-height: 76px !important;
        object-fit: cover !important;
        object-position: center 37% !important;
    }

    .products-hero-section,
    .contact-hero-section {
        height: auto !important;
        min-height: 640px !important;
    }
}