/**
 * custom-clone.css — Dump-clone CSS overrides
 *
 * Loaded last (after theme + WPBakery) so every rule here wins.
 * Sync to the live container with: make dump-clone-sync-overlay
 *
 * Selector tips:
 *   Landing page root:        .page-template-product-landing
 *   WPBakery rows:            .vc_row
 *   WPBakery columns:         .vc_column_inner, .wpb_column
 *   WPBakery text block:      .wpb_text_column
 *   WPBakery icon box:        .vc_icon_element
 *   Landing page hero:        .landing-page-hero
 */

/* ── Add your overrides below ─────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   JTL brand color utilities — used by the JTL Farbpalette dropdown
   Values: JTL-Light-Sand (#eeeee7), JTL-Tech-Blue (#2722f8), JTL-Dark-Blue (#0b1b45)
   ═══════════════════════════════════════════════════════════════════════════ */
.text-light-sand {
    color: #eeeee7 !important;
}

.bg-light-sand {
    background-color: #eeeee7 !important;
}

.border-light-sand {
    border-color: #eeeee7 !important;
}

.text-tech-blue {
    color: #2722f8 !important;
}

.bg-tech-blue {
    background-color: #2722f8 !important;
}

.border-tech-blue {
    border-color: #2722f8 !important;
}

.text-dark-blue {
    color: #0b1b45 !important;
}

.bg-dark-blue {
    background-color: #0b1b45 !important;
}

.border-dark-blue {
    border-color: #0b1b45 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product Landing page — light-sand background
   Affects: all pages using the "Product Landing" template (e.g. /de/ki/)
   Source: Figma node 188:9689 — JTL Light Sand (#eeeee7)
   ═══════════════════════════════════════════════════════════════════════════ */
body.page-template-product-landing {
    background-color: #eeeee7;
    /* JTL Light Sand */
}

/* #app is the theme's root wrapper and has background:white in the theme CSS.
   Make it transparent so the body sand color shows through. */
body.page-template-product-landing #app {
    background-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   product-management-section  (orange variant)
   Affects: DEALAVO, RETURNLESS, "Was uns unterscheidet", and the KI-intro row
   on /de/ki/ — all share .product-management-section.orange
   Source: Figma node 1:410 ("Text-Media-Desktop 1440")
   ═══════════════════════════════════════════════════════════════════════════ */

/* We comment this out for now. Doing Development in real overalyed plugins */

/* ═══════════════════════════════════════════════════════════════════════════
   #ki-portfolio — 1-column intro text section
   Figma: node 188:11196 "Text-1spaltig-Desktop 1440"
   Typography (color/size/weight) is now canonical in style.scss via the
   updated .product-management-section base rules using $jtl-tech-blue /
   $jtl-dark-blue tokens. Only page-specific layout overrides live here.
   NOTE: Kurdis Wide Bold is the Figma font for H2 — not yet loaded in this
   environment; Inter is used as fallback until the webfont is available.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override WPBakery inline #FFF5E9 !important — ID selector beats class selector */
section#ki-portfolio {
    background-color: #ffffff !important;
}

/* Center the column content and cap at 864px (layout, not in style.scss) */
section#ki-portfolio .col-lg-12 {
    max-width: 864px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Kurdis Wide Bold for H2 — only needed here until webfont is globally loaded */
section#ki-portfolio .product-management-section__title {
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   New pill header — Nav-new3
   Replaces old Bootstrap sticky bar.
   Source: Figma node 188:9744 (file eT0e02dgIxlyfEkrU8yQFC)

   Design tokens used:
     #0b1b45  = JTL Dark Blue  (text, chevrons)
     #eeeee7  = JTL Light Sand (pill border, divider)
     #2722f8  = JTL Tech Blue  (CTA button bg)
     #ffffff  = white           (pill bg)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 — Reset the old #header bar to be transparent / borderless */
#header {
    background: transparent !important;
    border-bottom: none !important;
    position: relative !important;
    /* overrides sticky when not scrolled */
}

/* 2 — Outer wrapper: floating pill offset from page edges */
.jtl-nav-wrapper {
    padding: 24px 42px;
    position: relative;
    z-index: 1030;
}

/* 2b — Anchor: relative container for the pill + absolutely-positioned megamenus */
.jtl-nav-pill-anchor {
    position: relative;
    width: 100%;
}

/* 3 — The pill itself */
.jtl-nav-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 2px solid #eeeee7;
    border-radius: 46px;
    padding: 16px 16px 16px 24px;
    width: 100%;
    box-sizing: border-box;
}

/* 4 — Logo */
.jtl-nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.jtl-nav-logo svg {
    display: block;
    height: 36px;
    width: auto;
}

/* 5 — Desktop right section (primary nav + divider + utils + CTA) */
.jtl-nav-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
    min-width: 0;
    justify-content: flex-end;
    overflow: hidden;
}

/* 6 — Primary nav list */
.jtl-nav-primary {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

/* 7 — Nav items + links */
.jtl-nav-item {
    position: relative;
}

.jtl-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    /* Inter Medium */
    line-height: 24px;
    letter-spacing: 0.32px;
    color: #0b1b45;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.jtl-nav-link:hover,
.jtl-nav-link:focus {
    color: #2722f8;
    text-decoration: none;
}

/* Chevron icon */
.jtl-nav-chevron {
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.jtl-nav-item.has-dropdown:hover .jtl-nav-chevron,
.jtl-nav-item.has-dropdown .jtl-nav-link[aria-expanded="true"] .jtl-nav-chevron {
    transform: rotate(180deg);
}

/* 8 — Simple (non-mega) dropdown menus: positioned absolutely, hidden by default */
.jtl-nav-item .dropdown-menu {
    position: absolute !important;
    display: none !important;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 2px solid #eeeee7;
    border-radius: 12px;
    z-index: 1040;
    min-width: 220px;
    padding: 8px 0;
}

.jtl-nav-item.has-dropdown:not(.dropdown-full):hover>.dropdown-menu,
.jtl-nav-item.has-dropdown:not(.dropdown-full):focus-within>.dropdown-menu {
    display: block !important;
}

/* 9 — Vertical divider */
.jtl-nav-divider {
    width: 1px;
    height: 19.5px;
    background: #eeeee7;
    flex-shrink: 0;
}

/* 10 — Utility link group */
.jtl-nav-utils {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

/* 11 — CTA button: "Demo Buchen" */
.jtl-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #2722f8;
    color: #ffffff !important;
    border-radius: 145px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    /* Inter Semi Bold */
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.jtl-nav-cta:hover,
.jtl-nav-cta:focus {
    background: #1d19d4;
    color: #ffffff !important;
    text-decoration: none;
}

/* 12 — Mobile hamburger (left, < 768px) */
.jtl-nav-mob-ham {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #0b1b45;
    flex-shrink: 0;
    order: 1;
}

/* 13 — Mobile search icon (right, < 768px) */
.jtl-nav-mob-search {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b1b45;
    line-height: 0;
    text-decoration: none;
    flex-shrink: 0;
    order: 3;
}

.jtl-nav-mob-search:hover {
    color: #2722f8;
}

/* 14 — Tablet controls (768px–1199px) */
.jtl-nav-tablet-controls {
    align-items: center;
    gap: 40px;
}

.jtl-nav-tab-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.jtl-nav-tab-ham {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* 15 — Mobile nav drawer body */
.jtl-nav-mobile-body {
    background: #ffffff;
    border-top: 1px solid #eeeee7;
    padding: 0;
}

/* 15 — Suppress old Bootstrap .fl-header */
#header .fl-header {
    display: none !important;
}

/* 16 — Tablet (768px–1199px): full pill border-radius, wrapper padding reduces */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .jtl-nav-wrapper {
        padding: 12px 16px;
    }

    /* Keep full 46px border-radius (same as desktop) */
    .jtl-nav-pill {
        padding: 16px 16px 16px 24px;
    }

    .jtl-nav-logo svg {
        height: 34px;
        width: auto;
    }
}

/* 17 — Mobile (< 768px): 24px border-radius, centered logo */
@media (max-width: 767.98px) {
    .jtl-nav-wrapper {
        padding: 8px 12px;
    }

    .jtl-nav-pill {
        border-radius: 24px;
        padding: 15px 24px;
    }

    /* Center the logo between hamburger and search */
    .jtl-nav-logo {
        flex: 1;
        justify-content: center;
        order: 2;
    }

    .jtl-nav-logo svg {
        height: 18px;
        width: auto;
    }
}

/* 18 — Megamenu open state (desktop only, ≥ 1200px) */
@media (min-width: 1200px) {
    .jtl-nav-pill.jtl-nav-pill--open {
        border-radius: 46px 46px 0 0;
        border-bottom-color: transparent;
    }
}

/* 16 — Megamenu panel — absolutely positioned below the pill, no layout shift */
.jtl-megamenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1035;
    background: #ffffff;
    border: 2px solid #eeeee7;
    border-top: none;
    border-radius: 0 0 46px 46px;
    padding: 24px;
    box-sizing: border-box;
    /* pull up by 2px so the open-pill's transparent bottom-border + this panel's top form a seamless join */
    margin-top: -2px;
}

.jtl-megamenu[aria-hidden="false"] {
    display: block;
}

/* Column grid */
.jtl-megamenu-cols {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.jtl-megamenu-col {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Category heading — Inter Bold 16px */
.jtl-megamenu-heading {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: #0b1b45;
    padding: 6px 12px;
    margin: 0 0 2px;
}

/* Sub-items — Inter Medium 16px */
.jtl-megamenu-item {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: #0b1b45;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 12px;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.jtl-megamenu-item:hover,
.jtl-megamenu-item:focus {
    background: #f5f5f0;
    color: #0b1b45;
    text-decoration: none;
}