@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

/* ============================================================
   Ser Madres y Padres Hoy
   Hoja de estilo de la revista — OJS 3
   Ajustes > Sitio web > Apariencia > Avanzado >
   "Hoja de estilo de la revista". Recargar con Ctrl+F5.
   ============================================================ */

/* ---- 1. Paleta, tipografías y medidas ------------------- */
:root {
  --smph-cuerpo-fondo: #FEFDF5;  /* fondo del cuerpo */
  --smph-cabecera:     #EFF2E6;  /* fondo de la cabecera */
  --smph-verde:        #2F6B4F;  /* verde institucional */
  --smph-verde-oscuro: #1C4432;  /* franja del menú */
  --smph-oscuro:       #24352B;  /* texto del cuerpo */
  --smph-claro:        #F4F1DE;  /* texto sobre la franja verde */
  --smph-amarillo:     #F2B705;  /* acento */

  --smph-serif-titulos: 'Bitter', Georgia, 'Times New Roman', serif;
  --smph-serif-texto:   'Source Serif 4', Georgia, 'Times New Roman', serif;

  --smph-alto-menu:   62px;      /* alto de la franja del menú */
  --smph-ancho-logo: 460px;      /* ancho del logotipo */
}

/* ---- 2. Tipografía: serifa por defecto en todo ---------- */
body,
body *:not(i):not(.fa):not([class*="fa-"]):not(.pkp_screen_reader):not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--smph-serif-texto) !important;
}

h1, h2, h3, h4, h5, h6,
.pkp_site_name, .pkp_site_name *,
.pkp_navigation_primary, .pkp_navigation_primary *,
.pkp_navigation_user, .pkp_navigation_user *,
.obj_article_summary .title,
.obj_issue_toc .title,
.cmp_button, .pkp_button,
.page_title, .pkp_page_title {
  font-family: var(--smph-serif-titulos) !important;
}

code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--smph-verde);
  letter-spacing: .005em;
}

/* ---- 3. Fondo continuo, sin franja gris superior -------- */
html,
body,
.pkp_structure_page {
  background-color: var(--smph-cuerpo-fondo) !important;
  color: var(--smph-oscuro);
}

body {
  line-height: 1.65;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_structure_page {
  margin-top: 0 !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* ---- 4. Cabecera y logo centrado ------------------------ */
.pkp_structure_head {
  background-color: var(--smph-cabecera);
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(28, 68, 50, .18);
}

.pkp_head_wrapper {
  display: block !important;
}

.pkp_site_name {
  float: none !important;
  width: 100% !important;
  text-align: center !important;
  padding: 1.8rem 0 !important;
}

.pkp_site_name .is_img,
.pkp_site_name a {
  float: none !important;
  display: inline-block !important;
}

.pkp_site_name .is_img img {
  width: var(--smph-ancho-logo) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Título en texto, si el tema lo muestra junto al logo */
.pkp_site_name .is_text,
.pkp_head_wrapper .pkp_site_name_wrapper a {
  color: var(--smph-verde-oscuro) !important;
  font-weight: 600;
  line-height: 1.25;
}

.pkp_site_name a:hover,
.pkp_site_name a:focus {
  color: var(--smph-verde) !important;
}

/* ---- 5. Franja del menú principal ----------------------- */
.pkp_site_nav_menu {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  padding: .714rem;
  z-index: 9999;
  border-bottom: 4px solid var(--smph-amarillo);
}

.pkp_site_nav_menu,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary,
.pkp_navigation_primary > li,
.pkp_navigation_user_wrapper,
.pkp_navigation_user,
.pkp_head_wrapper nav {
  background-color: var(--smph-verde-oscuro) !important;
}

/* Reserva el alto de la franja, que al ir en absoluto no ocupa flujo */
@media (min-width: 992px) {
  .pkp_structure_head {
    margin-bottom: var(--smph-alto-menu);
  }
}

.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
  color: var(--smph-claro) !important;
  font-weight: 500;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
  color: var(--smph-amarillo) !important;
}

.pkp_navigation_primary > li > a:focus-visible,
.pkp_navigation_user > li > a:focus-visible {
  outline: 2px solid var(--smph-amarillo);
  outline-offset: 2px;
}

.pkp_site_nav_toggle,
.pkp_site_nav_toggle:hover {
  background-color: transparent !important;
  color: var(--smph-verde-oscuro) !important;
}

.pkp_navigation_primary li ul,
.pkp_navigation_primary li ul li {
  background-color: var(--smph-verde-oscuro) !important;
  border: none;
}

.pkp_navigation_primary li ul li a {
  color: var(--smph-claro) !important;
}

.pkp_navigation_primary li ul li a:hover,
.pkp_navigation_primary li ul li a:focus {
  color: var(--smph-amarillo) !important;
  background-color: rgba(244, 241, 222, .08) !important;
}

/* ---- 6. Enlaces del contenido --------------------------- */
.pkp_structure_main a,
.pkp_structure_sidebar a,
.obj_article_summary a {
  color: var(--smph-verde);
}

.pkp_structure_main a:hover,
.pkp_structure_sidebar a:hover {
  color: var(--smph-verde-oscuro);
  text-decoration-color: var(--smph-amarillo);
}