/* ------------------------------------------------------------------ *
 * Behaviour helpers — NOT part of the original Globax theme CSS.
 * These only support the small bits of interactivity that used to be
 * driven by the theme's 476 KB controller-combined.js bundle.
 * ------------------------------------------------------------------ */

/* Container override for all wide screens (≥1280px): fluid with side gutters,
   capped at 1200px. The theme only sizes .container to 1200px for 1280–1367px;
   above 1367px (with data-navigation="default") it falls back to a narrow 960px,
   which makes the top-bar items (Language / social / Merchant Login) wrap.
   Applying a consistent 1200px max keeps the top bar on one row at every width. */
@media only screen and (min-width: 1280px) {
  /* Only .container needs this — .vc-container is a flex item whose width must
     stay theme-controlled (forcing width:auto collapses the content columns). */
  .container,
  .wpml-ls-statics-post_translations {
    width: auto !important;
    max-width: 1280px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

/* The theme already renders .header.desk as position:fixed; we only add a soft
   shadow once the page has been scrolled (the `active` scrolled state). */
.header.desk.is-stuck {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

/* The theme's .page-content-wrap (overflow:hidden BFC) shrink-wraps to its
   content width — on mobile the narrow content collapsed the banner/sections.
   Force it to fill the viewport. */
.page-content-wrap {
  width: 100%;
}
/* Clip the small horizontal overflow from WPBakery rows' negative gutter margins. */
#gen-wrap {
  overflow-x: hidden;
}

/* TRANSPORT INQUIRY block: dark gradient over the warehouse photo so the white
   title/text stays readable (the photo loads bright on the left otherwise). */
.vc_custom_1530688144672 {
  position: relative;
}
.vc_custom_1530688144672::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(18, 18, 18, 0.88) 0%, rgba(18, 18, 18, 0.6) 45%, rgba(18, 18, 18, 0.2) 100%);
}
.vc_custom_1530688144672 > .vc-container {
  position: relative;
  z-index: 1;
}

/* Rate-chart table: on narrow screens let it scroll horizontally instead of
   clipping the last column. */
.rate-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 575px) {
  .rate-table-scroll > #table-1 {
    min-width: 460px;
  }
}

/* Nationwide Delivery post-office list: desktop shows the table, mobile shows an
   accordion. See components/pages/PostOfficeDirectory.tsx and
   post-office-directory.css. */

/* Schedule block inside the mobile menu drawer. */
.mobile-navigation .mob-schedule {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.mobile-navigation .mob-block-title {
  margin: 0 0 12px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #212121;
}
.mobile-navigation .mob-schedule ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-navigation .mob-schedule li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  line-height: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.mobile-navigation .mob-schedule .day {
  color: #212121;
  font-weight: 600;
}
.mobile-navigation .mob-schedule .hours {
  color: #616161;
}

/* Contact info + Merchant Login inside the mobile menu drawer (the desktop
   top-bar is hidden on mobile, so surface that info here). */
.mobile-navigation .mob-contact {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.mobile-navigation .mob-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 20px;
  color: #616161;
}
.mobile-navigation .mob-contact-item .el-icon {
  color: #ea2325;
  font-size: 13px;
  line-height: 20px;
  flex-shrink: 0;
}
.mobile-navigation .mob-merchant-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 22px;
  background: #ea2325;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
}
.mobile-navigation .mob-merchant-btn:hover {
  background: #212121;
}

/* Navigation links inside the site-sidebar drawer (mobile only — desktop already
   has the top nav). */
.mob-sidebar-nav {
  display: block;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mob-sidebar-nav a {
  display: block;
  padding: 10px 0;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
}
.mob-sidebar-nav a:hover {
  color: #ea2325;
}
@media (min-width: 1025px) {
  .mob-sidebar-nav {
    display: none;
  }
}

/* Mobile header: logo hard-left, menu toggle hard-right, on one row. The theme
   constrains .container to a narrow centred width, which made both sit near the
   middle; force it full-width with small gutters so they reach the edges. */
.header-mobile .header-logo-area .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
/* The theme centres the mobile logo with margin:auto (and keeps float:left);
   outspecify it so the logo sits hard-left in the flex row. */
.header-mobile .header-logo-area .logo,
.header-mobile .header-logo-area .logo.logo-desk {
  float: none;
  width: auto;
  margin: 0;
}
.header-mobile .logo img {
  max-width: 170px !important;
  height: auto;
}
.header-mobile .mob-menu-toggle {
  float: none;
  margin: 0;
  flex-shrink: 0;
}

/* Replace the theme's stacked-dots (⋮) toggle with a hamburger (☰): three
   horizontal bars built from the span and its ::before / ::after. The extra
   .header-logo-area ancestor outspecifies the theme's own toggle rules. */
.header-mobile .header-logo-area .mob-menu-toggle > span,
.header-mobile .header-logo-area .mob-menu-toggle > span::before,
.header-mobile .header-logo-area .mob-menu-toggle > span::after {
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background-color: #212121;
  left: 50%;
  margin-left: -12px;
}
.header-mobile .header-logo-area .mob-menu-toggle > span {
  top: 50%;
  margin-top: -1px;
}
.header-mobile .header-logo-area .mob-menu-toggle > span::before {
  content: "";
  top: -8px;
  bottom: auto;
  margin-top: 0;
}
.header-mobile .header-logo-area .mob-menu-toggle > span::after {
  content: "";
  top: 8px;
  bottom: auto;
  margin-top: 0;
}

/* Top-bar "Language" dropdown: the theme's `subeffect-ghost` rule keeps the
   submenu display:none/opacity:0 even on hover (it relied on the original JS to
   animate it open). Reveal it on hover via CSS. */
.header-top-menu > ul > li {
  position: relative;
}
.header-top-menu > ul > li:hover > .sub-menu {
  display: block !important;
  opacity: 1 !important;
  margin-top: 0 !important;
  z-index: 9999 !important;
  background: #212121;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.header-top-menu .sub-menu li a {
  padding: 4px 16px;
}

/* Image preloader: the theme shows a spinner overlay (.image-loading /
   .image-preloader) that its imagesLoaded JS removes after the image loads.
   Without that JS the overlay covers the image forever — hide it (images load
   natively) and make sure the image itself is visible. */
.image-loading,
.image-preloader {
  display: none !important;
}
.et-custom-image .image-container img,
.image-preloader + img {
  opacity: 1 !important;
}

/* Lock body scroll while an off-canvas panel is open. */
body.et-no-scroll {
  overflow: hidden;
}

/* Off-canvas overlay: the theme animates width/height 0 -> 100%, but height:100%
   resolves against #wrap's auto height (= 0) so it never covers. Make it a fixed
   full-viewport layer (independent of #wrap) so clicking anywhere outside the
   drawer closes it (the theme's close cursor shows over it). The drawer is lifted
   above the overlay so it stays clickable. */
#wrap .overlay.active {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  z-index: 9998 !important;
  transition: opacity 0.4s ease !important;
}
.site-sidebar.active,
.mobile-navigation.active {
  z-index: 100000 !important;
  /* Make the off-canvas drawers scroll when content is taller than the screen. */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Transparent header on banner pages (Contact / Coverage): the header overlays
   the banner until the page is scrolled, then it becomes solid white. */
.et-transparent .header.desk:not(.active) .header-body {
  background-color: transparent !important;
  box-shadow: none !important;
}
.et-transparent .header.desk:not(.active) .header-menu .txt {
  color: #ffffff;
}
.et-transparent .header.desk:not(.active) .sidebar-toggle,
.et-transparent .header.desk:not(.active) .search-toggle,
.et-transparent .header.desk:not(.active) .search-toggle:before {
  color: #ffffff !important;
}
/* Banner now starts behind the fixed header — nudge its content clear of it. */
.et-transparent .bili-page-banner {
  padding-top: 96px;
}
@media (max-width: 991px) {
  .et-transparent .bili-page-banner {
    padding-top: 0;
  }
}

/* Visible cross (×) close button on the desktop off-canvas sidebar. */
.site-sidebar .mobile-site-sidebar-toggle {
  display: none;
}
.site-sidebar.active .mobile-site-sidebar-toggle {
  display: block;
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 5;
}
.site-sidebar.active .mobile-site-sidebar-toggle::before,
.site-sidebar.active .mobile-site-sidebar-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  background: #ea2325;
  transition: background 0.2s ease;
}
.site-sidebar.active .mobile-site-sidebar-toggle::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.site-sidebar.active .mobile-site-sidebar-toggle::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.site-sidebar.active .mobile-site-sidebar-toggle:hover::before,
.site-sidebar.active .mobile-site-sidebar-toggle:hover::after {
  background: #fff;
}

/* Safety net: if JS never runs, never leave builder content invisible.
   The Globax theme already covers .et-item-set via its own `.no-js` rule;
   these cover the animated titles / bracket block that have no such fallback. */
.no-js .wpb_animate_when_almost_visible { opacity: 1 !important; }
.no-js .et-animated-title .text-wrapper,
.no-js .et-animated-title .letters,
.no-js .et-animated-title .letter,
.no-js .et-braket-block .braket-title,
.no-js .et-braket-block .braket-sub-title,
.no-js .et-braket-block .braket-block-content.text {
  opacity: 1 !important;
}
/* The braket title/subtitle slide in from translateX(-100%); the theme's
   animation has no `forwards` fill, so they revert off-screen. Pin them in place. */
.et-braket-block .braket-title,
.et-braket-block .braket-sub-title,
.et-braket-block .braket-block-content.text {
  transform: none !important;
}
/* "Curtain" titles hide their text behind a coloured wipe overlay that only
   clears after a multi-second JS animation. Show the text and drop the overlay
   so the heading reads cleanly without that animation. */
.no-js .et-animated-title.curtain .text {
  visibility: visible !important;
}
.no-js .et-animated-title .curtain {
  display: none !important;
}

/* Hero / parcel-tracking band.
   The original draws its background through an absolutely-positioned
   `.animated-container` whose `height:100%` is sized by the parallax JS we no
   longer load (so it collapses to 0). Paint the background on the row itself and
   restore the original 100px vertical padding + cover sizing so the banner
   matches the source height. */
.vc-animated-bg.vc_custom_1699346410172 {
  /* Solid red on the row itself. Needed because head-inline.css (from the
     WordPress export) sets this row's background to transparent-white with
     !important; the sliding .animated-container globe rides on top of this. */
  background-color: #ee382a !important;
  position: relative;
  overflow: hidden;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}
/* Animated (slowly panning) hero background — reproduces the theme's
   data-animatedbg horizontal motion. We use the theme's own `.animated-container`
   layer (its height:100% collapses without explicit parent height, so pin it with
   inset:0) and animate background-position (the theme doesn't mark it !important). */
.vc-animated-bg.vc_custom_1699346410172 .animated-container {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: auto !important;
  z-index: 0;
  background-image: url(/assets/images/globus_image_small_color_5.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* Animate transform (not background-position): with `cover` there's no
     horizontal overflow to pan, so position changes wouldn't move. A slight
     scale keeps the edges covered while it drifts. */
  animation: et-hero-pan 15s ease-in-out infinite ;
}
@keyframes et-hero-pan {
  /*from { transform: scale(1.15) translateX(-4%); }*/
  /*to { transform: scale(1.15) translateX(4%); }*/
  0% {
    transform: translateX(-100%); /* Start completely off-screen to the right */
  }
  100% {
    transform: translateX(100%); /* End completely off-screen to the left */
  }

}
/* Keep the hero content (tracking form) above the animated background. */
.vc-animated-bg.vc_custom_1699346410172 > .vc-container {
  position: relative;
  z-index: 1;
}
/* Footer "Developed by" credit: turns white on hover. The base colour is set
   inline on the link; !important overrides it on hover. */
.adn-credit-link:hover,
.adn-credit-link:focus {
  color: #ffffff !important;
}

/* Mobile content width fix (same as the coverage page — see coverage.css).
   The Globax theme pins .vc-container (the content row) to a narrow ~272px
   centred width on phones, squeezing the below-banner content into the middle.
   Widen it to the full width on each content page so the content fills the
   screen. Scoped to each page's wrapper so the header and footer are untouched.
   (Coverage = .page-id-8112 is handled in coverage.css.) */
@media (max-width: 767px) {
  /* !important is required: the theme sizes .vc-container by the row's
     `vc_column-gap-N` class (e.g. `.vc_row.vc_column-gap-80.vc-container`),
     a (0,3,0) selector that outranks our page-scoped (0,2,0) one. */
  .post-3389 .vc-container,
  .page-id-8102 .vc-container,
  .page-id-14094 .vc-container,
  .page-id-14065 .vc-container {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Gutters so content doesn't touch the screen edges (coverage gets these
       from .coverage-block; these pages have no equivalent inner padding). */
    padding-left: 25px !important;
    padding-right: 25px !important;
    box-sizing: border-box !important;
  }
}

/* Home "Services" section ("You have a need, we have the SOLUTION" + the
   service cards): centre it on phones only. The two rows are matched by their
   unique vc_custom_* classes so no other section is affected. */
@media (max-width: 767px) {
  .post-3389 .vc_custom_1531843586639,
  .post-3389 .vc_custom_1531843586639 .et-highlight-title,
  .post-3389 .vc_custom_1531843586639 .et-animated-title,
  .post-3389 .vc_custom_1531831408148 .box-item-content,
  .post-3389 .vc_custom_1531831408148 .box-item-content p {
    text-align: center;
  }
  /* The card title carries an inline text-align:left, so it needs !important. */
  .post-3389 .vc_custom_1531831408148 .box-item-content h5 {
    text-align: center !important;
  }
  /* The icon is a fixed-width block aligned left — centre it. */
  .post-3389 .vc_custom_1531831408148 .et-icon-wrap {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hero tracking form: center #et-track-form-1's field + button on MOBILE only
   (≤1023px, where the theme stacks them). Make the form a centered flex column;
   desktop layout is untouched. */
@media (max-width: 1023px) {
  #et-track-form-1 {
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }
  #et-track-form-1 .et-track-filed-wrap,
  #et-track-form-1 .send-div {
    float: none !important;
    width: 100%;
    max-width: 320px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #et-track-form-1 .et-track-form-number,
  #et-track-form-1 .et-track-form-submit {
    display: block;
    width: 100%;
  }
}

/* Hero row content sits left and narrower than the banner — center the row's
   content container on mobile (Hero row only, via its unique custom class). */
@media (max-width: 1023px) {
  .vc_custom_1699346410172.vc_row-flex {
    justify-content: center;
  }
}

/* Footer logo column: on mobile (≤1023px) center the logo, address text and
   "Get location" button, and enlarge the logo. */
@media (max-width: 1023px) {
  .footer-logo-column {
    text-align: center;
  }
  .footer-logo-column .et-custom-image,
  .footer-logo-column .et-custom-image .overlay-hover,
  .footer-logo-column .et-custom-image .image,
  .footer-logo-column .et-custom-image .image-container {
    display: block;
    float: none;
    text-align: center;
  }
  .footer-logo-column .et-custom-image img {
    display: inline-block;
    width: 200px;
    max-width: 70%;
    height: auto;
  }
  .footer-logo-column .wpb_text_column,
  .footer-logo-column .wpb_text_column p {
    text-align: center;
  }
  .footer-logo-column #et-button-1 {
    display: inline-flex;
  }
}

/* Nationwide Delivery: the post-office directory is wrapped in a .vc_section
   whose self-cancelling negative margin is clipped by #gen-wrap's overflow-x,
   leaving ~15px extra indent. Zero it so the "Total list" heading + accordion
   line up with the rest of the page content. Scoped to this page only. */
.page-id-14094 .vc_section {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* The directory section's row uses vc_column-gap-24, which adds 12px of column
   padding — indenting the "Total list" heading + accordion 12px more than the
   rest of the page. Remove that column padding so they align at the page edge. */
.page-id-14094 .vc_section .vc_column_container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}