/* =========================================================================
   mobileresponsive.css  —  App-like mobile experience for the whole site.
   Loaded site-wide. Desktop is untouched; everything here lives inside
   media queries. Breakpoints:
     - Drawer nav + tablet layout : max-width 1024px (HFE hamburger breakpoint)
     - Phone typography / spacing  : max-width 767px
     - Small phones                : max-width 400px
   Colours reuse the Elementor globals via the aliases defined in
   elementor-custom.css (--vz-primary / --vz-secondary / --vz-text).
   ========================================================================= */

/* ============================================================
   0. GLOBAL SAFETY — never allow the page to scroll sideways
   ============================================================ */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  /* keep full-bleed sections from spilling past the viewport */
  .elementor-section.elementor-section-full_width,
  .elementor-section { max-width: 100vw; }
  img, video, iframe, svg { max-width: 100%; }
  /* comfortable side gutters on every Elementor container */
  .elementor-section > .elementor-container { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   1. RIGHT-SIDE SLIDE-IN DRAWER NAVIGATION  (<= 1024px)
   SCOPED TO THE HEADER (#masthead) ONLY — footer menus live in
   #colophon and must stay as normal stacked lists.
   Driven by HFE's own `.menu-is-active` class on the menu layout.
   JS adds a backdrop, a close button, and the scroll-lock class.
   ============================================================ */
@media (max-width: 1024px) {

  /* --- hamburger button: bigger, tidy tap target --- */
  #masthead .hfe-nav-menu__toggle {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    background: var(--vz-secondary-tint, #eef1f6);
    transition: background .2s ease;
  }
  #masthead .hfe-nav-menu__toggle svg,
  #masthead .hfe-nav-menu__toggle i { font-size: 22px !important; width: 22px; height: 22px; color: var(--vz-secondary) !important; }

  /* --- backdrop --- */
  .vz-nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(12, 22, 44, .55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .38s ease, visibility .38s ease;
    z-index: 99998;
  }
  body.vz-nav-open .vz-nav-backdrop { opacity: 1; visibility: visible; }
  body.vz-nav-open { overflow: hidden !important; }
  /* Astra's #masthead creates a stacking context (position:relative; z-index:99),
     which trapped the drawer BENEATH the body-level backdrop and dimmed the open
     menu. Lift the whole header (and the drawer inside it) above the backdrop
     while the menu is open, and hide the floating WhatsApp button. */
  body.vz-nav-open #masthead { z-index: 100000 !important; }
  body.vz-nav-open .vz-wa-float { display: none !important; }

  /* --- the drawer itself (header menu layout container) --- */
  #masthead .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal {
    position: fixed !important;
    top: 0 !important; right: 0 !important; left: auto !important;
    height: 100vh !important; height: 100dvh !important;
    width: 84% !important; max-width: 370px !important;
    margin: 0 !important;
    background: #ffffff !important;
    box-shadow: -22px 0 60px rgba(10, 20, 40, .22) !important;
    border-radius: 26px 0 0 26px !important;
    transform: translateX(105%);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1) !important;
    z-index: 99999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 84px 0 40px !important;
  }
  /* open state */
  #masthead .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal.menu-is-active {
    transform: translateX(0) !important;
  }

  /* --- menu list: vertical, roomy --- */
  #masthead .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu {
    display: block !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important;
  }
  #masthead .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item {
    width: 100% !important;
    border-bottom: 1px solid #eef0f4 !important;
    margin: 0 !important;
  }
  #masthead .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item > a {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 56px;
    padding: 15px 28px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    color: var(--vz-secondary, #162842) !important;
    line-height: 1.3 !important;
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
  }
  #masthead .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item > a:hover,
  #masthead .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.current-menu-item > a {
    color: var(--vz-primary, #e13833) !important;
    background: var(--vz-secondary-tint, #f5f7fb) !important;
    padding-left: 34px !important;
  }
  /* sub-menu arrows / nested items */
  #masthead .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu .sub-menu { padding-left: 14px !important; }
  #masthead .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu .sub-menu a { font-size: 15.5px !important; min-height: 48px; }

  /* --- close (×) button injected by JS --- */
  #masthead .vz-nav-close {
    position: absolute; top: 20px; right: 22px;
    width: 42px; height: 42px;
    padding: 0px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: var(--vz-secondary-tint, #f0f2f7);
    color: var(--vz-secondary, #162842);
    font-size: 30px; line-height: 1; font-weight: 400;
    cursor: pointer; z-index: 2;
    transition: transform .25s ease, background .2s ease;
  }

  /* #masthead .vz-nav-close .vz-nav-close-x {
    position: relative;
    top: 4px;
  } */

  #masthead .vz-nav-close:hover { background: var(--vz-primary, #e13833); color: #fff; transform: rotate(90deg); }

  /* little "Menu" label at the top-left of the drawer */
  #masthead .vz-nav-title {
    position: absolute; top: 26px; left: 28px;
    font-size: 13px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--vz-primary, #e13833);
    display: none;
  }

  /* --- FOOTER menus must NOT become drawers: keep them stacked + visible --- */
  #colophon .hfe-nav-menu__toggle { display: none !important; }
  #colophon .hfe-nav-menu__layout-horizontal {
    position: static !important; transform: none !important;
    height: auto !important; width: auto !important; max-width: none !important;
    box-shadow: none !important; border-radius: 0 !important;
    padding: 0 !important; background: transparent !important; overflow: visible !important;
  }
  #colophon ul.hfe-nav-menu { display: block !important; }
}

/* ============================================================
   2. GLOBAL MOBILE TYPOGRAPHY + SPACING  (<= 767px)
   ============================================================ */
@media (max-width: 767px) {
  body { font-size: 15.5px; line-height: 1.7; }

  h1, .elementor-heading-title { line-height: 1.22 !important; }
  h2 { line-height: 1.25 !important; }

  /* scale down Elementor headings that were sized for desktop */
  .elementor-widget-heading h1.elementor-heading-title,
  .elementor-page h1 { font-size: 30px !important; }
  .elementor-widget-heading h2.elementor-heading-title,
  .elementor-page h2:not(.elementor-heading-title) { font-size: 25px !important; }
  .elementor-widget-heading h3.elementor-heading-title { font-size: 20px !important; }
  h4.elementor-heading-title, .elementor-page h4 { font-size: 18px !important; }

  /* uniform 40px top + 40px bottom spacing on every top-level content section
     (scoped to .site-content so the header/footer are untouched; inner/nested
     sections keep their own padding) */
  .site-content .elementor-top-section { padding-top: 40px !important; padding-bottom: 40px !important; }
  .site-content .elementor-top-section > .elementor-container { padding-top: 0 !important; padding-bottom: 0 !important; }

  .elementor-7 .elementor-element.elementor-element-ebef828{
    padding-top: 0px !important;
  }

  /* paragraphs: readable width + size */
  .elementor-widget-text-editor, .elementor-widget-text-editor p,
  .elementor-page p { font-size: 15px !important; line-height: 1.7 !important; }

  /* ---- BUTTONS: full-width friendly + 48px touch target ---- */
  .elementor-button, .vz-btn, a.elementor-button {
    min-height: 48px;
    display: inline-flex !important; align-items: center; justify-content: center;
    padding: 13px 26px !important;
    font-size: 15px !important;
  }

  /* every Elementor column becomes full width & centred on phones */
  .elementor-section .elementor-column,
  .elementor-section .elementor-inner-section .elementor-column {
    width: 100% !important;
  }

  /* vertical gap between cards / columns once they stack (any multi-column
     layout — col-33 service cards, col-50 splits, etc.). Full-width single
     columns (col-100) are excluded so they don't gain stray spacing. */
  .site-content .elementor-column:not(.elementor-col-100) {
    margin-bottom: 24px !important;
  }
  /* card grids stack as multiple rows (inner-sections) with a large desktop
     row-gap (set with ID specificity in services.css / country-guides.css).
     Once the cards stack, that gap doubles up with the 24px card gap — override
     those exact rules (matching ID specificity, loaded later) so the row break
     keeps the same uniform 24px as the card gap. */
  #vz-cg-grid .elementor-inner-section + .elementor-inner-section,
  #vz-svc-grid .elementor-inner-section + .elementor-inner-section {
    margin-top: 0 !important;
  }
  /* generic fallback for any other stacked card grid */
  .site-content .elementor-inner-section:has(.elementor-col-33) + .elementor-inner-section,
  .site-content .elementor-inner-section:has(.elementor-col-25) + .elementor-inner-section {
    margin-top: 0 !important;
  }
}

/* ============================================================
   3. HOMEPAGE  (<= 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* --- hero slider: shorter, centred, readable --- */
  #vz-banner-track .elementor-inner-section,
  #vz-banner-track .elementor-container { min-height: auto !important; }
  #vz-banner-track { min-height: auto !important; }
  #vz-banner-track h1 { font-size: 29px !important; line-height: 1.2 !important; text-align: center; }
  #vz-banner-track h6 { text-align: center; }
  #vz-banner-track p { text-align: center; font-size: 15px !important; }
  #vz-banner-track .elementor-widget-image { text-align: center; }
  #vz-banner-track img { max-height: 300px !important; width: auto !important; margin: 0 auto !important; object-fit: contain; }
  #vz-banner-track .elementor-widget-button, #vz-banner-track a { justify-content: center; }
  #vz-banner-track .elementor-column { text-align: center !important; }
  /* slider arrows: hide on phone (dots remain) */
  #vz-banner-track .slick-prev, #vz-banner-track .slick-next { display: none !important; }

  /* --- marquee strip: keep contained --- */
  .vz-marquee { overflow: hidden; }
  /* the crossing-marquee band (.vz-cross) is a 210px-tall container with its two
     strips overlapping at the top, leaving a big empty gap below on mobile.
     Compact it to just the strip height and trim the section padding around it. */
  .elementor-page-7 .vz-cross { height: 100px !important; }
  .site-content .elementor-top-section:has(.vz-cross) { padding-top: 6px !important; padding-bottom: 6px !important; }

  /* --- service / feature cards: one per row, spacing --- */
  .elementor-page-7 .elementor-widget-icon-box { margin-bottom: 4px; }

  /* --- counters / stats: two per row --- */
  .elementor-page-7 .elementor-section:has(.elementor-counter) .elementor-column {
    width: 50% !important;
  }
  .elementor-page-7 .elementor-counter-number-wrapper { font-size: 30px !important; }

  /* --- testimonials slider: image + text stack, arrows below --- */
  #vz-tst-track .elementor-widget-wrap.elementor-element-populated { padding: 0 !important; }
  #vz-tst-track img { width: 100% !important; height: auto !important; }
  /* arrows: centred below the slide (Slick positions them absolute on the left) */
  #vz-tst-track .slick-prev, #vz-tst-track .slick-next { bottom: -62px !important; top: auto !important; }
  #vz-tst-track .slick-prev { left: 50% !important; right: auto !important; margin-left: -52px !important; }
  #vz-tst-track .slick-next { left: 50% !important; right: auto !important; margin-left: 4px !important; }

  /* --- final CTA (horizontal gutter only; 40px vertical from the section) --- */
  .elementor-page-7 .elementor-section:has(#contact) .elementor-container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ============================================================
   4. SERVICES PAGE  (<= 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* cards single column with breathing room */
  .elementor-widget-icon-box.elementor-position-block-start { margin-bottom: 6px; }

  /* subscribe form: stack input + button, full width */
  .vz-sub-form { flex-direction: column !important; gap: 12px !important; padding: 8px !important; border-radius: 18px !important; }
  .vz-sub-form input[type="email"] { width: 100% !important; text-align: center; }
  .vz-sub-form button { width: 100% !important; height: 50px !important; border-radius: 12px !important; }
  /* the subscribe headline stacks above the form */
  #vz-sub-cta .elementor-container, .vz-subscribe .elementor-container { text-align: center; }
}

/* ============================================================
   5. SERVICE + COUNTRY DETAIL PAGES  (<= 767px)
   Shared hooks: #vz-sd-hero, #vz-sd-body, .vz-sd-nav,
   .vz-sd-help, .vz-sd-options
   ============================================================ */
@media (max-width: 1024px) {
  /* sidebar drops below the main content */
  #vz-sd-body .elementor-column { width: 100% !important; }
}
@media (max-width: 767px) {
  #vz-sd-hero, #vz-cg-hero { text-align: center; }
  #vz-sd-hero h1 { font-size: 28px !important; }
  #vz-sd-hero .elementor-container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Detail-page body content must stay LEFT-aligned on mobile. Elementor sets
     text-align:center on the content column at this breakpoint, which detached
     the check icons and numbered badges from their text and centred every
     heading/paragraph. Force left; the sidebar help card keeps its own centre. */
  #vz-sd-body .elementor-column,
  #vz-sd-body .elementor-widget-icon-list,
  #vz-sd-body .elementor-widget-icon-list .elementor-icon-list-text,
  #vz-sd-body .elementor-icon-list-items,
  #vz-sd-body .vz-sd-options,
  #vz-sd-body .vz-sd-options .vz-opt,
  #vz-sd-body .vz-sd-options .vz-opt h4,
  #vz-sd-body .vz-sd-options .vz-opt p { text-align: left !important; }
  #vz-sd-body .elementor-widget-icon-list .elementor-icon-list-item { justify-content: flex-start !important; }

  /* sidebar nav list — full-width tappable rows */
  .vz-sd-nav a { padding: 14px 16px !important; min-height: 50px; display: flex; align-items: center; }
  .vz-sd-help { margin-top: 18px; }

  /* numbered option cards */
  .vz-sd-options li, .vz-sd-options .elementor-widget { margin-bottom: 12px; }

  /* accordion / FAQ */
  .elementor-accordion .elementor-tab-title,
  .elementor-toggle .elementor-tab-title { font-size: 16px !important; padding: 15px 16px !important; min-height: 52px; }
  .elementor-accordion .elementor-tab-content { font-size: 15px !important; padding: 14px 16px !important; }

  /* h3 with red underline */
  #vz-sd-body h3 { font-size: 20px !important; }
}

/* ============================================================
   6. COUNTRY GUIDES PAGE  (<= 767px)
   ============================================================ */
@media (max-width: 767px) {
  #vz-cg-hero h1 { font-size: 28px !important; }
  #vz-cg-hero .elementor-container { padding-left: 20px !important; padding-right: 20px !important; }
  #vz-cg-grid .elementor-column { width: 100% !important; }
  #vz-cg-grid .elementor-widget-wrap.elementor-element-populated { padding-left: 0 !important; padding-right: 0 !important; }
  .vz-cg-tag { font-size: 12px !important; }
  #vz-cg-cta .elementor-container { padding-left: 20px !important; padding-right: 20px !important; text-align: center; }
  #vz-cg-cta h2 { font-size: 23px !important; }
}

/* ============================================================
   7. ABOUT PAGE  (<= 767px)
   ============================================================ */
@media (max-width: 767px) {
  #vz-ab-hero h1 { font-size: 30px !important; text-align: center; }
  #vz-ab-hero .elementor-container { padding-left: 20px !important; padding-right: 20px !important; }
  #vz-ab-who .elementor-column, #vz-ab-mv .elementor-column, #vz-ab-why .elementor-column { width: 100% !important; }
  #vz-ab-stats .elementor-column { width: 50% !important; }
  #vz-ab-stats .elementor-counter-number-wrapper { font-size: 30px !important; }
  #vz-ab-cta .elementor-container { padding-left: 20px !important; padding-right: 20px !important; text-align: center; }
  #vz-ab-who img, #vz-ab-mv img { border-radius: 16px; margin-bottom: 16px; }
}

/* ============================================================
   8. CONTACT PAGE  (<= 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* stack the two columns; each becomes a full-width, aligned rounded card */
  #vz-ct-main .elementor-column { width: 100% !important; }

  /* the info column has default Elementor column padding that inset the navy
     panel (~15px) so it didn't line up with the form card — remove it so both
     cards share the same edges and width */
  #vz-ct-main .elementor-column:first-child > .elementor-widget-wrap { padding: 0 !important; }
  #vz-ct-main .elementor-column:first-child > .elementor-widget-wrap > .elementor-widget { margin: 0 !important; }

  .vz-ct-info {
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
    padding: 30px 24px !important;
    margin-bottom: 20px;
  }
  .vz-ct-info h3 { font-size: 21px !important; }
  /* Elementor centres the info column on mobile, which centred the small item
     labels ("Our Office", "Call Us", …). Keep the whole panel left-aligned. */
  .vz-ct-info,
  .vz-ct-info > p,
  .vz-ct-info h3,
  .vz-ct-item .txt,
  .vz-ct-item .txt small { text-align: left !important; }

  /* form card: full width, tighter padding */
  #vz-ct-main .elementor-column:last-child > .elementor-widget-wrap {
    border-radius: 16px !important;
    padding: 26px 22px !important;
  }

  /* fields stack with even, compact spacing */
  .vz-contact-form .vz-row { flex-direction: column; gap: 0; }
  .vz-contact-form .vz-field { margin-bottom: 14px; }
  .vz-contact-form input, .vz-contact-form textarea {
    font-size: 16px !important; /* 16px prevents iOS zoom-on-focus */
    padding: 13px 15px !important;
  }
  .vz-contact-form textarea { min-height: 130px; }

  /* submit button: full width + centred label */
  .vz-contact-form .vz-submit {
    width: 100% !important;
    justify-content: center;
    min-height: 52px;
    margin-top: 6px;
  }

  /* map: shorter on phones (correct selector) */
  .vz-ct-map-embed iframe { height: 260px !important; }

  .vz-form-notice { font-size: 14px !important; padding: 13px 16px !important; }

  .for-mobile-menu {
    position: absolute !important;
    top: -75px;
    right: 15px !important;
  }
}

/* ============================================================
   9. FOOTER  (<= 767px)
   ============================================================ */
@media (max-width: 767px) {
  .ehf-footer .elementor-column, footer .elementor-column { width: 100% !important; text-align: center; }
  .ehf-footer .hfe-nav-menu .menu-item a,
  footer .hfe-nav-menu .menu-item a { justify-content: center; }
  footer .elementor-widget-heading .elementor-heading-title { margin-top: 10px; }
  footer .hfe-site-title, footer .elementor-widget-image { text-align: center; }
  /* copyright row stacks */
  footer .elementor-section:last-of-type .elementor-container { flex-direction: column; gap: 8px; text-align: center; }
}

/* ============================================================
   10. VERY SMALL PHONES  (<= 400px)
   ============================================================ */
@media (max-width: 400px) {
  #vz-banner-track h1, #vz-ab-hero h1 { font-size: 26px !important; }
  .elementor-widget-heading h2.elementor-heading-title { font-size: 22px !important; }
  .elementor-section > .elementor-container { padding-left: 14px; padding-right: 14px; }
  .hfe-dropdown.hfe-nav-menu__layout-horizontal,
  .elementor-widget-navigation-menu .hfe-dropdown { width: 88% !important; }
}