/*
 * 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)
 */

/* ==========================================================================
   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;
  }
}

/* ==========================================================================
   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 */
  .thrv_widget_menu[data-tve-switch-icon*="mobile"] .tve_w_menu {
    display: none !important;
  }

  /* Show the menu list when expanded (JS adds .tve-m-expanded) */
  .thrv_widget_menu[data-tve-switch-icon*="mobile"] .tve-m-expanded .tve_w_menu {
    display: block !important;
  }

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

  .thrv_widget_menu[data-tve-switch-icon*="mobile"] .tve-m-expanded .tve_w_menu > 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 {
    display: none !important;
  }

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

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

  .thrv_widget_menu[data-tve-switch-icon*="tablet"] .tve-m-expanded .tve_w_menu > 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 when expanded */
.thrv_widget_menu .tve-m-expanded + .tcb-menu-overlay {
  display: block !important;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

/* Fullscreen side menu panel styling */
.thrv_widget_menu.tve-mobile-side-fullscreen .tve-m-expanded {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 85vw !important;
  max-width: 360px !important;
  height: 100vh !important;
  background-color: #fff !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;
}

/* ==========================================================================
   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, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  img {
    max-width: 100% !important;
    height: auto !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 {
    max-width: 100% !important;
  }

  .thrv-button 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;
  }
}

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

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