/**
 * Atlantis Engineering - Mobile Responsive Fixes
 * Fixes: mobile sidebar, slider text overflow, general mobile layout.
 */

/* ════════════════════════════════════════════
   MOBILE SIDEBAR / DRAWER
   ════════════════════════════════════════════ */

/* Overlay that dims the page when menu is open */
#mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 70px;
  /* Start below header so header stays clickable */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#mobile-menu-overlay.is-visible {
  display: block;
  opacity: 1;
}

/* Drawer panel */
.mobile-drawer {
  position: fixed !important;
  top: 70px !important;
  /* Start below mobile header (70px) */
  height: calc(100vh - 70px) !important;
  /* Full height minus header */
  width: 280px !important;
  max-width: 85vw !important;
  background: #ffffff !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 10px 0 40px !important;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: block !important;
  /* override mfp-hide */
  visibility: visible !important;
}

/* Tablet: header is 90px tall */
@media (min-width: 550px) {
  .mobile-drawer {
    top: 90px !important;
    height: calc(100vh - 90px) !important;
  }
}

.mobile-drawer-left {
  left: 0 !important;
  right: auto !important;
  transform: translateX(-110%) !important;
}

.mobile-drawer-right {
  right: 0 !important;
  left: auto !important;
  transform: translateX(110%) !important;
}

.mobile-drawer.is-open {
  transform: translateX(0) !important;
}

/* ── Keep header ABOVE overlay & drawer so hamburger is always clickable ── */
#header,
.header-wrapper {
  z-index: 10000 !important;
}

/* Prevent body scroll when menu open */
body.mobile-menu-open {
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM HAMBURGER BUTTON  #atl-hamburger  ☰  →  ✕
   Our button replaces Flatsome's — zero interference.
═══════════════════════════════════════════════════════════════ */

/* 1. Hide Flatsome's original hamburger (our JS sets pointer-events:none too) */
.mobile-nav .nav-icon>a:not(#atl-hamburger) {
  display: none !important;
}

/* 2. Our button styles */
#atl-hamburger {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
  position: relative !important;
  z-index: 10001 !important;
  /* Always on top */
  border-radius: 4px !important;
  transition: background 0.2s ease !important;
}

#atl-hamburger:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* 3. The three bars */
#atl-hamburger .ham-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #222;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
  transform-origin: center center;
  flex-shrink: 0;
}

/* ── OPEN STATE: bars animate into X ── */
body.mobile-menu-open #atl-hamburger .ham-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.mobile-menu-open #atl-hamburger .ham-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

body.mobile-menu-open #atl-hamburger .ham-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Sidebar nav links */
.mobile-drawer .nav-sidebar>li>a {
  display: block;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #222 !important;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
}

.mobile-drawer .nav-sidebar>li>a:hover {
  color: #f42c33 !important;
  background: #fafafa;
}

/* Reset Flatsome slide-panel positioning — accordion dropdown inside drawer */
.mobile-drawer .nav-sidebar-ul,
.mobile-drawer .sub-menu,
.mobile-drawer .children {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
  -webkit-overflow-scrolling: auto !important;
  background: #f8f8f8;
  padding-left: 0;
  list-style: none;
  margin: 0;
  border-left: none;
  box-shadow: inset 0 4px 6px -4px rgba(0, 0, 0, 0.08);
}

.mobile-drawer .menu-item-has-children:not(.mob-open) > .sub-menu,
.mobile-drawer .menu-item-has-children:not(.mob-open) > .nav-sidebar-ul,
.mobile-drawer .menu-item-has-children:not(.mob-open) > .children {
  display: none !important;
}

.mobile-drawer .nav-sidebar-ul li,
.mobile-drawer .sub-menu li,
.mobile-drawer .children li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block !important;
  flex-flow: unset !important;
}

.mobile-drawer .nav-sidebar-ul li a,
.mobile-drawer .sub-menu li a,
.mobile-drawer .children li a {
  display: block !important;
  padding: 11px 20px 11px 28px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #555 !important;
  border-bottom: 1px solid #e8e8e8 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.mobile-drawer .nav-sidebar-ul li a:hover,
.mobile-drawer .sub-menu li a:hover,
.mobile-drawer .children li a:hover {
  color: #f42c33 !important;
  background: #fff !important;
}

/* Parent row: full-width link + chevron pinned to far right */
.mobile-drawer .nav-sidebar > li.menu-item-has-children {
  display: block !important;
  width: 100% !important;
}

.mobile-drawer .mob-parent-row {
  position: relative;
  display: block !important;
  width: 100% !important;
  min-height: 48px;
  border-bottom: 1px solid #f0f0f0;
  box-sizing: border-box;
}

.mobile-drawer .mob-parent-row > a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 14px 56px 14px 24px !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #222 !important;
  border-bottom: none !important;
  text-decoration: none;
}

.mobile-drawer .mob-parent-row > a:hover {
  color: #f42c33 !important;
  background: #fafafa;
}

.mobile-drawer .menu-item-has-children.mob-open > .mob-parent-row {
  background: #fff8f8;
  border-left: 3px solid #f42c33;
}

.mobile-drawer .menu-item-has-children.mob-open > .mob-parent-row > a {
  color: #f42c33 !important;
}

/* Chevron toggle — anchored to end of parent row only */
.mobile-drawer .mob-submenu-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f3f3;
  border: none;
  border-left: 1px solid #ececec;
  cursor: pointer;
  padding: 0;
  color: #666;
  transition: background 0.2s ease, color 0.2s ease;
}

.mobile-drawer .mob-submenu-toggle:hover,
.mobile-drawer .mob-submenu-toggle:focus {
  background: #e8e8e8;
  color: #f42c33;
  outline: none;
}

.mobile-drawer .menu-item-has-children.mob-open .mob-submenu-toggle {
  background: #f42c33;
  color: #fff;
  border-left-color: #d9252c;
}

.mobile-drawer .menu-item-has-children.mob-open .mob-submenu-toggle:hover,
.mobile-drawer .menu-item-has-children.mob-open .mob-submenu-toggle:focus {
  background: #d9252c;
  color: #fff;
}

.mobile-drawer .mob-chevron {
  display: block;
  transition: transform 0.25s ease;
}

.mobile-drawer .menu-item-has-children.mob-open .mob-chevron {
  transform: rotate(180deg);
}

/* Search bar in sidebar */
.mobile-drawer .header-search-form-wrapper {
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-drawer .searchform input[type="search"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}


/* ════════════════════════════════════════════
   SLIDER / BANNER – MOBILE TEXT FIX
   ════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Force ALL banner text-boxes to fill the slide width */
  .banner-layers>.text-box,
  .banner-layers>[class*="text-box"] {
    left: 4% !important;
    right: 4% !important;
    width: 92% !important;
    max-width: 92% !important;
    transform: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .banner-layers .text-inner,
  .banner-layers .text-box-content {
    text-align: center !important;
  }

  /* Fix heading size so it fits in the viewport */
  .banner h1,
  .banner h2,
  .banner .text h1,
  .banner .text h2,
  .banner .text .uppercase {
    font-size: clamp(1.3rem, 4.5vw, 2.2rem) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: auto !important;
  }

  /* Sub-text / paragraph in banners */
  .banner .text p,
  .banner-layers p {
    font-size: clamp(0.75rem, 3vw, 1rem) !important;
    line-height: 1.5 !important;
    overflow-wrap: break-word !important;
  }

  /* Ensure banner containers don't overflow viewport */
  .slider-wrapper,
  .slider,
  .flickity-viewport {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .banner-inner,
  .banner-bg {
    overflow: hidden !important;
  }

  /* Banner bg images should cover properly */
  .banner-bg img.bg {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
  }

  /* Specific first slide — reduce tall padding on mobile */
  #banner-2000650203 {
    padding-top: 380px !important;
  }
}

@media (max-width: 480px) {

  .banner h1,
  .banner h2,
  .banner .text h1,
  .banner .text .uppercase {
    font-size: clamp(1.05rem, 5.5vw, 1.6rem) !important;
  }

  .banner-layers>.text-box,
  .banner-layers>[class*="text-box"] {
    left: 3% !important;
    right: 3% !important;
    width: 94% !important;
    max-width: 94% !important;
  }

  #banner-2000650203 {
    padding-top: 300px !important;
  }
}



/* ════════════════════════════════════════════
   GENERAL MOBILE LAYOUT FIXES — ALL PAGES
   ════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Prevent horizontal scroll */
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Ensure all sections fit */
  .container,
  .row {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
}

/* ════════════════════════════════════════════
   HEADER RESPONSIVE — ALL PAGES & ALL SCREENS
   ════════════════════════════════════════════ */

/* ── Mobile (≤ 549px): hamburger drawer mode ── */
@media (max-width: 549px) {
  .header-main {
    height: 70px !important;
    min-height: 70px !important;
  }

  /* Logo */
  #logo {
    width: 130px !important;
    max-width: 130px !important;
  }

  #logo img {
    max-height: 55px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Contact Us button on mobile — compact */
  .header-button .button {
    padding: 8px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Hide desktop nav links on mobile */
  .hide-for-medium {
    display: none !important;
  }

  /* Show mobile elements */
  .show-for-medium {
    display: flex !important;
  }

  /* Push header content to edges */
  .header-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Sticky header compact */
  .stuck .header-main {
    height: 60px !important;
  }
}

/* ── Tablet (550px – 849px): hamburger still shown ── */
@media (min-width: 550px) and (max-width: 849px) {
  .header-main {
    height: 80px !important;
    min-height: 80px !important;
  }

  #logo {
    width: 160px !important;
  }

  #logo img {
    max-height: 70px !important;
    width: auto !important;
  }

  /* Hide desktop nav on tablet too */
  .hide-for-medium {
    display: none !important;
  }

  .show-for-medium {
    display: flex !important;
  }

  /* Contact Us button */
  .header-button .button {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* Drawer adjustments for tablet */
  .mobile-drawer {
    top: 80px !important;
    height: calc(100vh - 80px) !important;
  }

  #mobile-menu-overlay {
    top: 80px !important;
  }
}

/* ── Desktop (≥ 850px): full nav visible ── */
@media (min-width: 850px) {

  /* Ensure desktop nav is always visible */
  .hide-for-medium {
    display: flex !important;
  }

  /* Hide mobile hamburger on desktop */
  .show-for-medium {
    display: none !important;
  }

  .header-main {
    height: 90px !important;
  }

  #logo {
    width: 200px !important;
  }

  #logo img {
    max-height: 90px !important;
  }

  /* Ensure nav links don't overflow on medium desktops (850–980px) */
  .header-nav-main.nav>li>a {
    /* padding-left: 8px !important; */
    /* padding-right: 8px !important; */
    font-size: 12px !important;
  }
}

/* ── Large desktop (≥ 980px): full spacing ── */
@media (min-width: 980px) {
  .header-nav-main.nav>li>a {
    /* padding-left: 10px !important; */
    /* padding-right: 10px !important; */
    font-size: 12px !important;
  }
}


/* ════════════════════════════════════════════
   FOOTER RESPONSIVE FIXES — ALL PAGES
   Uses universal .footer-wrapper selectors so
   it works regardless of page-specific column IDs.
   ════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Stack all footer rows & columns vertically ── */
  .footer-wrapper .row {
    display: block !important;
  }

  .footer-wrapper .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    display: block !important;
  }

  /* ── CRITICAL: Reset ALL col-inner margins & tighten padding ── */
  .footer-wrapper .col-inner {
    margin: 0 !important;
    padding: 8px 0 !important;
    /* Tighter: was 15px, causing big gaps */
  }

  /* ── Footer section side padding ── */
  .footer-wrapper .section-content,
  .footer-wrapper section {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* ── Hide gap-element spacers in footer (they create blank space) ── */
  .footer-wrapper .gap-element {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
  }

  /* ── Address & paragraph text: prevent overflow ── */
  .footer-wrapper p,
  .footer-wrapper h4,
  .footer-wrapper h3,
  .footer-wrapper li {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* ── Email & phone CONTACT BUTTONS: each on its OWN line ── */
  .footer-wrapper .button.white.is-link {
    display: flex !important;
    /* Full-width block button */
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 6px !important;
    flex-wrap: nowrap !important;
    /* Keep icon + text together */
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* ── Email span text inside button: allow wrapping only if needed ── */
  .footer-wrapper .button.white.is-link span {
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    font-size: 13px !important;
  }

  /* ── Footer logo ── */
  .footer-wrapper .img,
  .footer-wrapper #image_1762592554,
  .footer-wrapper #image_1319789310 {
    width: 45% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── Logo image: remove the huge negative margin that creates blank space ── */
  .footer-wrapper .img-inner {
    margin: 0 !important;
  }

  /* ── Divider ── */
  .footer-wrapper .is-divider {
    margin: 8px 0 !important;
  }

  /* ── Copyright row ── */
  .footer-wrapper .hide-for-small {
    display: none !important;
  }

  .footer-wrapper .show-for-small {
    display: block !important;
  }

  /* ── Absolute footer (bottom bar) ── */
  .absolute-footer .container {
    text-align: center !important;
    padding: 10px 15px !important;
  }

  .absolute-footer .footer-primary,
  .absolute-footer .footer-secondary {
    float: none !important;
    display: block !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {

  /* Extra small screens */
  .footer-wrapper .section-content,
  .footer-wrapper section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Full-width contact buttons on very small phones */
  .footer-wrapper .button.white.is-link {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 8px 10px !important;
  }

  /* Email text slightly smaller so it fits on one line if possible */
  .footer-wrapper .button.white.is-link span {
    font-size: 12px !important;
  }
}

/* Desktop: restore inline style margins above 768px */
@media (min-width: 768px) {
  .footer-wrapper .col-inner {
    /* Let the page-specific inline styles control margins on desktop */
  }

  .footer-wrapper .gap-element {
    display: block !important;
  }
}


/* ════════════════════════════════════════════
   HEADER ALIGNMENT RESPONSIVE FIXES — BOTH DESKTOP & MOBILE
   ════════════════════════════════════════════ */

.header-inner {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* Center flex columns vertically in the header without overriding display: none */
.header-inner>.flex-col {
  height: 100% !important;
  align-self: center !important;
}

/* Center Logo container */
#logo {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

#logo a {
  display: flex !important;
  align-items: center !important;
}

/* Center Mobile Nav Lists (including hamburger and mobile contact button) */
.mobile-nav {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-nav>li {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Center Desktop Nav Lists vertically on a single row without breaking dropdowns */
.header-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
}

.header-nav>li {
  vertical-align: middle !important;
  align-self: center !important;
}

/* Center contact button container */
.header-button {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.header-button>a {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Force mobile submenu visibility when parent is open (.mob-open) */
.mobile-drawer li.mob-open > .sub-menu,
.mobile-drawer li.mob-open > .nav-sidebar-ul,
.mobile-drawer li.mob-open > .children {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}