/**
 * Mega menu for the "Presentation Design" item.
 *
 * Layered on top of the native Thim Elementor Kit nav-menu widget markup.
 * The menu content itself is a standard nested WordPress menu managed in
 * Appearance > Menus. This file only turns the dropdown of the item that
 * carries the `menu-mega` class into a multi-column card; every other menu
 * item keeps its native behaviour.
 *
 * Hook classes (added as menu-item CSS classes in Appearance > Menus):
 *   .menu-mega       -> top-level item whose dropdown becomes the mega panel
 *   .mega-col-title  -> second-level items rendered as column headings
 *
 * Colours/spacing follow the reference desktop design.
 */

/* ---------------------------------------------------------------------------
 * Desktop only. Tablet/mobile (<= 1024px) keep the plugin's native
 * off-canvas accordion, so the mega layout must not leak into those widths.
 * ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* --- The panel container ------------------------------------------- */
  .thim-ekits-menu__nav > .menu-mega {
    position: relative;
  }

  .thim-ekits-menu__nav > .menu-mega > .thim-ekits-menu__dropdown,
  .thim-ekits-menu__nav
    > .menu-mega.thim-ekits-menu__is-hover
    > .thim-ekits-menu__dropdown,
  .thim-ekits-menu__nav > .menu-mega:focus-within > .thim-ekits-menu__dropdown {
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px var(--mega-gap, 96px);
    left: 0 !important;
    right: auto;
    /* Width follows the column-count class, clamped to the viewport. */
    width: min(var(--mega-w, 760px), calc(100vw - 40px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 40px 56px 44px !important;
    background-color: #ffffff;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 30px 60px rgba(20, 28, 74, 0.13);
    transform: none !important;
    list-style: none;
  }

  /* Panel width + gap per column count. Add ONE of these classes
	 * (mega-2col / mega-3col / mega-4col) to the top-level menu item
	 * alongside `menu-mega`, then add that many `mega-col-title` children. */
  .menu-mega.mega-2col > .thim-ekits-menu__dropdown {
    --mega-w: 760px;
    --mega-gap: 96px;
  }
  .menu-mega.mega-3col > .thim-ekits-menu__dropdown {
    --mega-w: 1040px;
    --mega-gap: 56px;
  }
  .menu-mega.mega-4col > .thim-ekits-menu__dropdown {
    --mega-w: 1320px;
    --mega-gap: 40px;
  }

  /* Reveal on hover (native) and on keyboard focus (added for a11y). */
  .thim-ekits-menu__nav
    > .menu-mega.thim-ekits-menu__is-hover
    > .thim-ekits-menu__dropdown,
  .thim-ekits-menu__nav > .menu-mega:focus-within > .thim-ekits-menu__dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Hide every dropdown caret inside the mega item. */
  .thim-ekits-menu__nav > .menu-mega .thim-ekits-menu__icon {
    display: none !important;
  }

  /* --- The two columns ----------------------------------------------- */
  .menu-mega > .thim-ekits-menu__dropdown > .mega-col-title {
    flex: 1 1 200px;
    position: static !important;
    padding: 0;
    margin: 0;
  }

  /* Column heading (the second-level item's own link). */
  .menu-mega > .thim-ekits-menu__dropdown > .mega-col-title > a {
    display: block;
    padding: 0 0 8px;
    color: #1b2a63;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.3;
    cursor: default;
    pointer-events: none; /* headings are structural, not navigable */
  }

  /* --- The links under each column ----------------------------------- */
  .menu-mega .mega-col-title > .thim-ekits-menu__dropdown {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    background: transparent;
    box-shadow: none !important;
    transform: none !important;
  }

  .menu-mega .mega-col-title > .thim-ekits-menu__dropdown > li {
    margin: 0;
    padding-left: 0 !important;
  }

  .menu-mega .mega-col-title > .thim-ekits-menu__dropdown > li > a {
    display: block;
    padding: 11px 0;
    padding-left: 0 !important; /* no left padding on third-level items */
    color: #22346b;
    font-weight: 400;
    font-size: 1.18rem;
    line-height: 1.35;
    transition: color 0.15s ease-in-out;
  }

  /* .menu-mega .mega-col-title > .thim-ekits-menu__dropdown > li > a:hover,
	.menu-mega .mega-col-title > .thim-ekits-menu__dropdown > li > a:focus {
		color: #3e8e63;
	} */

  /* Top-level label turns green while open/hovered (matches reference). */
  /* .thim-ekits-menu__nav > .menu-mega:hover > .thim-ekits-menu__nav-link,
	.thim-ekits-menu__nav > .menu-mega.thim-ekits-menu__is-hover > .thim-ekits-menu__nav-link,
	.thim-ekits-menu__nav > .menu-mega:focus-within > .thim-ekits-menu__nav-link {
		color: #3e8e63 !important;
	} */
}

/* ---------------------------------------------------------------------------
 * Tablet / mobile: the plugin renders the whole menu as an off-canvas
 * accordion. Keep the column headings visually distinct there too, without
 * altering the native expand/collapse behaviour.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .menu-mega .mega-col-title > a {
    font-weight: 700;
  }
}