/* Site-wide page maximum: 2200px (23 October 2026).
   Only OUTER page shells are capped; card, paragraph, grid-column and form widths
   are deliberately untouched for readability and responsive functionality. */
:root{--zumi-page-max:2200px;}
#zumi-native-homepage .zumi-native-homepage__container,
#zumi-native-homepage .zumi-home-stack,
#zumi-native-about .zna-shell,
#zumi-native-about .zna-page,
#zumi-native-contact .znc-shell,
#zumi-native-contact .znc-page,
#zumi-native-emergency .zne-shell,
#zumi-native-emergency .zne-page,
#zumi-native-insurance .zni-shell,
#zumi-native-insurance .zni-page,
#zumi-native-refunds .znr-shell,
#zumi-native-refunds .znr-page,
#zumi-native-booking-page .zumi-native-booking-page__container,
#zumi-native-booking-page .zumi-booking-portal,
#zumi-native-hilux-standard-page #zumi-hilux-premium,
#zumi-native-hilux-camping-page #zumi-hilux-premium,
#zumi-native-fortuner-standard-page #zumi-fortuner-premium,
#zumi-native-tour-page .zt-wrap,
#zumi-native-tour-page .zt-sticky,
.zumi-blog-page #zumi-native-blog .zumi-blog,
.zumi-blog-article-page .zumi-article,
.zumi-blog__hero,
.zumi-article__hero,
.zumi-blog__explore-inner,
.zumi-blog__layout,
.zumi-blog__hero-inner,
.zumi-article__layout,
.zumi-article__nav-inner,
main.zumi-static-blog {
  box-sizing:border-box;
  max-width:var(--zumi-page-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* Correct previous export-only 1440px refunds restriction. Keep safe gutters. */
#zumi-native-refunds .znr-page{
  width:min(calc(100% - 48px),2200px) !important;
  max-width:2200px !important;
}
@media(max-width:760px){
  #zumi-native-refunds .znr-page{width:calc(100% - 24px)!important;}
}
/* Blog formerly used a 1512px wide outer page template. */
.zumi-blog,.zumi-blog-page #zumi-native-blog{--zb-site-max:2200px;}
.zumi-article,.zumi-blog-article-page{--za-site-max:2200px;}
/* On desktop, align article/blog hero and body container to the same maximum. */
@media(min-width:761px){
  .zumi-blog__hero,.zumi-article__hero{width:min(calc(100% - 48px),2200px)!important;}
  .zumi-article__layout,.zumi-blog__layout,
  .zumi-blog__hero-inner,.zumi-blog__explore-inner,
  .zumi-article__nav-inner{width:min(calc(100% - 48px),2200px)!important;}
}

/* Content-to-footer spacing: half the previous gap, without a white strip.
   Padding extends each page's own background instead of exposing the body
   background through an external footer margin. Applies to all languages. */
:root{--zumi-content-footer-gap:14px;}
@media (max-width:760px){
  :root{--zumi-content-footer-gap:11px;}
}
body.zumi-static-preview > main{
  margin-bottom:0 !important;
  padding-bottom:var(--zumi-content-footer-gap) !important;
}
body.zumi-static-preview > #zumi-static-footer{
  margin-top:0 !important;
}

/* Versioned, user-supplied menu artwork. CSS renders these independently of
   navigation JS, so icons appear even on pages with script/cached menu issues. */
#zumi-site-header .zhv-menu > .zh-top-trigger > .zh-top-label::before,
#zumi-site-header .zhv-menu > .zh-mobile-row > .zhv-mobile-parent::before,
#zumi-site-header .zh-desktop-list > .zh-menu-item > .zh-top-link[href$="/blog/"]::before,
#zumi-site-header .zh-mobile-list--depth-0 > .zh-mobile-item > .zh-mobile-row > .zh-mobile-link[href$="/blog/"]::before{
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
#zumi-site-header .zhv-menu > .zh-top-trigger > .zh-top-label::before,
#zumi-site-header .zhv-menu > .zh-mobile-row > .zhv-mobile-parent::before{
  background-image:url("/assets/media/header-car-icon-approved-20261023.svg");
}
#zumi-site-header .zh-desktop-list > .zh-menu-item > .zh-top-link[href$="/blog/"]::before,
#zumi-site-header .zh-mobile-list--depth-0 > .zh-mobile-item > .zh-mobile-row > .zh-mobile-link[href$="/blog/"]::before{
  background-image:url("/assets/media/blog-icon-final-approved-20261023.svg");
}
/* Avoid duplicates where the JavaScript initializer also inserts an icon. */
#zumi-site-header .zhv-menu .zumi-restored-menu-icon,
#zumi-site-header a[href$="/blog/"] > .zumi-restored-menu-icon{
  display:none !important;
}

/* Shared header-to-first-content breathing room, matching the footer-spacing
   approach without changing page-specific hero or inner section geometry.
   Applies to every exported page and all five languages. */
:root { --zumi-header-content-gap: 18px; }
@media (max-width:760px) {
  :root { --zumi-header-content-gap: 14px; }
}
body.zumi-static-preview > #zumi-site-header + main {
  box-sizing: border-box;
  padding-top: var(--zumi-header-content-gap) !important;
}

/* All five languages: compact WhatsApp + Instagram footer contact boxes sit
   side-by-side on mobile, even when translated labels are longer. */
@media (max-width: 720px) {
  body.zumi-static-preview #zumi-static-footer .zf-quick-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100%;
  }
  body.zumi-static-preview #zumi-static-footer .zf-quick-links > .zf-quick {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box;
    padding: 7px 6px;
    gap: 6px;
  }
  body.zumi-static-preview #zumi-static-footer .zf-quick-links > .zf-quick > img {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }
  body.zumi-static-preview #zumi-static-footer .zf-quick-copy {
    min-width: 0;
    max-width: none !important;
    overflow-wrap: anywhere;
  }
  body.zumi-static-preview #zumi-static-footer .zf-quick-label {
    font-size: 8px;
    line-height: 1.3;
  }
  body.zumi-static-preview #zumi-static-footer .zf-quick-value {
    font-size: 9px;
    line-height: 1.3;
  }
}
@media (max-width: 360px) {
  body.zumi-static-preview #zumi-static-footer .zf-quick-links { gap: 5px !important; }
  body.zumi-static-preview #zumi-static-footer .zf-quick-links > .zf-quick { padding: 6px 4px; gap: 4px; }
}

/* Navigation icons are part of the first layout, not injected after paint.
   Icon dimensions are reserved even if SVG requests take longer to finish.
   Desktop header breakpoint follows the original Zumi header at 1080px. */
@media (min-width:1081px) {
  #zumi-site-header .zh-desktop-list > .zh-menu-item > .zh-top-link::before,
  #zumi-site-header .zh-desktop-list > .zh-menu-item > .zh-top-trigger > .zh-top-label::before {
    content:"";
    display:inline-block;
    width:18px;
    min-width:18px;
    height:18px;
    flex:0 0 18px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
  }
  #zumi-site-header .zh-desktop-list > .zh-menu-item > .zh-top-link:is([href="/"],[href="/de/"],[href="/ru/"],[href="/fr/"],[href="/it/"])::before {
    background-image:url("/assets/media/namibia-home-icon-b63d737b.svg");
  }
  #zumi-site-header .zh-desktop-list > .zh-menu-item.zhv-menu > .zh-top-trigger > .zh-top-label::before {
    background-image:url("/assets/media/header-car-icon-approved-20261023.svg");
  }
  #zumi-site-header .zh-desktop-list > .zh-menu-item > .zh-top-link:is([href$="/insurance/"],[href$="/versicherung/"],[href$="/страхование/"],[href$="/assurance/"],[href$="/assicurazione/"])::before {
    background-image:url("/assets/media/namibia-insurance-icon-eed86a8f.svg");
  }
  #zumi-site-header .zh-desktop-list > .zh-menu-item.zhhi-menu > .zh-top-trigger > .zh-top-label::before {
    background-image:url("/assets/wp-uploads/2026/09/help-icon.svg");
  }
  #zumi-site-header .zh-desktop-list > .zh-menu-item > .zh-top-link:is([href$="/blog/"],[href$="/блог/"])::before {
    background-image:url("/assets/media/blog-icon-final-approved-20261023.svg");
  }
  /* Compatibility with a previously cached JS file: its icon nodes must not
     appear alongside the reserved CSS icons, or displace desktop menu text. */
  #zumi-site-header .zh-desktop-list .zumi-restored-menu-icon {
    display:none !important;
  }
}


/* Desktop mega menus — consistent panels, clean accent and equal vehicle tiles.
   Shared by the EN/DE/RU/FR/IT static pages. */
@media (min-width: 1081px) {
  /* Draw the accent within the dropdown, below the active navigation tab,
     rather than allowing the tab to interrupt the panel border. */
  #zumi-site-header .zhv-panel-inner,
  #zumi-site-header .zhhi-panel-inner,
  #zumi-site-header .zh-panel-inner {
    position: relative !important;
    border-top: 0 !important;
    /* Extra breathing room without introducing a mouse-hover dead zone. */
    padding-top: 20px !important;
  }
  #zumi-site-header .zhv-panel-inner::before,
  #zumi-site-header .zhhi-panel-inner::before,
  #zumi-site-header .zh-panel-inner::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: #e85e2a;
    pointer-events: none;
  }
  /* Only the menu title and its adjacent subdued explanation remain. */
  #zumi-site-header .zhv-eyebrow,
  #zumi-site-header .zhhi-eyebrow {
    display: none !important;
  }
  #zumi-site-header .zhv-heading,
  #zumi-site-header .zhhi-heading {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 3px;
    margin-bottom: 12px !important;
  }
  #zumi-site-header .zhv-heading > div {
    display: contents;
  }
  #zumi-site-header .zhv-heading h2,
  #zumi-site-header .zhhi-heading h2 {
    flex: 0 0 auto;
    margin: 0 !important;
    line-height: 1.25;
  }
  #zumi-site-header .zhv-heading p,
  #zumi-site-header .zhhi-heading p {
    flex: 0 1 auto;
    margin: 0 !important;
    line-height: 1.4;
  }
  /* A 1:3 section split (not four outer grid tracks) makes the nested
     camping and standard image widths mathematically equal:
     both section paddings are 8px, borders 1px, outer gap 9px,
     and the standard cards use 18px internal gutters. */
  #zumi-site-header .zhv-cols {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) !important;
    gap: 9px !important;
    align-items: stretch !important;
  }
  #zumi-site-header .zhv-group--camping { grid-column: 1 !important; }
  #zumi-site-header .zhv-group--standard { grid-column: 2 !important; }
  #zumi-site-header .zhv-group {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    /* Keep each group's content inset equal. */
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Reserve an identical heading row so vehicle images also align vertically
     when the camping explanation wraps to an additional line. */
  #zumi-site-header .zhv-group-heading {
    min-height: 54px !important;
    align-items: center;
  }
  #zumi-site-header .zhv-group .zhv-items {
    display: grid !important;
    flex: 1 1 auto;
    gap: 7px !important;
    align-items: stretch;
  }
  #zumi-site-header .zhv-group--camping .zhv-items {
    grid-template-columns: minmax(0,1fr) !important;
  }
  #zumi-site-header .zhv-group--standard .zhv-items {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 18px !important;
  }
  #zumi-site-header .zhv-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 7px !important;
    box-sizing: border-box !important;
  }
  #zumi-site-header .zhv-card .zhv-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }
  #zumi-site-header .zhv-card .zhv-thumb img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
  }
  #zumi-site-header .zhv-card-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
}
/* Mobile navigation has its own compact card layout; do not stretch it. */

/* Stable header: logo anchors to the original left edge at a fixed 160px
   size. Keep CTAs full-size at the right; center navigation as ONE group.
   The fit script shifts only navigation left when the right-side controls
   need clearance, and swaps to the drawer only at real collisions. */
#zumi-site-header .zh-brand .zh-official-logo {
  width: 178px !important;
  max-width: 100% !important;
  max-height: 70px !important;
  height: auto;
}
@media (min-width: 1081px) {
  #zumi-site-header .zh-shell {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: min(calc(100% - 34px), 1480px) !important;
    gap: 0 !important;
  }
  #zumi-site-header .zh-brand {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: 178px !important;
    margin: 0 !important;
  }
  #zumi-site-header .zh-desktop-nav {
    position: absolute !important;
    left: var(--zh-nav-left, 0px) !important;
    top: 0 !important;
    width: max-content !important;
    max-width: none !important;
    justify-content: center !important;
    /* Transforms on nav change the coordinate system for fixed mega-menus.
       Keep nav untransformed; JS positions it with a pixel left offset. */
    transform: none !important;
    translate: none !important;
  }
  #zumi-site-header .zh-desktop-list {
    justify-content: center !important;
    width: max-content;
    gap: 2px !important;
  }
  #zumi-site-header .zh-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  #zumi-site-header .zh-top-link,
  #zumi-site-header .zh-top-trigger {
    padding-inline: 9px !important;
    font-size: 13.5px !important;
  }
  #zumi-site-header .zh-shell > .zh-actions > .zh-action {
    min-height: 42px !important;
    padding-inline: 13px !important;
    font-size: 12px !important;
  }
  #zumi-site-header .zh-shell > .zh-actions > .zh-lang .zh-lang-trigger {
    min-width: 66px !important;
    height: 42px !important;
    padding-inline: 9px !important;
    font-size: 11px !important;
  }
  /* Hide the desktop menu for the first layout measurement instead of
     visibly jumping its labels after the deferred navigation script loads. */
  #zumi-site-header:not(.zh-fit-ready) .zh-desktop-nav {
    visibility: hidden !important;
  }
  /* Keep logo at left and hamburger at right at the measured overflow point. */
  #zumi-site-header.zh-fit-drawer .zh-desktop-nav,
  #zumi-site-header.zh-fit-drawer .zh-shell > .zh-actions > .zh-action,
  #zumi-site-header.zh-fit-drawer .zh-shell > .zh-actions > .zh-lang {
    display: none !important;
  }
  #zumi-site-header.zh-fit-drawer .zh-menu-button {
    display: inline-flex !important;
  }
}
/* Russian Blog navigation uses an actual IMG node rather than relying
   exclusively on the historically unreliable pseudo-element. */
html[lang^="ru"] #zumi-site-header .zh-desktop-list .zh-top-link.zumi-has-native-blog-icon::before {
  content: none !important;
  display: none !important;
}
html[lang^="ru"] #zumi-site-header .zh-desktop-list .zumi-ru-blog-icon {
  display: block !important;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* A slightly larger permanent header logo across phone/tablet widths.
   No narrow-desktop shrink: the intrinsic-fit drawer handles collisions. */
@media (max-width: 1080px) {
  #zumi-site-header .zh-brand { min-width: 0 !important; }
  #zumi-site-header .zh-brand .zh-official-logo {
    width: 170px !important;
    max-width: min(170px, calc(100vw - 90px)) !important;
    max-height: 62px !important;
    height: auto !important;
  }
}


/* Mobile vehicle cards text-first and neutral accordion toggles — 2026-10-24
   Desktop vehicle cards keep their existing photo-first presentation. */
@media (max-width: 1080px) {
  #zumi-site-header .zhv-mobile-sub .zhv-mobile-card {
    flex-direction: row !important;
  }
  #zumi-site-header .zhv-mobile-sub .zhv-mobile-card > .zhv-card-text {
    order: 0 !important;
  }
  #zumi-site-header .zhv-mobile-sub .zhv-mobile-card > .zhv-new {
    order: 1 !important;
  }
  #zumi-site-header .zhv-mobile-sub .zhv-mobile-card > .zhv-thumb {
    order: 2 !important;
    margin-left: auto !important;
  }

  /* Expanded menu arrows rotate, but the buttons retain their neutral colour.
     Also avoid sticky orange :hover/:active states on touchscreens. */
  #zumi-site-header .zh-drawer .zh-mobile-toggle,
  #zumi-site-header .zh-drawer .zh-mobile-toggle:is(:hover, :focus, :active, [aria-expanded="true"]) {
    color: #42444a !important;
    background: #f7f7f8 !important;
    border-color: #e2e2e6 !important;
    box-shadow: none !important;
  }
  #zumi-site-header .zh-drawer .zh-mobile-toggle svg {
    transition: transform .22s ease-in-out !important;
  }
}