/*
Theme Name: poket child
Tags:  custom-menu, editor-style, featured-images
Template: poket
Version: 1.0.0
*/

/*---------------------------------
      write your css from here
------------------------------------*/


/* ============================================================
   Header Top: Sticky Transition
============================================================ */
.poket-header-top {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.poket-top-sticky {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


/* ============================================================
   Mobile: Header Top immer anzeigen (Parent blendet bei < 767px aus)
============================================================ */
@media (max-width: 991px) {
    .poket-header-top {
        display: block !important;
    }
}


/* ============================================================
   Mobile Bar: Hintergrundfarbe (transparent → sichtbar)
   Passe den Farbwert an deine Theme-Farbe an.
============================================================ */
.mobile_logo_area {
    background-color: #fff; /* ← deine Menü-Hintergrundfarbe hier eintragen */
    position: relative; /* Basis für z-index */
    z-index: 100;
}

.poket-mobile-sticky {
    transition: box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    background-color: #fff; /* ← gleiche Farbe wie oben */
}


/* ============================================================
   Mobile Sidebar-Menü: über alle sticky Elemente legen
   .mobile_menu_inner ist das rechte Slide-in Panel
   .mobile_overlay ist der dunkle Hintergrund-Layer
============================================================ */
@media (max-width: 991px) {

    /* Slide-in Panel: höchster z-index, beginnt immer bei top:0 */
    .mobile_menu_inner {
        z-index: 99999 !important; /* höher als sticky Top (9999) und Mobile-Bar (9998) */
        top: 0 !important; /* immer ab Viewport-Oberkante, nicht ab sticky Bar */
        height: 100vh !important; /* volle Viewporthöhe */
        overflow-y: auto; /* scrollbar wenn Menü lang ist */
    }

    /* Overlay ebenfalls über den sticky Bars */
    .mobile_overlay {
        z-index: 99998 !important;
        top: 0 !important;
    }
}

/* ============================================================
   Header Logo / Nav Spaltenbreite: 25/75 → 33/66 Prozent
   Betrifft alle Header-Styles (witr_h_h1 bis witr_h_h20+)
   die .col-md-3 / .col-md-9 in .poket_nav_area oder
   .trp_nav_area verwenden.
============================================================ */

@media (min-width: 768px) {

    .poket_nav_area .logo-left > [class*="col-md-3"],
    .poket_nav_area .logo-right > [class*="col-md-3"],
    .trp_nav_area .logo-left > [class*="col-md-3"],
    .trp_nav_area .logo-right > [class*="col-md-3"] {
        -ms-flex: 0 0 33.3333%;
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .poket_nav_area .logo-left > [class*="col-md-9"],
    .poket_nav_area .logo-right > [class*="col-md-9"],
    .trp_nav_area .logo-left > [class*="col-md-9"],
    .trp_nav_area .logo-right > [class*="col-md-9"] {
        -ms-flex: 0 0 66.6666%;
        flex: 0 0 66.6666%;
        max-width: 66.6666%;
    }
}

@media (min-width: 992px) {

    .poket_nav_area .logo-left > [class*="col-lg-3"],
    .poket_nav_area .logo-right > [class*="col-lg-3"],
    .trp_nav_area .logo-left > [class*="col-lg-3"],
    .trp_nav_area .logo-right > [class*="col-lg-3"] {
        -ms-flex: 0 0 33.3333%;
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .poket_nav_area .logo-left > [class*="col-lg-9"],
    .poket_nav_area .logo-right > [class*="col-lg-9"],
    .trp_nav_area .logo-left > [class*="col-lg-9"],
    .trp_nav_area .logo-right > [class*="col-lg-9"] {
        -ms-flex: 0 0 66.6666%;
        flex: 0 0 66.6666%;
        max-width: 66.6666%;
    }
}