/* =============================================================================
   UA26 HEADER + HERO
   Loaded by tpl/blocks/header-ua26.php, after every template stylesheet.

   The header markup is new (.uah-*), so none of the old #jm-top-bar /
   #jm-logo-bar / .ho rules reach it. What still reaches it are the rules on
   the module markup inside it - the VirtueMart cart (.vmCartModule,
   .show_cart.bottom, .total_products), the menu (ul.nav.menu) and the
   DJ-MegaMenu button - so those are reset here under .uah. Some of the old
   rules carry !important or an id, which is why a few resets need it too.

   Breakpoint: 768px, the same value DJ-MegaMenu uses (data-trigger="768")
   to swap the desktop menu for the off-canvas button.
   ============================================================================= */

.uah {
    --uah-ink: #14161a;
    --uah-orange: #ef7d00;
    --uah-red: #d2232a;
    --uah-dark: rgba(8, 10, 22, .92);

    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2000;
    box-sizing: border-box;
    padding: 14px 24px;
    direction: rtl;
    font-family: 'Heebo', Arial, sans-serif;
    transition: background-color .25s ease, padding .25s ease, box-shadow .25s ease;
}

.uah *,
.uah *::before,
.uah *::after {
    box-sizing: border-box;
}

.uah.uah--scrolled {
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--uah-dark);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

/* inner pages have no dark slider under the header - the logo's white
   lettering needs the dark background from the start */
body:not(.home) .uah {
    background: var(--uah-dark);
}

.uah-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1500px;
    margin: 0 auto;
}

/* --- logo ------------------------------------------------------------------ */
.uah .uah-logo {
    flex: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.uah .uah-logo a {
    display: block;
}

.uah .uah-logo img {
    display: block;
    float: none;
    width: 140px;
    max-width: none;
    height: auto;
    margin: 0;
}

/* --- the white bar: menu + cart --------------------------------------------- */
.uah-bar {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 48px;
    padding: 4px 22px 4px 8px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.uah .jm-module-raw {
    position: static;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: start;
}

/* --- menu ------------------------------------------------------------------- */
.uah .uah-menu {
    flex: 1 1 auto;
    min-width: 0;
}

.uah .uah-menu ul.nav.menu {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    float: none;
    width: auto;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.uah .uah-menu ul.nav.menu > li {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.uah .uah-menu ul.nav.menu > li > a {
    display: block;
    margin: 0;
    padding: 4px 14px;
    border: 0;
    border-inline-start: 1px solid #d6d6db;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--uah-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
}

.uah .uah-menu ul.nav.menu > li:first-child > a {
    border-inline-start: 0;
}

.uah .uah-menu ul.nav.menu > li > a:hover,
.uah .uah-menu ul.nav.menu > li > a:focus {
    color: var(--uah-orange);
}

/* the catalogue item is a dark pill */
.uah .uah-menu ul.nav.menu > li.item-1199 > a {
    margin-inline-start: 8px;
    padding: 3px 14px;
    border: 0;
    border-radius: 999px;
    background: #000;
    color: #fff;
}

.uah .uah-menu ul.nav.menu > li.item-1199 > a:hover,
.uah .uah-menu ul.nav.menu > li.item-1199 > a:focus {
    background: var(--uah-orange);
    color: #fff;
}

/* --- cart ------------------------------------------------------------------- */
.uah .uah-cart {
    position: relative;
    flex: none;
}

/* custom.css hides .newcart at <=768 with !important (it was the desktop cart) */
.uah .uah-cart .jm-module-raw.newcart {
    display: block !important;
}

.uah .uah-cart .show_cart.bottom {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--uah-ink);
    text-align: start;
    cursor: pointer;
}

.uah .uah-cart .show_cart.bottom .vmCartModule {
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
}

.uah .uah-cart .show_cart.bottom .total_products {
    position: static;
    order: 2;
    float: none;
    width: auto;
    min-width: 24px;
    height: 24px;
    margin: 0;
    padding: 0 6px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}

.uah .uah-cart .show_cart.bottom a.details {
    display: flex;
    align-items: center;
    gap: 6px;
    float: none !important;
    margin: 0;
    padding: 6px 4px;
    background: transparent;
    color: #4b5563;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}

.uah .uah-cart .show_cart.bottom a.details::before {
    content: "";
    display: block;
    flex: none;
    width: 26px;
    height: 23px;
    padding: 0;
    background: url(/images/shopping-cart-solid.svg) no-repeat center / contain;
}

/* the drop-down the module opens on click (the module script toggles .open) */
.uah .uah-cart div#vmCartModule {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    right: auto;
    bottom: auto;
    left: 0;
    z-index: 10;
    width: 270px;
    margin: 0;
    padding: 16px;
    border-radius: 14px;
    background: #fff !important;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
    color: var(--uah-ink);
    text-align: start;
    transition: none;
}

.uah .uah-cart div#vmCartModule.open {
    display: block;
}

.uah .uah-cart div#vmCartModule .total_products {
    display: none;
}

.uah .uah-cart div#vmCartModule span.close {
    position: absolute;
    top: 8px;
    left: 12px;
    color: #6b7280;
    cursor: pointer;
}

/* --- join button (module in the header-cta position) ----------------------- */
.uah .uah-cta {
    flex: none;
    line-height: 0;
}

/* the module keeps its "des" suffix, which the template hides on phones */
.uah .uah-cta .des,
.uah .uah-cta .jm-module-raw {
    display: block !important;
}

.uah .uah-cta p {
    margin: 0;
}

.uah .uah-cta img {
    display: block;
    width: auto;
    max-width: none;
    height: 47px;
}

/* --- mobile menu button (DJ-MegaMenu moves it into logo-bar2) -------------- */
.uah .uah-burger {
    display: none;
    flex: none;
}

.uah-djmenu {
    display: none;
}

/* =============================================================================
   HERO
   ============================================================================= */

/* The join button is shown in the header (a copy of the module in the
   header-cta position). The original stays in .container1 for visitors
   without the preview - hide it here. */
.container1 .moduletablelink_to_pac {
    display: none !important;
}

/* one slider at every width: the wide one */
.jm-module.slide_mobile {
    display: none !important;
}

.jm-module.slide_desk {
    display: block !important;
}

/* decorations over the slider edge (Custom HTML module "ofno_12"):
   1 = "12 years" badge, 2 = motorcycle, 3 = spinning text around the badge.
   Sizes follow the viewport, offsets are fractions of that size, so the
   pieces keep their places relative to each other at every width. */
/* no z-index here: a stacking context on the wrapper would put the images
   under the slider, which comes earlier in the page */
.moduletableofno_12 {
    position: relative;
}

.customofno_12 {
    --uah-badge: clamp(120px, 16vw, 300px);
    --uah-bike: clamp(120px, 16vw, 300px);
}

.customofno_12 p {
    margin: 0;
}

.customofno_12 img {
    position: absolute;
    max-width: none;
    height: auto;
    margin: 0;
}

.customofno_12 img:nth-child(1) {
    top: calc(var(--uah-badge) * -0.85);
    right: 12px;
    left: auto;
    width: var(--uah-badge);
    z-index: 99;
}

.customofno_12 img:nth-child(2) {
    top: calc(var(--uah-bike) * -1.2);
    right: auto;
    left: 0;
    width: var(--uah-bike);
    z-index: 99;
}

.customofno_12 img:nth-child(3) {
    top: calc(var(--uah-badge) * -0.65);
    right: calc(12px + var(--uah-badge) * 0.117);
    left: auto;
    width: calc(var(--uah-badge) * 0.693);
    z-index: 100;
    animation: uah-spin 8s linear infinite;
}

@keyframes uah-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .customofno_12 img:nth-child(3) {
        animation: none;
    }
}

/* "scroll down" circle: really centred (it used margin-right:50%) */
div#dcroll-section {
    left: 50%;
    margin-right: 0;
    transform: translateX(-50%) rotate(180deg);
}

/* =============================================================================
   PACKAGES MODULE (mod_pacege)
   The headline leads straight into the packages; the moving tapes go below
   them. The module stylesheet loads after this file, hence "body" in front.
   ============================================================================= */
body .pacege .pacege-hero {
    min-height: 0;
    padding-bottom: 2rem;
}

/* the headline is live text now (hero-title.png renamed on the server);
   sized to read as large as the image did */
body .pacege .pacege-hero__line1 {
    font-size: clamp(1.4rem, 3.2vw, 2.5rem);
    font-weight: 500;
}

body .pacege .pacege-hero__line2 {
    font-size: clamp(2.1rem, 6.2vw, 4rem);
}

body .pacege .pacege-stage {
    display: flex;
    flex-direction: column;
}

/* custom_ua26.css gives each tape item a second animation (moveText) that
   fights the module's own scroll - off */
body .pacege .pacege-ticker__track span {
    animation: none;
}

/* only the tapes move; everything else in the stage keeps its order */
body .pacege .pacege-ticker-zone {
    order: 1;
    height: 120px;
}

body .pacege .pacege-ticker--yellow {
    top: 24px;
}

body .pacege .pacege-ticker--blue {
    top: 48px;
}

/* =============================================================================
   NARROW DESKTOP / TABLET LANDSCAPE
   ============================================================================= */
@media (max-width: 1100px) {
    .uah {
        padding-right: 14px;
        padding-left: 14px;
    }

    .uah-inner {
        gap: 10px;
    }

    .uah .uah-logo img {
        width: 90px;
    }

    .uah-bar {
        gap: 6px;
        padding-right: 10px;
    }

    .uah .uah-menu ul.nav.menu > li > a {
        padding: 4px 9px;
        font-size: 14px;
    }

    .uah .uah-menu ul.nav.menu > li.item-1199 > a {
        margin-inline-start: 4px;
        padding: 3px 10px;
    }

    .uah .uah-cart .show_cart.bottom a.details {
        font-size: 0;
    }

    .uah .uah-cta img {
        height: 36px;
    }
}

@media (max-width: 900px) and (min-width: 769px) {
    .uah .uah-menu ul.nav.menu > li > a {
        padding: 4px 6px;
        font-size: 13px;
    }

    .uah .uah-cta img {
        height: 30px;
    }
}

/* =============================================================================
   PHONE / TABLET PORTRAIT
   ============================================================================= */
@media (max-width: 768px) {
    .uah {
        padding: 8px 12px;
        background: var(--uah-dark);
    }

    .uah.uah--scrolled {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .uah-inner {
        gap: 10px;
    }

    .uah .uah-logo img {
        width: 68px;
    }

    /* the bar keeps only the cart */
    .uah-bar {
        flex: 1 1 auto;
        justify-content: flex-end;
        min-height: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .uah .uah-menu {
        display: none;
    }

    .uah .uah-cart .show_cart.bottom a.details {
        padding: 6px;
        color: #fff;
        font-size: 0;
    }

    .uah .uah-cart .show_cart.bottom .total_products {
        background: #fff;
        color: #000;
    }

    .uah .uah-cart div#vmCartModule {
        position: fixed;
        top: 64px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    .uah .uah-cta img {
        height: 34px;
    }

    .uah .uah-burger {
        display: block;
    }

    .uah .uah-burger span.dj-mobile-open-btn {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        background: transparent;
        color: #fff !important;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }

    .uah .uah-burger i.fa.fa-bars {
        position: static;
        color: #fff;
    }

    /* the header is fixed and solid here, so the slider starts below it */
    body.home header#jm-header-top {
        padding-top: 58px;
    }

    /* decorations: not on phones */
    .moduletableofno_12 {
        display: none;
    }

    div#dcroll-section {
        display: none !important;
    }

    body .pacege .pacege-ticker-zone {
        height: 100px;
    }

    body .pacege .pacege-ticker--yellow {
        top: 20px;
    }

    body .pacege .pacege-ticker--blue {
        top: 40px;
    }
}

@media (max-width: 400px) {
    .uah .uah-logo img {
        width: 58px;
    }

    .uah .uah-cta img {
        height: 30px;
    }
}