/* ==========================================================
   Mega-menu refresh (desktop only) — added 2026-09-28
   Overrides the float-based .submenu-main tiles with a grid.
   Mobile menu (<=780px) is untouched.
   ========================================================== */
@media only screen and (min-width:781px) {

  .wsmenu-list > li > .wsmenu-submenu {
    --ft-teal:#0ea4bf; --ft-pink:#eb0580; --ft-yellow:#febd13; --ft-green:#7dc34a; --ft-navy:#1c2d56;
    padding:0 !important;
    border-radius:0 0 14px 14px;
    box-shadow:0 18px 40px -12px rgba(28,45,86,.28), 0 2px 6px rgba(28,45,86,.06) !important;
    overflow:hidden;
  }
  /* thin brand strip across the top of each panel */
  .wsmenu-list > li > .wsmenu-submenu::before {
    content:""; display:block; height:3px;
    background:linear-gradient(90deg,var(--ft-teal) 0 25%,var(--ft-pink) 25% 50%,var(--ft-yellow) 50% 75%,var(--ft-green) 75% 100%);
  }
  .wsmenu-list > li > .wsmenu-submenu > li { padding:0 !important; }

  .wsmenu-list .submenu-div { padding:26px 28px 22px !important; }

  /* grid instead of floats: no more staircase rows */
  .wsmenu-list ul.submenu-main {
    --cols:4;
    display:grid !important;
    grid-template-columns:repeat(var(--cols), minmax(0,1fr));
    gap:22px 18px;
    width:100% !important;
    margin:0 !important;            /* cancels .submenu-3 offsets (EN margin-left / AR margin-right) */
    padding:0 !important;
  }
  /* 3 items, or 5-6 items -> 3 columns (tidy 3x2) */
  .wsmenu-list ul.submenu-main:not(:has(> li:nth-child(4))),
  .wsmenu-list ul.submenu-main:has(> li:nth-child(5)) { --cols:3; }

  .wsmenu-list ul.submenu-main > li {
    float:none !important; width:auto !important; padding:0 !important; text-align:center;
  }

  .wsmenu-list ul.submenu-main > li > a {
    display:flex !important; flex-direction:column; align-items:center;
    padding:6px 4px 4px !important;
    border:0 !important; background:none !important;
    overflow:visible !important;
    text-decoration:none !important;
    transition:transform .25s cubic-bezier(.2,.7,.3,1);
  }

  /* gradient ring around the photo */
  .wsmenu-list ul.submenu-main > li > a .icon-menu {
    float:none !important;
    display:block !important;
    width:136px !important; max-width:100%; height:auto !important;
    aspect-ratio:1/1;
    margin:0 0 14px !important;
    padding:3px !important;
    border-radius:30% !important;
    background:conic-gradient(from 200deg, var(--ft-teal), var(--ft-green), var(--ft-yellow), var(--ft-pink), var(--ft-teal));
    box-shadow:0 6px 16px -8px rgba(28,45,86,.45);
    overflow:hidden;
    transition:box-shadow .25s ease;
  }
  .wsmenu-list ul.submenu-main > li > a .icon-menu img {
    display:block; width:100% !important; height:100% !important;
    object-fit:cover;
    border:0 !important;
    border-radius:calc(30% - 1px) !important;
    background:#fff;
    transition:transform .45s cubic-bezier(.2,.7,.3,1), filter .3s ease;
  }

  /* caption: fixed two-line block so rows align */
  .wsmenu-list ul.submenu-main > li > a p {
    position:relative;
    margin:0 !important;
    min-height:2.7em;
    padding-bottom:8px;
    font-size:15px !important; font-weight:500; line-height:1.35 !important;
    letter-spacing:.1px;
    color:var(--ft-navy) !important;
    text-transform:none !important;
    text-align:center;
    transition:color .2s ease;
  }
  .wsmenu-list ul.submenu-main > li > a p::after {
    content:""; position:absolute; left:50%; bottom:0;
    width:34px; height:2px; border-radius:2px;
    background:linear-gradient(90deg,var(--ft-teal),var(--ft-green));
    transform:translateX(-50%) scaleX(0);
    transition:transform .3s cubic-bezier(.2,.7,.3,1);
  }

  /* hover / keyboard focus */
  .wsmenu-list ul.submenu-main > li > a:hover,
  .wsmenu-list ul.submenu-main > li > a:focus-visible { transform:translateY(-4px); }
  .wsmenu-list ul.submenu-main > li > a:hover .icon-menu,
  .wsmenu-list ul.submenu-main > li > a:focus-visible .icon-menu { box-shadow:0 14px 26px -10px rgba(14,164,191,.6); }
  .wsmenu-list ul.submenu-main > li > a:hover .icon-menu img,
  .wsmenu-list ul.submenu-main > li > a:focus-visible .icon-menu img { transform:scale(1.07); filter:saturate(1.1); }
  .wsmenu-list ul.submenu-main > li > a:hover p,
  .wsmenu-list ul.submenu-main > li > a:focus-visible p { color:var(--ft-teal) !important; }
  .wsmenu-list ul.submenu-main > li > a:hover p::after,
  .wsmenu-list ul.submenu-main > li > a:focus-visible p::after { transform:translateX(-50%) scaleX(1); }
  .wsmenu-list ul.submenu-main > li > a:focus-visible { outline:2px solid var(--ft-teal); outline-offset:4px; border-radius:12px; }

  @media (prefers-reduced-motion:reduce) {
    .wsmenu-list ul.submenu-main > li > a,
    .wsmenu-list ul.submenu-main > li > a .icon-menu img,
    .wsmenu-list ul.submenu-main > li > a p::after { transition:none; }
  }
}