/*
 * responsive.css
 * ------------------------------------------------------------------
 * Site-wide responsive hardening layer for the Renovo theme.
 *
 * Loaded AFTER style.css and custom.css (see header.php), so every
 * rule here safely overrides the base theme without editing the
 * 11,000+ line custom.css directly. It is included on every page
 * because it is enqueued once in header.php, which is shared by all
 * templates (home, about, blog, contact, faq, product, single, etc).
 *
 * Sections:
 *   1. Global overflow / box-model safety net
 *   2. Fluid media (images, video, iframes, embeds)
 *   3. Tables (horizontal scroll instead of page-breaking)
 *   4. Header / hamburger toggle hardening
 *   5. Mobile drawer menu hardening (the reported "close" bug)
 *   6. Extra breakpoints the theme didn't cover (≤430px, ≤380px, ≤360px)
 *   7. Landscape phones
 *   8. Touch target / accessibility minimums
 * ------------------------------------------------------------------
 */

/* ==========================================================
   1. GLOBAL OVERFLOW / BOX-MODEL SAFETY NET
   ========================================================== */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
}

img,
picture,
video,
canvas,
svg,
iframe {
    max-width: 100%;
    height: auto;
}

p, li, h1, h2, h3, h4, h5, h6, span, a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* ==========================================================
   2. FLUID MEDIA
   ========================================================== */
.wp-video,
video {
    width: 100% !important;
    height: auto !important;
}

.responsive-iframe-wrapper,
#iframeContainer {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.responsive-iframe-wrapper iframe,
#iframeContainer iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==========================================================
   3. TABLES
   ========================================================== */
table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ==========================================================
   4. HEADER / HAMBURGER TOGGLE HARDENING
   ========================================================== */

/* The toggle bars are pure white in custom.css and only switch to
   navy once .is-sticky is added on scroll. On any page whose top
   section isn't a dark hero image, white-on-white makes the icon
   invisible. A subtle outline keeps it visible on any background. */
.nav-menu-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    z-index: 1101;
}

.nav-menu-toggle span {
    background-color: var(--pure-white, #fff);
    box-shadow: 0 0 0 1px rgba(10, 31, 53, 0.25);
}

.site-header.is-sticky .nav-menu-toggle span {
    background-color: var(--dark-navy, #0A1F35);
    box-shadow: none;
}

body.menu-open .nav-menu-toggle span {
    background-color: var(--dark-navy, #0A1F35);
    box-shadow: none;
}


/* ==========================================================
   5. MOBILE DRAWER MENU HARDENING (reported close-button bug)
   ========================================================== */

/* Give the drawer/backdrop an explicit inert closed state instead of
   just nudging them off-screen with `right:-100%`. Without this,
   the still-fixed, still-clickable drawer can intercept taps near
   the top-right corner on some mobile browsers (iOS Safari's
   dynamic toolbar shifts the viewport), which is what makes the
   close (X) appear unresponsive. */
.thsn-mobile-menu-drawer {
    width: min(340px, 88vw);
    max-width: 400px;
    visibility: hidden;
    pointer-events: none;
    transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.5s;
    z-index: 2100;
}

.thsn-mobile-menu-drawer.is-open {
    right: 0;
    visibility: visible;
    pointer-events: auto;
}

.drawer-backdrop {
    pointer-events: none;
    z-index: 2050;
}

.drawer-backdrop.is-visible {
    pointer-events: auto;
}

/* The close button: a large, always-tappable, always-visible hit
   area with its own stacking context so nothing in the drawer body
   (sub-menus, long nav labels) can ever sit on top of it. */
.drawer-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--pure-white, #fff);
    flex-wrap: nowrap;
    gap: 12px;
}

.mobile-actions {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.mobile-actions .elesco-text-mobile {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-close {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(10, 31, 53, 0.06);
    z-index: 10;
    pointer-events: auto;
}

.drawer-close:hover,
.drawer-close:focus-visible {
    background-color: rgba(10, 31, 53, 0.12);
    outline: none;
}

.drawer-close i {
    pointer-events: none;
}

.drawer-body {
    -webkit-overflow-scrolling: touch;
    padding-bottom: 40px;
}


/* ==========================================================
   6. EXTRA BREAKPOINTS THE THEME DIDN'T COVER
   ========================================================== */
@media (max-width: 430px) {
    .header-container {
        padding-right: 4px;
    }

    .thsn-right-box {
        gap: 14px;
    }

    .hero-title {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .hero-slider-container {
        padding: 0 6%;
    }

    .btn-quote {
        padding: 10px 18px;
        font-size: 13px;
    }

    .drawer-header {
        padding: 18px 16px;
    }

    .item-link-row {
        padding: 14px 16px;
    }
}

@media (max-width: 380px) {
    .site-header,
    .site-header.is-sticky {
        padding-left: 16px;
        padding-right: 16px;
    }

    .thsn-main-logo,
    .site-header.is-sticky .thsn-sticky-logo {
        width: 88px;
    }

    .header-buttons {
        gap: 10px;
    }
}

@media (max-width: 360px) {
    .hero-title {
        font-size: 24px;
    }

    .elesco-text-mobile {
        font-size: 15px;
    }
}


/* ==========================================================
   7. LANDSCAPE PHONES
   ========================================================== */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .thsn-slider-area,
    .hero-slide {
        min-height: auto;
        padding-top: 90px;
        padding-bottom: 30px;
    }

    .thsn-mobile-menu-drawer {
        overflow-y: auto;
    }

    .drawer-body {
        padding-bottom: 90px;
    }
}


/* ==========================================================
   8. TOUCH TARGET / ACCESSIBILITY MINIMUMS
   ========================================================== */
/* ==========================================================
   9. "SUSTAINABLE TODAY FOR A GREENER TOMORROW" HEADING
   ------------------------------------------------------------
   style.css sets a fixed 65px font AND 230px left/right padding
   on .green-today h4 with no mobile override anywhere in the
   theme. 230px of padding per side is already 460px total --
   more than most phone screens -- so on mobile there's negative
   usable width left for the text, forcing it to wrap one letter
   per line. This is the actual bug behind the vertical text.
   ========================================================== */
.green-today h4 {
    font-size: clamp(20px, 5vw, 65px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: 1.3;
}

.green-today span {
    color: #0B5FAE !important;
}

@media (max-width: 991px) {
    /* font-weight:100 is razor-thin and renders as fuzzy, fringed
       color on small mobile screens. A slightly heavier weight
       fixes legibility without changing the visual design intent. */
    .green-today h4 {
        font-weight: 400 !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }
}

@media (min-width: 1200px) {
    .green-today h4 {
        padding-left: 100px !important;
        padding-right: 100px !important;
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .green-today h4 {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}
   ------------------------------------------------------------
   .hero-content-col / .hero-image-col have no width rules in
   custom.css outside the 991px media query. CSS Grid items default
   to min-width:auto, so the large .ev-scooter-img (max-width:750px)
   forces its whole column to stay wide, squeezing the title text
   column down to almost nothing — that's what makes "Sustainable"
   wrap one letter per line. min-width:0 is the standard fix.

   The two-column desktop layout should stay on ANY desktop/laptop
   width, so this only collapses to one column below 991px — true
   tablet/phone territory, not the hamburger-menu breakpoint (which
   is intentionally much wider and unrelated to this layout).
   ========================================================== */
.flex-hero-wrapper,
.hero-content-col,
.hero-image-col,
.image-wrapper-relative {
    min-width: 0;
}

.ev-scooter-img {
    max-width: 100%;
}

.thsn-slider-area .hero-title {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

@media (max-width: 991px) {
    .flex-hero-wrapper {
        display: block !important;
        text-align: center;
    }

    .hero-content-col,
    .hero-image-col {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Image first, then text, on mobile */
    .hero-image-col {
        order: 1;
    }

    .hero-content-col {
        order: 2;
        margin-top: 30px;
    }

    .specs-container {
        justify-content: center;
    }

    .thsn-slider-area .hero-title {
        font-size: 44px !important;
    }
}

@media (max-width: 576px) {
    .thsn-slider-area .hero-title {
        font-size: 30px !important;
    }
}

@media (max-width: 400px) {
    .thsn-slider-area .hero-title {
        font-size: 26px !important;
    }
}


/* ==========================================================
   8. TOUCH TARGET / ACCESSIBILITY MINIMUMS
   ========================================================== */
@media (max-width: 991px) {
    .item-link-row a,
    .mobile-sub-menu li a,
    .search-btn-mobile,
    .cart-wrapper.dark {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    a, button {
        -webkit-tap-highlight-color: rgba(28, 142, 240, 0.15);
    }
}


/* ==========================================================
   9. DESKTOP NAV vs HAMBURGER BREAKPOINT
   ------------------------------------------------------------
   custom.css switches from the full desktop nav menu to the
   hamburger at 1400px, which is wider than many common laptop
   screens (1366px, 1440px zoomed, etc.) — those users were
   getting the mobile hamburger even though they're clearly on
   a desktop/laptop. This brings that switch down to the
   standard 991px tablet/phone breakpoint instead.
   ========================================================== */
@media (min-width: 992px) {
    .main-navigation {
        display: flex !important;
    }

    .nav-menu-toggle {
        display: none !important;
    }
}


/* ==========================================================
   10. FEATURE LIST — ICON ALWAYS LEFT ON MOBILE
   ------------------------------------------------------------
   custom.css has a mobile rule meant to reset the "left column"
   feature items (which are mirrored icon-on-right for a desktop
   zigzag layout) back to a normal icon-left row. But it targets
   the class ".feature-item" (singular) — the actual markup class
   is ".feature-items" (plural) — so that fix never fires. This
   is the real cause of the icon staying on the right for some
   items on mobile. Targeting the correct class name here.
   ========================================================== */
@media (max-width: 991px) {
    /* .left-feature-col markup order is text, then icon (built for a
       desktop mirror layout) — row-reverse is needed to actually pull
       the icon in front of the text visually. */
    .left-feature-col .feature-items {
        flex-direction: row-reverse !important;
        text-align: left !important;
        justify-content: flex-end !important;
    }

    /* .right-feature-col markup order is already icon, then text —
       plain row keeps the icon on the left as-is. */
    .right-feature-col .feature-items {
        flex-direction: row !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }
}


/* ==========================================================
   11. "EXPLORE MORE" ROADS-CTA SECTION
   ------------------------------------------------------------
   .cta-green-card has a fixed 50px padding on all sides even on
   small phones, eating ~100px of the ~390px screen and forcing
   the paragraph into a very narrow, tall column of text. This
   widens the usable content area on mobile. The button itself
   is restored to its original solid navy pill with no border —
   an earlier attempt at fixing a different (unconfirmed) button
   issue mistakenly added a border to THIS button; that has been
   removed here.
   ========================================================== */
@media (max-width: 767px) {
    .cta-green-card {
        padding: 32px 24px !important;
    }

    .cta-content-wrapper {
        max-width: 100% !important;
    }

    .cta-heading {
        font-size: 24px !important;
    }

    .cta-paragraph {
        font-size: 15px;
    }

    .cta-book-btn {
        width: 100%;
        border: none !important;
        outline: none !important;
        background-color: #0A1F35 !important;
        justify-content: center !important;
        gap: 10px !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .cta-book-btn::before,
    .cta-book-btn::after {
        content: none !important;
    }
}

/* This applies at all sizes, not just mobile — the button is a plain
   <a> tag with no custom focus style defined anywhere in the theme,
   so tapping/clicking it shows the browser's default blue focus
   ring and underline. That's the "border" that kept appearing no
   matter what border/outline value was set specifically on mobile —
   it's applied by the browser itself on :focus, so it needs to be
   overridden for that state directly, with a subtle accessible
   replacement instead of just deleting it outright. */
.cta-book-btn:focus,
.cta-book-btn:focus-visible,
.cta-book-btn:active,
.cta-book-btn:visited {
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(28, 142, 240, 0.35);
}

/* ==========================================================
   12. "BLACK-BIKE" CTA SECTION — WIDTH FIX (real root cause)
   ------------------------------------------------------------
   .title.w-50 is a Bootstrap utility class forcing the whole
   content block (heading, paragraph, button) to 50% width, with
   no mobile override anywhere in the theme. On a phone that
   squeezes everything into half the screen.

   .saving-btn a is a genuine, intentionally-designed outline
   button (2px blue border, transparent background) — that border
   was never a bug. But it's a default inline <a>, so when the
   squeezed container forces "Explore More" to wrap, an inline
   element draws a separate border fragment per line — that's
   what created the doubled/broken-looking box. display:inline-flex
   fixes that regardless of width.
   ========================================================== */
@media (max-width: 991px) {
    .black-bike .title.w-50 {
        width: 100% !important;
        max-width: 92% !important;
    }
}

.saving-btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .main-navigation {
        display: none !important;
    }

    .nav-menu-toggle {
        display: flex !important;
    }
}