/**
 * Enerlon Site - CMS Supplement Stylesheet
 * Adds blog, FAQ, and CMS-rendered section styles
 * while preserving all original RapidWeaver Foundation theme styles.
 */

/* -----------------------------------------------------------------------
   Font & Base
   ----------------------------------------------------------------------- */
body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    color: #333;
    overflow-x: hidden;
}

/* -----------------------------------------------------------------------
   Navigation Pin (sticky header)
   ----------------------------------------------------------------------- */
.pin-nav {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Ensure the panel inside pin-nav is also full width */
.pin-nav .panel.custom {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.pin-nav .panel {
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}

/* Visibility helpers — match stacks.css EXACTLY (pixel breakpoints 440/770/771px).
   stacks.css uses px breakpoints:
     @media (max-width: 440px)                     { .stacks_s_hidden { display:none } }
     @media (max-width: 770px) and (min-width:441px){ .stacks_m_hidden { display:none } }
     @media (min-width: 771px)                     { .stacks_l_hidden { display:none } }
   We replicate them here with !important to override any conflicting rules.
     - desktop nav (#stacks_out_278_11, .stacks_s_hidden): hidden ≤440px, shown ≥441px
     - mobile  nav (#stacks_out_278_18, .stacks_l_hidden+.stacks_m_hidden): shown ≤440px only */
.stacks_s_hidden,
.stacks_m_hidden,
.stacks_l_hidden { display: block !important; }

@media only screen and (max-width: 440px) {
    .stacks_s_hidden { display: none !important; }
}
@media only screen and (max-width: 770px) and (min-width: 441px) {
    .stacks_m_hidden { display: none !important; }
}
@media only screen and (min-width: 771px) {
    .stacks_l_hidden { display: none !important; }
}

/* -----------------------------------------------------------------------
   Sections Pro Layout
   ----------------------------------------------------------------------- */
.s-pro.sections-stack {
    position: relative;
    overflow: hidden;
}

.s-pro .shear-wrapper {
    position: relative;
    width: 100%;
}

.s-pro .shear-inner {
    padding: 3.5rem 0;
}

/* Interior page hero banner (bg_image_overlay) — match live banner height */
.s-pro .shear-wrapper[style*="background-image"] {
    min-height: 300px;
    display: flex;
    align-items: center;
}
.s-pro .shear-wrapper[style*="background-image"] .shear-inner {
    width: 100%;
    padding: 3.5rem 0;
}
@media only screen and (min-width: 48em) {
    .s-pro .shear-wrapper[style*="background-image"] { min-height: 360px; }
}

.s-pro .inner-content.autoPad {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 0.9375rem;
}

/* -----------------------------------------------------------------------
   Hero Slider (Impact)
   ----------------------------------------------------------------------- */
.impact-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.impact-wrapper.proportional-height {
    min-height: 400px;
}

/* Hero slider: height derived from element width via aspect-ratio.
   Using vw-based heights causes a visible jump on iOS Safari (iPad/iPhone) because
   Safari fires a resize event when its toolbar animates in/out during scrolling,
   which causes superslides to recalculate the slider height from the new vw value.
   aspect-ratio ties the height to the element's own width, which does not change
   during toolbar animation, so the slider stays stable. */
.enerlon-hero-wrapper {
    /* 20:11 ratio ≈ 55vw at full width */
    aspect-ratio: 20 / 11 !important;
    height: auto !important;
    min-height: 300px !important;
    max-height: 780px !important;
}
/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1) {
    .enerlon-hero-wrapper {
        height: 55vw !important;
    }
}
/* On small screens (≤440px), taller ratio so the slider fills the viewport better */
@media only screen and (max-width: 440px) {
    .enerlon-hero-wrapper {
        aspect-ratio: 10 / 7 !important;
        height: auto !important;
        min-height: 220px !important;
        max-height: 400px !important;
    }
    @supports not (aspect-ratio: 1) {
        .enerlon-hero-wrapper {
            height: 70vw !important;
        }
    }
}

.jw-impact.slides {
    position: relative;
    width: 100%;
}

.slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.impact-slide {
    position: relative;
    width: 100%;
    display: none;
}

.impact-slide:first-child {
    display: block;
}

.impact-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Remove grey background bleed during slide transitions */
#stacks_in_5 .jw-impact.slides { background: transparent !important; }
#stacks_in_5 .slides-container { background: transparent !important; }
#stacks_in_5 .impact-wrapper { background: transparent !important; }
#stacks_in_5 .impact-slide { background: transparent !important; }

.impact-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.impact-container.v-center {
    align-items: center;
}

.slide-content {
    text-align: center;
    padding: 4rem 1rem;
}

.slides-navigation a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(7,64,128,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 10;
}

.slides-navigation a.next { right: 1rem; }
.slides-navigation a.prev { left: 1rem; }

.slides-navigation a.next::after {
    content: '›';
    color: white;
    font-size: 1.5rem;
    line-height: 1;
}

.slides-navigation a.prev::after {
    content: '‹';
    color: white;
    font-size: 1.5rem;
    line-height: 1;
}

/* -----------------------------------------------------------------------
   Section headings (clean, matches live enerlon.com default Foundation style)
   ----------------------------------------------------------------------- */
.section-heading {
    color: #333333;
    font-weight: 400;
    text-shadow: none;
    -webkit-text-stroke: 0;
    margin-bottom: 1rem;
}
.section-heading-light {
    color: #ffffff;
    font-weight: 400;
    text-shadow: none;
    -webkit-text-stroke: 0;
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------
   Typography
   ----------------------------------------------------------------------- */
.font-style-1 {
    font-size: 1.8rem;
    color: rgba(255,255,255,1.00);
    text-shadow: 0 0 0.09em rgba(0,0,0,1.00);
}

@media only screen and (min-width: 48em) {
    .font-style-1 { font-size: 2.5rem; }
}

@media only screen and (min-width: 62.5em) {
    .font-style-1 { font-size: 3.5rem; }
}

.font-style-2 {
    font-size: 1.2rem;
    color: rgba(255,255,255,1.00);
    text-shadow: 0 0 0.09em rgba(0,0,0,1.00);
}

@media only screen and (min-width: 48em) {
    .font-style-2 { font-size: 2.1rem; }
}

@media only screen and (min-width: 62.5em) {
    .font-style-2 { font-size: 3.0rem; }
}

/* -----------------------------------------------------------------------
   FAQ section — reduce top padding so there is no large gap between the
   preceding intro text_content section and the accordion itself.
   The global .s-pro .shear-inner has padding: 3.5rem 0 which creates
   7rem of combined vertical space when two sections stack. We reduce
   the FAQ section's top padding to close that gap.
   ----------------------------------------------------------------------- */
.enerlon-faq-wrap .shear-inner {
    padding-top: 1rem;
}

/* -----------------------------------------------------------------------
   FAQ Accordion — matches original Enerlon RapidWeaver Foundation style
   Open item: blue (#3a8fd4) header, white text, chevron pointing down
   Closed item: light gray (#f5f5f5) header, dark text, chevron pointing right
   Answer area: white background, 1.5rem padding, 1.7 line-height
   ----------------------------------------------------------------------- */

.enerlon-faq-wrap .enerlon-accordion {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}

/* Question header row */
.enerlon-accordion .enerlon-acc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.1rem;
    margin-bottom: 0;
    margin-top: 0.4rem;
    background-color: #f0f0f0;
    border: 1px solid #dde0e4;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease;
}

.enerlon-accordion .enerlon-acc-header:first-child {
    margin-top: 0;
}

/* Closed state: gray background, dark text */
.enerlon-accordion .enerlon-acc-header:not(.is-open):hover {
    background-color: #e4e8ed;
}

/* Open/active state: Enerlon blue, white text */
.enerlon-accordion .enerlon-acc-header.is-open {
    background-color: #3a8fd4;
    border-color: #3a8fd4;
    border-radius: 3px 3px 0 0;
}

/* Question text */
.enerlon-accordion .enerlon-acc-question {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    flex: 1;
    padding-right: 1rem;
}

.enerlon-accordion .enerlon-acc-header.is-open .enerlon-acc-question {
    color: #ffffff;
    font-weight: 600;
}

/* Chevron icon — CSS-drawn, no icon font needed */
.enerlon-accordion .enerlon-acc-chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #888;
    border-radius: 50%;
    position: relative;
    transition: transform 0.2s ease, border-color 0.15s ease;
}
.enerlon-accordion .enerlon-acc-chevron::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    transform: translate(-60%, -70%) rotate(45deg);
    transition: transform 0.2s ease, border-color 0.15s ease;
}

/* Open state: chevron points down, white */
.enerlon-accordion .enerlon-acc-header.is-open .enerlon-acc-chevron {
    border-color: rgba(255,255,255,0.8);
    transform: none;
}
.enerlon-accordion .enerlon-acc-header.is-open .enerlon-acc-chevron::after {
    border-color: rgba(255,255,255,0.9);
    transform: translate(-50%, -70%) rotate(225deg);
}

/* Answer body */
.enerlon-accordion .enerlon-acc-body {
    margin: 0;
    padding: 0;
    border: 1px solid #dde0e4;
    border-top: none;
    border-radius: 0 0 3px 3px;
    background: #ffffff;
    margin-bottom: 0.4rem;
}

.enerlon-accordion .enerlon-acc-content {
    padding: 1.5rem 1.5rem 1.25rem;
    line-height: 1.75;
    color: #333;
    font-size: 0.95rem;
}

.enerlon-accordion .enerlon-acc-content p:last-child {
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------
   Blog Cards
   ----------------------------------------------------------------------- */
.blog-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
    transform: translateY(-2px);
}

/* -----------------------------------------------------------------------
   Blog Article Content
   ----------------------------------------------------------------------- */
.blog-article-content h2 {
    font-size: 1.5rem;
    color: #074080;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.blog-article-content h3 {
    font-size: 1.2rem;
    color: #074080;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.blog-article-content p {
    margin-bottom: 1rem;
}

.blog-article-content ul,
.blog-article-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.blog-article-content li {
    margin-bottom: 0.35rem;
}

.blog-article-content blockquote {
    border-left: 4px solid #074080;
    padding-left: 1rem;
    color: #555;
    font-style: italic;
    margin: 1.5rem 0;
}

.blog-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
}

/* -----------------------------------------------------------------------
   Embed Wrapper
   ----------------------------------------------------------------------- */
.embed-wrapper {
    width: 100%;
    overflow: hidden;
}

.embed-wrapper iframe {
    max-width: 100%;
}

/* -----------------------------------------------------------------------
   Flex Video (YouTube)
   ----------------------------------------------------------------------- */
.flex-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.flex-video iframe,
.flex-video video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

/* -----------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */
.button {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    background-color: #074080;
    color: white;
    border: 2px solid transparent;
}

.button:hover {
    opacity: 0.88;
    color: white;
}

.button.secondary {
    background-color: transparent;
    color: #074080;
    border-color: #074080;
}

.button.secondary:hover {
    background-color: #074080;
    color: white;
}

.button.large {
    padding: 0.85rem 2rem;
    font-size: 1rem;
}

.button.small {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
}

.button.radius {
    border-radius: 4px;
}

/* -----------------------------------------------------------------------
   CTA Outline Button (white border, transparent bg — matches live site)
   ----------------------------------------------------------------------- */
.button.cta-outline-btn {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 4px;
    padding: 0.7rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.button.cta-outline-btn:hover {
    background-color: rgba(255,255,255,0.15);
    color: #ffffff;
    opacity: 1;
}

/* -----------------------------------------------------------------------
   Navigation: 80px bar with 16px top/bottom whitespace around the logo
   Logo is constrained to 48px height (16px above + 16px below = 80px total)
   Nav links are vertically centered within the 80px bar.
   Sticky state preserves the same height.
   ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   Navigation bar — full browser width, logo left edge, nav right edge

   APPROACH: Only override width/max-width at the wrapper level.
   DO NOT apply flexbox to .top-bar, .top-bar-section, or their children.
   Foundation's dropdown positioning depends on the original float layout
   being intact — flexbox on those elements breaks dropdown direction.

   The actual HTML wrapper chain (from header.php):
     .pin-it.pin-nav
       .panel.custom
         #stacks_out_278_11
           #stacks_in_278_11
             .top-bar-wrapper  (no contain-to-grid on desktop)
               nav.top-bar

   Width constraints to beat:
     1. .row { max-width:1000px !important }  (stacks_site.css)
     2. .panel.custom Foundation default padding/max-width

   MOBILE NOTE: All 80px height rules are scoped to ≥441px (desktop).
   On mobile (≤440px), Foundation's natural 45px height handles layout, and the
   toggle-topbar button is shown so the hamburger menu works correctly.
   ----------------------------------------------------------------------- */

/* Step 1: Remove width constraints from every wrapper above .top-bar
   (applies ALL screen sizes — wrappers must be full-width everywhere) */
#stacks_out_278_11,
#stacks_in_278_11,
#stacks_in_278_11 .top-bar-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* Step 2–7: Desktop-only (≥441px) — 80px bar height, hidden toggle */
@media only screen and (min-width: 441px) {
    /* Step 2: Force the top-bar itself to full width and 80px height. */
    #stacks_in_278_11 .top-bar {
        width: 100% !important;
        max-width: 100% !important;
        height: 80px !important;
        min-height: 80px !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #stacks_in_278_11 .top-bar.expanded {
        height: auto !important;
        min-height: 80px !important;
    }

    /* Step 3: Logo area — left-floated, 80px tall, 20px side padding */
    #stacks_in_278_11 .top-bar .title-area {
        height: 80px !important;
        padding: 0 20px !important;
        margin: 0 !important;
        float: left !important;
        box-sizing: border-box !important;
    }
    #stacks_in_278_11 .top-bar .name {
        height: 80px !important;
        line-height: 80px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #stacks_in_278_11 .top-bar .name a {
        display: inline-flex !important;
        align-items: center !important;
        height: 80px !important;
        padding: 16px 0 !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
    }

    /* Step 4: Nav links — right-floated, 80px line-height, 20px right padding. */
    #stacks_in_278_11 .top-bar .top-bar-section {
        float: right !important;
        padding-right: 20px !important;
        height: 80px !important;
    }
    #stacks_in_278_11 .top-bar-section ul li > a:not(.button) {
        line-height: 80px !important;
        height: 80px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    #stacks_in_278_11 .top-bar-section li:not(.has-form) a:not(.button) {
        line-height: 80px !important;
        height: 80px !important;
    }

    /* Step 5: Hide mobile toggle on desktop */
    #stacks_in_278_11 .top-bar .toggle-topbar {
        display: none !important;
    }

    /* Step 6: Sticky/fixed state — keep full width, no centering offset */
    #stacks_in_278_11 .top-bar-wrapper.fixed {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        height: 80px !important;
        box-sizing: border-box !important;
    }

    /* Step 7: Body padding when nav is fixed */
    .f-topbar-fixed { padding-top: 80px !important; }
}

/* -----------------------------------------------------------------------
   Hide .back button on desktop (RWFlexNav injects these for mobile only)
   ----------------------------------------------------------------------- */
@media only screen and (min-width: 441px) {
    #stacks_in_278_11 .top-bar-section li.back,
    #stacks_in_278_11 .top-bar-section .back {
        display: none !important;
    }
    #stacks_in_278_11 ul.dropdown .parent-link.show-for-small {
        display: none !important;
    }
}

/* -----------------------------------------------------------------------
   Service Feature Cards (.panel.custom)
   Equal height cards with button pinned to bottom; tagline on its own line.
   ----------------------------------------------------------------------- */

/* Make the row use equal-height columns */
.s-pro .row.service-cards-row,
.s-pro .shear-inner .row:has(.panel.custom) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Each column stretches to fill row height */
.s-pro .shear-inner .row .columns:has(.panel.custom) {
    display: flex;
    flex-direction: column;
}

/* The card itself is a flex column so the button can be pushed to the bottom */
.panel.custom {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box;
}

/* The description paragraph grows to fill available space */
.panel.custom > p {
    flex: 1 1 auto;
    margin-bottom: 1rem;
}

/* Bold tagline inside <p> renders as a block so body text starts on the next line */
.panel.custom > p > strong:first-child {
    display: block;
    margin-bottom: 0.3rem;
}

/* Button stays at the bottom */
.panel.custom > a.button {
    margin-top: auto;
    align-self: center;
}

/* -----------------------------------------------------------------------
   Mobile Nav (#stacks_out_278_18) — logo left, MENU toggle right

   Foundation's top-bar layout model (must be preserved for JS to work):
     - .title-area is left-floated, natural width
     - .toggle-topbar is position:absolute; right:0; top:50%; margin-top:-16px
     - .top-bar-section is moved left:-100% (collapsed) / left:0% (expanded) by JS

   The overlap was caused by stacks_site.css margin on #stacks_in_278_18
   (margin:16px 0) making the wrapper narrower than the .top-bar inside it,
   so the toggle (right:0 of .top-bar) overlapped the logo.
   Fix: remove that margin and ensure wrappers are full-width.
   ----------------------------------------------------------------------- */
/* Nav wrapper needs position:relative + z-index so the absolute-positioned
   dropdown section overlays the page content below the bar.
   CRITICAL: .stacks_out and .stacks_in both have overflow:hidden by default
   (from consolidated.css). This clips the dropdown section when it tries to
   extend below the bar. Override to overflow:visible on all parent containers
   so the dropdown can appear below the bar. The section is hidden via
   display:none (not overflow clipping), so this is safe. */
#stacks_out_278_18 {
    position: relative !important;
    z-index: 100 !important;
    overflow: visible !important;
}

#stacks_in_278_18 {
    overflow: visible !important;
}

#stacks_out_278_18,
#stacks_in_278_18,
#stacks_in_278_18 .top-bar-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Foundation base CSS sets .top-bar { overflow: hidden } with no media query.
   stacks_site.css only overrides this to overflow:visible inside
   @media (min-width: 9999px) — which never applies on mobile.
   We must override it here so the dropdown section can drop below the bar. */
#stacks_in_278_18 .top-bar {
    overflow: visible !important;
}
#stacks_in_278_18 .top-bar-wrapper {
    overflow: visible !important;
}

/* Remove the 16px top/bottom margin stacks_site.css adds to #stacks_in_278_18 */
#stacks_in_278_18 {
    margin: 0 !important;
}

/* Override the centered/full-width hiding of .name — show logo on mobile */
#stacks_in_278_18 .top-bar .title-area .name {
    display: block !important;
}

/* title-area: left-floated at natural width for the logo.
   MUST be position:static so the toggle-topbar (position:absolute; right:0)
   anchors to .top-bar (position:relative) rather than to .title-area.
   If .title-area is position:relative, right:0 lands at the logo's right edge
   instead of the bar's right edge. */
#stacks_in_278_18 .top-bar .title-area {
    float: left !important;
    position: static !important;
    height: 45px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Logo: left-aligned, constrained to 45px bar height */
#stacks_in_278_18 .top-bar .name {
    float: left !important;
    height: 45px !important;
    padding: 0 15px !important;
    display: block !important;
    overflow: hidden !important;
}
#stacks_in_278_18 .top-bar .name a {
    height: 45px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    overflow: hidden !important;
}
#stacks_in_278_18 .top-bar .name img {
    height: 35px !important;
    width: auto !important;
    max-height: 35px !important;
    display: block !important;
}

/* Keep the .top-bar at 45px height (collapsed state).
   NO !important here — Foundation JS sets height via inline style when a
   submenu is open (i.css('height', submenuHeight+barHeight)), and inline
   styles beat regular CSS rules. With !important the JS height would be
   blocked and submenus would not be reachable. */
#stacks_in_278_18 .top-bar {
    height: 45px;
    min-height: 45px;
}

/* Keep MENU toggle at right edge always — same position collapsed and expanded.
   z-index:200 ensures it stays above the .top-bar-section (z-index:99) so
   tapping it always registers even when the nav is open.
   top:0 + margin-top:5px keeps it at the top of the 45px bar. */
#stacks_in_278_18 .top-bar .toggle-topbar,
#stacks_in_278_18 .top-bar.expanded .toggle-topbar {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    margin-top: 5px !important;
    height: 34px !important;
    z-index: 200 !important;
}

/* Mobile nav dropdowns: hide the parent-link (e.g. "SERVICES" repeated as a
   tappable link at the top of the sub-menu) and show only the Back link.
   Foundation injects both .title.back and .parent-link into each dropdown;
   .parent-link has class hide-for-medium-up but that uses Foundation's 40.063em
   breakpoint which doesn't match our 440px breakpoint. */
#stacks_in_278_18 .top-bar-section .dropdown li.parent-link {
    display: none !important;
}

/* Hide the .top-bar-section until the hamburger is tapped.
   When expanded, position:absolute + top:45px takes the section out of normal
   flow so the .title-area (logo) stays visible at the top of the bar.
   Foundation uses left% for slide animation so overflow:visible is needed. */
#stacks_in_278_18 .top-bar-section {
    display: none !important;
}
/* When expanded, the section drops below the bar via position:absolute.
   DO NOT set left here — Foundation JS controls left% for slide animation
   (left:0% = main menu, left:-100% = submenu sliding in).
   The section starts at whatever left% JS set; we just make it visible. */
#stacks_in_278_18 .top-bar.expanded .top-bar-section {
    display: block !important;
    position: absolute !important;
    top: 45px !important;
    width: 100% !important;
    overflow: visible !important;
    z-index: 99 !important;
    background: #fff !important;
}

/* Toggle <a> link: padding-right:2.5rem is required — the hamburger icon
   (span::after box-shadow) is drawn at right:0.9375rem inside the <a> link. */
#stacks_in_278_18 .top-bar .toggle-topbar a {
    height: 34px !important;
    line-height: 33px !important;
    padding: 0 2.5rem 0 0.9375rem !important;
    display: block !important;
}

/* -----------------------------------------------------------------------
   Responsive Utilities
   ----------------------------------------------------------------------- */
@media only screen and (max-width: 440px) {
    .small-only-text-center {
        text-align: center !important;
    }

    .s-pro .shear-inner {
        padding: 2.5rem 0;
    }

    .font-style-1 {
        font-size: 1.6rem;
    }

    /* ── Mobile nav: Foundation defaults handle the 45px bar height.
       The 80px desktop override is scoped to ≥40.063em above, so no
       overrides are needed here — the toggle-topbar shows automatically
       because Foundation's base CSS sets it to position:absolute; right:0.
       We only need to ensure body padding matches the natural bar height. */
    .f-topbar-fixed { padding-top: 45px !important; }

    /* ── Two-col images: stack vertically on mobile ── */
    .enerlon-two-images .columns {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 1rem;
    }
    .enerlon-two-images .columns:last-child {
        margin-bottom: 0;
    }
}

/* ── Slider overlay: reduce logo and heading size on mobile ─────────── */
@media only screen and (max-width: 440px) {
    /* Reduce overlay logo by ~50% on mobile (inline style has max-width:320px) */
    #stacks_in_5 .slide-content img {
        max-width: 160px !important;
        width: 50vw !important;
        margin-bottom: 0.5rem !important;
    }
    /* Reduce heading font size on mobile to prevent orphan words.
       The heading text is long (~60 chars); at 0.95rem on a 375px screen it
       still wraps to 3 lines. Drop to 0.82rem so it fits in 2 lines. */
    #stacks_in_5 .slide-content h1.font-style-2 {
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Tighten slide-content padding on mobile */
    #stacks_in_5 .slide-content {
        padding: 0.75rem 0.75rem !important;
    }
}

/* ── Image + Text vertical centering (desktop only) ──────────────────── */
@media only screen and (min-width: 441px) {
    .enerlon-image-text-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .enerlon-image-text-row .enerlon-image-col,
    .enerlon-image-text-row .enerlon-text-col {
        float: none; /* override Foundation float so flex takes over */
    }
    .enerlon-image-text-row .enerlon-image-col img {
        display: block;
        width: 100%;
        height: auto;
    }
}