/* ============================================================
   NINJA* (lafour_theme) — components/nav.css
   Design Kit § 04 — Header + main menu.

   States from the kit:
     - Default link: muted, no underline.
     - Hover link:   text colour, brand-red underline (scaleX 1).
     - Active link:  text colour, red underline + 5px red dot
                     to the left.
     - Focus-visible: 2px brand outline (handled in base.css).
   Sticky variant on scroll, mobile drawer, optional search input.
   ============================================================ */

.lafour-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 var(--nav-pad);
  min-height: var(--header-h);
  height: auto;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.85) 0%,
    rgba(10, 10, 10, 0) 100%
  );
  background-color: transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}

/* On-scroll-desktop variant — solid surface + thin border */
.lafour-header.is-scrolled,
body:not(.is-front) .lafour-header {
  background: var(--c-surface);
  background-image: none;
  border-bottom-color: var(--c-border);
}

/* ── Social strip (Appearance → theme settings; vacío = oculto) ─ */
.lafour-social-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lafour-header.is-scrolled .lafour-social-strip,
body:not(.is-front) .lafour-social-strip {
  border-bottom-color: var(--c-border);
}
.lafour-social-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lafour-social-strip__link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  line-height: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.lafour-social-strip__link:hover,
.lafour-social-strip__link:focus-visible {
  color: var(--c-text);
}
.lafour-social-strip__link--facebook:hover,
.lafour-social-strip__link--facebook:focus-visible { color: #1877f2; }
.lafour-social-strip__link--instagram:hover,
.lafour-social-strip__link--instagram:focus-visible { color: #e4405f; }
.lafour-social-strip__link--x:hover,
.lafour-social-strip__link--x:focus-visible { color: #f5f5f5; }
.lafour-social-strip__link--youtube:hover,
.lafour-social-strip__link--youtube:focus-visible { color: #ff0033; }
.lafour-social-strip__link--linkedin:hover,
.lafour-social-strip__link--linkedin:focus-visible { color: #0a66c2; }
.lafour-social-strip__link--vimeo:hover,
.lafour-social-strip__link--vimeo:focus-visible { color: #1ab7ea; }
.lafour-social-strip__link--tiktok:hover,
.lafour-social-strip__link--tiktok:focus-visible { color: #fe2c55; }
.lafour-social-strip__link:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
}

.lafour-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  min-height: var(--header-h);
  transition: min-height var(--dur-base) var(--ease-out);
}

.lafour-header.is-scrolled .lafour-nav,
body:not(.is-front) .lafour-header .lafour-nav {
  min-height: var(--header-h-sticky);
}

/* ── Logo (red asterisk SVG + NINJA* wordmark) ───────────── */
.lafour-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  color: var(--c-text);
  line-height: 1;
  text-transform: uppercase;
}
.lafour-logo:hover { color: var(--c-text); }
.lafour-logo:focus-visible { outline-offset: 4px; }
.lafour-logo__mark {
  width: 18px; height: 18px;
  color: var(--c-brand);
  display: inline-flex;
  flex: 0 0 auto;
}
.lafour-logo__mark svg { width: 100%; height: 100%; }
.lafour-logo__word .ninja-mark__star { color: var(--c-brand); }

/* ── Nav inner (houses menu block and other header blocks) ─ */
.lafour-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
  /* Visible so dropdown submenus are not clipped */
  overflow: visible;
}

/* ── Menu links — top level ──────────────────────────────── */
#lafour-main-menu.lafour-menu {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-6);
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Submenús (todos los niveles + móvil): relleno izquierda→derecha; sin subrayado ::after */
.lafour-menu--sub .lafour-menu__link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid transparent;
  background-image: linear-gradient(
    90deg,
    var(--c-brand-dim),
    var(--c-brand-dim)
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  transition:
    background-size var(--dur-base) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.lafour-menu--sub .lafour-menu__item:last-child .lafour-menu__link {
  border-bottom: 0;
}
.lafour-menu--sub .lafour-menu__link:hover,
.lafour-menu--sub .lafour-menu__link:focus-visible {
  background-size: 100% 100%;
}
.lafour-menu--sub .lafour-menu__link.is-active,
.lafour-menu--sub .lafour-menu__link[aria-current="page"] {
  background-size: 100% 100%;
}
.lafour-menu--sub .lafour-menu__link::after {
  display: none;
}

/* ── Fly-out submenus (desktop) ─────────────────────────────
   Hidden until hover/focus-within on parent <li>.
   First level opens below; deeper levels open to the LEFT so
   wide columns stay on-screen near the viewport edge.
   ───────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  .lafour-menu--sub {
    position: absolute;
    /* Align to bottom of parent row — no visible gap (gap breaks :hover) */
    top: 100%;
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 14rem;
    margin: 0;
    padding: var(--space-2) 0;
    list-style: none;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(2px);
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      visibility 0s linear var(--dur-fast);
  }

  /* Invisible hit-area: top-level only (gap under bar / sticky header) */
  #lafour-main-menu > .lafour-menu__item > .lafour-menu--sub::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 14px;
  }

  .lafour-menu__item:hover > .lafour-menu--sub,
  .lafour-menu__item:focus-within > .lafour-menu--sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Nested fly-out: open LEFT of parent column + bridge the gap */
  .lafour-menu--sub .lafour-menu--sub {
    top: 0;
    left: auto;
    right: calc(100% - 6px);
    margin-top: calc(-1 * var(--space-2));
    z-index: 61;
  }

  .lafour-menu--sub .lafour-menu__item > .lafour-menu--sub::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    right: auto;
    width: 14px;
  }

  /* Parent has children: small caret hint */
  .lafour-menu__item:has(> .lafour-menu--sub) > .lafour-menu__link {
    padding-inline-end: 14px;
  }
  .lafour-menu__item:has(> .lafour-menu--sub) > .lafour-menu__link::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -2px;
    border: 3px solid transparent;
    border-top-color: currentColor;
    opacity: 0.55;
  }
  /* Fly-out is to the left: caret points left */
  .lafour-menu--sub .lafour-menu__item:has(> .lafour-menu--sub) > .lafour-menu__link::before {
    content: '';
    position: absolute;
    right: 6px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-left: 4px solid currentColor;
    border-right: 0;
    opacity: 0.55;
  }
}

.lafour-menu__item { position: relative; }
.lafour-menu__link {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--dur-fast) var(--ease-out);
  position: relative;
  padding-bottom: 2px;
  display: inline-block;
  text-decoration: none;
}
.lafour-menu__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.lafour-menu__link:hover,
.lafour-menu__link.is-active,
.lafour-menu__link[aria-current="page"] { color: var(--c-text); }
.lafour-menu__link:hover::after,
.lafour-menu__link.is-active::after,
.lafour-menu__link[aria-current="page"]::after { transform: scaleX(1); }

/* Hub link to <front> (NINJA* drop-down root): not a “you are on home” tab.
   Drupal.activeLinks marks it whenever path.isFront — we keep hover only. */
#lafour-main-menu > .lafour-menu__item > a.lafour-menu__link[data-drupal-link-system-path="<front>"] {
  color: var(--c-muted);
}
#lafour-main-menu > .lafour-menu__item > a.lafour-menu__link[data-drupal-link-system-path="<front>"].is-active {
  color: var(--c-muted);
}
#lafour-main-menu > .lafour-menu__item > a.lafour-menu__link[data-drupal-link-system-path="<front>"].is-active::after,
#lafour-main-menu > .lafour-menu__item > a.lafour-menu__link[data-drupal-link-system-path="<front>"][aria-current="page"]::after {
  transform: scaleX(0);
}

/* Enlace NINJA* (<front>) con mega-menú: sin caret ::before (triángulo choca con la marca). */
#lafour-main-menu > .lafour-menu__item > a.lafour-menu__link[data-drupal-link-system-path="<front>"]::before {
  content: none !important;
}

/* Mismo ítem: sin punto rojo ::before en el <li> (evita “rayas” / decoradores duplicados). */
#lafour-main-menu > .lafour-menu__item:has(> a[data-drupal-link-system-path="<front>"])::before {
  content: none !important;
}

/* Active item gets a 5px red dot to the left */
.lafour-menu__item.is-active::before,
.lafour-menu__item:has(> [aria-current="page"])::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  background: var(--c-brand);
}

/* ── Right-side actions (search + toggle) ────────────────── */
.lafour-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.lafour-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--c-border);
  padding: 6px 10px;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.lafour-search:focus-within { border-color: var(--c-brand); color: var(--c-text); }
.lafour-search__icon {
  width: 12px; height: 12px;
  color: var(--c-muted);
}
.lafour-search:focus-within .lafour-search__icon { color: var(--c-brand); }
.lafour-search__input {
  background: transparent;
  border: 0;
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  outline: none;
  width: 120px;
}
.lafour-search__input::placeholder { color: var(--c-dim); }

/* ── Mobile drawer toggle ───────────────────────────────── */
.lafour-nav__toggle {
  display: none;
  width: 24px;
  height: 18px;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.lafour-nav__toggle span {
  display: block;
  height: 1px;
  background: var(--c-text);
  transition: transform var(--dur-fast) var(--ease-out),
              opacity   var(--dur-fast) var(--ease-out);
}
.lafour-nav__toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.lafour-nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.lafour-nav__toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Mobile drawer (≤900px) ─────────────────────────────── */
@media (max-width: 900px) {
  .lafour-header {
    --lafour-drawer-top-pad: var(--header-h);
  }
  .lafour-header--has-social {
    --lafour-drawer-top-pad: calc(var(--header-h) + 2.375rem);
  }
  .lafour-header.is-scrolled,
  body:not(.is-front) .lafour-header {
    --lafour-drawer-top-pad: var(--header-h-sticky);
  }
  .lafour-header--has-social.is-scrolled,
  body:not(.is-front) .lafour-header.lafour-header--has-social {
    --lafour-drawer-top-pad: calc(var(--header-h-sticky) + 2.375rem);
  }

  .lafour-nav__toggle { display: flex; }
  .lafour-search { display: none; }

  /* Only the root menu is the full-screen drawer; submenus stay in-flow */
  #lafour-main-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--lafour-drawer-top-pad, var(--header-h-sticky));
    background: var(--c-bg);
    border-top: 1px solid var(--c-border);
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: var(--space-6);
    gap: 0;
    max-height: calc(100vh - var(--lafour-drawer-top-pad, var(--header-h-sticky)));
    overflow: auto;
    transform: translateY(-110%);
    transition: transform var(--dur-base) var(--ease-out);
    z-index: 49;
  }
  #lafour-main-menu.is-open {
    transform: translateY(0);
  }

  #lafour-main-menu > .lafour-menu__item {
    border-bottom: 1px solid var(--c-border);
    padding-block: var(--space-3);
  }

  #lafour-main-menu .lafour-menu--sub {
    position: static;
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--c-border);
    margin: var(--space-3) 0 var(--space-3) var(--space-4);
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    min-width: 0;
    gap: var(--space-2);
    background: transparent;
    transition: none;
  }

  #lafour-main-menu .lafour-menu--sub .lafour-menu__item {
    border-bottom: 0;
    padding-block: var(--space-2);
  }

  #lafour-main-menu .lafour-menu__item.is-active::before { left: -20px; }

  #lafour-main-menu > .lafour-menu__item > .lafour-menu__link {
    font-size: var(--text-lg);
    padding-bottom: 0;
  }

  #lafour-main-menu .lafour-menu--sub .lafour-menu__link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: var(--text-sm);
  }

  /* No desktop-only caret on mobile */
  #lafour-main-menu .lafour-menu__item:has(> .lafour-menu--sub) > .lafour-menu__link::before {
    content: none;
  }

  /* Drawer starts below Drupal admin toolbar + site header */
  body.toolbar-fixed #lafour-main-menu {
    top: calc(
      var(--drupal-displace-offset-top, 0px) +
      var(--lafour-drawer-top-pad, var(--header-h-sticky))
    );
    max-height: calc(
      100vh - var(--drupal-displace-offset-top, 0px) -
      var(--lafour-drawer-top-pad, var(--header-h-sticky))
    );
  }
}

/* ── Drupal admin toolbar offset ─────────────────────────
   Drupal's displace.js sets --drupal-displace-offset-top on
   <html> to the exact toolbar height. Use it so the sticky
   header always sits right below the toolbar.
   ───────────────────────────────────────────────────────── */
body.toolbar-fixed .lafour-header {
  top: var(--drupal-displace-offset-top, 0px);
}