/*!
 * pelotapasto.com — Header (baseline limpio)
 * Sin sticky. Solo layout editorial.
 */

@layer pp-header {

/* =========================
   HEADER BASE (ESTÁTICO)
========================= */

.pp-header,
header.site-header {
  position: relative;
  background: var(--pp-paper);
  color: var(--pp-ink);
  border-bottom: 0;
}

/* El header nunca subraya links */
.pp-header a,
.pp-header a:link,
.pp-header a:visited,
.pp-header a:hover,
.pp-header a:active,
.pp-header a:focus,
.pp-header a:focus-visible {
  text-decoration: none !important;
}

/* =========================
   CONTENEDOR
========================= */

.pp-header__inner {
  max-width: var(--pp-wide);
  margin-inline: auto;
  padding-inline: var(--pp-gutter);

  /* Desktop/general (no tocar desktop): queda como estaba */
  padding-block: .55rem .45rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
}

/* =========================
   FILA MARCA
========================= */

.pp-header__row--top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
}

.pp-header__slot--brand {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

/* Marca */
.pp-header__brand,
.pp-header__brand a,
.site-title,
.site-title a {
  font-family: var(--pp-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;

  color: var(--pp-orange) !important;
  text-decoration: none !important;
}

.pp-header__brand {
  font-size: 2.6rem;
}

/* =========================
   BARRA DE NAVEGACIÓN
========================= */

.pp-header__row--primary {
  position: relative;
  display: flex;
  justify-content: center;

  /* === FULL BLEED BREAKOUT === */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* Bordes editoriales reales */
  border-top: 0.5px solid var(--pp-gray);
  border-bottom: 0.5px solid var(--pp-gray);

  padding: 3px 0 4px;
  background: var(--pp-paper);
}

/* Eliminamos pseudo-líneas heredadas */
.pp-header__row--primary::before,
.pp-header__row--primary::after {
  content: none !important;
}

/* =========================
   MENÚ
========================= */

.pp-header__menu {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;

  font-family: var(--pp-font-ui);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pp-header__menu > li {
  margin: 0;
  padding: 0;
}

.pp-header__menu a {
  color: var(--pp-blue) !important;
  text-decoration: none !important;
  line-height: 1.05;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 520px) {

  /* Mucho menos aire arriba/abajo */
  .pp-header__inner {
    padding-block: .18rem .12rem; /* ↓ fuerte */
    gap: .12rem;                  /* ↓ menos distancia marca↔barra */
  }

  .pp-header__row--top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .06rem;                  /* ↓ casi pegado */
  }

  .pp-header__brand {
    font-size: 2.0rem;            /* ↓ reduce altura total */
  }

  /* Barra un poco más compacta en alto */
  .pp-header__row--primary {
    padding: 2px 0 3px;
  }

  /*
   * ✅ Scroll horizontal robusto (iOS):
   * el scroll vive en el UL y el UL mide por contenido
   */
  .pp-header__row--primary {
    overflow: hidden; /* evita efectos raros al hacer scroll del UL */
  }

  .pp-header__menu {
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: flex-start;

    width: max-content; /* clave: overflow real */
    max-width: none;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;

    font-size: .78rem;
    gap: 14px;

    padding-inline: var(--pp-gutter);
  }

  .pp-header__menu > li {
    flex: 0 0 auto;
  }

  /* Ocultar scrollbar */
  .pp-header__menu::-webkit-scrollbar { display: none; }
  .pp-header__menu { scrollbar-width: none; }
}

} /* end layer */