/* ============================================================
   Cablesson 2026 - header, navigation, off-canvas, search
   Layers on top of modern-2026.css. CSS only.
   ============================================================ */

/* ---------- Bar ---------- */
.gbtr_header_wrapper {
    font-family: var(--cb-font);
    box-shadow: 0 1px 0 var(--cb-line), 0 6px 20px -14px rgba(11,18,32,.25);
}

@media (min-width: 960px) {
    .content_header {
        width: 100% !important; max-width: 1216px !important; margin: 0 auto !important; padding: 14px 24px !important;
        box-sizing: border-box; align-items: center;
    }
    .gbtr_logo_wrapper_default { padding: 0 24px 0 0 !important; flex: 0 0 auto; }
    .gbtr_logo img { max-height: 44px; width: auto; display: block; }
    .gbtr_menu_wrapper_default { flex: 1 1 auto; justify-content: flex-end; padding: 0 !important; align-items: center; }
    .menus_wrapper { display: flex !important; align-items: center; gap: 20px; padding: 0 !important; }
    .gbtr_first_menu, .gbtr_second_menu { float: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; }
    .gbtr_second_menu { padding-left: 20px !important; border-left: 1px solid var(--cb-line) !important; }
    .gbtr_first_menu nav, .gbtr_second_menu nav { border: 0 !important; }
    .gbtr_first_menu .sf-menu, .gbtr_second_menu ul { display: flex !important; align-items: center; gap: 2px; margin: 0; padding: 0; }
    .gbtr_first_menu .sf-menu > li, .gbtr_second_menu li { float: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; }
    .gbtr_second_menu li::before, .gbtr_second_menu li::after { display: none !important; }
    .gbtr_second_menu ul { gap: 0 !important; }
}
@media (min-width: 960px) and (max-width: 1100px) {
    .menus_wrapper { gap: 10px; }
    .gbtr_second_menu { padding-left: 10px !important; }
    .gbtr_first_menu .sf-menu > li > a, .gbtr_menu_wrapper_default .sf-menu > li > a { padding: 8px 10px !important; letter-spacing: .04em; }
}

/* ---------- Primary + secondary links ---------- */
.gbtr_first_menu .sf-menu > li > a,
.gbtr_menu_wrapper_default .sf-menu > li > a {
    display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box;
    font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding: 8px 14px !important; line-height: 1.2; transition: background-color .15s, color .15s;
}
.gbtr_first_menu .sf-menu > li > a:hover,
.gbtr_first_menu .sf-menu > li.sfHover > a,
.gbtr_first_menu .sf-menu > li:hover > a { background-color: var(--cb-bg-soft); color: var(--cb-brand-dark); }
.gbtr_first_menu .sf-menu > li.current-menu-item > a,
.gbtr_first_menu .sf-menu > li.current-menu-ancestor > a,
.gbtr_first_menu .sf-menu > li.current-menu-parent > a { background-color: rgba(10,143,232,.1); color: var(--cb-brand-dark); }
.gbtr_second_menu li a {
    display: inline-block; padding: 8px 10px !important; font-size: 13px; font-weight: 500;
    color: var(--cb-ink-2); letter-spacing: 0; text-transform: none; border-radius: 999px; border: 0 !important;
}
.gbtr_second_menu li a:hover { color: var(--cb-brand-dark); background-color: var(--cb-bg-soft); }
.gbtr_first_menu a:focus-visible, .gbtr_second_menu a:focus-visible,
.gbtr_logo:focus-visible, .tools_button:focus-visible, .offcanvas-left-close:focus-visible,
#offCanvasLeft a:focus-visible, #offCanvasTop a:focus-visible, #offCanvasTop button:focus-visible {
    outline: 3px solid var(--cb-brand); outline-offset: 2px; border-radius: 999px;
}

/* ---------- Chevrons (replace theme background-image arrows) ---------- */
.gbtr_header_wrapper .main-navigation li.menu-item-has-children > a { background-image: none !important; position: relative; }
.gbtr_first_menu .sf-menu > li.menu-item-has-children > a { padding-right: 12px !important; }
.gbtr_first_menu .sf-menu > li.menu-item-has-children { margin-right: 0 !important; }
.gbtr_first_menu .sf-menu > li.menu-item-has-children > a::after {
    content: ""; width: 6px; height: 6px; margin: -3px 0 0 9px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg); opacity: .7; transition: transform .2s; flex: 0 0 auto;
}
.gbtr_first_menu .sf-menu > li.menu-item-has-children:hover > a::after { transform: rotate(225deg); margin-top: 3px; }
.gbtr_first_menu .sf-menu ul.sub-menu li.menu-item-has-children > a::after {
    content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
    border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: .55;
}

/* ---------- Dropdowns ---------- */
.gbtr_first_menu .sf-menu li { position: relative; }
.gbtr_first_menu .sf-menu ul.sub-menu {
    background: #fff !important; border: 1px solid var(--cb-line) !important;
    border-radius: var(--cb-radius); box-shadow: var(--cb-shadow-hover);
    padding: 8px !important; overflow: visible !important; min-width: 240px; width: max-content; max-width: 320px;
    box-sizing: border-box; margin: 0; z-index: 950;
}
/* second level (flyout) can be long: scroll inside the viewport */
.gbtr_first_menu .sf-menu ul.sub-menu ul.sub-menu {
    max-height: calc(100vh - 130px); overflow-y: auto !important; overscroll-behavior: contain;
    scrollbar-width: thin; margin-left: 4px;
}
.gbtr_first_menu .sf-menu ul.sub-menu li { float: none; width: auto !important; border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
.gbtr_first_menu .sf-menu ul.sub-menu a {
    display: block; padding: 9px 28px 9px 12px !important; font-size: 14px; font-weight: 500; line-height: 1.35;
    color: var(--cb-ink) !important; letter-spacing: 0; text-transform: none; border-radius: 8px;
    white-space: normal; min-height: 0; background-color: transparent;
}
.gbtr_first_menu .sf-menu ul.sub-menu a:hover,
.gbtr_first_menu .sf-menu ul.sub-menu li.sfHover > a,
.gbtr_first_menu .sf-menu ul.sub-menu li:hover > a { background-color: var(--cb-bg-soft) !important; color: var(--cb-brand-dark) !important; }
.gbtr_first_menu .sf-menu ul.sub-menu li > a:focus-visible { outline-offset: -2px; border-radius: 8px; }

/* ---------- Mobile bar ---------- */
@media (max-width: 959px) {
    .content_header { padding: 0 8px !important; height: 60px; align-items: center; box-sizing: border-box; }
    .mobile_menu_wrapper, .mobile_tools { width: 52px !important; flex: 0 0 52px; padding: 0 !important; }
    .mobile_menu_wrapper ul, .mobile_tools ul { margin: 0; padding: 0; list-style: none; display: flex; height: 60px; align-items: center; }
    .mobile_tools ul { justify-content: flex-end; }
    .mobile_menu_wrapper li, .mobile_tools li { margin: 0 !important; padding: 0 !important; list-style: none; }
    #triggerButtonLeft, #triggerButtonTop {
        display: flex !important; align-items: center; justify-content: center;
        width: 44px; min-width: 44px; height: 44px !important; line-height: 44px; border-radius: 999px;
        transition: background-color .15s;
    }
    #triggerButtonLeft:hover, #triggerButtonTop:hover, #triggerButtonLeft:active, #triggerButtonTop:active { background-color: var(--cb-bg-soft); }
    .gbtr_logo_wrapper_default { flex: 1 1 auto; padding: 0 !important; text-align: center; }
    .gbtr_alt_logo { display: flex !important; height: 60px; align-items: center; justify-content: center; }
    .gbtr_alt_logo img { max-height: 38px; width: auto; }
}

/* ---------- Off-canvas menu ---------- */
#offCanvasLeft {
    background: #fff !important; box-shadow: 8px 0 40px -12px rgba(11,18,32,.35);
    padding: 0 0 32px !important; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#offCanvasLeft .menu-close {
    position: sticky !important; top: 0; right: auto; left: auto; display: flex; justify-content: flex-end;
    height: 60px; width: auto !important; padding: 0 12px; background: #fff; z-index: 3; border-bottom: 1px solid var(--cb-line);
    box-sizing: border-box; align-items: center;
}
#offCanvasLeft .menu-close::before { content: "Menu"; margin-right: auto; font-weight: 800; font-size: 16px; letter-spacing: -.02em; color: var(--cb-ink); padding-left: 8px; }
#offCanvasLeft .offcanvas-left-close {
    position: static !important; width: 44px; height: 44px; border-radius: 999px; background: var(--cb-bg-soft) !important;
    color: var(--cb-ink) !important; font-size: 22px; line-height: 44px; padding: 0 !important; box-shadow: none; transform: none; display: flex; align-items: center; justify-content: center;
}
#offCanvasLeft .offcanvas-left-close:hover { background: var(--cb-line) !important; transform: none; box-shadow: none; }
#offCanvasLeft .offcanvas_content { padding: 8px 16px 0 !important; }
#offCanvasLeft ul, #offCanvasLeft li { list-style: none; margin: 0; padding: 0; }
#offCanvasLeft .mobile-main-navigation .sf-menu > li > a {
    display: flex !important; align-items: center; min-height: 48px; padding: 0 12px !important; box-sizing: border-box;
    font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cb-ink) !important; border-radius: 10px;
}
#offCanvasLeft .mobile-main-navigation .sf-menu > li > a:hover,
#offCanvasLeft li.current-menu-item > a { background-color: var(--cb-bg-soft); color: var(--cb-brand-dark) !important; }
#offCanvasLeft li { position: relative; }
#offCanvasLeft .more {
    position: absolute !important; top: 0; right: 0; width: 48px !important; height: 48px !important; margin: 0 !important;
    display: flex !important; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px;
}
#offCanvasLeft .more:hover { background-color: var(--cb-bg-soft); }
/* neutralise the desktop dropdown card styling inside the drawer */
#offCanvasLeft .sub-menu, #offCanvasLeft ul.sub-menu {
    border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent !important;
    padding: 0 0 6px 12px !important; margin: 0 !important; overflow: visible; position: static; width: auto; min-width: 0; max-width: none;
}
#offCanvasLeft .sub-menu a {
    display: flex !important; align-items: center; min-height: 44px; padding: 8px 12px !important; box-sizing: border-box;
    font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--cb-ink-2) !important; text-transform: none; letter-spacing: 0; border-radius: 10px;
}
#offCanvasLeft .sub-menu a:hover { background-color: var(--cb-bg-soft); color: var(--cb-brand-dark) !important; }
#offCanvasLeft .sub-menu > li.menu-item-has-children > a {
    min-height: 40px; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--cb-brand-dark) !important;
}
#offCanvasLeft .sub-menu .sub-menu { padding-left: 4px !important; border-left: 2px solid var(--cb-line) !important; margin-left: 12px !important; }
#offCanvasLeft .sub-menu .sub-menu a { color: var(--cb-ink) !important; font-size: 14px; }
#offCanvasLeft .sub-menu .more { height: 40px !important; }
/* secondary / extra menus in drawer */
#offCanvasLeft nav:not(.mobile-main-navigation) { border-top: 1px solid var(--cb-line); margin-top: 12px; padding-top: 8px; }
#offCanvasLeft nav:not(.mobile-main-navigation) a {
    display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 500;
    color: var(--cb-ink-2) !important; border-radius: 10px;
}
#offCanvasLeft nav:not(.mobile-main-navigation) a:hover { background-color: var(--cb-bg-soft); color: var(--cb-brand-dark) !important; }

/* overlay */
.c-offcanvas-bg, .js-offcanvas-overlay { background: rgba(11,18,32,.5) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* ---------- Search drawer ---------- */
#offCanvasTop { background: #fff !important; box-shadow: 0 20px 50px -20px rgba(11,18,32,.4); border-radius: 0 0 var(--cb-radius) var(--cb-radius); }
#offCanvasTop h3, #offCanvasTop .search_title, #offCanvasTop .offcanvas_content > *:first-child {
    font-weight: 800; letter-spacing: -.03em; color: var(--cb-ink);
}
#offCanvasTop input[type=text], #offCanvasTop input[type=search] {
    width: 100%; box-sizing: border-box; height: 52px; padding: 0 52px 0 18px !important; font-size: 16px !important;
    border: 1px solid var(--cb-line) !important; border-radius: 999px !important; background: var(--cb-bg-soft) !important;
}
#offCanvasTop input[type=text]:focus, #offCanvasTop input[type=search]:focus { background: #fff !important; border-color: var(--cb-brand) !important; }
#offCanvasTop button, #offCanvasTop input[type=submit] { background: transparent; color: var(--cb-ink) !important; box-shadow: none; transform: none; }
#offCanvasTop .menu-close button, #offCanvasTop .offcanvas-top-close {
    width: 44px; height: 44px; border-radius: 999px; background: var(--cb-bg-soft); padding: 0; font-size: 22px; display: flex; align-items: center; justify-content: center;
}

/* ---------- Cookie notice bar (generic selectors, plugin-agnostic) ---------- */
#cookie-notice, .cookie-notice-container, #cookie-law-info-bar, #cookieNotice, .cc-window, #catapult-cookie-bar, .cli-bar-container, #moove_gdpr_cookie_info_bar {
    font-family: var(--cb-font) !important; font-size: 14px; line-height: 1.5; color: var(--cb-ink) !important;
    background: rgba(255,255,255,.96) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--cb-line) !important; border-radius: var(--cb-radius) !important; box-shadow: var(--cb-shadow-hover) !important;
}
#cookie-notice .cn-button, .cc-btn, #cookie-law-info-bar a.cli_action_button, #cookie-law-info-bar .medium.cli-plugin-button {
    min-height: 44px; border-radius: 999px !important; background: var(--cb-ink) !important; color: #fff !important; font-weight: 600; padding: 10px 22px; border: 0 !important;
}
@media (max-width: 767px) {
    #cookie-notice, .cookie-notice-container, .cc-window { left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; max-width: none !important; }
}

/* DE | EN switcher bar */
.cb-langbar { display: flex; justify-content: flex-end; gap: 4px; padding: 6px 16px; background: var(--cb-bg-soft, #f6f8fb); border-bottom: 1px solid var(--cb-line, #e5e9f0); font-size: 13px; font-weight: 700; }
.cb-langbar a { padding: 4px 12px; border-radius: 999px; color: var(--cb-ink, #0b1220); text-decoration: none; min-height: 24px; }
.cb-langbar a.is-active { background: var(--cb-ink, #0b1220); color: #fff; }
.cb-langbar a:focus-visible { outline: 3px solid var(--cb-brand, #0a8fe8); }