/*
Theme Name: SEO Fluid Blog Pro
Theme URI: https://example.com/seo-fluid-blog-pro
Author: Tu Estudio Web
Author URI: https://example.com
Description: Theme premium para blogs orientado a SEO. Diseño mobile-first, grid fluido en porcentajes, tipografía fluida con clamp(), imágenes adaptables con lazy loading nativo, menú hamburguesa accesible y jerarquía de encabezados correcta (H1 único, H2/H3 en cascada) para un renderizado 100% amigable con buscadores desde el HTML inicial.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sfbp
Tags: blog, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, accessibility-ready, sticky-post, seo
*/

/* ==========================================================================
   0. RESET LIGERO
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
}

img, picture, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { padding-left: 1.2em; }

a { text-decoration: none; color: inherit; }

button { font: inherit; cursor: pointer; }

/* ==========================================================================
   1. VARIABLES: escalado fluido con clamp() (viewport 320px -> 1440px)
   ========================================================================== */
:root {
  /* Paleta */
  --sfbp-color-bg: #ffffff;
  --sfbp-color-text: #1a1a1a;
  --sfbp-color-muted: #6b6b6b;
  --sfbp-color-primary: #16324f;
  --sfbp-color-accent: #d97706;
  --sfbp-color-border: #e6e6e6;
  --sfbp-color-surface: #f7f7f5;

  /* Tipografía fluida: min, preferido (vw), max */
  --sfbp-fs-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --sfbp-fs-sm:   clamp(0.8rem, 0.78rem + 0.15vw, 0.9rem);
  --sfbp-fs-h1:   clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --sfbp-fs-h2:   clamp(1.5rem, 1.3rem + 1.2vw, 2.1rem);
  --sfbp-fs-h3:   clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  --sfbp-lh-base: 1.65;

  /* Espaciados fluidos */
  --sfbp-space-xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.9rem);
  --sfbp-space-sm: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
  --sfbp-space-md: clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem);
  --sfbp-space-lg: clamp(2rem, 1.5rem + 2.4vw, 4rem);

  /* Grid fluido en porcentajes (no columnas fijas en px) */
  --sfbp-container-max: 1200px;
  --sfbp-container-pad: 5%;
  --sfbp-sidebar-width: 30%;
  --sfbp-main-width: 68%;
  --sfbp-gap: 3%;

  --sfbp-radius: 10px;
  --sfbp-transition: 0.25s ease;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--sfbp-fs-base);
  line-height: var(--sfbp-lh-base);
  color: var(--sfbp-color-text);
  background: var(--sfbp-color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--sfbp-space-xs);
  color: var(--sfbp-color-primary);
}
h1 { font-size: var(--sfbp-fs-h1); }
h2 { font-size: var(--sfbp-fs-h2); }
h3 { font-size: var(--sfbp-fs-h3); }
h4 { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }

p { margin: 0 0 var(--sfbp-space-sm); }

.sfbp-container {
  width: 100%;
  max-width: var(--sfbp-container-max);
  margin-inline: auto;
  padding-inline: var(--sfbp-container-pad);
}

/* Skip link accesible / SEO (no penaliza, ayuda a accesibilidad) */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--sfbp-color-primary);
  color: #fff;
  padding: 0.8em 1.2em;
  z-index: 9999;
}
.skip-link:focus { left: 1%; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.sfbp-header {
  border-bottom: 1px solid var(--sfbp-color-border);
  padding-block: var(--sfbp-space-xs);
  position: sticky;
  top: 0;
  background: var(--sfbp-color-bg);
  z-index: 100;
}

.sfbp-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sfbp-space-xs);
}

.sfbp-branding {
  display: flex;
  align-items: center;
  gap: 0.8em;
  flex: 0 1 auto;
  min-width: 0;
}
.sfbp-logo img { max-height: 48px; width: auto; }
.sfbp-site-title-fallback {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 700;
  color: var(--sfbp-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sfbp-site-title-fallback a { color: inherit; }

/* Formulario de búsqueda (usado en el widget de la barra lateral, en 404 y en resultados sin coincidencias) */
.sfbp-search-form { display: flex; width: 100%; }
.sfbp-search-form input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0.5em 0.7em;
  font-size: var(--sfbp-fs-sm);
  border: 1px solid var(--sfbp-color-border);
  border-radius: var(--sfbp-radius) 0 0 var(--sfbp-radius);
}
.sfbp-search-form button {
  flex: 0 0 auto;
  padding: 0.5em 0.9em;
  font-size: var(--sfbp-fs-sm);
  border: 1px solid var(--sfbp-color-primary);
  background: var(--sfbp-color-primary);
  color: #fff;
  border-radius: 0 var(--sfbp-radius) var(--sfbp-radius) 0;
}
.sfbp-widget-search { background: var(--sfbp-color-surface); }

/* --- Anuncio horizontal de cabecera (AdSense) ---
   El contenedor reserva una altura mínima antes de que cargue el anuncio
   para evitar Cumulative Layout Shift (métrica de Core Web Vitals). */
.sfbp-header-ad {
  width: 100%;
  margin-top: var(--sfbp-space-xs);
  padding-top: var(--sfbp-space-xs);
  border-top: 1px solid var(--sfbp-color-border);
  text-align: center;
  overflow: hidden;
}
.sfbp-ad-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sfbp-color-muted);
  margin-bottom: 0.4em;
}
.sfbp-header-ad-inner {
  min-height: 90px; /* alto típico de un banner responsive/horizontal */
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfbp-header-ad-inner .adsbygoogle {
  width: 100%;
}
@media (max-width: 599px) {
  .sfbp-ad-hide-mobile { display: none; }
}

/* --- Navegación / menú hamburguesa mobile-first --- */
.sfbp-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--sfbp-color-border);
  border-radius: var(--sfbp-radius);
  background: transparent;
  align-items: center;
}
.sfbp-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--sfbp-color-primary);
  transition: transform var(--sfbp-transition), opacity var(--sfbp-transition);
}
.sfbp-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sfbp-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sfbp-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sfbp-primary-nav {
  width: 100%;
  order: 3;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--sfbp-transition);
}
.sfbp-primary-nav.is-open { max-height: 600px; }

.sfbp-primary-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--sfbp-space-xs) 0 0;
  display: flex;
  flex-direction: column;
}
.sfbp-primary-nav ul ul {
  padding-left: var(--sfbp-space-sm);
  display: none;
}
.sfbp-primary-nav li.menu-item-has-children.is-open > ul { display: block; }

.sfbp-primary-nav a {
  display: block;
  padding: 0.7em 0.2em;
  border-bottom: 1px solid var(--sfbp-color-border);
  font-weight: 600;
}
.sfbp-primary-nav a:hover,
.sfbp-primary-nav a:focus { color: var(--sfbp-color-accent); }

/* Desktop (mobile-first: se activa a partir de 768px) */
@media (min-width: 768px) {
  .sfbp-menu-toggle { display: none; }
  .sfbp-primary-nav {
    width: 100%;
    max-height: none;
    overflow: visible;
    border-top: 1px solid var(--sfbp-color-border);
    margin-top: var(--sfbp-space-xs);
    padding-top: 0.4em;
  }
  .sfbp-primary-nav ul {
    flex-direction: row;
    padding: 0;
    gap: 1.5em;
    position: relative;
  }
  .sfbp-primary-nav ul ul {
    display: none;
    position: absolute;
    background: var(--sfbp-color-bg);
    border: 1px solid var(--sfbp-color-border);
    min-width: 200px;
    padding: 0.5em 1em;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }
  .sfbp-primary-nav li { position: relative; }
  .sfbp-primary-nav li:hover > ul,
  .sfbp-primary-nav li:focus-within > ul { display: block; }
  .sfbp-primary-nav a { border-bottom: none; padding: 0.4em 0; }
}

/* ==========================================================================
   4. LAYOUT PRINCIPAL: grid fluido en % (mobile-first: columna única)
   ========================================================================== */
.sfbp-layout {
  display: flex;
  flex-direction: column;
  gap: var(--sfbp-space-md);
  padding-block: var(--sfbp-space-md);
}

@media (min-width: 900px) {
  .sfbp-layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .sfbp-main {
    width: var(--sfbp-main-width);
    flex: 0 0 var(--sfbp-main-width);
  }
  .sfbp-sidebar {
    width: var(--sfbp-sidebar-width);
    flex: 0 0 var(--sfbp-sidebar-width);
    margin-left: var(--sfbp-gap);
  }
}

/* ==========================================================================
   5. COLUMNA PRINCIPAL / LISTADO DE ENTRADAS
   ========================================================================== */
.sfbp-post-card {
  border: 1px solid var(--sfbp-color-border);
  border-radius: var(--sfbp-radius);
  overflow: hidden;
  margin-bottom: var(--sfbp-space-md);
  background: var(--sfbp-color-bg);
}
.sfbp-post-card .sfbp-thumb { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.sfbp-post-card .sfbp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sfbp-post-card-body { padding: var(--sfbp-space-sm); }

.sfbp-entry-title { font-size: var(--sfbp-fs-h2); margin-bottom: 0.3em; }
.sfbp-entry-title a { color: var(--sfbp-color-primary); }
.sfbp-entry-title a:hover { color: var(--sfbp-color-accent); }

.sfbp-entry-meta {
  font-size: var(--sfbp-fs-sm);
  color: var(--sfbp-color-muted);
  margin-bottom: var(--sfbp-space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}
.sfbp-entry-meta a { color: var(--sfbp-color-muted); text-decoration: underline; }

.sfbp-read-more {
  display: inline-block;
  margin-top: 0.5em;
  font-weight: 700;
  color: var(--sfbp-color-accent);
}

/* Single post */
.sfbp-single-title { font-size: var(--sfbp-fs-h1); }
.sfbp-entry-content { font-size: var(--sfbp-fs-base); }
.sfbp-entry-content h2 { margin-top: var(--sfbp-space-md); }
.sfbp-entry-content h3 { margin-top: var(--sfbp-space-sm); }
.sfbp-entry-content img { border-radius: var(--sfbp-radius); }
.sfbp-entry-content figure { margin: var(--sfbp-space-sm) 0; }
.sfbp-entry-content figcaption {
  font-size: var(--sfbp-fs-sm);
  color: var(--sfbp-color-muted);
  text-align: center;
  margin-top: 0.4em;
}

.sfbp-tags { margin-top: var(--sfbp-space-sm); font-size: var(--sfbp-fs-sm); }
.sfbp-tags a {
  display: inline-block;
  border: 1px solid var(--sfbp-color-border);
  border-radius: 999px;
  padding: 0.2em 0.8em;
  margin: 0 0.3em 0.3em 0;
}

.sfbp-share { margin: var(--sfbp-space-sm) 0; display: flex; gap: 0.6em; flex-wrap: wrap; }
.sfbp-share a {
  border: 1px solid var(--sfbp-color-border);
  border-radius: var(--sfbp-radius);
  padding: 0.4em 0.9em;
  font-size: var(--sfbp-fs-sm);
}

/* Paginación */
.sfbp-pagination {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  margin-top: var(--sfbp-space-md);
}
.sfbp-pagination a, .sfbp-pagination span {
  border: 1px solid var(--sfbp-color-border);
  border-radius: var(--sfbp-radius);
  padding: 0.5em 0.9em;
  font-size: var(--sfbp-fs-sm);
}
.sfbp-pagination .current { background: var(--sfbp-color-primary); color: #fff; }

/* Comentarios */
.sfbp-comments { margin-top: var(--sfbp-space-lg); }
.sfbp-comments ol.comment-list { list-style: none; margin: 0; padding: 0; }
.sfbp-comments .comment-body {
  border: 1px solid var(--sfbp-color-border);
  border-radius: var(--sfbp-radius);
  padding: var(--sfbp-space-sm);
  margin-bottom: var(--sfbp-space-xs);
}
.sfbp-comments ol.children { list-style: none; padding-left: var(--sfbp-space-sm); }

/* ==========================================================================
   6. SIDEBAR / WIDGETS
   ========================================================================== */
.sfbp-widget {
  border: 1px solid var(--sfbp-color-border);
  border-radius: var(--sfbp-radius);
  padding: var(--sfbp-space-sm);
  margin-bottom: var(--sfbp-space-sm);
  background: var(--sfbp-color-surface);
}
/* Los títulos de widget usan H2 vía funciones.php (before/after_title) para no romper jerarquía */
.sfbp-widget-title {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  margin-bottom: 0.6em;
  border-bottom: 2px solid var(--sfbp-color-accent);
  padding-bottom: 0.3em;
}
.sfbp-widget ul { list-style: none; margin: 0; padding: 0; }
.sfbp-widget li { padding: 0.4em 0; border-bottom: 1px dashed var(--sfbp-color-border); }
.sfbp-widget img { border-radius: 6px; }

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.sfbp-footer {
  background: var(--sfbp-color-primary);
  color: #eef2f5;
  margin-top: var(--sfbp-space-lg);
}
.sfbp-footer-widgets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sfbp-space-md);
  padding-block: var(--sfbp-space-md);
}
.sfbp-footer-widgets .sfbp-widget {
  flex: 1 1 100%;
  background: transparent;
  border-color: rgba(255,255,255,0.2);
  color: #eef2f5;
}
@media (min-width: 700px) {
  .sfbp-footer-widgets .sfbp-widget { flex: 1 1 30%; }
}
.sfbp-footer-widgets a { color: #cfe0ee; }
.sfbp-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: var(--sfbp-space-xs) 0;
  text-align: center;
  font-size: var(--sfbp-fs-sm);
}
.sfbp-footer-menu ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  padding: 0;
  margin: 0 0 0.6em;
}

/* ==========================================================================
   8. UTILIDADES / ACCESIBILIDAD
   ========================================================================== */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
.sfbp-visually-hidden { display: none; }
@media (min-width: 768px) { .sfbp-hide-desktop { display: none; } }

/* Reduce motion para usuarios con preferencia de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}