/* Neurosalud - Header dropdown submenus ("Nosotros" -> Auspicios/Galería,
   "Contacto" -> Preguntas frecuentes).

   Blocksy renders these with generic .sub-menu / .ct-menu-link markup and no
   brand styling of its own. This file re-skins that native dropdown to match
   the rest of the site: white rounded panel, soft shadow, brand blue on
   hover, small teal dot per item echoing the icon-badge language used
   elsewhere (professionals/resources/talleres cards). No JS - Blocksy
   already handles the open/close behaviour natively. */

/* Blocksy anchors .sub-menu with position:absolute; top:100%, expecting the
   parent <li> to carry position:relative via its own "animated-submenu"
   class. Our items (added after the fact via wp_update_nav_menu_item) don't
   reliably get that class, so the dropdown was anchoring to a taller
   ancestor further up the DOM and landing far below the header instead of
   right under "Nosotros"/"Contacto". Force both ends of that relationship
   explicitly rather than depending on Blocksy's class. */
.menu-item-has-children{
  position:relative !important;
  /* Blocksy's own dropdown positioning uses these two CSS variables for
     margin-top on .sub-menu. Zero them out here so our own margin below is
     the only thing controlling the gap, regardless of whether the specific
     Blocksy selector that reads them matches our markup or not. */
  --dropdown-top-offset:0px;
  --sticky-state-dropdown-top-offset:0px;
}
.menu-item-has-children > .sub-menu{
  position:absolute !important;
  top:100% !important;
  left:0 !important;
  right:auto !important;
}

.sub-menu{
  /* Blocksy ships its own dark theme-palette background for .sub-menu via a
     higher-specificity attribute-selector rule
     ([data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu), which
     otherwise wins over a plain .sub-menu selector regardless of load
     order. !important is the correct, deliberate override here - not a
     shortcut - since the alternative is fighting an attribute-selector
     chain we don't control. */
  background:#fff !important;
  border:1px solid var(--ns-line,#D9E8F2) !important;
  border-radius:14px !important;
  box-shadow:0 20px 44px rgba(23,63,102,.16) !important;
  padding:8px;
  min-width:230px;
  list-style:none;
  margin:4px 0 0 !important;
}

.sub-menu .menu-item{
  /* Blocksy draws a divider as border-top:var(--dropdown-divider) on every
     .menu-item (including the first), using a near-white dashed line meant
     for its own dark dropdown background. On our white panel that's
     already invisible, and sitting flush against the hover-highlighted
     link above/below it made it look like hovering "erased" the line.
     Replace it with a divider that actually shows on white, skip it on the
     first item, and give the link a little vertical margin so its hover
     fill never touches the divider. */
  border-top:1px solid var(--ns-line,#D9E8F2) !important;
}
.sub-menu .menu-item:first-child{
  border-top:0 !important;
}

.sub-menu .ct-menu-link{
  display:flex;
  align-items:center;
  margin:3px 0;
  padding:11px 14px;
  border-radius:10px;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:13.5px;
  font-weight:500;
  color:var(--ns-text,#173F66) !important;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}

.sub-menu .ct-menu-link::before{
  content:'';
  display:inline-block;
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--ns-accent,#19A7D1);
  margin-right:11px;
}

.sub-menu .ct-menu-link:hover,
.sub-menu .ct-menu-link:focus-visible{
  background:var(--ns-surface,#F5F6F8);
  color:var(--ns-primary,#1764C0) !important;
}

/* The top-level trigger ("Nosotros", "Contacto") gets the same hover accent
   as every other nav link, plus a bit of breathing room for the dropdown
   caret Blocksy already renders. */
.menu-item-has-children > .ct-sub-menu-parent .ct-menu-link{
  display:inline-flex; align-items:center;
}
.menu-item-has-children:hover > .ct-sub-menu-parent .ct-menu-link,
.menu-item-has-children:focus-within > .ct-sub-menu-parent .ct-menu-link{
  color:var(--ns-primary,#1764C0) !important;
}

@media (prefers-reduced-motion:reduce){
  .sub-menu .ct-menu-link{ transition:none; }
}