/* Coolair Child custom styles */

.container {
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Sticky header on scroll
   Targets the header container by the user-defined CSS class .site-header
   (added via Elementor → Advanced → CSS Classes). Using a class instead of
   the auto-generated element ID keeps this portable between environments.
   Default: transparent overlay (existing absolute positioning).
   On scroll: fixed to top with white background and #234982 text.
*/
.site-header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled,
.site-header.elementor-sticky--effects {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(200, 210, 220, 0.7);
    z-index: 999;
}

/* Menu color on scroll.
   Default (transparent header): menu links use their light/white theme color.
   Scrolled (white background): the WordPress nav-menu links turn #234982 so they
   stay legible. Targets the Elementor Nav Menu widget links (.elementor-item) plus
   dropdown sub-menu links (.elementor-sub-item). */
.site-header.is-scrolled .elementor-item,
.site-header.is-scrolled .elementor-sub-item,
.site-header.elementor-sticky--effects .elementor-item,
.site-header.elementor-sticky--effects .elementor-sub-item {
    color: #0A2540 !important;
}

/* Header logo swap based on scroll state.
   Default (top of page, transparent header): show .logo-white, hide .logo-blue.
   Scrolled (white background): show .logo-blue, hide .logo-white. */
.site-header .logo-blue {
    display: none !important;
}

.site-header .logo-white {
    display: block !important;
}

.site-header.is-scrolled .logo-blue,
.site-header.elementor-sticky--effects .logo-blue {
    display: block !important;
}

.site-header.is-scrolled .logo-white,
.site-header.elementor-sticky--effects .logo-white {
    display: none !important;
}

/* Top utility bar visibility
   - Hidden on the homepage at all times.
   - Hidden on all pages once the header enters the scrolled state.
*/
.top-utility-bar {
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

body.home .top-utility-bar,
.site-header.is-scrolled .top-utility-bar,
.site-header.elementor-sticky--effects .top-utility-bar {
    display: none !important;
}

/* Flip-box front title
   - Default (any flip box): 20px top padding.
   - Inside .container-product: lift the title upward 120px instead. */
.elementor-flip-box__front .elementor-flip-box__layer__title {
    padding-top: 20px;
}

.container-product .elementor-flip-box__front .elementor-flip-box__layer__title {
    padding-top: 0;
    transform: translateY(-120px);
}

/* Services button (.services-btn)
   - Default: arrow hidden, no hover effect.
   - Active (.active class only): blue background, white text + arrow, arrow slides in. */
.services-btn .elementor-button {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.services-btn .elementor-button-icon {
    opacity: 0;
    max-width: 0;
    margin-inline-start: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-width 0.3s ease, margin-inline-start 0.3s ease;
}

.services-btn.active .elementor-button {
    background-color: #678FD5 !important;
    color: #ffffff !important;
}

.services-btn.active .elementor-button-text {
    color: #ffffff !important;
}

.services-btn.active .elementor-button-icon {
    opacity: 1;
    max-width: 30px;
    margin-inline-start: 8px;
}

.services-btn.active .elementor-button-icon svg {
    fill: #ffffff !important;
}

/* Hide Elementor Nested Tabs default heading bar (controlled by external buttons). */
.e-n-tabs-heading {
    display: none !important;
}

/* Animate Nested Tabs panel switches: crossfade with a slight upward shift.
   Inactive panels stay in the DOM but are hidden via opacity + absolute positioning,
   so transitions can play instead of a hard display:none swap. */
.e-n-tabs-content {
    position: relative;
}

.e-n-tabs-content > [role="tabpanel"] {
    display: block !important;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.e-n-tabs-content > [role="tabpanel"].e-active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
    pointer-events: auto;
}

/* Contact form layout — two columns:
   Left: Name / Email / Phone / Submit stacked.
   Right: Message textarea spanning the full height. */
.elementor-form .elementor-form-fields-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "name    message"
        "email   message"
        "phone   message"
        "submit  message";
    gap: 16px;
    align-items: start;
}

.elementor-form .elementor-form-fields-wrapper > .elementor-column {
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
}

.elementor-form .elementor-field-type-text    { grid-area: name; }
.elementor-form .elementor-field-type-email   { grid-area: email; }
.elementor-form .elementor-field-type-tel     { grid-area: phone; }
.elementor-form .elementor-field-type-submit  { grid-area: submit; }

.elementor-form .elementor-field-type-textarea {
    grid-area: message;
    display: grid !important;
    grid-template-rows: auto 1fr;
    height: 100%;
}

.elementor-form .elementor-field-type-textarea > .elementor-field-label {
    grid-row: 1;
    display: block;
    width: 100%;
}

.elementor-form .elementor-field-type-textarea textarea {
    grid-row: 2;
    width: 100%;
    height: 100%;
    min-height: 220px;
}

/* Send Message submit button — drop shadow underneath, sized to ~20% of column. */
.elementor-form .elementor-field-type-submit {
    justify-self: start;
}

.elementor-form .elementor-field-type-submit .elementor-button {
    width: 20% !important;
    min-width: 160px;
    box-shadow: 0 10px 20px rgba(35, 73, 130, 0.25);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.elementor-form .elementor-field-type-submit .elementor-button:hover {
    box-shadow: 0 14px 26px rgba(35, 73, 130, 0.32);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .elementor-form .elementor-form-fields-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "email"
            "phone"
            "message"
            "submit";
    }
}

/* Reusable utility: equal-height grid cells.
   Add the class .equal-height-grid to any Elementor grid container
   (Advanced → CSS Classes) to force all rows to equal height and
   make every direct child stretch to fill its cell. */
.equal-height-grid {
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
}

.equal-height-grid > .e-con {
    height: 100% !important;
}

/* Optional companion: add .equal-height-card to a flex-column child container
   to push its last inner section (e.g., a button) to the bottom of the card. */
.equal-height-card {
    justify-content: space-between !important;
}

/* Capacity buttons (#capacity-*)
   Active-only styling — no hover effect.
   When a button is active (clicked), its background turns #678FD5 and text white. */
a.elementor-button[id^="capacity-"] {
    transition: background-color 0.3s ease, color 0.3s ease;
}

a.elementor-button[id^="capacity-"].active {
    background-color: #678FD5 !important;
    color: #ffffff !important;
}

a.elementor-button[id^="capacity-"].active .elementor-button-text {
    color: #ffffff !important;
}

/* Capacity buttons — highlighted state.
   When a capacity button is the active column trigger, the table plugin adds
   .atb-col-trigger--active to it. Give the button the SAME gradient as the
   highlighted column so the two read as one selection. It stays in sync with the
   column (and clears when the highlight is toggled off). background-image sits
   above any background-color, so this also wins over the #678FD5 .active look. */
a.elementor-button[id^="capacity-"].atb-col-trigger--active {
    background-image: linear-gradient(to right, #7a80d6 0%, #462a9b 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

a.elementor-button[id^="capacity-"].atb-col-trigger--active .elementor-button-text {
    color: #ffffff !important;
}

/* Fixed width for every capacity button so the selector row reads as an even
   set regardless of label length ("9K" next to "18000 Btu"). Overridden at
   ≤1024px below. */
a.elementor-button[id^="capacity-"] {
    width: 150px !important;
    max-width: 150px !important;
}

/* Centre the capacity buttons inside whichever container holds them, matched
   with :has() because the containers carry no shared class of their own.
   Elementor builds these rows two ways and each reads a different variable:
   flex containers (most pages) use --justify-content, while the grid ones on
   /products/ lay out repeat(N, 1fr) tracks that already fill the width, so
   there justify-content is inert and --justify-items does the centring.
   Setting both is safe — each container type ignores the one it doesn't read.
   .e-con-inner is listed too: boxed containers nest their children one level
   deeper, and that wrapper is what carries the alignment. */
.e-con:has(> .elementor-widget-button a.elementor-button[id^="capacity-"]),
.e-con-inner:has(> .elementor-widget-button a.elementor-button[id^="capacity-"]) {
    --justify-content: center !important;
    --justify-items: center !important;
}

/* Tablet & mobile: constrain every capacity button to a fixed 100px width and a
   16px label so the row of capacity selectors stays compact and legible on
   narrower screens. The ≤1024px query covers both tablet (≤1024px) and mobile
   (≤767px), and overrides the 150px base above. */
@media (max-width: 1024px) {
    a.elementor-button[id^="capacity-"] {
        width: 100px !important;
        max-width: 100px !important;
        font-size: 16px !important;
    }
}

/* Sticky first column (spec labels).
   The spec names live in column 1; keep them pinned while the value columns
   scroll horizontally. Column-1 cells are transparent (their fill comes from
   .atb-table), so they must be painted opaque or scrolled cells show through:
   custom.js sets --atb-sticky-bg per table to that table's own background, with
   the brand navy as the default. The right-edge shadow keeps a visible divider
   (border-collapse otherwise drops the sticky cell's border while scrolling). */
.atb-table [data-atb-col="1"] {
    position: sticky;
    left: 0;
    z-index: 2;
    /* !important so the header's first cell wins over the theme rule
       `thead .atb-cell--head { background: transparent !important }`, which would
       otherwise leave the sticky header cell see-through while scrolling. */
    background-color: var(--atb-sticky-bg, #2B2265) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.12);
}

/* Header's first cell sits above both the sticky column and any sticky header. */
.atb-table thead [data-atb-col="1"] {
    z-index: 3;
}

/* Product category buttons (#for-*) on the Products page
   Active-only styling — no hover. Same look as capacity/services buttons. */
a.elementor-button[id^="for-"] {
    transition: background-color 0.3s ease, color 0.3s ease;
}

a.elementor-button[id^="for-"].active {
    background-color: #678FD5 !important;
    color: #ffffff !important;
}

a.elementor-button[id^="for-"].active .elementor-button-text {
    color: #ffffff !important;
}

/* Services + Products pages — when a service/product container holds the
   currently active "for-*" button, give the container a brand-tinted shadow.
   .product-container wraps the top-level "View" buttons; .container-product
   wraps the "View Products" sub-buttons — both get the same active shadow. */
.service-container,
.product-container,
.container-product {
    transition: box-shadow 0.3s ease;
}

/* Active card highlight — every "View" / "View Products" card, uniformly.
   The "Uniform active-card highlight" observer in custom.js adds .rt-card-selected
   to the nearest card wrapper of whichever button is active (.product-container /
   .container-product / .service-container / .equal-height-card), so all cards get
   the identical brand-tinted shadow regardless of wrapper class, page, or which
   controller drives the button. Replaces the previous per-wrapper :has() rule,
   which failed on cards whose wrapper class differed between environments. */
.rt-card-selected {
    box-shadow: 0 12px 30px rgba(35, 73, 130, 0.45) !important;
    transition: box-shadow 0.3s ease;
}

/* Tabs widgets that should hide every panel by default until a custom button
   (one with id="for-*") is clicked. Add the widget's CSS id to both selectors
   below to opt the widget into this behavior.
     - #products-detail → Products page category tabs
     - #service-details → Services page category tabs
   The !important values undo the global tab-fade rules higher up. */
#products-detail .e-n-tabs-content > [role="tabpanel"],
#service-details .e-n-tabs-content > [role="tabpanel"] {
    display: none !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
    inset: auto !important;
}

#products-detail .e-n-tabs-content.has-selection > [role="tabpanel"].e-active,
#service-details .e-n-tabs-content.has-selection > [role="tabpanel"].e-active {
    display: block !important;
}

/* Free-match buttons (#free-match-*)
   Active-only styling — no hover. Same look as capacity/products buttons. */
a.elementor-button[id^="free-match-"] {
    transition: background-color 0.3s ease, color 0.3s ease;
}

a.elementor-button[id^="free-match-"].active {
    background-color: #678FD5 !important;
    color: #ffffff !important;
}

a.elementor-button[id^="free-match-"].active .elementor-button-text {
    color: #ffffff !important;
}

/* Reveal effect for the "View Products" category containers below.
   Mirrors the Nested Tabs panel switch used by the "View" buttons (see the
   .e-n-tabs-content rules above): a crossfade with a slight upward shift.
   Because these containers live in normal flow (not an absolutely-positioned
   tab stack), the fade-in is played as a keyframe when a container becomes
   active, which reproduces the same 0.35s opacity + translateY feel. */
@keyframes atb-category-reveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Light Commercial match containers — hidden until a button selects one.
   Buttons #for-free-match / #for-u-match toggle the .free-match / .u-match
   containers via the .lc-match-active class (see custom.js). Both start hidden;
   exactly one is shown at a time. */
.free-match,
.u-match {
    display: none !important;
}

.free-match.lc-match-active,
.u-match.lc-match-active {
    display: flex !important;
    animation: atb-category-reveal 0.35s ease;
}

/* Commercial category containers — hidden until a button selects one.
   Buttons #for-commercial-outdoor / #for-commercial-heat-recovery /
   #for-commercial-indoor toggle the matching .commercial-* container via the
   .commercial-active class (see custom.js). All start hidden; exactly one is
   shown at a time. */
.commercial-outdoor,
.commercial-heat-recovery,
.commercial-indoor {
    display: none !important;
}

.commercial-outdoor.commercial-active,
.commercial-heat-recovery.commercial-active,
.commercial-indoor.commercial-active {
    display: flex !important;
    animation: atb-category-reveal 0.35s ease;
}

/* Residential category containers — hidden until a button selects one.
   Buttons #for-pular / #for-g-time / #for-airy / #for-fairy-white /
   #for-fairy-black toggle the matching container via the .residential-active
   class (see custom.js). All start hidden; exactly one is shown at a time. */
.pular,
.g-time,
.airy,
.fairy-white,
.fairy-black {
    display: none !important;
}

.pular.residential-active,
.g-time.residential-active,
.airy.residential-active,
.fairy-white.residential-active,
.fairy-black.residential-active {
    display: flex !important;
    animation: atb-category-reveal 0.35s ease;
}

/* Heat Pumps category containers — hidden until a button selects one.
   Buttons #for-versati-iv / #for-versati-v toggle the matching container via the
   .heat-pump-active class (see custom.js). Both start hidden; one shows at a time. */
.versati-iv,
.versati-v {
    display: none !important;
}

.versati-iv.heat-pump-active,
.versati-v.heat-pump-active {
    display: flex !important;
    animation: atb-category-reveal 0.35s ease;
}

/* Carousel-driven container visibility helper (toggled by custom.js).
   Used to show/hide #for_doct and #for_free-match based on the active
   Image Detail Carousel item. */
.idcw-glue-hidden {
    display: none !important;
}

/* Product drill-down toggles (light-commercial / commercial "-new" pages).
   custom.js marks each container controlled by a "<name>_btn" button with
   .rt-collapsible and toggles .rt-toggle-open on it. Collapsed by default; the
   button reveals one container per group (see the "Product drill-down toggles"
   controller in custom.js). Container class must equal its button id minus _btn. */
.rt-collapsible {
    display: none !important;
}

.rt-collapsible.rt-toggle-open {
    display: flex !important;
    animation: atb-category-reveal 0.35s ease;
}

/* Reusable utility: horizontal-scroll container.
   Add the class .h-scroll to any container (Advanced → CSS Classes) whose
   content can be wider than the box — wide tables, card rows, images, etc.
   When the content overflows it scrolls horizontally INSIDE the container;
   the page itself never grows. Works on all screen sizes, desktop included.

   The trick is min-width:0 — flex items default to min-width:auto and refuse
   to shrink below their content, which leaks the overflow up to the page.

   Companion classes:
     .h-scroll--nowrap  add alongside .h-scroll for text you don't want to wrap.
     .h-scroll-keep     add to a parent container if the page still overflows. */
.h-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
}

/* Elementor "boxed" containers lay items out in an inner wrapper — make that
   the full-width track that overflows the scrolling viewport. */
.h-scroll > .e-con-inner {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    min-width: 100%;
}

/* Children keep their own width instead of shrinking to fit (this is what
   forces the overflow that then scrolls). */
.h-scroll > *,
.h-scroll > .e-con-inner > * {
    flex-shrink: 0;
}

/* Optional: stop text wrapping so a text row keeps its natural width. */
.h-scroll--nowrap,
.h-scroll--nowrap * {
    white-space: nowrap;
}

/* Helper: if the page still scrolls sideways, add this to the leaking parent. */
.h-scroll-keep {
    min-width: 0;
    overflow: visible;
}

/* Responsive spec-table typography.
   The spec tables carry many value columns; shrink the cell text on smaller
   viewports so more of the table fits before the horizontal scroll kicks in.
   Breakpoints follow Elementor's defaults (tablet ≤1024px, mobile ≤767px).
   Applies to both value cells (.atb-cell) and header cells (.atb-cell--head). */
@media (max-width: 1024px) {
    .atb-table .atb-cell,
    .atb-table .atb-cell--head {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    /* Specifications = the label column (col 1).
       Cap its width and allow wrapping: the tables sit in a horizontal-scroll
       container (unlimited width), so long labels would otherwise keep the column
       on one line and let it fill the whole screen, pushing the value columns off.
       Fixing the width forces long labels to wrap into a narrow column instead. */
    .atb-table [data-atb-col="1"] {
        font-size: 12px !important;   /* !important: beat the broad mobile body{16px !important} */
        width: 140px !important;
        max-width: 140px !important;
        white-space: normal !important;
        overflow-wrap: break-word;
    }

    /* Values = every other column (col 2+), incl. their unit headers.
       Never wrap — keep each value on one line and let the column widen; the
       table scrolls horizontally, so long values (and the Cooling/Heating split
       headers) stay readable instead of breaking mid-word. */
    .atb-table [data-atb-col]:not([data-atb-col="1"]),
    .atb-table [data-atb-col]:not([data-atb-col="1"]) * {
        font-size: 10px !important;
        white-space: nowrap !important;
    }
}

/* Make the table's horizontal scroll visible on tablet & mobile.
   The tables DO scroll (the .atb-table-scroll viewport is overflow-x:auto and
   the table is wider than the screen), but touch browsers use auto-hiding
   overlay scrollbars, so there's no visual cue that the table can be swiped.
   Styling the scrollbar forces a persistent, branded bar (gradient matches the
   table header). Scoped to the scroll viewport and to ≤1024px (tablet+mobile).
   Note: iOS Safari ignores ::-webkit-scrollbar — for that, a right-edge fade
   hint would be needed instead/additionally. */
@media (max-width: 1024px) {
    .atb-table-scroll {
        scrollbar-width: thin;                /* Firefox */
        scrollbar-color: #462a9b #e6e6f2;     /* thumb / track (Firefox) */
    }

    .atb-table-scroll::-webkit-scrollbar {
        height: 8px;
        -webkit-appearance: none;             /* force a classic, always-visible bar */
    }

    .atb-table-scroll::-webkit-scrollbar-track {
        background: #e6e6f2;
        border-radius: 8px;
    }

    .atb-table-scroll::-webkit-scrollbar-thumb {
        background: linear-gradient(to right, #7a80d6 0%, #462a9b 100%);
        border-radius: 8px;
    }
}

/* Mobile typography baseline (≤767px).
   Normalize heading and body-text sizes on phones: H1 30px, all lower headings
   24px, body text 16px. !important is used to win over Elementor's per-widget
   typography (set in _elementor_data). Tag selectors also cover Elementor
   heading widgets, which render as <h1..h6 class="elementor-heading-title">. */
@media (max-width: 767px) {
    h1 {
        font-size: 30px !important;
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 24px !important;
    }

    body,
    p,
    .elementor-widget-text-editor {
        font-size: 16px !important;
    }
}

/* Horizontal-scroll hint for the spec tables (tablet & mobile).
   The native scrollbar only shows on Android/desktop; iOS Safari hides it. This
   paints a soft shadow on the RIGHT edge of the table viewport to signal there
   are more columns to swipe to. Pinned to .atb-shortcode (the non-scrolling
   wrapper around .atb-table-scroll) so it stays at the visible right edge while
   the table scrolls. Pure CSS (works on iOS); pointer-events:none so it never
   blocks taps. Covers ≤1024px so iPad Safari is included too. */
@media (max-width: 1024px) {
    .atb-shortcode {
        position: relative;
    }

    .atb-shortcode::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 28px;
        pointer-events: none;
        background: linear-gradient(to left, rgba(35, 33, 90, 0.28), rgba(35, 33, 90, 0));
    }
}

/* Custom draggable horizontal scrollbar for the spec tables (built by custom.js).
   Native horizontal scrollbars auto-hide on touch and don't render at all in iOS
   Safari, so custom.js inserts an always-visible, draggable bar (.atb-cscroll with
   a .atb-cscroll__thumb) right after each .atb-table-scroll and adds .atb-has-cscroll
   to the scroller. We then hide the native bar so there's only one. If the JS never
   runs, .atb-has-cscroll is never added and the native bar stays as a fallback. */
.atb-table-scroll.atb-has-cscroll {
    scrollbar-width: none;                 /* Firefox */
}

.atb-table-scroll.atb-has-cscroll::-webkit-scrollbar {
    display: none;                         /* Chrome / Safari / Edge */
}

.atb-cscroll {
    display: none;                         /* custom.js shows it only when the table overflows */
    position: relative;
    height: 10px;
    margin: 8px 0 2px;
    background: #e6e6f2;
    border-radius: 8px;
    touch-action: none;                    /* let JS own the drag gesture on touch */
    -webkit-user-select: none;
    user-select: none;
}

.atb-cscroll__thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 32px;
    border-radius: 8px;
    background: linear-gradient(to right, #7a80d6 0%, #462a9b 100%);
    cursor: grab;
    touch-action: none;
    will-change: transform;
}

.atb-cscroll__thumb:active {
    cursor: grabbing;
}

/* Mobile / tablet dropdown menu (≤1024px — Elementor's tablet breakpoint, which
   is where this nav-menu widget switches to the burger via
   .elementor-nav-menu--dropdown-tablet).

   Elementor only takes the dropdown out of the flow when the widget carries
   .elementor-nav-menu--stretch (the widget's "Full Width" setting); this one does
   not, so the panel is an in-flow flex item and its natural width is what sizes
   the whole widget. Two visible consequences: the panel is only as wide as the
   menu labels, and the toggle — which Elementor centres with `margin: 0 auto`
   in the widget's flex column — ends up centred over that width instead of
   sitting at the right edge.

   Taking the panel absolute fixes both. Clearing the positioning on the Elementor
   containers between .site-header and the widget promotes .site-header — already
   absolute (transparent overlay) or fixed (.is-scrolled), and full width in both
   states — to the containing block, so left:0/right:0 spans the viewport and
   top:100% drops the panel directly under the header row. */
@media (max-width: 1024px) {
    /* Slimmer header bar. The row height is the 33px burger (22px icon + 2 × .25em
       padding — taller than the logo at both breakpoints, so it sets the floor)
       plus this container's vertical padding, which Elementor leaves at 20px on
       every breakpoint: 73px total. Halving the padding brings the bar to ~53px
       without shrinking the logo or the toggle's tap target.

       Elementor resolves --padding-top into --padding-block-start, which
       .e-con-inner consumes as padding-block-start, so overriding the custom
       property is the right hook. !important is required: Elementor's generated
       rule is .elementor-14 .elementor-element.elementor-element-8cbf7fb, which
       outranks any reasonable class selector here. */
    .site-header > .e-con {
        --padding-top: 10px !important;
        --padding-bottom: 10px !important;
    }

    .site-header .e-con,
    .site-header .e-con-inner,
    .site-header .elementor-widget-nav-menu {
        position: static;
    }

    .site-header .elementor-widget-nav-menu .elementor-menu-toggle + .elementor-nav-menu__container {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        margin-top: 0;
        z-index: 9997;                     /* matches Elementor's own --stretch dropdown */
        background-color: var(--e-global-color-secondary, #0A2540);
    }

    /* With the panel out of the flow the widget collapses to the toggle's own
       width, so the header row's space-between drops it on the right gutter
       (20px, set on .site-header at ≤767px). That is what actually right-aligns
       it. These margins only pin it there if the widget is ever widened again —
       and they need !important, because Elementor's own
       `.elementor-14 .elementor-element.elementor-element-910629e
       .elementor-menu-toggle { margin: 0 auto }` is a four-class selector that
       outranks anything sensible written here. */
    .site-header .elementor-widget-nav-menu .elementor-menu-toggle {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    /* Align the items with the container gutter. */
    .site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item,
    .site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-sub-item {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* White links on the dark panel. The .is-scrolled/.elementor-sticky--effects
       selectors are repeated here because the rule further up this file forces
       #0A2540 !important once the header sticks — dark-on-dark inside the panel. */
    .site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item,
    .site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-sub-item,
    .site-header.is-scrolled .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item,
    .site-header.is-scrolled .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-sub-item,
    .site-header.elementor-sticky--effects .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item,
    .site-header.elementor-sticky--effects .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-sub-item {
        color: #ffffff !important;
    }

    .site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item:hover,
    .site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item.highlighted,
    .site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* The Polylang switcher renders as a nested .sub-menu that carries Elementor's
       default white dropdown background; keep it transparent so it reads as part
       of the same panel. */
    .site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown .sub-menu {
        background-color: transparent;
    }
}

/* Product feature grids on mobile (≤767px).

   Each product series stacks four Elementor grid containers of idcw_image_box
   features. Their mobile settings force two things that break the stack:

   1. --e-con-grid-template-rows: repeat(N, 1fr) — N equal-height rows. A row is
      only 1fr of the container, so any feature whose text runs longer than its
      share overflows into the row below and the items visibly collide. Present
      at ≤767px in six product templates (post-3015/3401/3442/3460/3471/3500),
      so this is latent in every product tab, not just Residential.
   2. --justify-items / --align-items: center — items stop filling their cell and
      shrink-wrap to their own text width, which is why one feature renders as a
      3-line sliver while the next stays full width. Only post-3401 and post-3015
      set this, which is why the Residential tab looks the worst.

   Returning both to their defaults makes these grids behave like the sibling
   grids that render correctly (single column, auto rows, items filling the
   width). Text stays centred — that comes from the widget's own
   .idcw-text-align-center, not from the grid.

   Scoped with :has() to grids whose direct children are feature boxes, so no
   other grid on the site is touched. !important is needed because Elementor's
   generated selector (.elementor-3401 .elementor-element.elementor-element-…)
   matches this rule's specificity and may load after the theme stylesheet. */
@media (max-width: 767px) {
    .e-con.e-grid:has(> .elementor-widget-idcw_image_box) {
        --e-con-grid-template-rows: none !important;
        --justify-items: stretch !important;
        --align-items: stretch !important;
    }
}

/* Feature grid: cancel the first-item column offset on mobile.
   The Customizer's Additional CSS (Appearance → Customize → Additional CSS)
   contains, with no media query:

       .feartures > :first-child        { grid-column: 2; }
       .feartures-pular > :first-child  { grid-column: 2; }

   On desktop the grid is repeat(8, 1fr), so pushing the first feature to
   column 2 is a deliberate offset. At ≤767px the same grid collapses to
   repeat(1, 1fr) — column 2 no longer exists, so the browser fabricates an
   implicit second column for that one item. The remaining items then auto-flow
   across two columns, and the explicit 1fr track is left with whatever the
   implicit column does not take (350 − 20 gap − 277 = 53px), which is the
   sliver of wrapped text stacked beside the full-width items.

   Resetting the placement lets all items share the single column again. */
@media (max-width: 767px) {
    .feartures > :first-child,
    .feartures-pular > :first-child {
        grid-column: auto !important;
    }
}

/* Tablet-only gutter for the burger.
   .site-header gets --padding-left/right: 20px from Elementor at ≤767px only;
   between 768px and 1024px its side padding is 0. Now that the toggle is
   right-aligned rather than centred over the menu's natural width, that leaves
   it flush against the viewport edge on tablet. Pad the toggle itself instead
   of the container so the logo keeps its current position. */
@media (min-width: 768px) and (max-width: 1024px) {
    .site-header .elementor-widget-nav-menu .elementor-menu-toggle {
        margin-right: 20px !important;   /* beats Elementor's `margin: 0 auto` */
    }
}

/* Footer contact links (added by custom.js — see "Footer contact details").
   The anchors are injected into existing text widgets, so they must not pick up
   the theme's default link colour or underline; they should read exactly as the
   surrounding footer text did before. Underline on hover/focus is the only
   affordance, which keeps the footer looking unchanged while making it obvious
   the details are actionable. */
.tel a,
.address a,
.mail a {
    color: inherit;
    text-decoration: none;
}

.tel a:hover,
.tel a:focus,
.address a:hover,
.address a:focus,
.mail a:hover,
.mail a:focus {
    color: inherit;
    text-decoration: underline;
}

/* Capacity buttons in GRID containers: stop them overflowing on mobile.
   The /products/ tabs lay their buttons out with --e-con-grid-template-columns:
   repeat(N, 1fr). At ≤767px that resolves to three ~90px tracks, but the button
   above is pinned to a fixed 100px, so each one spills past its own track and
   the right-hand column pushes ~10px outside the container — 17 of the 24 groups
   on /products/ did this. Flex groups are unaffected because they simply wrap.

   Fix: let the widget fill its track (Elementor's --justify-items: center makes
   it shrink-wrap its content instead, which is what lets the button escape), and
   let the button fill the widget, still capped at 100px so wider tracks keep the
   uniform button size. Reduced side padding stops the 50px gutters forcing an
   intrinsic width larger than the track. Scoped with :has() so only grids that
   actually hold capacity buttons are touched. */
@media (max-width: 1024px) {
    .e-con.e-grid:has(a.elementor-button[id^="capacity-"]) {
        --justify-items: stretch !important;
    }

    .e-con.e-grid > .elementor-widget:has(> a.elementor-button[id^="capacity-"]) {
        min-width: 0 !important;
        justify-self: stretch !important;
    }

    .e-con.e-grid a.elementor-button[id^="capacity-"] {
        width: 100% !important;
        max-width: 100px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* "Select Capacity" headings: centre them on mobile.
   Matched structurally rather than by text, so the Greek "Επιλέξτε Ισχύ" is
   covered by the same rule — and so is any future wording — without hardcoding
   per-element ids that would differ between environments. The pattern is: a
   heading widget whose very next sibling contains the capacity buttons it
   introduces. Checked against every such heading on the products pages: it
   matches all of them with no false positives, whereas looser variants (any
   later sibling, or "a container holding both") also swept up unrelated
   headings like "VRF", "Outdoor" and the product-category titles. */
@media (max-width: 767px) {
    .elementor-widget-heading:has(+ * a.elementor-button[id^="capacity-"]) .elementor-heading-title {
        text-align: center !important;
    }
}