/* =============================================================
   parejas.club - CABECERA Y MENÚ (2026)

   Rediseño global del menú, en móvil y en escritorio:

     - Cabecera de cristal: translúcida con efecto de blur, de
       modo que el contenido que pasa por debajo se ve difuminado.
     - En escritorio el menú pasa a DOS filas: logo + buscador +
       botón de opciones arriba, y los enlaces de navegación
       abajo, centrados y con tipografía mayor.
     - En móvil el menú es un "cajetín" que cae desde la cabecera
       con fondo translúcido, blur y textos más grandes.
     - El buscador del menú es un campo grande y destacado, con
       icono y botón, en lugar del input encogido de antes.

   Se carga DESPUÉS de css/styles.css (que es la hoja base del
   sitio) y en todas las plantillas.
   ============================================================= */

/* --------------------------------------------------------------
   1. CABECERA DE CRISTAL
   -------------------------------------------------------------- */

/* NOTA
   El selector antiguo era ".pinktheme .header", que nunca casaba
   con <header class="header-6 header pinktheme"> (el elemento NO
   es descendiente de sí mismo), así que la cabecera se quedaba con
   el azul marino de Clarity (#002538). Aquí se usa el selector
   correcto y además se le da el degradado de la marca. */
.main-container > header.pinktheme {
  background-color: rgba(153, 0, 153, .62);
  background-image: linear-gradient(95deg,
      rgba(123, 47, 247, .90) 0%,
      rgba(153, 0, 153, .82) 30%,
      rgba(206, 33, 105, .76) 62%,
      rgba(255, 77, 157, .70) 100%);
  -webkit-backdrop-filter: blur(var(--pc-glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--pc-glass-blur)) saturate(180%);
  box-shadow: 0 .7rem 2rem -.9rem rgba(59, 15, 111, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

/* La cabecera pasa a "sticky": así su alto es siempre el que
   necesita (una o dos filas) y el contenido nunca queda debajo.
   Como ocupa su sitio en el flujo, el margen superior que
   styles.css reservaba para la cabecera deja de hacer falta. */
.main-container > header {
  position: sticky;
  top: 0;
  z-index: 3;
  width: 100%;
  left: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  height: auto;
  min-height: 3.3rem;
  overflow: visible;
  white-space: normal;
  padding: .35rem .9rem;
}

.main-container .content-area {
  margin-top: 0;
}

/* --- Logo ------------------------------------------------------ */
.main-container > header #branding {
  position: static;
  float: none;
  margin: 0;
  top: 0;
  order: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  height: auto;
  padding: 0;
}

.main-container > header .logo {
  margin: 0;
  display: flex;
  align-items: center;
}

.main-container > header .logo img {
  width: auto;
  max-height: 2.4rem;
  margin: 0;
}

/* --- Botón de opciones (⋮) ------------------------------------ */
.main-container > header .settings {
  order: 4;
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

.main-container > header .header-overflow-trigger {
  order: 5;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.main-container > header .header-overflow-trigger:hover {
  background: rgba(255, 255, 255, .3);
  transform: scale(1.06);
}

.main-container > header .header-overflow-trigger > span,
.main-container > header .header-overflow-trigger > span::after,
.main-container > header .header-overflow-trigger > span::before {
  background: #fff;
}

/* --------------------------------------------------------------
   2. BUSCADOR DEL MENÚ
   El mismo formulario se emite dos veces:
     - .pcsearch-top    -> barra superior (escritorio)
     - .pcsearch-drawer -> cajetín del menú (móvil)
   En cada breakpoint sólo se ve uno de los dos.
   -------------------------------------------------------------- */

.pcsearch {
  display: block;
  margin: 0;
}

.pcsearch-label {
  display: block;
  margin: 0 0 .5rem .2rem;
  font-family: 'Metropolis', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.pcsearch-field {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .4rem .35rem .9rem;
  background: var(--pc-glass-bg);
  border: 1.5px solid var(--pc-glass-border);
  border-radius: 1.25rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 .8rem 2rem -.9rem rgba(0, 0, 0, .55);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.pcsearch-field:focus-within {
  background: var(--pc-glass-bg-strong);
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .22), 0 .8rem 2rem -.9rem rgba(0, 0, 0, .55);
}

.pcsearch-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: #fff;
  opacity: .9;
}

.pcsearch-ico svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.pcsearch-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: .6rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: 'Metropolis', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
}

.pcsearch-input::placeholder {
  color: rgba(255, 255, 255, .78);
}

.pcsearch-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.pcsearch-go {
  flex: 0 0 auto;
  margin: 0;
  padding: .62rem 1.15rem;
  border: 0;
  border-radius: .9rem;
  background: #fff;
  color: var(--pc-pink);
  font-family: 'Metropolis', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.pcsearch-go:hover {
  background: var(--pc-grad-pink);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 .6rem 1.2rem -.6rem rgba(59, 15, 111, .9);
}

/* La versión de la barra superior sólo existe en escritorio */
.pcsearch-top {
  display: none;
}

/* --------------------------------------------------------------
   3. MENÚ DE ESCRITORIO
   -------------------------------------------------------------- */
@media screen and (min-width: 40em) {

  /* La cabecera de escritorio se monta con GRID y filas explícitas.
     Con flex + wrap la fila del menú se salía de la caja de la
     cabecera (el alto no crecía) y el menú se montaba sobre el
     contenido. Con grid cada bloque tiene su sitio:
        fila 1 -> logo | buscador | botón de opciones
        fila 2 -> enlaces de navegación                     */
  .main-container > header.pinktheme {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "brand search actions"
      "nav   nav    nav";
    align-items: center;
    align-content: start;
    column-gap: 1.2rem;
    row-gap: .15rem;
    height: auto;
    min-height: 6.4rem;
    padding: .45rem 4%;
  }

  .main-container > header > a {
    grid-area: brand;
    display: flex;
    align-items: center;
  }

  .main-container > header .logo img {
    max-height: 2.5rem;
  }

  .pcsearch-top {
    display: block;
    grid-area: search;
    justify-self: end;
    width: min(21rem, 34vw);
  }

  .pcsearch-top .pcsearch-label {
    display: none;
  }

  .pcsearch-top .pcsearch-field {
    border-radius: 2rem;
    padding: .2rem .25rem .2rem .8rem;
  }

  .pcsearch-top .pcsearch-input {
    padding: .45rem 0;
    font-size: .92rem;
  }

  .pcsearch-top .pcsearch-go {
    padding: .45rem .95rem;
    font-size: .82rem;
  }

  /* El botón de opciones (⋮) va al extremo derecho de la primera fila */
  .main-container > header .settings {
    display: none;
  }

  .main-container > header .header-overflow-trigger {
    grid-area: actions;
    justify-self: end;
  }

  /* En escritorio el botón hamburguesa no se muestra. styles.css
     sólo lo ocultaba entre 320 y 480px, así que en pantallas grandes
     seguía viéndose y el JS de js/responsive-nav.js seCREÍA en
     modo móvil, sacando el menú del flujo (position:absolute) y
     dejándolo encima del contenido. */
  .nav-toggle {
    display: none !important;
  }

  /* La navegación ocupa su propia fila, centrada.

     Aquí se neutralizan los valores que styles.css deja para el menú
     móvil (clip, max-height:0, overflow:hidden, left:10rem): en
     escritorio dejaban el menú recortado y desplazado fuera de la
     cabecera. Se usa el mismo selector que styles.css para ganar en
     la cascada (menu.css se carga después). */
  .js .nav-collapse,
  .nav-collapse {
    grid-area: nav;
    float: none;
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    clip: auto;
    margin: 0 !important;
    left: 0;
  }

  .nav-collapse ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
  }

  .nav-collapse li {
    float: none;
    width: auto;
  }

  .nav-collapse a {
    float: none;
    width: auto;
    display: inline-block;
    padding: .5rem .85rem;
    font-family: 'Metropolis', 'Segoe UI', system-ui, sans-serif;
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.5;
    color: #fff;
    border-radius: 1.6rem;
    transition: background .18s ease, transform .18s ease;
  }

  .nav-collapse a:hover,
  .nav-collapse a:active {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-1px);
  }

  .nav-collapse .active a,
  .nav-collapse a.active {
    background: rgba(255, 255, 255, .26);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
  }

  /* En escritorio el buscador del cajetín no se muestra */
  .nav-search-item {
    display: none !important;
  }
}

/* --------------------------------------------------------------
   4. MENÚ MÓVIL: EL "CAJETÍN"
   Cae desde la cabecera, con fondo translúcido y blur, para que
   se vea el contenido que pasa por debajo.
   -------------------------------------------------------------- */
@media screen and (max-width: 39.99em) {

  .main-container > header {
    flex-wrap: nowrap;
    padding: .4rem .8rem;
    gap: .6rem;
  }

  .main-container > header .logo img {
    max-height: 2.1rem;
  }

  /* El botón hamburguesa (lo crea js/responsive-nav.js) se define más
     abajo, junto al cajetín. */

  /* El cajetín */
  .js .nav-collapse {
    position: absolute !important;
    /* styles.css deja "clip: rect(0 0 0 0)" para esconder el menú. Eso
       sólo deja de aplicarse cuando el elemento pasa a position:relative
       (que es lo que hacía el JS al abrirlo), así que aquí hay que
       quitar el clip o el cajetín se dibuja pero no se ve. */
    clip: auto;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 0 !important;
    height: auto;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    background: var(--pc-nav-bg);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0 0 1.8rem 1.8rem;
    box-shadow: var(--pc-glass-shadow);
  }

  /* styles.css (entre 320 y 480px) dejaba el menú siempre abierto y
     sin botón; se anula para que el cajetín funcione igual en todos
     los tamaños de móvil. */
  .js .nav-collapse.closed {
    max-height: 0 !important;
    margin: 0 !important;
  }

  .nav-toggle {
    display: flex !important;
    order: 2;
    flex: 0 0 auto;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
  }

  .nav-toggle:before {
    color: #fff;
    font-size: 1.5rem;
    line-height: 2.9rem;
  }

  .nav-toggle.active:before {
    font-size: 1.2rem;
    line-height: 2.9rem;
  }

  /* Cerrado no debe quedar en el recorrido de teclado ni en el árbol de
     accesibilidad: se oculta de verdad, no sólo con un recorte. */
  .js .nav-collapse:not(.opened) {
    visibility: hidden;
  }

  .js .nav-collapse.opened {
    visibility: visible;
    height: auto;
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .js .nav-collapse ul {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 1rem 1rem 1.3rem;
    left: 0;
  }

  .js .nav-collapse li {
    float: none;
    width: 100%;
    margin: 0 0 .25rem;
  }

  .js .nav-collapse a {
    float: none;
    display: block;
    width: 100%;
    padding: .95rem 1.1rem;
    font-family: 'Metropolis', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.4;
    color: #fff;
    border-radius: 1rem;
    transition: background .18s ease;
  }

  .js .nav-collapse a:hover,
  .js .nav-collapse a:active {
    background: rgba(255, 255, 255, .18);
  }

  .js .nav-collapse .active a,
  .js .nav-collapse a.active {
    background: rgba(255, 255, 255, .26);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
  }

  /* El buscador, dentro del cajetín, con más tamaño */
  .nav-search-item {
    display: block;
    margin: 0 0 .8rem;
  }

  .pcsearch-drawer {
    display: block;
  }

  .pcsearch-drawer .pcsearch-field {
    padding: .45rem .45rem .45rem 1rem;
    border-radius: 1.35rem;
  }

  .pcsearch-drawer .pcsearch-input {
    font-size: 1.08rem;
    padding: .7rem 0;
  }

  .pcsearch-drawer .pcsearch-go {
    padding: .7rem 1.2rem;
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------
   5. VELO Y PANEL LATERAL
   El velo (mask) tapaba la página con un pink al 80%: se
   sustituye por un velo oscuro translúcido con blur, para que se
   vea el contenido difuminado por debajo del cajetín.
   -------------------------------------------------------------- */
.mask {
  background: rgba(59, 15, 111, .42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

#panel {
  position: fixed;
  top: 3.4rem;
  right: 0;
  float: none;
  min-width: 15rem;
  max-width: 20rem;
  padding-top: .6rem;
  background: var(--pc-nav-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-radius: 0 0 0 1.6rem;
  box-shadow: -1rem 1rem 3rem -1.2rem rgba(59, 15, 111, .85);
  z-index: 4;
}

#panel .sidenav-content {
  padding: 1rem 1.2rem 1.4rem;
}

#panel .nav-link a,
#panel a {
  display: block;
  padding: .7rem .9rem;
  font-family: 'Metropolis', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  border-radius: .9rem;
}

#panel a:hover {
  background: rgba(255, 255, 255, .18);
}