/*
 * The "Te huur" mega menu (templates/mega-menu.php, opened by mega-menu.js).
 *
 * Ported from the old "Mega menu te huur desktop" WPCode snippet. Desktop only: below
 * 992px the panel is never shown and the Te huur item keeps Antek's own (mobile) menu.
 *
 * .mv-mega-trigger is the top menu's Te huur item (added in functions.php); its Antek
 * dropdown is hidden so only the mega menu opens on hover.
 */
@media (min-width: 992px) {
  #top-menu .mv-mega-trigger > .c-top-menu__submenu { display: none !important; }

  /* Antek only draws its dropdown chevron on items with WordPress sub-items
     (.c-top-menu__item--has-children > a:after); Te huur opens the mega menu instead, so it
     gets the same chevron here. The :not() keeps it single should the item gain children. */
  #top-menu .mv-mega-trigger:not(.c-top-menu__item--has-children) > a::after { content: var(--icon-dropdown); font-family: "theme-icons"; font-size: 10px; line-height: 1; margin-left: 10px; display: inline-block; }

  .mv-mega__panel { position: fixed; left: 50%; transform: translateX(-50%); width: min(1160px, 94vw); background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 18px 50px rgba(20, 35, 70, .22); opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 99999; padding: 26px 28px 18px; max-height: calc(100vh - 140px); overflow-y: auto; }
  .mv-mega__panel.is-open { opacity: 1; visibility: visible; }

  /* Fixed four columns: each .mv-mega__col is exactly one, so blocks never reflow between them. */
  .mv-mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; align-items: start; }
  .mv-mega__col { min-width: 0; }
  .mv-mega__block { margin-bottom: 22px; }

  .mv-mega__h1 { display: block; font-weight: 800; font-size: 14.5px; color: #1e3f7c; text-decoration: none; padding-bottom: 7px; margin-bottom: 8px; border-bottom: 2px solid #43a838; text-transform: uppercase; letter-spacing: .02em; }
  .mv-mega__h1:hover { color: #43a838; }
  .mv-mega__h1--plain { cursor: default; }

  .mv-mega__h2 { display: block; font-weight: 700; font-size: 13.5px; color: #26314a; text-decoration: none; margin: 9px 0 4px; }
  .mv-mega__h2:hover { color: #43a838; }

  .mv-mega__h2solo,
  .mv-mega__l3 a { display: block; font-size: 13.5px; color: #4a5468; text-decoration: none; padding: 3.5px 0 3.5px 14px; position: relative; }
  .mv-mega__l3 a { font-size: 13px; padding-top: 3px; padding-bottom: 3px; }
  .mv-mega__h2solo::before,
  .mv-mega__l3 a::before { content: "\203A"; position: absolute; left: 0; color: #43a838; font-weight: 700; }
  .mv-mega__h2solo:hover,
  .mv-mega__l3 a:hover { color: #1e3f7c; padding-left: 17px; transition: padding .15s; }
  .mv-mega__verkoop { font-weight: 700; color: #43a838 !important; }

  .mv-mega__footer { border-top: 1px solid #e6eaf2; margin-top: 6px; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .mv-mega__hulp { display: flex; align-items: center; gap: 14px; font-size: 13.5px; }
  .mv-mega__hulp-label { font-weight: 700; color: #1e3f7c; }
  .mv-mega__hulp a { color: #26314a; text-decoration: none; padding-left: 14px; position: relative; }
  .mv-mega__hulp a::before { content: "\203A"; position: absolute; left: 0; color: #43a838; font-weight: 700; }
  .mv-mega__hulp a:hover { color: #43a838; }
  .mv-mega__cta { display: inline-block; background: #43a838; color: #fff !important; text-decoration: none; font-weight: 700; font-size: 14px; padding: 9px 20px; border-radius: 6px; }
  .mv-mega__cta:hover { background: #379030; }
}

@media (max-width: 991.98px) {
  .mv-mega__panel { display: none !important; }
}