/*
Theme Name: RyO Abogados
Theme URI: https://abogadosryo.cl
Author: RyO Abogados
Description: Tema editorial a medida para RyO Abogados. Estudio penal en Vitacura, Santiago. Diseño minimalista en blanco y negro, preparado para funcionar en varios idiomas con Polylang (incluido hebreo de derecha a izquierda).
Version: 1.16
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Uso privado del estudio
Text Domain: ryo
*/

/* ═══════════════════════════════════════════════════════════
   Reglas comunes a todas las plantillas.
   El diseño de cada página vive en /assets/css/
   ═══════════════════════════════════════════════════════════ */

/* Menú: marcar la página actual */
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-parent > a,
.nav-links .current-page-ancestor > a {
  border-bottom-color: #12110f;
}

/* WordPress inserta clases propias en el menú; neutralizarlas */
.nav-links li { list-style: none; }
.nav-links ul { display: none; }

/* ── Barra superior con seis secciones ──
   Entre el menú de hamburguesa (900 px) y la pantalla completa hay un tramo
   donde seis pestañas ya no caben con la separación original. Se comprime la
   separación en dos pasos, sin cambiar la tipografía ni el trazo del diseño.
   Se usa #navbar para ganar en especificidad a las hojas de cada plantilla,
   que se cargan después de esta.                                            */
@media (min-width: 901px) and (max-width: 1320px) {
  #navbar .nav-links { gap: 1.6rem; }
  #navbar .nav-links a { font-size: 0.58rem; letter-spacing: 0.15em; }
  #navbar .nav-links .lang-item + .lang-item { margin-left: -0.85rem; }
}
@media (min-width: 901px) and (max-width: 1120px) {
  #navbar { padding: 0 2rem; }
  #navbar .nav-links { gap: 1.05rem; }
  #navbar .nav-links a { font-size: 0.55rem; letter-spacing: 0.11em; }
  #navbar .nav-links .lang-item + .lang-item { margin-left: -0.5rem; }
}

/* Imágenes y contenido del editor */
img { max-width: 100%; height: auto; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1.5rem; }
.wp-caption-text, figcaption {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: #7d7a74;
  margin-top: 0.6rem;
}

/* Accesibilidad: foco visible con teclado */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 1px solid #12110f;
  outline-offset: 3px;
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Texto sólo para lectores de pantalla */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ── Página genérica (page.php) ── */
.pagina-simple {
  margin-top: 64px;
  padding: 6rem 5rem;
  max-width: 820px;
}
.pagina-simple .section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #7d7a74;
  margin-bottom: 1.5rem;
}
.pagina-simple h1 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 2rem;
}
.pagina-simple h1 em { font-style: italic; }
.pagina-simple .pagina-divider {
  width: 32px; height: 1px; background: #12110f; margin-bottom: 2.5rem;
}
.pagina-simple .pagina-contenido p,
.pagina-simple .pagina-contenido li {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.85;
  color: #33322e;
  margin-bottom: 1.6rem;
}
.pagina-simple .pagina-contenido h2,
.pagina-simple .pagina-contenido h3 {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  margin: 2.5rem 0 1rem;
}
@media (max-width: 900px) {
  .pagina-simple { padding: 3rem 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════
   SELECTOR DE IDIOMA (Polylang en el menú principal)
   ═══════════════════════════════════════════════════════════ */
.nav-links .lang-item a {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: #7d7a74;
}
.nav-links .lang-item a:hover { color: #12110f; }
.nav-links .current-lang > a {
  color: #12110f;
  border-bottom-color: #12110f;
}

/* Agrupar los idiomas entre sí, separándolos del resto del menú */
.nav-links .lang-item + .lang-item { margin-left: -1.7rem; }
.nav-links .lang-item + .lang-item::before {
  content: "·";
  color: #bdb9af;
  margin-right: 0.55rem;
}

/* Banderas, si se decide mostrarlas */
.nav-links .lang-item img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.35rem;
  width: 14px;
  height: auto;
}

@media (max-width: 900px) {
  .nav-links .lang-item + .lang-item { margin-left: 0; }
  .nav-links .lang-item + .lang-item::before { content: none; }
}

/* ═══════════════════════════════════════════════════════════
   BANDERAS DE IDIOMA EN LA BARRA SUPERIOR
   Se dibujan en header.php mediante ryo_selector_idiomas().
   Van en esta hoja, y no en las de cada plantilla, porque la
   barra aparece en todas las páginas del sitio.
   ═══════════════════════════════════════════════════════════ */
.selector-idiomas {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.selector-idiomas .idioma {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.5rem;
  border: 1px solid #e5e2db;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
  color: #7d7a74;
  text-decoration: none;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.selector-idiomas .idioma:hover,
.selector-idiomas .idioma:focus-visible {
  color: #12110f;
  border-color: #12110f;
}
.selector-idiomas .idioma.actual {
  background: #12110f;
  border-color: #12110f;
  color: #ffffff;
}
.selector-idiomas .bandera,
.selector-idiomas .idioma img {
  display: block;
  width: 18px;
  height: 12px;
  flex-shrink: 0;
}
.selector-idiomas .sigla { display: block; }

/* Vista previa sin Polylang (sólo la ve quien administra el sitio) */
.selector-inactivo .idioma { opacity: 0.45; cursor: default; }

/* En pantallas medianas, sólo las banderas */
@media (min-width: 901px) and (max-width: 1180px) {
  .selector-idiomas .idioma { padding: 0.32rem 0.38rem; }
  .selector-idiomas .sigla { display: none; }
}

/* Móvil: las banderas quedan entre el logotipo y el menú de hamburguesa */
@media (max-width: 900px) {
  #navbar .selector-idiomas { order: 2; margin-left: auto; margin-right: 1.1rem; gap: 0.3rem; }
  #navbar .hamburger { order: 3; }
  .selector-idiomas .idioma { padding: 0.3rem 0.36rem; }
  .selector-idiomas .sigla { display: none; }
}

/* ── Logotipo ────────────────────────────────────────────────
   El nombre del estudio se lee siempre de izquierda a derecha,
   también cuando la página está en hebreo. En pantallas
   angostas la versión horizontal cede paso a la apilada. */
.nav-logo svg,
.footer-logo svg {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Sólo una de las dos versiones se muestra a la vez. Se usa #navbar para
   ganar en especificidad a las hojas de cada plantilla, que se cargan
   después de ésta y declaran .nav-logo svg { display: block; }.          */
#navbar .nav-logo .logo-ancho { display: block; }
#navbar .nav-logo .logo-compacto { display: none; }

@media (max-width: 640px) {
	#navbar .nav-logo .logo-ancho { display: none; }
	#navbar .nav-logo .logo-compacto { display: block; }
}