/* FROGAMES SITE HEADER v1 */
#fgh-nav {
  --fgh-bg: #000;
  --fgh-fg: #fff;
  --fgh-hover: #449cb9;
  --fgh-sub-bg: #232323;
  --fgh-sub-fg: #ebebeb;
  position: sticky; top: 0; z-index: 9000;
  display: flex; align-items: center; gap: 4px;
  padding: 0 20px; height: 70px; flex-shrink: 0;
  background: var(--fgh-bg); color: var(--fgh-fg);
  font-family: Inter, -apple-system, system-ui, sans-serif;
}
#fgh-nav a { color: inherit; text-decoration: none; }

.fgh-logo { display: flex; align-items: center; margin-right: 18px; }
.fgh-logo img { display: block; height: 32px; width: auto; }

.fgh-burger { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 8px; }

.fgh-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.fgh-item { position: relative; }

/* El logo y la zona derecha tienen anchos distintos, así que centrar el menú
   con margin:auto lo descentraría respecto al hueco sobrante, no a la barra.
   Sacarlo del flujo con position:absolute y centrarlo en el propio #fgh-nav
   (ya es "position: sticky", así que ya es su contenedor de posicionamiento)
   lo ancla al centro real de la barra sin importar esos anchos. Solo en
   escritorio: en móvil el menú es la lista apilada de siempre.
   translate(-50%,-50%) centra respecto al propio tamaño del menú, así que
   la altura de #fgh-nav es irrelevante para el centrado en sí: siempre queda
   en el centro exacto de la barra, cambie lo que cambie esa altura.
   height:100% + align-items:stretch (aquí y en .fgh-link/.fgh-trigger más
   abajo) sí dependen de la altura de la barra: sin esto, cada .fgh-item
   quedaría más bajo que #fgh-nav y el submenú (top: calc(100% + 6px), medido
   desde el propio .fgh-item) se abriría solapando el borde inferior de la
   barra en vez de justo debajo. Con el 100%, el alto de cada .fgh-item pasa
   a coincidir exactamente con el de #fgh-nav —cualquiera que sea— y el
   cálculo del submenú vuelve a caer justo debajo, sin más ajustes. */
@media (min-width: 901px) {
  .fgh-menu {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    height: 100%; align-items: stretch;
  }
  .fgh-link, .fgh-trigger { height: 100%; box-sizing: border-box; }
}

.fgh-link, .fgh-trigger {
  display: flex; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; font-size: 15px; font-weight: 600;
  padding: 10px 12px; border-radius: 8px; white-space: nowrap;
}
.fgh-link:hover, .fgh-trigger:hover, .fgh-trigger[aria-expanded="true"] { color: var(--fgh-hover); background: rgba(255,255,255,.06); }
.fgh-trigger[aria-expanded="true"] .fgh-caret { transform: rotate(180deg); }
.fgh-caret { transition: transform .15s ease; }

.fgh-submenu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px;
  background: var(--fgh-sub-bg); color: var(--fgh-sub-fg);
  border-radius: 12px; padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.45);
  display: none;
}
/* Sin JS los submenús se abren con el ratón y con el foco de teclado.
   Sin esto, los 14 enlaces que viven dentro de un submenú serían inalcanzables
   cuando el JS no carga, que es justo el escenario que este header blinda. */
.fgh-item:hover > .fgh-submenu,
.fgh-item:focus-within > .fgh-submenu,
.fgh-item.fgh-open > .fgh-submenu { display: block; }

/* Cuando el JS arranca marca el nav con .fgh-js y pasa a mandar el clic:
   los menús dejan de abrirse solos al pasar por encima. */
#fgh-nav.fgh-js .fgh-item:hover > .fgh-submenu,
#fgh-nav.fgh-js .fgh-item:focus-within > .fgh-submenu { display: none; }
#fgh-nav.fgh-js .fgh-item.fgh-open > .fgh-submenu { display: block; }

.fgh-submenu ul { list-style: none; margin: 0; padding: 0; }
.fgh-submenu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.fgh-submenu a:hover { color: var(--fgh-hover); background: rgba(255,255,255,.07); }

/* Densidad de los desplegables: 9px 12px con line-height normal daba ~39px
   por enlace (medido en producción), sensación "globosa" en los 5 submenús
   (Cursos, Recursos, Juegos, Frogames, Mi Portal). Se compacta SOLO en
   escritorio, dentro del media (min-width:901px) de más abajo, a 34px
   (line-height 20px + padding 7px), por encima del mínimo táctil de 32px.
   En móvil (max-width:900px, lista de navegación táctil pura) no se toca:
   la regla de aquí arriba (9px 12px, line-height normal, ~39px) sigue
   aplicando tal cual. Ya estaba por debajo de los 40px pedidos como suelo
   antes de este cambio; el encargo es no bajarlo más, no corregir ese
   preexistente, así que se deja intacto. */

.fgh-submenu--wide { min-width: 560px; }
.fgh-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.fgh-route-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }

/* Con 18 rutas a 180px fijos varios nombres partían en dos líneas y el panel
   crecía a lo alto de forma desigual. En escritorio se ensancha lo justo para
   que quepa el nombre más largo ("Aprende Matemáticas desde Cero", ~277px) en
   una sola línea, y el "Ver todo el catálogo" pasa a ser una fila final a todo
   lo ancho: así son 6 filas limpias de rutas + 1 fila de cierre, en vez de 7
   filas descuadradas. Anclado por la izquierda al item (no centrado en la
   pantalla), así que el ancho se eligió para no desbordar a 1280px. */
@media (min-width: 901px) {
  .fgh-submenu--wide { width: 900px; }
  .fgh-routes { gap: 4px 12px; }
  .fgh-routes li:last-child {
    grid-column: 1 / -1;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .fgh-routes li:last-child a { font-weight: 700; }

  /* Ratón + puntero fino: 34px de alto (line-height 20px + padding 7px),
     por encima del mínimo táctil de 32px pedido para escritorio. Se aplica
     a los 5 submenús por igual (mismo selector .fgh-submenu a de la regla
     base), para que el conjunto quede coherente. */
  .fgh-submenu a { padding: 7px 10px; line-height: 20px; }
}

.fgh-submenu--right { left: auto; right: 0; min-width: 160px; }

/* #fgh-lang combina .fgh-trigger (para que bindMenus le dé submenú gratis) con
   .fgh-icon-btn (para que se vea como el resto de botones-icono de la zona
   derecha). Sin este override, en móvil gana la regla ".fgh-link, .fgh-trigger"
   de @media (max-width:900px) (width:100%; padding:14px 12px), que infla el
   botón bastante más allá de los 38x38 de sus vecinos (búsqueda, noticias) y
   descuadra la zona derecha por ancho, llegando a desbordar el viewport a
   375px. El selector con id gana por especificidad a esa regla exista o no
   la media query, así que no hace falta repetirlo dentro del @media. */
#fgh-lang .fgh-trigger { width: 38px; height: 38px; padding: 0; justify-content: center; }

.fgh-badge {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: linear-gradient(180deg, #ffd66b, #f0a93c); color: #3a2600;
  font-size: 10px; font-weight: 900; letter-spacing: .5px;
}

.fgh-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fgh-cta {
  padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: var(--fgh-hover); color: #001b23;
}
.fgh-cta:hover { filter: brightness(1.1); }

/* Sin sesión, todo lo de alumno permanece oculto */
.fgh-only-auth[hidden] { display: none !important; }

.fgh-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.08); color: inherit; cursor: pointer;
}
.fgh-icon-btn:hover { background: rgba(255,255,255,.16); color: var(--fgh-hover); }

/* Sin JS el buscador no puede funcionar (filtra en cliente, sin backend). El
   botón solo se muestra si el JS activa el buscador y añade fgh-search-on al
   nav (hoy SEARCH_ENABLED = true en site-header.js, ver ahí); sin eso se
   queda oculto igual que sin JS, para no dejar un control muerto que parezca
   clicable ni enfocable con el tabulador. */
#fgh-search-btn { display: none; }
#fgh-nav.fgh-search-on #fgh-search-btn { display: flex; }

.fgh-search-panel {
  position: absolute; top: calc(100% + 6px); right: 20px; width: min(520px, calc(100vw - 40px));
  background: var(--fgh-sub-bg); border-radius: 12px; padding: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5); display: none;
}
.fgh-search-panel.fgh-open { display: block; }
#fgh-search-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.15); border-radius: 10px;
  background: rgba(0,0,0,.35); color: #fff; font: inherit; font-size: 15px;
}
#fgh-search-input:focus { outline: 2px solid var(--fgh-hover); outline-offset: 1px; }
.fgh-search-results { margin-top: 8px; max-height: 380px; overflow-y: auto; }
.fgh-search-results a {
  display: block; padding: 10px 12px; border-radius: 8px; color: var(--fgh-sub-fg);
}
.fgh-search-results a:hover, .fgh-search-results a.fgh-active { background: rgba(255,255,255,.09); }
.fgh-result-name { display: block; font-size: 14px; font-weight: 600; }
.fgh-result-meta { display: block; font-size: 12px; opacity: .7; margin-top: 2px; }
.fgh-search-empty { padding: 14px 12px; font-size: 14px; opacity: .7; }

.fgh-continue { color: var(--fgh-hover); font-weight: 700; }
#fgh-continue-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fgh-streak {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,.08); white-space: nowrap;
}
.fgh-streak:hover { background: rgba(255,255,255,.16); }

#fgh-news-btn { position: relative; }
.fgh-news-badge {
  position: absolute; top: 5px; right: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: #ff4d4d;
}
/* Acotado a #fgh-nav: sin este prefijo, la regla se aplicaba a CUALQUIER
   [hidden] de toda la página de Thinkific (fuera del header), no solo a
   los elementos del propio nav que la necesitan. */
#fgh-nav [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .fgh-caret { transition: none; }
}

@media (max-width: 900px) {
  /* La barra sube a 70px en la regla base (pedido: "un poco más alta"), pero
     en móvil se congela al valor de siempre: no era parte del encargo, y
     tocarla obligaría a mover también el top:60px del menú desplegable de
     más abajo. Sin este override, #fgh-nav heredaría los 70px igualmente
     (la regla base no está condicionada a ningún ancho). */
  #fgh-nav { height: 60px; }

  /* SIN JS: #fgh-nav sigue siendo el flex row de siempre (logo, menú, zona
     derecha lado a lado) con height:60px fijo y align-items:center. El menú
     apilado de abajo mide 700+px de alto, así que ese row lo centra
     verticalmente dentro de una caja de 60px: media lista queda por ENCIMA
     del borde superior de la barra, que además es sticky top:0 — inalcanzable,
     no hay forma de hacer scroll hacia arriba de lo que ya es el principio de
     la página. Y como el menú sigue siendo un hijo más del row (no una fila
     aparte), también se suma en horizontal al ancho del logo y de la zona
     derecha, desbordando el viewport.
     Arreglo: sin JS, #fgh-nav pasa a columna (logo / menú / zona derecha, cada
     uno en su propia fila) y la altura deja de ser un tope fijo (height:auto,
     min-height conserva el look de barra cuando el contenido cabe en una
     línea). Así la barra crece con el contenido en vez de recortarlo o
     centrarlo con overflow, y con document en flujo normal cada enlace queda
     alcanzable bajando con scroll normal.
     CON JS (.fgh-js) nada de esto aplica: el menú pasa a position:absolute
     (fuera del flujo, ver más abajo) y el row de logo+hamburguesa+zona
     derecha se queda tal cual estaba. */
  #fgh-nav:not(.fgh-js) {
    flex-direction: column; align-items: stretch;
    height: auto; min-height: 60px;
  }

  /* SIN JS el menú se muestra apilado y entero, con los submenús desplegados,
     y la hamburguesa no aparece porque no haría nada. Queda una lista larga,
     pero navegable de arriba abajo. En táctil no se puede confiar ni en :hover
     ni en que un toque dé el foco, así que aquí no hay nada que "abrir":
     simplemente está todo a la vista. */
  .fgh-menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fgh-bg); padding: 8px 12px 16px;
  }
  .fgh-submenu { display: block; }
  .fgh-link, .fgh-trigger { width: 100%; justify-content: space-between; padding: 14px 12px; font-size: 16px; }
  .fgh-submenu {
    position: static; min-width: 0; box-shadow: none;
    background: rgba(255,255,255,.04); margin: 0 0 6px;
  }
  .fgh-submenu--wide { min-width: 0; }
  .fgh-submenu--right { position: absolute; right: 0; left: auto; min-width: 160px; background: var(--fgh-sub-bg); }
  .fgh-routes { grid-template-columns: 1fr; }
  .fgh-right { gap: 6px; }

  /* CON JS aparece la hamburguesa y el menú se pliega detrás de ella. */
  #fgh-nav.fgh-js .fgh-burger { display: block; order: -1; }
  #fgh-nav.fgh-js .fgh-menu {
    display: none; position: absolute; top: 60px; left: 0; right: 0;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    max-height: calc(100vh - 60px); overflow-y: auto;
  }
  #fgh-nav.fgh-js.fgh-mobile-open .fgh-menu { display: flex; }
  #fgh-nav.fgh-js .fgh-submenu { display: none; }
  #fgh-nav.fgh-js .fgh-item.fgh-open > .fgh-submenu { display: block; }

  .fgh-search-panel { right: 10px; left: 10px; width: auto; }

  #fgh-continue-name { max-width: none; }
  .fgh-streak { padding: 6px 10px; font-size: 12px; }
}