/* ── NAV ──────────────────────────────────────────────── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: var(--primary); border-bottom: 1px solid rgba(0,0,0,.12); box-shadow: 0 2px 16px rgba(0,0,0,.15); }
.nav-stripe  { height: 5px; background: var(--stripe); }
.nav-inner   { height: calc(var(--nav-h) - 5px); display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; gap: 16px; }

/* Logo */
.nav-logo      { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-logo img  { height: 52px; width: auto; transition: height .3s ease; }
.nav-logo-text { font-family: 'Oswald', sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; line-height: 1; color: #fff; transition: font-size .3s ease; }
.nav-logo-text .et { color: rgba(0,0,0,.55); }
.nav-logo-sub  { display: block; font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: 2px; overflow: hidden; max-height: 36px; opacity: 1; transition: max-height .3s ease, opacity .25s ease; }

/* Links principales */
.nav-links          { display: flex; gap: 0; list-style: none; align-items: center; }
.nav-links a        { text-decoration: none; color: rgba(255,255,255,.95); font-family: 'Montserrat', sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; position: relative; transition: color .2s; white-space: nowrap; }
.nav-links a::after { content: ''; position: absolute; bottom: -1px; left: 12px; right: 12px; height: 2px; background: #fff; transform: scaleX(0); transition: transform .2s; transform-origin: left; }
.nav-links a:hover,
.nav-links a.current-menu-item,
.nav-links a[aria-current="page"] { color: #fff; }
.nav-links a:hover::after,
.nav-links a.current-menu-item::after { transform: scaleX(1); }

/* Dropdown (User Menus genera submenús) */
.nav-links .menu-item-has-children { position: relative; }
.nav-links .sub-menu               { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--primary); box-shadow: 0 8px 24px rgba(0,0,0,.15); list-style: none; z-index: 100; }
/* Dropdown :hover — SOLO desktop con hover real (no touch).
   Bug: en mobile touch, :hover es sticky → el sub-menu queda abierto aunque JS
   remueva .open. Solución: restringir hover a (min-width:901px) AND (hover:hover). */
@media (min-width: 901px) and (hover: hover) {
  .nav-links > li.menu-item-has-children:hover > .sub-menu { display: block; }
  .nav-links .sub-menu .menu-item-has-children:hover > .sub-menu { display: block; }
}
.nav-links .sub-menu a             { display: block; padding: 10px 16px; font-size: .65rem; color: var(--text); border-bottom: 1px solid var(--border); }
.nav-links .sub-menu a:hover       { color: var(--primary); background: var(--off-white); }
.nav-links .sub-menu a::after      { display: none; }
.nav-links .sub-menu li:last-child a { border-bottom: none; }

/* Botón tienda / acción destacada */
.nav-btn-tienda { font-family: 'Montserrat', sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 7px 14px; background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.4); text-decoration: none; transition: background .2s; white-space: nowrap; flex-shrink: 0; }
.nav-btn-tienda:hover { background: rgba(255,255,255,.3); color: #fff; }

/* Hamburguesa mobile */
.nav-toggle       { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; flex-shrink: 0; margin-left: auto; }
.nav-toggle span  { display: block; width: 22px; height: 2px; background: #fff; transition: .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── ADMIN BAR OFFSET (solo admins, alumnos no la ven) ── */
.admin-bar .site-header          { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header        { top: 46px; }
  /* Al scrollear en mobile: admin bar se desliza arriba y nav sube a top:0 */
  body.admin-bar.scrolled #wpadminbar {
    transform: translateY(-46px);
    transition: transform .3s ease;
  }
  body.admin-bar.scrolled .site-header {
    top: 0;
    transition: top .3s ease;
  }
}

/* ── NAV SCROLLED ────────────────────────────────────── */
/* Mantener el mismo color de fondo al scrollear (solo reducir tamaño) */
.site-header.scrolled              { box-shadow: 0 2px 20px rgba(0,0,0,.2); }
.site-header.scrolled .nav-inner   { height: 43px; }
.site-header.scrolled .nav-logo img { height: 34px; }
.site-header.scrolled .nav-logo-text { font-size: 1.1rem; }

/* Subtítulo: visible en top, se oculta al scrollear en cualquier tamaño */
.site-header.scrolled .nav-logo-sub { max-height: 0; opacity: 0; overflow: hidden; }

/* ── INDICADOR DE SUBMENÚ EN DESKTOP ─────────────────── */
@media (min-width: 901px) {
  .nav-links > li.menu-item-has-children > a { padding-right: 20px; }
  .nav-links > li.menu-item-has-children > a::after {
    content: '▾';
    position: absolute;
    right: 4px;
    top: 50%;
    bottom: auto;
    left: auto;
    height: auto;
    width: auto;
    background: transparent;
    transform: translateY(-50%);
    transition: transform .2s;
    font-size: .6em;
    line-height: 1;
    opacity: .75;
  }
  .nav-links > li.menu-item-has-children:hover > a::after { transform: translateY(-50%) rotate(180deg); opacity: 1; }
  /* Evitar que el hover underline pise el indicador en items con children */
  .nav-links > li.menu-item-has-children > a:hover::after,
  .nav-links > li.menu-item-has-children > a.current-menu-item::after { transform: translateY(-50%) rotate(180deg); }
}

/* ── RESPONSIVE NAV ──────────────────────────────────── */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links  {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--primary-dark);
    flex-direction: column;
    align-items: flex-start;
    border-top: 3px solid rgba(0,0,0,.15);
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-links.open   { display: flex; }
  .nav-links li     { width: 100%; }
  .nav-links a      { width: 100%; padding: 12px 5vw; display: flex; justify-content: space-between; color: rgba(255,255,255,.9); }
  .nav-links a::after { display: none; }

  /* Submenús en mobile: ocultos por defecto, se abren con JS */
  .nav-links .sub-menu {
    display: none;
    position: static;
    border: none;
    box-shadow: none;
    border-top: none;
    background: rgba(0,0,0,.15);
    padding-left: 0;
    width: 100%;
  }
  .nav-links .sub-menu.open { display: block; }
  .nav-links .sub-menu a    { padding-left: calc(5vw + 16px); font-size: .72rem; color: rgba(255,255,255,.8); border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav-links .sub-menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
  /* Fix: .sub-menu a { display:block } tiene mayor especificidad que .nav-links a { display:flex }.
     Necesitamos flex en sub-items con hijos para que el indicador › quede alineado a la derecha. */
  .nav-links .sub-menu .menu-item-has-children > a { display: flex !important; align-items: center !important; justify-content: space-between !important; }

  /* Indicador de submenú */
  .nav-links .menu-item-has-children > a::after {
    content: '›';
    display: block;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform .2s;
    transform: none;
    background: none;
    position: static;
    height: auto;
    width: auto;
    margin-left: auto;
  }
  .nav-links .menu-item-has-children.open > a::after { transform: rotate(90deg); }
  .nav-btn-tienda { display: none; }
}

/* ── LOGO: SHRINK EN MÓVIL MUY PEQUEÑO ───────────────── */
/* Evita que el logo empuje el hamburguesa fuera de pantalla */
@media (max-width: 640px) {
  .nav-logo { flex-shrink: 1; min-width: 0; }
  /* nav-logo-sub visible en top, oculto al scrollear (.scrolled lo hace) */
  .nav-logo-sub { font-size: .6rem; letter-spacing: .2em; }
  .nav-logo-text { font-size: 1.1rem; }
  .nav-logo img  { height: 58px; }
}