/* ==========================================================================
   KwK Mobile Header — Overrides (v2, 2026-06-26)
   --------------------------------------------------------------------------
   Loaded AFTER dnc-style (style.css). style.css ships with max-age 1 year and
   the server strips ?ver= (style_loader_src), so cache-busting is done via the
   FILENAME version (vN) — bump filename + functions.php ref on any change.

   Scope: mobile header/drawer only (<=900px). Does NOT touch the bottom-bar,
   footer, or desktop mega-menu (kwk-megamenu.v2.css).

   Covers the 2026-06-26 mobile header rework:
     A) "Menü" pill framed as an obvious button (border + fill, >=44px)
     B) Drawer tab bar wraps (flex-wrap) instead of horizontal scroll
     C) X close button styling in the drawer header (>=44x44)
     D) Touch-target fixes: search icon 44x44, clear >=40, suggest >=44,
        course-link gap 8px
   v2 (JK review in iOS simulator) adds:
     E) Drawer panel heading -> WHITE (was copper gradient via background-clip:
        text). One shared #mobileMenuTitle element, JS only swaps its text, so
        this fix applies to ALL tab panels (Kurse / Events / Kontakt).
     F) Inactive tabs get a tap affordance (subtle border + fill + brighter
        text) while the active tab stays clearly dominant (copper accent).
   Behaviour (slot-machine animation, open-state X, toggles) unchanged.
   ========================================================================== */

@media (max-width: 900px) {

  /* ----- A) "Menü" pill as a clearly tappable button ---------------------
     The pill carries .kwk-mobile-switcher-pill + .kwk-mobile-switcher-menu.
     Give it a permanent visible frame + subtle fill so it reads as a button.
     Height >=44px via padding (9px 18px around the 22px label/22px slot).   */
  .kwk-mobile-switcher .kwk-mobile-switcher-menu {
    padding: 9px 18px;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.07);
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  .kwk-mobile-switcher .kwk-mobile-switcher-menu:active {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.3);
  }
  /* Open-state: warm-copper accent so the button reads as "active/open". */
  .kwk-mobile-switcher.menu-active .kwk-mobile-switcher-menu {
    border-color: var(--kwk-gold-light, #8D5A3B);
    background: var(--kwk-gold-glow, rgba(107,66,44,0.15));
  }

  /* ----- D-H1) Search/loupe icon button 38x38 -> 44x44 -------------------
     Keep the SVG at 20px; grow the hit area via the wrap + inner button.
     The wrap expands to 180px when search opens — only touch the closed size. */
  .kwk-mobile-bot-wrap {
    height: 44px;
    width: 44px;
  }
  .kwk-mobile-bot {
    width: 44px;
    height: 44px;
  }
}

/* ----- B) Drawer tab bar: wrap instead of horizontal scroll --------------
   Markup: .kwk-mobile-menu-pills > .kwk-mobile-menu-pills-track > .pill(s).
   The base rules set overflow-x:auto and a right fade mask; a later
   unscoped block forces justify-content:flex-start + left padding. We override
   BOTH (the unscoped overrides need !important to win) so all tabs wrap onto
   up to two rows, fully visible, no truncation, no horizontal scroll.
   These selectors are header-drawer specific, so no media query needed —
   the drawer only renders on mobile anyway.                                 */
.kwk-mobile-menu .kwk-mobile-menu-pills {
  overflow: visible;        /* was hidden — let wrapped rows show */
}
.kwk-mobile-menu .kwk-mobile-menu-pills::after {
  display: none;            /* remove the scroll fade-mask affordance */
}
.kwk-mobile-menu .kwk-mobile-menu-pills-track {
  flex-wrap: wrap;
  overflow-x: visible;
  justify-content: center !important;   /* beats the unscoped flex-start */
  padding: 0 12px 12px !important;      /* beats the unscoped padding-left:20px */
  gap: 8px;
  row-gap: 8px;
}
.kwk-mobile-menu .kwk-mobile-menu-pill {
  flex: 0 1 auto;            /* allow wrapping; was flex:0 0 auto */
  white-space: normal;       /* full label, no clipping */
  text-align: center;
  min-height: 44px;          /* tap target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  padding: 11px 18px !important;   /* >=44px height; beats unscoped 10px 20px */
  font-size: 14.3px !important;    /* keep matching the existing override */
}
/* The JS-injected scroll hint arrow is meaningless once tabs wrap. Hide it. */
.kwk-mobile-menu .kwk-pill-arrow {
  display: none !important;
}

/* ----- C) X close button in the drawer header ----------------------------
   Header is display:flex / space-between. The title is centered via
   margin:auto + width:100%; add the X on the right at >=44x44.
   Title keeps its max-width:240px so it stays centered with the X present.  */
.kwk-mobile-menu .kwk-mobile-menu-header {
  padding-right: 16px;       /* room for the X without crowding the title */
}
.kwk-mobile-menu-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  align-self: flex-start;    /* align with the top of the (taller) title */
}
.kwk-mobile-menu-close:hover,
.kwk-mobile-menu-close:focus-visible {
  background: rgba(141,90,59,0.22);
  border-color: var(--kwk-gold-light, #8D5A3B);
  color: #fff;
  outline: none;
}
.kwk-mobile-menu-close:active {
  background: rgba(141,90,59,0.32);
}
.kwk-mobile-menu-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  display: block;
}

/* ----- D-H2) Search clear button 34x34 -> 40x40 --------------------------
   Loaded after kwk-search.v5.css; same specificity, later source order wins.  */
.kwk-search-clear--mobile {
  width: 40px;
  height: 40px;
}

/* ----- D-H3) Search suggest items >=44px height --------------------------
   Base item is padding:10px 14px (~ <44px). Lift min-height to 44px while
   keeping vertical centering.                                                */
.kwk-search-suggest--mobile .kwk-search-suggest-item {
  min-height: 44px;
}

/* ----- D-H4) Course-link list gap 6px -> 8px -----------------------------
   Only the plain course links in the drawer (the 15-item list). The quad
   highlight buttons already have their own spacing; bumping margin-bottom is
   harmless there too, but scope to the drawer to avoid side effects.        */
.kwk-mobile-menu .kwk-mobile-link {
  margin-bottom: 8px;
}

/* ----- E) Drawer panel heading: copper gradient -> WHITE ------------------
   style.css paints #mobileMenuTitle with a copper linear-gradient clipped to
   the text (-webkit-background-clip:text + -webkit-text-fill-color:transparent)
   plus a shimmer animation. JK wants it plain white across ALL panels.
   It is ONE shared element (header.php #mobileMenuTitle); the drawer JS only
   rewrites its textContent on tab switch, so styling the element covers every
   panel (Kurse / Events / Kontakt). Neutralise the gradient cleanly:
     - background:none kills the gradient fill
     - -webkit-text-fill-color:#fff + color:#fff force solid white (the fill
       property must be reset or the text stays transparent over white)
     - background-clip:border-box + animation:none stop the (now pointless)
       shimmer from re-introducing a transparent fill.
   The .morphing tab-switch animation is a separate, higher-specificity rule
   (.kwk-mobile-menu-title.morphing) and is left untouched.                  */
.kwk-mobile-menu-title {
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  color: #fff;
  animation: none;
}

/* ----- F) Inactive drawer tabs: add a tap affordance ---------------------
   style.css renders inactive pills as bare 30%-opacity text (border:transparent,
   no fill) -> they don't read as tappable. Give every pill a faint frame + fill
   and brighter text so the two inactive tabs look like buttons. The active tab
   keeps a stronger, warm-copper treatment so the active > inactive hierarchy
   stays obvious. Min-height 44px is already enforced by v1 rule B.           */
.kwk-mobile-menu .kwk-mobile-menu-pill {
  color: rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.16);
}
.kwk-mobile-menu .kwk-mobile-menu-pill:active {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.24);
}
/* Active tab: dominant copper accent, brighter than the inactive frame. */
.kwk-mobile-menu .kwk-mobile-menu-pill.active {
  color: #fff;
  background: rgba(141,90,59,0.20);
  border-color: var(--kwk-gold-light, #8D5A3B);
}