/**
 * RESPONSIVE FINAL OVERRIDES
 * ---------------------------------------------------------------------------
 * Purpose: fix concrete layout breakage on Mobile / Tablet found during a
 * cross-breakpoint audit, without editing any existing template, view, or
 * business logic.
 *
 * This file must be the LAST stylesheet loaded on the page. Several existing
 * stylesheets/inline <style> blocks use very high-specificity selectors such
 * as `body .some-class` or `.parent .child` combined with !important, which
 * otherwise defeats their own (lower-specificity) mobile media queries. The
 * rules below intentionally match or exceed that specificity, scoped inside
 * proper breakpoints, and rely on being the last same-specificity declaration
 * in the document to win the cascade.
 *
 * Breakpoints used (matching the convention already used across the site):
 *   Mobile        : max-width 767px
 *   Tablet        : 768px - 1023px
 *   Desktop       : 1024px - 1399px  (no fixes required here - audited OK)
 *   Large Desktop : 1400px and up    (no fixes required here - audited OK)
 */

/* =============================================================
   ALL BREAKPOINTS - nav dropdown / mobile menu stacking fix
   =============================================================
   On every page except the homepage, header.php wraps the header (and the
   mobile nav/backdrop) in a `.common-page-section` div, and that div is
   itself given `z-index: 1 !important; position: relative` by an existing
   rule in header.php. That traps the header's own very high z-index values
   inside a low-priority LOCAL stacking context: `.common-page-section` is
   still just a z-index:1 box competing against sibling page sections (e.g.
   the "Our Services" grid) at the same z-index, and later siblings win
   equal-z-index ties by DOM order. In practice this means any part of a
   desktop nav dropdown, or the mobile nav, that visually extends past the
   header's own height gets painted over by whichever page section sits
   below it - the dropdown looks "cut into" by the page content underneath.
   Raising `.common-page-section` itself above every other top-level
   section fixes this at the source, for every page that has it and for
   both the desktop submenu and the mobile nav it also wraps. A separate
   script (footer.php's "FORCE HEADER ALWAYS ON TOP") periodically resets
   any element's z-index back to 1 via inline style if it detects one over
   100, but that's a plain (non-!important) inline assignment, so this
   !important stylesheet rule keeps winning regardless. */
html body div.common-page-section[class] {
    z-index: 999999999 !important;
    position: relative !important;
}

/* Testimonial quote icon - a blanket ".slick-slide img { width: 100% }"
   rule (meant for the actual gallery/product photos that also live inside
   Slick carousels) was also stretching this small 25x25 decorative quote
   mark out to the full width of its slide (hundreds of pixels, and
   squished flat since only width was forced, not height). Pin it back to
   a small fixed size regardless of the slide it happens to sit in. */
.testimonial-right-top-content img,
.testimonial-quote {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    object-fit: contain !important;
}

/* The testimonial customer photo was outright hidden below 991px
   (media-query.css: ".testimonial-left-container img { display: none; }"),
   apparently as a band-aid for the fixed-width overflow that
   responsive-final.js's fixTestimonialBlock() now actually fixes. Now that
   the container is sized correctly at every breakpoint, the photo can be
   shown again instead of hidden. */
@media screen and (max-width: 1023px) {
    .testimonial-left-container img {
        display: block !important;
    }
}

/* Mobile nav header logo - media-query.css has a blanket
   "img, video { height: auto !important }" at <=540px. That rule's
   selector is just the bare element type, so it has almost no
   specificity, but !important still lets it beat the logo's inline
   height:60px (inline non-important always loses to ANY !important
   stylesheet rule, regardless of specificity). With no width constraint
   left standing, the logo renders at its full natural size (~240px),
   which then squeezes the close (X) button in the same flex row down to
   a sliver only a few pixels wide - it looks like the button vanished. */
.mobile-nav-header img {
    height: 60px !important;
    width: auto !important;
    max-width: 120px !important;
    flex-shrink: 0 !important;
}
.mobile-nav-header button {
    flex-shrink: 0 !important;
}
.mobile-nav-header button svg {
    width: 24px !important;
    height: 24px !important;
}

/* style.css caps ".testimonial-container { max-height: 450px !important; }"
   with vertical auto-scroll unconditionally, sized for the desktop
   side-by-side layout. Once the photo/text stack vertically on
   mobile/tablet (see fixTestimonialBlock() in responsive-final.js) that
   same 450px is nowhere near enough, so the customer's name/quote get cut
   off into an easy-to-miss inner scroll area instead of just flowing on
   the page. Let the block size to its actual content on these breakpoints. */
@media screen and (max-width: 1023px) {
    .testimonial-container {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* Desktop nav dropdown - category names were truncated with an ellipsis
   (e.g. "Agricultural & Processed Food Pr...") because the submenu is
   capped at 260px wide with white-space: nowrap. Widen it and let long
   names wrap onto a second line instead of cutting them off. */
.desktop-nav .submenu {
    min-width: 220px !important;
    max-width: 320px !important;
}
.desktop-nav .submenu li a {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    line-height: 1.35 !important;
}

/* =============================================================
   MOBILE (max-width: 767px)
   ============================================================= */
@media screen and (max-width: 767px) {

    /* "Who We Are" - 3 feature cards were stuck in a 3-column grid on
       mobile (text wrapped to 1-2 characters per line) because an
       unconditional rule elsewhere outranks the existing mobile rule. */
    .clean-energy-right-container,
    div.clean-energy-right-container,
    body .clean-energy-right-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* "Who We Are" circular badge image was fixed at 400x400px and
       overflowed the viewport horizontally. Scale it down to fit. */
    .clean-energy-star-container,
    div.clean-energy-star-container,
    body .clean-energy-star-container {
        width: min(280px, 80vw) !important;
        height: min(280px, 80vw) !important;
        margin: 0 auto !important;
    }
    .clean-energy-star-container img,
    div.clean-energy-star-container img,
    body .clean-energy-star-container img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /* Image + text blocks that reuse the "why-choose-us" layout (About
       section, product detail pages, etc.) are locked to a fixed 550px
       width/min-width elsewhere, which is missed by the mobile fix on
       pages that don't carry an inline style override. This left a large
       blank gap and horizontal overflow on the product detail page. */
    .why-choose-us-container .why-choose-us-left-container,
    body .why-choose-us-left-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        flex: 1 1 100% !important;
    }
    .why-choose-us-container .why-choose-us-left-container img,
    body .why-choose-us-left-container img {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Category / product listing grids (Products page and product listing
       within a subcategory) kept an 80-89px desktop row-gap even after
       collapsing to a single column, leaving huge blank gaps between
       each item. */
    .service-solutions-grid-container {
        gap: 24px !important;
    }
}

/* =============================================================
   TABLET (768px - 1023px)
   ============================================================= */
@media screen and (min-width: 768px) and (max-width: 1023px) {

    /* Same fixed 550px image block issue as mobile, but tablet has no
       existing mitigation at all (the mobile-only JS fix only runs below
       768px), so the image column overflows the two-column layout. */
    .why-choose-us-container .why-choose-us-left-container,
    body .why-choose-us-left-container {
        width: 45% !important;
        min-width: 0 !important;
        max-width: 45% !important;
        flex: 0 0 45% !important;
        height: auto !important;
    }
    .why-choose-us-container .why-choose-us-left-container img,
    body .why-choose-us-left-container img {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Category / product listing grids: reduce the desktop row-gap to fit
       the 2-column tablet layout. */
    .service-solutions-grid-container {
        gap: 40px 24px !important;
    }
}