/*
 * Mobile Fixes for Tony Ramos Law Static Site
 * Fixes: 1080px hardcoded containers, flex layout stacking,
 *        off-screen sidebar positioning, hamburger menu visibility
 * Breakpoints: 1024px (tablet), 767px (mobile)
 */

/* ==========================================================================
   0pre. Full-Width Content Section Override (ALL screen sizes)
   Thrive layout 8961 sets .content-section width to calc(71.49% - 80px),
   leaving a sidebar gap. Pages with content-full-width have no sidebar,
   so the content section must expand to fill the container.
   Without this, the contact page (and any other full-width page on this
   layout) appears off-center with dead space on one side.
   ========================================================================== */

.thrive-layout-8961 .content-section.content-full-width {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================================================
   0. Full-Width Page Sections (full-width pages ONLY)
   Thrive page sections (.thrv-page-section) need to span the full viewport.
   In WordPress, Thrive's theme JS handles this dynamically. On the static
   site, we need CSS to break them out of the content container.
   IMPORTANT: Only apply on pages with content-full-width class.
   Sidebar pages (blog, about, practice areas) must NOT get this rule.
   ========================================================================== */

.content-full-width .tcb-post-content .thrv-page-section {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

/* Override Thrive's tcb-window-width inline styles.
   Thrive JS dynamically sets width/left on these sections at runtime.
   On the static site that JS isn't running, so the inline values are
   frozen at whatever the exporter's browser width was (e.g. 2243px).
   !important is needed to beat inline styles. */
/* Specificity (0,2,1) via the div element selector so we beat Thrive symbol
   embedded <style> rules like .thrv_symbol_8342 [data-css="..."]{ margin-left: -3px }
   which are also (0,2,0) + !important but win by source order without this bump. */
div.thrv-page-section.tcb-window-width {
  width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;
  position: relative;
}

/* Constrain inner content within full-width sections.
   Without this, text spans the entire viewport on pages like /resources/.
   The outer section gets full-width backgrounds, but .tve-page-section-in
   centers the actual content at the theme's layout width.

   Split into two rules:
   - Centering + padding: normal specificity (always applies)
   - max-width: zero specificity via :where(), so Thrive's section-specific
     [data-css] rules (e.g. max-width:1080px on About Our Firm) always win.
     Only takes effect as a fallback on sections without their own max-width. */
.content-full-width .tcb-post-content .thrv-page-section .tve-page-section-in {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
:where(.content-full-width .tcb-post-content .thrv-page-section .tve-page-section-in) {
  max-width: var(--layout-content-width, 1200px);
}

/* On mobile, content-section is already 100% width so the breakout technique
   (left:50% + margin-left:-50vw) is unnecessary and causes left-shift when
   parent containers have padding. Disable breakout on mobile. */
@media (max-width: 767px) {
  .content-full-width .tcb-post-content .thrv-page-section {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
  }
  div.thrv-page-section.tcb-window-width {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
  }
  .content-full-width .tcb-post-content .thrv-page-section .tve-page-section-in {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   0b. Hero Content Box Padding (all screen sizes)
   Thrive content boxes inside page sections have 0px horizontal padding
   on desktop, causing text to slam against the blue box edges.
   The tablet breakpoint adds 20px, but desktop has none.
   ========================================================================== */

.thrv-page-section .thrv-content-box .tve-cb {
  padding-left: 30px !important;
  padding-right: 30px !important;
  box-sizing: border-box !important;
}

/* Hero content box: tighter left/right, more top/bottom breathing room */
#hero [data-css="tve-u-1961c72ad97"] {
  max-width: 700px !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* Hero headline: sized to fill the tighter box without awkward wrapping */
#hero .tcb-global-text-krnq75oz {
  font-size: 47px !important;
  line-height: 53px !important;
}

/* Hero sub-subheadline (white text): smaller so it breathes in the box */
#hero [data-css="tve-u-17aee22d118"] {
  font-size: 22px !important;
  line-height: 30px !important;
}

/* ==========================================================================
   1. Container Width Overrides
   Force layout variables to 100% on smaller screens so content
   does not overflow the viewport.
   ========================================================================== */

@media (max-width: 1024px) {
  #wrapper {
    --layout-content-width: 100% !important;
    --layout-background-width: 100% !important;
    --header-content-width: 100% !important;
    --header-background-width: 100% !important;
    --footer-content-width: 100% !important;
    --footer-background-width: 100% !important;
    --top-content-width: 100% !important;
    --top-background-width: 100% !important;
    --bottom-content-width: 100% !important;
    --bottom-background-width: 100% !important;
  }

  div.main-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .main-content-background {
    width: 100% !important;
  }

  .theme-section .section-content,
  .theme-section .section-background {
    width: 100% !important;
    max-width: 100% !important;
  }

  .theme-section.top-section .section-content,
  .theme-section.top-section .section-background,
  .theme-section.bottom-section .section-content,
  .theme-section.bottom-section .section-background {
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.tve_lp):not(.single-tcb_symbol) .thrv_header .symbol-section-out,
  body:not(.tve_lp):not(.single-tcb_symbol) .thrv_header .symbol-section-in,
  body:not(.tve_lp):not(.single-tcb_symbol) .thrv_footer .symbol-section-out,
  body:not(.tve_lp):not(.single-tcb_symbol) .thrv_footer .symbol-section-in {
    width: 100% !important;
    max-width: 100% !important;
  }

  .content-section {
    width: 100% !important;
  }

  .content-section.content-full-width {
    width: 100% !important;
  }
}

/* ==========================================================================
   2. Flex Row Stacking on Mobile
   Thrive uses .tcb-flex-row for multi-column layouts. Stack them
   vertically on small screens.
   ========================================================================== */

@media (max-width: 767px) {
  .tcb-flex-row:not(.tcb-mobile-no-wrap) {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  .tcb-flex-row:not(.tcb-mobile-no-wrap) > .tcb-flex-col {
    flex-basis: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tcb-flex-row .tcb-col {
    max-width: 100% !important;
  }
}

@media (max-width: 1023px) {
  .tcb-flex-row:not(.tcb-desktop-no-wrap):not(.tcb-mobile-no-wrap) > .tcb-flex-col {
    min-width: 0 !important;
  }
}

/* ==========================================================================
   2b. Practice Area Sidebar Stacking Fix
   Practice area pages use tcb-mobile-no-wrap on their 2-column layout
   (main content + 280px sidebar form). On tablet/mobile, the 280px sidebar
   leaves no room for content, squishing the form inputs.
   Force stacking for narrow sidebar layouts on mobile.
   ========================================================================== */

@media (max-width: 1023px) {
  /* Reduce sidebar column padding on tablets */
  .thrv-columns[style*="--tcb-col-el-width: 280"] .tcb-flex-row > .tcb-flex-col {
    padding-left: 8px !important;
  }
}

@media (max-width: 767px) {
  /* Stack sidebar layouts on mobile even if tcb-mobile-no-wrap is set */
  .thrv-columns[style*="--tcb-col-el-width: 280"] .tcb-flex-row.tcb-mobile-no-wrap {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  .thrv-columns[style*="--tcb-col-el-width: 280"] .tcb-flex-row.tcb-mobile-no-wrap > .tcb-flex-col {
    flex-basis: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
  }
}

/* ==========================================================================
   3. Hamburger Menu (tve-m-trigger) Fix
   The Thrive JS that toggles .tve-m-expanded on the menu wrapper was lost.
   CSS below ensures the trigger is visible on mobile and the expanded
   state is styled correctly. JS handles the toggle.
   ========================================================================== */

/* Make the hamburger trigger visible at the mobile breakpoint */
@media (max-width: 767px) {
  .thrv_widget_menu[data-tve-switch-icon*="mobile"] .tve-m-trigger {
    display: block !important;
    cursor: pointer;
  }

  /* Hide the horizontal menu list when not expanded -- positioned off-screen
     instead of display:none so CSS transitions (slide) can animate in. */
  .thrv_widget_menu[data-tve-switch-icon*="mobile"] .tve_w_menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.3s ease, visibility 0s 0.3s !important;
    flex-direction: column !important;
    background-color: #24447B !important;
    padding-top: 60px !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
  }

  /* Show the menu list when expanded -- slide in from left */
  .thrv_widget_menu[data-tve-switch-icon*="mobile"] .tve_w_menu.tve-m-expanded {
    display: flex !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 0.3s ease, visibility 0s 0s !important;
  }

  /* Fullscreen mode: fill entire viewport */
  .thrv_widget_menu.tve-mobile-side-fullscreen .tve_w_menu {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Non-fullscreen (side panel): 80vw capped */
  .thrv_widget_menu:not(.tve-mobile-side-fullscreen) .tve_w_menu {
    width: 80vw !important;
    max-width: 360px !important;
  }

  /* Stack menu items vertically when expanded */
  .thrv_widget_menu[data-tve-switch-icon*="mobile"] .tve_w_menu.tve-m-expanded > li {
    width: 100% !important;
    display: block !important;
  }

  .thrv_widget_menu[data-tve-switch-icon*="mobile"] .tve_w_menu.tve-m-expanded > li > a {
    padding: 12px 20px !important;
    display: block !important;
  }
}

/* Also handle tablet switch if present */
@media (max-width: 1023px) {
  .thrv_widget_menu[data-tve-switch-icon*="tablet"] .tve-m-trigger {
    display: block !important;
    cursor: pointer;
  }

  .thrv_widget_menu[data-tve-switch-icon*="tablet"] .tve_w_menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.3s ease, visibility 0s 0.3s !important;
    flex-direction: column !important;
    background-color: #24447B !important;
    padding-top: 60px !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
  }

  .thrv_widget_menu[data-tve-switch-icon*="tablet"] .tve_w_menu.tve-m-expanded {
    display: flex !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 0.3s ease, visibility 0s 0s !important;
  }

  .thrv_widget_menu.tve-mobile-side-fullscreen .tve_w_menu {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .thrv_widget_menu[data-tve-switch-icon*="tablet"] .tve_w_menu.tve-m-expanded > li {
    width: 100% !important;
    display: block !important;
  }

  .thrv_widget_menu[data-tve-switch-icon*="tablet"] .tve_w_menu.tve-m-expanded > li > a {
    padding: 12px 20px !important;
    display: block !important;
  }
}

/* Icon toggling: show open icon by default, close icon when triggered */
.tve-m-trigger .tcb-icon-close {
  display: none !important;
}

.tve-m-trigger .tcb-icon-open {
  display: block !important;
}

.tve-m-trigger.tve-triggered-icon .tcb-icon-open {
  display: none !important;
}

.tve-m-trigger.tve-triggered-icon .tcb-icon-close {
  display: block !important;
}

/* Menu overlay: hidden by default, no click interception */
.thrv_widget_menu .tcb-menu-overlay {
  display: none !important;
  pointer-events: none !important;
}

/* Menu overlay when expanded: visible backdrop behind the panel */
.thrv_widget_menu .tve-m-expanded + .tcb-menu-overlay {
  display: block !important;
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998 !important;
  pointer-events: auto !important;
}

/* Ensure the menu container sits above the overlay on all pages.
   Some pages (blog) are missing this rule in their inline CSS. */
.thrv_widget_menu .tve-ham-wrap {
  z-index: 999 !important;
}
.thrv_widget_menu .thrive-shortcode-html {
  position: relative !important;
}

/* ==========================================================
   Mobile Menu Panel -- Consistent styling we own.
   TRL dark navy (#24447B / rgb(36,68,123)) background, white text.
   Matches Thrive's original mobile menu background.
   No dependency on Thrive skin vars.
   ========================================================== */

/* Shared panel base for all menu modes */
.tve_w_menu.tve-m-expanded {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 80vw !important;
  max-width: 360px !important;
  height: 100vh !important;
  background-color: #24447B !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  display: flex !important;
  pointer-events: auto !important;
  padding: 60px 0 20px 0 !important;
  margin: 0 !important;
  transition: transform 0.3s ease !important;
  list-style: none !important;
}

/* Fullscreen mode: fill the entire viewport.
   Thrive's tcb-base CSS sets width:80vw !important on
   `.thrv_widget_menu.thrv_wrapper[class*="tve-custom-menu-switch-icon-"].tve-mobile-side-fullscreen ul.tve_w_menu`
   which is specificity (0,4,2). Match or exceed that here so the expanded
   panel fills the full viewport per the spec. Same trick is applied to
   padding below -- Thrive sets `padding:60px` (all sides) on the same
   selector, which would crush menu items to a ~180px content column. */
.thrv_widget_menu.thrv_wrapper.tve-mobile-side-fullscreen ul.tve_w_menu.tve-m-expanded {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  padding: 60px 0 20px 0 !important;
  box-shadow: none !important;
}

/* Same padding override for non-fullscreen modes -- still need to beat
   Thrive's `padding:60px` shorthand so menu items aren't horizontally
   squeezed. */
.thrv_widget_menu.thrv_wrapper ul.tve_w_menu.tve-m-expanded {
  padding: 60px 0 20px 0 !important;
}

.thrv_widget_menu.tve-mobile-side-fullscreen .tve-m-expanded {
  left: 0 !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

.thrv_widget_menu.tve-mobile-side-right .tve-m-expanded {
  right: 0 !important;
  left: auto !important;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
}

/* White-header pages: bright blue slide-out panel (#2d89e6) instead of
   dark navy (#24447B). Applied via JS class on page load so the color
   persists throughout open AND close transitions (no flash to navy).
   Specificity must beat all the #24447B rules above.
   Wrapped in media query so it only applies when the menu is in
   slide-out panel mode — prevents blue leak on desktop nav row. */
@media (max-width: 767px) {
  .tve_w_menu.trl-menu-bright,
  .tve_w_menu.trl-menu-bright.tve-m-expanded,
  .thrv_widget_menu .thrive-shortcode-html .tve_w_menu.trl-menu-bright,
  .thrv_widget_menu .thrive-shortcode-html .tve_w_menu.trl-menu-bright.tve-m-expanded {
    background-color: #2d89e6 !important;
  }
}
@media (max-width: 1023px) {
  /* Also cover tablet-breakpoint menus (data-tve-switch-icon="tablet") */
  .thrv_widget_menu[data-tve-switch-icon*="tablet"] .tve_w_menu.trl-menu-bright,
  .thrv_widget_menu[data-tve-switch-icon*="tablet"] .tve_w_menu.trl-menu-bright.tve-m-expanded {
    background-color: #2d89e6 !important;
  }
}

/* Menu items -- strip ALL backgrounds from Thrive external CSS.
   External Thrive stylesheets (still in <head>) set dark backgrounds
   on .thrv_widget_menu li elements. Force transparent so items sit
   directly on the navy panel. */
.tve_w_menu.tve-m-expanded > li {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  display: block !important;
}

/* Menu link styling -- white text on dark navy, consistent across all pages.
   Must override Thrive external CSS that sets colors via data-css selectors.
   Target both the <a> and the inner <span class="tve-disabled-text-inner">. */
.tve_w_menu.tve-m-expanded > li > a,
.tve_w_menu.tve-m-expanded > li > a span,
.tve_w_menu.tve-m-expanded > li > a .tve-disabled-text-inner {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-family: 'Lato', 'Roboto', 'Open Sans', Arial, sans-serif !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #fff !important;
}
.tve_w_menu.tve-m-expanded > li > a {
  padding: 16px 24px !important;
  display: block !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
}

.tve_w_menu.tve-m-expanded > li > a:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Sub-menu container -- white card on navy panel */
.tve_w_menu.tve-m-expanded .sub-menu {
  background-color: #fff !important;
  border-radius: 6px !important;
  margin: 4px 12px !important;
  padding: 4px 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  list-style: none !important;
}

/* Sub-menu <li> -- force white bg to beat Thrive external CSS */
.tve_w_menu.tve-m-expanded .sub-menu li {
  background: #fff !important;
  background-color: #fff !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  list-style: none !important;
}

/* Sub-menu link text -- dark on white */
.tve_w_menu.tve-m-expanded .sub-menu a,
.tve_w_menu.tve-m-expanded .sub-menu a span,
.tve_w_menu.tve-m-expanded .sub-menu a .tve-disabled-text-inner {
  color: #333 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-family: 'Lato', 'Roboto', 'Open Sans', Arial, sans-serif !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #333 !important;
  background: #fff !important;
  background-color: #fff !important;
}
.tve_w_menu.tve-m-expanded .sub-menu a {
  padding: 12px 20px !important;
  display: block !important;
  border-bottom: 1px solid #eee !important;
}
.tve_w_menu.tve-m-expanded .sub-menu li:last-child a {
  border-bottom: none !important;
}

.tve_w_menu.tve-m-expanded .sub-menu a:hover {
  background-color: #f5f7fa !important;
}

/* Dropdown caret arrows */
.tve_w_menu.tve-m-expanded .tve-item-dropdown-trigger svg {
  fill: #fff !important;
}

/* Direct z-index on the expanded menu UL itself.
   Thrive's inline CSS sets z-index:9 !important on the collapsed menu via:
     .thrv_widget_menu[data-tve-switch-icon*="mobile"] .thrive-shortcode-html .tve_w_menu
   That selector has specificity (0,4,0). We must exceed it for the expanded state.
   The selectors below use (0,5,0)+ to guarantee the override. */
.thrv_widget_menu[data-tve-switch-icon*="mobile"] .thrive-shortcode-html .tve_w_menu.tve-m-expanded,
.thrv_widget_menu[data-tve-switch-icon*="tablet"] .thrive-shortcode-html .tve_w_menu.tve-m-expanded {
  z-index: 9999 !important;
  position: fixed !important;
  pointer-events: auto !important;
  height: 100vh !important;
  overflow-y: auto !important;
  background-color: #24447B !important;
}

/* Ensure menu links are clickable above any overlay */
.thrv_widget_menu[data-tve-switch-icon*="mobile"] .thrive-shortcode-html .tve_w_menu.tve-m-expanded a,
.thrv_widget_menu[data-tve-switch-icon*="mobile"] .thrive-shortcode-html .tve_w_menu.tve-m-expanded li,
.tve_w_menu.tve-m-expanded a,
.tve_w_menu.tve-m-expanded li {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Kill Thrive Leads screen filler overlay - blocks everything at z-index 999999 */
.tve-leads-screen-filler {
  display: none !important;
}

/* Close button (X) -- pinned inside the expanded menu panel.
   Thrive has TWO close icon variants:
     .tcb-icon-close           -- original close (hidden on offscreen-capable pages)
     .tcb-icon-close-offscreen -- used on pages with close-offscreen-icon-available
   Both need identical positioning. Position varies by menu mode:
     - side-left / fullscreen: top-left of viewport (left: 14px)
     - side-right: top-right of viewport (right: 14px) so it lands inside the panel
   JS fallback in mobile-close-fix.js also applies inline styles. */
.thrv_widget_menu .tve-m-trigger.tve-triggered-icon .tcb-icon-close,
.thrv_widget_menu .tve-m-trigger.tve-triggered-icon .tcb-icon-close-offscreen,
.thrv_widget_menu.thrv_wrapper .tve-m-trigger.tve-triggered-icon .tcb-icon-close,
.thrv_widget_menu.thrv_wrapper .tve-m-trigger.tve-triggered-icon .tcb-icon-close-offscreen {
  position: fixed !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  transform: none !important;
  z-index: 10000 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
}

/* Side-right menus: panel slides from the right.
   Close button must be at top-right (inside the panel), not top-left (outside). */
.thrv_widget_menu.tve-mobile-side-right .tve-m-trigger.tve-triggered-icon .tcb-icon-close,
.thrv_widget_menu.tve-mobile-side-right .tve-m-trigger.tve-triggered-icon .tcb-icon-close-offscreen {
  left: auto !important;
  right: 14px !important;
}

/* Override Thrive's opacity:0 on .tcb-icon-close when close-offscreen is available.
   Thrive hides .tcb-icon-close in favor of .tcb-icon-close-offscreen, but we
   restyle both identically so either one works. */
.thrv_widget_menu .tve-m-trigger.close-offscreen-icon-available.tve-triggered-icon .tcb-icon-close {
  opacity: 1 !important;
}

/* X icon SVG -- white on brand blue (both variants) */
.thrv_widget_menu .tve-m-trigger.tve-triggered-icon .tcb-icon-close .tcb-icon,
.thrv_widget_menu .tve-m-trigger.tve-triggered-icon .tcb-icon-close-offscreen .tcb-icon,
.thrv_widget_menu.thrv_wrapper .tve-m-trigger.tve-triggered-icon .tcb-icon-close .tcb-icon,
.thrv_widget_menu.thrv_wrapper .tve-m-trigger.tve-triggered-icon .tcb-icon-close-offscreen .tcb-icon {
  fill: #fff !important;
  width: 22px !important;
  height: 22px !important;
}

/* Left side menu panel styling (if any pages use it) */
.thrv_widget_menu.tve-mobile-side-left .tve-m-expanded {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 80vw !important;
  max-width: 360px !important;
  height: 100vh !important;
  background-color: #24447B !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  flex-direction: column !important;
  display: flex !important;
  padding-top: 60px !important;
}

/* ==========================================================================
   4. Off-Screen Sidebar (blog posts with sidebar)
   These pages have .theme-has-off-screen-sidebar on body and a
   .sidebar-section that slides in from left/right.
   ========================================================================== */

/* Ensure the sidebar section is properly positioned for off-screen behavior */
body.theme-has-off-screen-sidebar .sidebar-section {
  display: block !important;
  position: fixed !important;
  top: 0;
  height: 100vh;
  z-index: 9999 !important;
  transition: transform 0.35s ease-in-out;
  background: #fff;
}

body.theme-has-off-screen-sidebar[data-off-screen-side="left"] .sidebar-section {
  left: 0;
  transform: translateX(-100%);
}

body.theme-has-off-screen-sidebar[data-off-screen-side="right"] .sidebar-section {
  right: 0;
  transform: translateX(100%);
}

body.theme-has-off-screen-sidebar.visible-off-screen-sidebar[data-off-screen-side="left"] .sidebar-section {
  transform: translateX(0);
}

body.theme-has-off-screen-sidebar.visible-off-screen-sidebar[data-off-screen-side="right"] .sidebar-section {
  transform: translateX(0);
}

/* Overlay behind sidebar when visible */
body.theme-has-off-screen-sidebar .sidebar-section.theme-has-off-screen-overlay::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--tve-off-screen-overlay-color, rgba(0, 0, 0, 0.7));
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  pointer-events: none;
}

body.theme-has-off-screen-sidebar.visible-off-screen-sidebar .sidebar-section.theme-has-off-screen-overlay::before {
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar trigger button */
body.theme-has-off-screen-sidebar .tve-off-screen-sidebar-trigger {
  display: flex !important;
  position: fixed;
  z-index: 9998;
  cursor: pointer;
}

/* Close icon inside sidebar */
body.theme-has-off-screen-sidebar .tve-sidebar-close-icon {
  display: block !important;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  cursor: pointer;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  padding: 5px;
  opacity: 0.7;
}

body.theme-has-off-screen-sidebar .tve-sidebar-close-icon:hover {
  opacity: 1;
}

/* Prevent body scroll when sidebar is open */
body.visible-off-screen-sidebar {
  overflow: hidden !important;
}

/* ==========================================================================
   5. General Mobile Polish
   Prevent horizontal scroll, image overflow, table overflow, etc.
   ========================================================================== */

@media (max-width: 1024px) {
  html {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }
  body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Logo carousel images: preserve explicit sizing from page CSS.
     The global img height:auto !important above nukes page-level rules,
     so we re-declare them here with !important at higher specificity. */
  .logo-item img {
    height: 16px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
  }
  .logo-item.logo-statebar img {
    height: 32px !important;
  }
  .logo-item.logo-podcast img {
    height: 36px !important;
  }
  .logo-item.logo-leadpedal img {
    height: 26px !important;
  }
  .logo-carousel {
    overflow: hidden !important;
  }

  .thrv-page-section .tve-page-section-in,
  .tve-cb,
  .thrv_wrapper.thrv-content-box {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Thrive page sections should not exceed viewport */
  .thrv-page-section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Tables should scroll horizontally within their container */
  .thrv_table,
  .tve_table {
    overflow-x: auto !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Videos should be fluid */
  .thrv_responsive_video,
  .tve_responsive_video_container {
    max-width: 100% !important;
  }

  /* Buttons should not overflow */
  .thrv-button,
  .tcb-global-butt,
  .thrv_wrapper.thrv-button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .thrv-button a.tcb-button-link,
  .tcb-global-butt a.tcb-button-link {
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* Content boxes should fit */
  .tve-page-section-in {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 767px) {
  /* Tighter padding on smallest screens */
  .tve-page-section-in {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Ensure section content has breathing room */
  .theme-section .section-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* Prevent overly wide elements from causing scroll */
  .thrv_wrapper {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix lead gen forms on mobile */
  .thrv_lead_generation .tve_lg_input_container,
  .thrv_lead_generation input {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Thrive Leads lightbox trigger overflow fix */
  .tl-lb-target {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Column percentage width classes */
  .c-66, .c-33, .c-50, .c-100 {
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Logo carousel: hide pipe separators, tighten spacing on small screens */
  .logo-sep {
    display: none !important;
  }
  .logo-track {
    gap: 10px !important;
    padding: 0 12px !important;
  }
  .logo-carousel {
    padding: 14px 0 40px !important;
  }
  /* Text-based logos (no img tag, just styled divs) */
  .logo-item.logo-astps .astps-big {
    font-size: 1rem !important;
  }
  .logo-item.logo-astps .astps-text span {
    font-size: 0.4rem !important;
  }
  .logo-item.logo-prager .prager-name {
    font-size: 0.68rem !important;
  }
  .logo-item.logo-prager .prager-prefix {
    font-size: 0.38rem !important;
  }
}

/* ==========================================================================
   5b. [REMOVED] Old Thrive header overrides — replaced by clean header.
   The .trl-clean-header class now handles all header layout via inline
   <style> in the header HTML itself. Section 3 (hamburger/menu panel)
   still applies to the preserved menu widget classes.
   ========================================================================== */

/* ==========================================================================
   6. Prevent body scroll when mobile menu is open
   ========================================================================== */

body.mobile-menu-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

/* ==========================================================================
   7. Mobile Font Size Floor + Phone Tap Targets
   font-size: max(14px, 1em) bumps small text up to 14px while leaving
   already-larger text untouched (1em wins when inherited size > 14px).
   ========================================================================== */

@media (max-width: 767px) {
  nav a, nav span,
  .thrv_text_element span,
  label,
  .tcb-plain-text,
  .thrv_widget_menu a,
  .tve_w_menu a {
    font-size: max(14px, 1em) !important;
  }

  /* Tap target floor for in-content tel: links. Excludes the header phone
     `.trl-phone` -- it lives inside the compact navy header where the
     surrounding 21px gold number is the tap target and extra padding here
     would balloon the header height by ~30px. */
  a[href^="tel:"]:not(.trl-phone) {
    padding: 10px 4px !important;
    display: inline-block !important;
    min-height: 44px !important;
    min-width: 44px !important;
  }
}