/**
 * YK header dropdown — v2 (reproduces the old theme's design)
 *
 * Changes from v1:
 *   - Panel: full width → centered fixed width (same as the old theme's actual
 *     render)
 *   - Background: purple (#5d5179) → white, black text
 *   - Items: 3-column grid → single vertical column, centered
 *   - Top-level menu: uppercase · 0.875rem → back to lowercase · 2rem · 900
 *   - Added the green underline slide effect
 *   - Kontakt button: black → olive (#b3b470)
 *
 * Old-theme sources:
 *   yk_overrides/css/menus/yk-mainmenu.css  → .yk-mainmenu-item / .yk-dropdown-parent
 *   yk_overrides/css/links.css              → underline gradient
 *
 * ⚠️ Do not use var(--wp--preset--font-size--medium) for the font size.
 *    The old theme's medium is 2rem (32px) while the new theme's medium is 20px —
 *    the values differ. The same variable produces a different result, so the
 *    measured values are hard-coded here.
 *
 * ⚠️ Must load after yk-ecommerce-mega-menu.css (inc/mega-dropdown.php guarantees
 *    this).
 */

/* ============================================================
   0. Design tokens — change only here and everything follows
   ============================================================ */

.yk-ecommerce-mega-menu {
  /* Matched exactly to the measured spec of the old theme's mega menu top-level
     links:
	   font-family: akkurat, sans-serif  (duplicate 'Akkurat' removed)
	   font-size: 30.7825px ≈ the old theme's medium (2rem) near its clamp maximum
	   font-weight: 900 / letter-spacing: 1.6px / line-height: 24px */
  --yk-menu-font: "akkurat", sans-serif;
  --yk-menu-size: 2rem; /* Old theme medium = 2rem (32px, close to the 30.78px target) */
  --yk-menu-weight: 900;
  --yk-menu-tracking: 1.6px; /* Measured letter-spacing from the old theme */
  --yk-menu-line: 24px; /* Measured line-height from the old theme */
  --yk-menu-color: #000000;

  --yk-accent: var(--wp--preset--color--yk-secondary, #b3b470);
  --yk-underline: rgba(179, 180, 112, 0.6); /* Original value from links.css */

  --yk-panel-bg: #ffffff;
  --yk-panel-max: 1280px; /* Formerly max-w-7xl */
}

/* ============================================================
   1. Positioning reference point
   ============================================================
   ★ The key to attaching the dropdown directly below the header.
   Make the actually visible bar (__header-wrap) position:relative so it becomes
   the panel's containing block. Then top:100% = the bottom of the bar, so the
   panel always sits right below the header, on the home page or anywhere else.
   (It does not depend on the --yk-header-h variable, so it works on home too) */

.site-header {
  position: relative;
}

.yk-ecommerce-mega-menu,
.yk-ecommerce-mega-menu__nav.wp-block-navigation {
  position: static;
}

.yk-ecommerce-mega-menu__header-wrap {
  position: relative !important;
  /* Like the cmt.ch /cmt-dna/ header: drop the bottom border, keep only the shadow */
  border-bottom: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Height: same as the cmt.ch header (the React nav's height:13vh) */
  min-height: 13vh;
  align-items: center;

  /* Horizontal: like cmt.ch, center the content at max-width 1536px with 16px of
	   inner padding. The bar (and its shadow) stays full width and is centered
	   purely via padding. */
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: max(16px, calc((100% - 1536px) / 2)) !important;
  padding-right: max(16px, calc((100% - 1536px) / 2)) !important;
}

/* Why !important: if the core navigation block puts position:relative on
   .has-child, the panel gets sized narrowly relative to the li.
   (This is why the panel did not span the full width in v1) */
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item.has-child {
  position: static !important;
}

/* ============================================================
   1-b. Logo — replaced with the small corner mark from the cmt.ch /cmt-dna/ header
   ============================================================
   The WordPress custom-logo is a wide logo (logo-cmt.svg), so it looks inset.
   Hide the original img and use the favicon corner mark (yk-logo-mark.png) as a
   background instead. Size 3rem (48px) = same as the cmt.ch logo. */

.yk-ecommerce-mega-menu__header-wrap .custom-logo-link {
  display: inline-block !important;
  width: 3rem !important;
  height: 3rem !important;
  padding: 0 !important;
  line-height: 0;
  background-image: url("../../imgs/yk-logo-mark.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.yk-ecommerce-mega-menu__header-wrap .custom-logo-link .custom-logo {
  display: none !important;
}

/* ============================================================
   2. Top-level menu — reproduces the old theme's .yk-mainmenu-item
   ============================================================
   The existing theme CSS applies uppercase / 0.875rem / 600, so we revert it. */

.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item__content {
  position: relative;
  font-family: var(--yk-menu-font);
  font-size: var(--yk-menu-size);
  font-weight: var(--yk-menu-weight);
  letter-spacing: var(--yk-menu-tracking);
  line-height: var(--yk-menu-line);
  text-transform: none;
  color: var(--yk-menu-color);
  text-decoration: none;
  padding: 0 0 0.35rem;

  /* Green underline — zero width by default */
  background-image: linear-gradient(var(--yk-underline), var(--yk-underline));
  background-repeat: no-repeat;
  background-size: 0% 6px;
  background-position: left bottom 4px;
  transition:
    background-size 300ms ease,
    color 200ms ease;
}

/* Hover / focus / current page → slide the underline out to 100% */
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item__content:hover,
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item__content:focus-visible,
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item__content[aria-current="page"],
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .current-menu-item
  > .wp-block-navigation-item__content,
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item.has-child:hover
  > .wp-block-navigation-item__content {
  background-size: 100% 6px;
  color: var(--yk-menu-color);
}

/* Spacing between menu items — roomier than the old theme */
.yk-ecommerce-mega-menu .yk-ecommerce-mega-menu__nav.wp-block-navigation {
  gap: 3rem;
}

/* ============================================================
   3. Dropdown panel — white / centered, fixed width
   ============================================================
   Beating the theme's display:none !important requires both specificity and
   !important. */

.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;

  /* Directly below the header (top:100% = the bottom of __header-wrap).
	   Since __header-wrap is the relative reference, top:100% is exactly the
	   bottom of the bar. Works everywhere, home or subpage, with no dependency on
	   JS variables. */
  position: absolute;
  top: 100%;

  /* ★ Width: 50% of the screen, centered in the viewport.
	   The reference element (__header-wrap) may not span the full screen width, so
	   left/transform are recomputed relative to the viewport.
	   To center a 50vw panel on screen, left would have to be (distance from the
	   bar's left edge to the viewport center) — but if the bar is full width with
	   no horizontal margin, left:50% is enough.
	   __header-wrap is alignfull, i.e. the full viewport width, so left:50% is the
	   screen center. */
  left: 50%;
  right: auto;
  width: 50vw;
  max-width: none;
  min-width: 0;

  padding: 3.5rem 2rem;
  margin: 0;

  background-color: var(--yk-panel-bg);
  border: 0;
  border-radius: 0;
  /* Same shadow as the cmt.ch dropdown (Tailwind shadow-lg) */
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Closed state — translateX(-50%) holds it centered, Y is animated */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    visibility 200ms ease;
  z-index: 60;
}

/* Open conditions — we only read the core Interactivity API's state.
   1) hover  2) keyboard focus  3) toggle button aria-expanded="true" */
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item.has-child:hover
  > .wp-block-navigation__submenu-container,
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item.has-child:focus-within
  > .wp-block-navigation__submenu-container,
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item.has-child
  > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  + .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   4. Dropdown items — reproduces the old theme's .yk-dropdown-parent
   ============================================================ */

.yk-ecommerce-mega-menu
  .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item {
  display: block;
  width: auto;
  padding: 0;
  margin: 0;
  background: none;
  position: static;
  text-align: center;
}

.yk-ecommerce-mega-menu
  .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  display: inline-block;
  padding: 0 0 0.35rem;

  font-family: var(--yk-menu-font);
  font-size: var(--yk-menu-size);
  font-weight: var(--yk-menu-weight);
  letter-spacing: var(--yk-menu-tracking);
  text-transform: none;
  color: var(--yk-menu-color);
  text-decoration: none;

  background-image: linear-gradient(var(--yk-underline), var(--yk-underline));
  background-repeat: no-repeat;
  background-size: 0% 6px;
  background-position: left bottom 4px;
  transition: background-size 300ms ease;
}

.yk-ecommerce-mega-menu
  .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content:hover,
.yk-ecommerce-mega-menu
  .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content:focus-visible,
.yk-ecommerce-mega-menu
  .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content[aria-current="page"] {
  background-size: 100% 6px;
}

/* ============================================================
   5. Toggle button (chevron)
   ============================================================
   The existing theme sets .wp-block-navigation__submenu-icon to display:none, but
   that class sits on the <button> itself. If the button disappears, keyboard and
   touch users have no way to open the dropdown, so we bring it back.

   ※ If you want the chevron fully hidden like in the old theme's screenshots, do
     not delete this block — uncomment the 'hide' rule below instead. Be aware that
     on touch devices tapping a parent item will then no longer reveal its submenu. */

.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-icon {
  /* Same as the cmt.ch /cmt-dna/ header: hide the chevron arrow
	   (the desktop hover dropdown keeps working) */
  display: none !important;
  align-items: center;
  padding: 0 0 0 0.4rem;
  background: none;
  border: 0;
  color: var(--yk-menu-color);
  cursor: pointer;
}

.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-icon
  svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  transition: transform 200ms ease;
}

.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-icon[aria-expanded="true"]
  svg {
  transform: rotate(180deg);
}

/* Fully hide the chevron (uncomment only if you accept the accessibility loss)
.yk-ecommerce-mega-menu
	.yk-ecommerce-mega-menu__nav
	.wp-block-navigation-item.has-child
	> .wp-block-navigation__submenu-icon {
	display: none !important;
}
*/

/* ============================================================
   6. Kontakt button — reproduces the old theme's .kontakt-button
   ============================================================ */

.yk-ecommerce-mega-menu__header-wrap .wp-block-button__link,
.yk-ecommerce-mega-menu__header-wrap .wp-element-button {
  background-color: var(--yk-accent);
  color: #ffffff;
  border: 0;
  /* Matched to the Kontakt button in the cmt.ch /cmt-dna/ header */
  border-radius: 5px;
  padding: 1.3rem 1.3rem;
  font-family: var(--yk-menu-font);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.5rem; /* Matches the reference height (~66px) — without it the button is too big */
  letter-spacing: 1px;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.yk-ecommerce-mega-menu__header-wrap .wp-block-button__link:hover,
.yk-ecommerce-mega-menu__header-wrap .wp-element-button:hover {
  opacity: 0.85;
  color: #ffffff;
}

/* ============================================================
   7. Third level — links under a column heading (when present)
   ============================================================
   Core renders the third level as a flyout that pops out sideways.
   We turn it back into a static list. */

.yk-ecommerce-mega-menu
  .wp-block-navigation__submenu-container
  .wp-block-navigation__submenu-container {
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0.75rem 0 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.yk-ecommerce-mega-menu
  .wp-block-navigation__submenu-container
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  padding: 0.3rem 0;
  font-family: var(--yk-menu-font);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--yk-menu-color);
  background-image: none;
  text-decoration: none;
  transition: color 200ms ease;
}

.yk-ecommerce-mega-menu
  .wp-block-navigation__submenu-container
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* The third level does not need a toggle button */
.yk-ecommerce-mega-menu
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item
  .wp-block-navigation-item
  > .wp-block-navigation__submenu-icon {
  display: none !important;
}

/* ============================================================
   8. Responsive
   ============================================================ */

/* Keep the font from getting too large on mid-size screens */
@media (max-width: 1366px) {
  .yk-ecommerce-mega-menu {
    --yk-menu-size: 1.5rem;
  }

  .yk-ecommerce-mega-menu .yk-ecommerce-mega-menu__nav.wp-block-navigation {
    gap: 2rem;
  }
}

/* Narrow screens — disable the dropdown, since the theme's slide-out panel is used */
@media (max-width: 899px) {
  .yk-ecommerce-mega-menu
    .yk-ecommerce-mega-menu__nav
    .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yk-ecommerce-mega-menu .wp-block-navigation-item__content,
  .yk-ecommerce-mega-menu .wp-block-navigation__submenu-container,
  .yk-ecommerce-mega-menu .wp-block-navigation__submenu-icon svg {
    transition-duration: 0.01ms !important;
  }
}