/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*//* === Re-skin Agenda Patagonia (BelkCar, 14-10-2026) ====================
   Marca nueva: navy #011735 · celeste #0F8FEE · ocre #B46B2D · verde #047C49
   Las variables las emite la paleta de Bricks («Agenda Patagonia»). */

/* Keyline tricolor bajo el header: los tres arcos del isotipo */
body .site-header {
  border-bottom: none !important;
}
body .site-header::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--celeste) 0 33.33%,
    var(--ocre) 33.33% 66.66%,
    var(--verde) 66.66% 100%
  );
}

/* Enlaces del contenido: celeste oscuro accesible (contraste 4.7:1 sobre blanco) */
a {
  color: var(--azul-francia);
}

/* Los títulos enlazados conservan el color del título (navy), no el de enlace */
.brxe-heading a {
  color: inherit;
}

/* Botones: la base navy la define el theme style; hover al celeste oscuro */
.bricks-button:hover,
.brxe-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--azul-francia);
}

/* ===== Footer: transición, aire y jerarquía ===== */
/* Keyline tricolor también arriba del pie: espejo del header */
body .site-footer {
  border-top: 3px solid transparent;
  border-image: linear-gradient(
    to right,
    var(--celeste) 0 33.33%,
    var(--ocre) 33.33% 66.66%,
    var(--verde) 66.66% 100%
  ) 1;
  margin-top: 3.2rem;
}
/* Más aire interno y entre bloques */
body .site-footer .footer-inner {
  padding-top: 5.6rem;
  padding-bottom: 4rem;
  gap: 2.4rem;
}
/* El bloque legal, separado con una línea sutil */
body .site-footer .footer-orgs {
  margin-top: 1.6rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  width: 100%;
  max-width: 72rem;
}

/* ===== Portada de diario: nota destacada ===== */
.home-feat {
  background-color: var(--superficie-suave); /* fallback sin imagen destacada */
  transition: box-shadow 0.25s ease;
}
.home-feat:hover {
  box-shadow: 0 16px 36px rgba(1, 23, 53, 0.22);
}
.home-feat-grad {
  background: linear-gradient(
    to top,
    rgba(1, 23, 53, 0.92) 0%,
    rgba(1, 23, 53, 0.55) 45%,
    rgba(1, 23, 53, 0) 100%
  );
}

/* ===== Tarjetas de notas: elevación y zoom sutil (desktop) ===== */
#brxe-lcard1, .brxe-lcard1,
#brxe-z4iecz, .brxe-z4iecz {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.brxe-lcard1:hover, .brxe-z4iecz:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(1, 23, 53, 0.12);
}
.brxe-lcard1 img, .brxe-z4iecz img {
  transition: transform 0.4s ease;
}
.brxe-lcard1:hover img, .brxe-z4iecz:hover img {
  transform: scale(1.04);
}
/* Títulos de tarjeta parejos: máximo 3 líneas */
.brxe-lcard1 h3, .brxe-z4iecz h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Hero más compacto: las noticias aparecen antes ===== */
body .hero.brxe-section {
  padding-top: 5.6rem;
  padding-bottom: 4.8rem;
}
body .hero-logo.brxe-image {
  max-width: 40rem;
}

/* ===== Menú hamburguesa (elemento toggle de Bricks): oculto en escritorio ===== */
body .nav-toggle.brxe-toggle {
  display: none;
  color: var(--azul-profundo);
}

/* ===== Móvil: menú hamburguesa con panel desplegable ===== */
@media (max-width: 767px) {
  body .nav-toggle.brxe-toggle {
    display: inline-flex;
    order: 3;
    padding: 0.4rem 0.2rem 0.4rem 0.6rem;
    flex: 0 0 auto;
  }
  /* El menú arranca oculto; el toggle le pone .brx-open */
  body .header-nav.brxe-div {
    display: none;
    order: 4;
    flex: 1 1 100%;
    min-width: 0;
  }
  body .header-nav.brx-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 0 0.8rem;
  }
  body .header-nav.brx-open .brxe-text-link {
    padding: 1.1rem 0.2rem;
    border-bottom: 1px solid var(--borde);
    font-size: 1.5rem;
  }
  body .header-nav.brx-open .brxe-text-link:last-child {
    border-bottom: none;
  }
  /* Pills de secciones de la portada: también deslizables.
     min-width 0: sin él, como hijas flex no se encogen y desbordan la página
     (scroll horizontal en todo el móvil — hallazgo del 15-10). */
  body .secciones-inner.brxe-div {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  body .secciones-inner.brxe-div::-webkit-scrollbar {
    display: none;
  }
}

/* ===== Etiqueta de sección en las tarjetas =====
   Se muestra solo la primera categoría (las notas migradas traen varias viejas;
   el tamaño 0 del contenedor oculta las comas separadoras). */
.card-cat {
  line-height: 1;
  font-size: 0;
}
.card-cat a {
  display: none;
}
.card-cat a:first-child {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-francia);
  text-decoration: none;
}
.card-cat a:first-child:hover {
  color: var(--celeste);
}

/* ===== Migas de pan en la nota ===== */
.nota-migas,
.nota-migas .rank-math-breadcrumb {
  font-size: 1.3rem;
  color: var(--azul-francia);
}
.nota-migas a {
  color: var(--azul-francia);
  text-decoration: none;
}
.nota-migas a:hover {
  text-decoration: underline;
}
.nota-migas .separator {
  margin: 0 0.6rem;
  opacity: 0.6;
}

/* ===== Buscador (404 y resultados) ===== */
.buscador input[type="search"] {
  font-size: 1.6rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta);
}
.buscador input[type="search"]:focus {
  border-color: var(--celeste);
}
.buscador button {
  background: var(--azul-profundo);
  color: var(--superficie);
  border-radius: 999px;
}
.buscador button:hover {
  background: var(--azul-francia);
}

/* Barrita tricolor también en los títulos de búsqueda y «Últimas noticias» */
.busqueda-titulo::after,
.ultimas-titulo::after {
  content: "";
  display: block;
  width: 6.4rem;
  height: 0.4rem;
  margin-top: 1rem;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--celeste) 0 34%,
    var(--ocre) 34% 67%,
    var(--verde) 67% 100%
  );
}

/* Buscador compacto en la cabecera
   (los anchos van por ID: Bricks emite #brxe-bsqhd6 y el ID gana a las clases) */
body .buscador-header input[type="search"] {
  font-size: 1.4rem;
  padding: 0.7rem 1.4rem;
}
body .buscador-header button {
  padding: 0.7rem 1.2rem;
}
@media (min-width: 768px) and (max-width: 991px) {
  body #brxe-bsqhd6 {
    width: 16rem;
  }
}

/* ===== Móvil: cabecera en dos filas (logo + buscador / menú) =====
   La marca ya está en la cabecera, así que el hero también se achica. */
@media (max-width: 767px) {
  body .site-header .header-inner.brxe-div {
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.2rem;
  }
  /* Fila única: logo a la izquierda; buscador y hamburguesa a la derecha.
     El cambio de logo (horizontal → circular 2758) se hace con elementos
     Bricks y visibilidad por breakpoint en la plantilla 2694, no acá.
     Padding vertical compacto para que el logo circular luzca grande
     sin agigantar la barra. */
  body #brxe-hanxvw {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
  /* El buscador se estira y llena el espacio entre el logo y la hamburguesa */
  body #brxe-bsqhd6 {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    order: 2;
  }
  body #brxe-bsqhd6 input[type="search"] {
    width: 100%;
    font-size: 1.3rem;
    padding: 0.5rem 1.2rem;
  }
  /* Hero: solo la bajada institucional (la marca ya está en la cabecera) */
  body .hero.brxe-section {
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
  }
  body .hero-logo.brxe-image {
    display: none;
  }
}

/* ===== Skip-link: oculto hasta recibir foco de teclado ===== */
.skip-link {
  position: absolute;
  left: -999rem;
  top: 0;
  z-index: 1000;
  background: var(--azul-profundo);
  color: #ffffff;
  padding: 1rem 1.8rem;
  border-radius: 0 0 8px 0;
  font-size: 1.4rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* Texto solo para lectores de pantalla y buscadores (H1 de la portada) */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Detalles globales ===== */
::selection {
  background: var(--celeste);
  color: #ffffff;
}
html {
  scroll-behavior: smooth;
}

/* Foco visible para navegación con teclado */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: 2px;
}

/* ===== Estilos editoriales para el contenido Gutenberg =====
   Bricks lo renderiza dentro de .brxe-post-content (notas y páginas);
   acá los bloques toman los tokens de la marca sin que el redactor haga nada. */

/* Subtítulos dentro del contenido: ritmo de lectura */
.brxe-post-content h2 {
  margin-top: 4rem;
  margin-bottom: 1.2rem;
  font-size: 2.6rem;
  line-height: 1.3;
}
.brxe-post-content h3 {
  margin-top: 3.2rem;
  margin-bottom: 1rem;
  font-size: 2.1rem;
  line-height: 1.35;
}
.brxe-post-content p {
  margin-bottom: 1.6rem;
}

/* Enlaces del cuerpo: subrayado legible */
.brxe-post-content a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.brxe-post-content a:hover {
  color: var(--celeste);
}

/* Listas: viñetas con el celeste oscuro de la marca */
.brxe-post-content ul,
.brxe-post-content ol {
  margin: 0 0 1.6rem;
  padding-left: 2.2rem;
}
.brxe-post-content li {
  margin-bottom: 0.8rem;
}
.brxe-post-content li::marker {
  color: var(--azul-francia);
}

/* Citas: tarjeta con barra celeste */
.brxe-post-content blockquote {
  margin: 2.4rem 0;
  padding: 1.6rem 2rem;
  border-left: 4px solid var(--celeste);
  background: var(--superficie-suave);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.brxe-post-content blockquote p:last-child {
  margin-bottom: 0;
}
.brxe-post-content blockquote cite {
  display: block;
  margin-top: 0.8rem;
  font-style: normal;
  font-size: 1.4rem;
  color: var(--azul-francia);
}

/* Imágenes y epígrafes */
.brxe-post-content .wp-block-image img {
  border-radius: 8px;
  height: auto;
}
.brxe-post-content figcaption {
  margin-top: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--azul-francia);
  border-left: 3px solid var(--borde);
  padding-left: 1rem;
}

/* Separador: la keyline tricolor como recurso editorial */
.brxe-post-content hr {
  border: 0;
  height: 3px;
  width: 12rem;
  margin: 3.2rem auto;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--celeste) 0 34%,
    var(--ocre) 34% 67%,
    var(--verde) 67% 100%
  );
}

/* Tablas: sobrias, con los bordes de la paleta */
.brxe-post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.4rem 0;
  font-size: 1.5rem;
}
.brxe-post-content th,
.brxe-post-content td {
  border: 1px solid var(--borde);
  padding: 0.9rem 1.2rem;
  text-align: left;
}
.brxe-post-content th {
  background: var(--superficie-suave);
  font-weight: 600;
}

/* Botones de bloque (si un redactor los usa): navy de marca */
.brxe-post-content .wp-block-button__link {
  background-color: var(--azul-profundo);
  color: var(--superficie);
  border-radius: 999px;
  text-decoration: none;
}
.brxe-post-content .wp-block-button__link:hover {
  background-color: var(--azul-francia);
}

/* Barrita de acento tricolor bajo los títulos de sección */
.latest h2::after,
#brxe-1hb4o5::after {
  content: "";
  display: block;
  width: 6.4rem;
  height: 0.4rem;
  margin-top: 1rem;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--celeste) 0 34%,
    var(--ocre) 34% 67%,
    var(--verde) 67% 100%
  );
}