/* Extreme Cargo site header: top utility bar + main navigation.
   Rendered by extreme_cargo_header_markup() on the `kadence_header` hook.
   The navbar is a SIBLING of .ec-siteheader (not nested) so `position: sticky`
   sticks against #wrapper for the whole page, not just the header's height. */
.ec-siteheader,
.ec-navbar {
  --ec-navy: #162a4d;
  --ec-navy-deep: #0f1f3a;
  --ec-accent: #437682;
  --ec-accent-dark: #365f69;
  --ec-accent-soft: #eef3f4;
  --ec-border: #e4e9ed;
  font-family: Arial, Helvetica, sans-serif;
}
.ec-siteheader { position: relative; z-index: 20; }
/* Suppress every header transition while the viewport is being resized so the
   layout doesn't animate as elements cross the breakpoint. */
.ec-resizing .ec-siteheader *,
.ec-resizing .ec-navbar,
.ec-resizing .ec-navbar * { transition: none !important; }
.ec-siteheader *, .ec-siteheader *::before, .ec-siteheader *::after,
.ec-navbar *, .ec-navbar *::before, .ec-navbar *::after { box-sizing: border-box; }
.ec-siteheader a, .ec-navbar a { text-decoration: none; color: inherit; }
.ec-siteheader img, .ec-navbar img { max-width: 100%; }
.ec-siteheader .ec-container,
.ec-navbar .ec-container { width: min(1180px, calc(100% - 112px)); margin-inline: auto; }
.ec-siteheader .ec-icon,
.ec-navbar .ec-icon { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; vertical-align: middle; }

/* ---------- Buttons (scoped copy so the header is self-contained) ---------- */
.ec-navbar .ec-action { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 42px; padding: 9px 20px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.3; text-transform: uppercase; cursor: pointer; transition: background-color .18s, box-shadow .18s, color .18s; }
.ec-navbar .ec-action-primary { background: var(--ec-accent); color: #fff; }
.ec-navbar .ec-action-primary:hover { background: var(--ec-accent-dark); box-shadow: 0 4px 18px #162a4d24; }
.ec-navbar .ec-action-primary .ec-icon { filter: brightness(0) invert(1); }
.ec-navbar .ec-action-outline { color: var(--ec-accent); border-color: var(--ec-accent); background: transparent; }
.ec-navbar .ec-action-outline:hover { background: var(--ec-accent-soft); }
.ec-navbar .ec-action-dark { background: var(--ec-navy); color: #fff; }
.ec-navbar .ec-action-dark:hover { background: var(--ec-navy-deep); }
.ec-navbar .ec-action-dark .ec-icon { filter: brightness(0) invert(1); }

/* ---------- Top utility bar ---------- */
.ec-siteheader .ec-topbar { background: var(--ec-navy); color: #fff; font-size: 12px; }
.ec-siteheader .ec-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px; padding: 6px 0; }
/* All top-strip icons render white regardless of the source SVG's own colors. */
.ec-siteheader .ec-topbar .ec-icon { filter: brightness(0) invert(1); }
.ec-siteheader .ec-topbar-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .02em; }
.ec-siteheader .ec-topbar-phone .ec-icon { width: 15px; height: 15px; }
.ec-siteheader .ec-topbar-tagline { flex: 1; text-align: center; letter-spacing: .12em; font-weight: 600; color: #fff; margin: 0; }
.ec-siteheader .ec-topbar-meta { display: inline-flex; align-items: center; gap: 14px; }
.ec-siteheader .ec-topbar-social { display: inline-flex; }
.ec-siteheader .ec-topbar-social .ec-icon { width: 15px; height: 15px; transition: opacity .15s; }
.ec-siteheader .ec-topbar-social:hover .ec-icon { opacity: .7; }
.ec-siteheader .ec-topbar-country { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ec-siteheader .ec-topbar-country .ec-icon { width: 14px; height: 14px; }
.ec-siteheader .ec-topbar-langs { display: inline-flex; align-items: center; gap: 6px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3); font-weight: 600; }
.ec-siteheader .ec-topbar-langs a { color: rgba(255,255,255,.65); }
.ec-siteheader .ec-topbar-langs a.is-active { color: #fff; font-weight: 700; }
.ec-siteheader .ec-topbar-langs a:hover { color: #fff; }
.ec-siteheader .ec-topbar-langs span { color: rgba(255,255,255,.4); }

/* ---------- Main navigation bar (sticky) ---------- */
.ec-navbar { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--ec-border); transition: box-shadow .18s; }
/* Subtle shadow once the navbar detaches from the top strip. */
.ec-navbar.is-stuck { box-shadow: 0 6px 20px rgba(15, 31, 58, .12); }
.ec-navbar .ec-navbar-inner { display: flex; align-items: center; gap: 26px; min-height: 74px; }
.ec-navbar .ec-brand { flex-shrink: 0; display: inline-flex; }
.ec-navbar .ec-brand-logo { display: block; width: auto; height: 52px; }
.ec-navbar .ec-nav { display: flex; align-items: center; gap: 26px; margin-left: 8px; font-size: 14px; font-weight: 600; }
.ec-navbar .ec-nav-panel { display: contents; }

/* Hamburger toggle — hidden on desktop, shown below the breakpoint. */
.ec-navbar .ec-nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ec-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.ec-navbar .ec-nav-toggle-bars { position: relative; width: 22px; height: 16px; }
.ec-navbar .ec-nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ec-navy);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.ec-navbar .ec-nav-toggle-bars span:nth-child(1) { top: 0; }
.ec-navbar .ec-nav-toggle-bars span:nth-child(2) { top: 7px; }
.ec-navbar .ec-nav-toggle-bars span:nth-child(3) { top: 14px; }
.ec-navbar .ec-nav-toggle[aria-expanded="true"] .ec-nav-toggle-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.ec-navbar .ec-nav-toggle[aria-expanded="true"] .ec-nav-toggle-bars span:nth-child(2) { opacity: 0; }
.ec-navbar .ec-nav-toggle[aria-expanded="true"] .ec-nav-toggle-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* wp_nav_menu output */
.ec-navbar .ec-nav-list { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.ec-navbar .ec-nav-list li { position: relative; }
.ec-navbar .ec-nav-list a,
.ec-navbar .ec-nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; color: var(--ec-navy); border-bottom: 3px solid transparent; }
.ec-navbar .ec-nav-list a:hover,
.ec-navbar .ec-nav-link:hover { color: var(--ec-accent); }
.ec-navbar .ec-nav-list .current-menu-item > a,
.ec-navbar .ec-nav-list .current_page_item > a,
.ec-navbar .ec-nav-list .current-menu-ancestor > a,
.ec-navbar .ec-nav-link.is-active { color: var(--ec-accent); border-bottom-color: var(--ec-accent); }
span.ec-nav-link.is-active { cursor: default; }
.ec-navbar .ec-nav-caret { font-size: 10px; opacity: .7; }

/* Sub-menu dropdown */
.ec-navbar .ec-nav-list .sub-menu { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 200px; margin: 0; padding: 8px 0; list-style: none; background: #fff; border: 1px solid var(--ec-border); border-radius: 10px; box-shadow: 0 12px 30px #0f1f3a1f; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.ec-navbar .ec-nav-list li:hover > .sub-menu,
.ec-navbar .ec-nav-list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ec-navbar .ec-nav-list .sub-menu a { display: block; padding: 8px 18px; border: 0; font-weight: 600; }
.ec-navbar .ec-nav-list .sub-menu a:hover { background: var(--ec-accent-soft); }
.ec-navbar .ec-nav-list .menu-item-has-children > a::after { content: '\25BE'; margin-left: 4px; font-size: 10px; opacity: .7; }

.ec-navbar .ec-nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ec-navbar .ec-nav-actions .ec-action { min-height: 42px; padding: 9px 20px; font-size: 11px; }
.ec-navbar .ec-nav-account { border-radius: 999px; }

.ec-navbar .ec-nav-dropdown { position: relative; }
.ec-navbar .ec-nav-dropdown-toggle { font: inherit; }
.ec-navbar .ec-nav-dropdown-caret { flex-shrink: 0; transition: transform .18s; }
.ec-navbar .ec-nav-dropdown.is-open .ec-nav-dropdown-caret { transform: rotate(180deg); }
.ec-navbar .ec-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px #162a4d26;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 40;
}
.ec-navbar .ec-nav-dropdown.is-open .ec-nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ec-navbar .ec-nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ec-navy);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}
.ec-navbar .ec-nav-dropdown-menu a:hover { background: var(--ec-accent-soft); color: var(--ec-accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .ec-navbar .ec-nav, .ec-navbar .ec-nav-list { gap: 18px; }
  .ec-navbar .ec-navbar-inner { gap: 18px; }
  .ec-navbar .ec-nav-actions { gap: 8px; }
  .ec-navbar .ec-nav-actions .ec-action { padding-inline: 14px; }
}
@media (max-width: 1100px) {
  .ec-siteheader .ec-container,
  .ec-navbar .ec-container { width: calc(100% - 64px); }
  .ec-siteheader .ec-topbar-tagline { display: none; }

  /* Show hamburger, collapse everything else into the dropdown panel. */
  .ec-navbar .ec-nav-toggle { display: inline-flex; }
  .ec-navbar .ec-navbar-inner { flex-wrap: wrap; }
  .ec-navbar .ec-nav-panel {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--ec-border);
    box-shadow: 0 16px 30px rgba(15, 31, 58, .14);
    padding: 8px 0 20px;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
    transition: transform .24s ease, opacity .2s ease, visibility .24s;
  }
  .ec-navbar.nav-open .ec-nav-panel {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
  }
  .ec-navbar .ec-nav-panel .ec-nav,
  .ec-navbar .ec-nav-panel .ec-nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    width: 100%;
  }
  .ec-navbar .ec-nav-panel .ec-nav-list a,
  .ec-navbar .ec-nav-panel .ec-nav-link {
    padding: 14px 34px;
    border-bottom: 1px solid var(--ec-border);
    border-left: 3px solid transparent;
    font-size: 15px;
  }
  .ec-navbar .ec-nav-panel .ec-nav-list .current-menu-item > a,
  .ec-navbar .ec-nav-panel .ec-nav-link.is-active {
    border-bottom-color: var(--ec-border);
    border-left-color: var(--ec-accent);
    background: var(--ec-accent-soft);
  }
  /* sub-menus stack inline on mobile */
  .ec-navbar .ec-nav-panel .ec-nav-list .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; padding: 0;
  }
  .ec-navbar .ec-nav-panel .ec-nav-list .sub-menu a { padding-left: 50px; }

  .ec-navbar .ec-nav-panel .ec-nav-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 16px 34px 0;
  }
  .ec-navbar .ec-nav-panel .ec-nav-actions .ec-action { width: 100%; min-height: 46px; }
  .ec-navbar .ec-nav-account { display: flex; }
  /* The mobile panel scrolls (overflow-y: auto), which would clip an
     absolutely-positioned dropdown menu instead of letting it float over the
     rest of the page. Fixed-position it centered in the viewport instead. */
  .ec-navbar .ec-nav-panel .ec-nav-dropdown-menu {
    position: fixed;
    top: auto;
    left: 50%;
    right: auto;
    bottom: 16px;
    transform: translate(-50%, 12px);
    width: calc(100vw - 68px);
    max-width: 320px;
  }
  .ec-navbar .ec-nav-panel .ec-nav-dropdown.is-open .ec-nav-dropdown-menu { transform: translate(-50%, 0); }

  /* decorative sliding line is desktop-only */
}
@media (max-width: 820px) {
  .ec-navbar .ec-navbar-inner { min-height: 62px; }
  .ec-navbar .ec-brand-logo { height: 42px; }
}
@media (max-width: 540px) {
  .ec-siteheader .ec-container,
  .ec-navbar .ec-container { width: calc(100% - 36px); }
  .ec-siteheader .ec-topbar-inner { justify-content: space-between; }
  .ec-siteheader .ec-topbar-langs { padding-left: 0; border-left: 0; }
  .ec-siteheader .ec-topbar-phone span { font-size: 11px; }
  .ec-siteheader .ec-topbar-meta { display: none; }
}

/* ---------- Back-to-top button ---------- */
.ec-to-top {
  --ec-navy: #162a4d;
  --ec-accent: #437682;
  --ec-accent-dark: #365f69;
  position: fixed;
  right: clamp(16px, 4vw, 34px);
  bottom: clamp(16px, 4vw, 34px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ec-accent);
  box-shadow: 0 8px 22px rgba(15, 31, 58, .28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s, background-color .18s;
}
.ec-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ec-to-top:hover { background: var(--ec-accent-dark); }
.ec-to-top:focus-visible { outline: 3px solid var(--ec-navy); outline-offset: 3px; }
.ec-to-top img {
  width: 20px;
  height: 20px;
  /* arrow.svg points right; rotate so it points up, and make it white */
  transform: rotate(-90deg);
  filter: brightness(0) invert(1);
}
@media (prefers-reduced-motion: reduce) {
  .ec-to-top { transition: opacity .01s, visibility .01s; transform: none; }
  .ec-to-top.is-visible { transform: none; }
}