/*
 * Semilla — CSS principal.
 *
 * Contiene estilos de header, navegación, menú móvil,
 * footer, sidebar, contenido y utilidades de layout.
 *
 * En fases posteriores, este archivo se dividirá en:
 * header.css, footer.css, navigation.css, mobile-menu.css, etc.
 * En Fase 1 se mantiene unificado para simplicidad.
 *
 * @package Semilla
 * @since   0.1.0
 */

/* ── Contenedor ─────────────────────────────────────────── */

.sem-container {
  width: 100%;
  max-width: var(--sem-container-max);
  margin-inline: auto;
  padding-inline: var(--sem-spacing-md);
}

.sem-container--narrow {
  max-width: var(--sem-container-narrow);
}

/* ── Site Header ────────────────────────────────────────── */

.sem-site-header {
  background-color: var(--sem-color-white);
  border-bottom: 1px solid var(--sem-color-border);
}

.sem-site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sem-spacing-lg);
  max-width: var(--sem-container-max);
  margin-inline: auto;
  padding: var(--sem-spacing-md);
}

.sem-site-header__branding {
  flex-shrink: 0;
}

.sem-site-header__title-link {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sem-color-dark);
  text-decoration: none;
}

.sem-site-header__title-link:hover,
.sem-site-header__title-link:focus-visible {
  color: var(--sem-color-primary);
}

.sem-site-header__description {
  font-size: 0.75rem;
  color: var(--sem-color-text-light);
  margin: 0;
}

.custom-logo-link {
  display: block;
}

.custom-logo {
  display: block;
  height: auto;
}

/* ── Navegación principal ───────────────────────────────── */

.sem-menu--primary {
  margin-left: auto;
}

.sem-menu--primary .sem-menu__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sem-nav__item {
  position: relative;
  margin: 0;
}

.sem-nav__link {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--sem-color-dark);
  text-decoration: none;
  border-radius: var(--sem-radius-sm);
  font-weight: 500;
  transition: color var(--sem-transition-base), background-color var(--sem-transition-base);
}

.sem-nav__link:hover,
.sem-nav__link:focus-visible {
  color: var(--sem-color-primary);
  background-color: var(--sem-color-light);
}

/* ── Header CTA ─────────────────────────────────────────── */

.sem-site-header__cta {
  flex-shrink: 0;
}

/* ── Menú móvil - Toggle ────────────────────────────────── */

.sem-mobile-toggle {
  display: none;
  padding: 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--sem-color-dark);
  border-radius: var(--sem-radius-sm);
}

.sem-mobile-toggle--fallback {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10001;
}

.sem-mobile-toggle:focus-visible {
  outline: 2px solid var(--sem-color-primary);
  outline-offset: 2px;
}

.sem-mobile-toggle__icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  position: relative;
  transition: background-color var(--sem-transition-base);
}

.sem-mobile-toggle__icon::before,
.sem-mobile-toggle__icon::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  position: absolute;
  left: 0;
  transition: transform var(--sem-transition-base);
}

.sem-mobile-toggle__icon::before {
  top: -7px;
}

.sem-mobile-toggle__icon::after {
  top: 7px;
}

/* Toggle activo (X) */
.sem-mobile-toggle[aria-expanded="true"] .sem-mobile-toggle__icon {
  background-color: transparent;
}

.sem-mobile-toggle[aria-expanded="true"] .sem-mobile-toggle__icon::before {
  top: 0;
  transform: rotate(45deg);
}

.sem-mobile-toggle[aria-expanded="true"] .sem-mobile-toggle__icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ── Menú móvil - Panel ─────────────────────────────────── */

.sem-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  top: 0;
  z-index: 9999;
  background-color: var(--sem-color-white);
  padding: var(--sem-spacing-xl) var(--sem-spacing-md);
  overflow-y: auto;
}

.sem-mobile-menu.is-active {
  display: block;
}

.sem-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sem-mobile-nav .sem-nav__link {
  display: block;
  padding: 0.75rem 0;
  font-size: 1.125rem;
  border-bottom: 1px solid var(--sem-color-border);
}

.sem-mobile-nav .sem-submenu-toggle {
  float: right;
  margin-top: 0.5rem;
}

.sem-mobile-nav .sub-menu {
  display: none;
  margin: 0 0 0 1rem;
  padding: 0;
  list-style: none;
}

.sem-mobile-nav .menu-item-has-children.is-expanded > .sub-menu {
  display: block;
}

/* ── Site Main ──────────────────────────────────────────── */

.sem-site-main {
  padding-block: var(--sem-spacing-xl);
}

.sem-site-main__inner {
  max-width: var(--sem-container-max);
  margin-inline: auto;
  padding-inline: var(--sem-spacing-md);
}

.sem-site-main__inner--has-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sem-spacing-xl);
  align-items: start;
}

/* ── Sidebar ────────────────────────────────────────────── */

.sem-sidebar {
  font-size: 0.9375rem;
}

/* ── Site Footer ────────────────────────────────────────── */

.sem-site-footer {
  background-color: var(--sem-color-dark);
  color: var(--sem-color-white);
  padding-block: var(--sem-spacing-xl);
}

.sem-site-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

.sem-site-footer a:hover,
.sem-site-footer a:focus-visible {
  color: var(--sem-color-white);
}

.sem-site-footer__inner {
  max-width: var(--sem-container-max);
  margin-inline: auto;
  padding-inline: var(--sem-spacing-md);
}

.sem-site-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sem-spacing-lg);
  margin-bottom: var(--sem-spacing-xl);
}

.sem-site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sem-spacing-md);
  padding-top: var(--sem-spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.875rem;
}

.sem-site-footer__copyright {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
}

/* Menú legal */
.sem-footer-legal-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sem-spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sem-footer-legal-nav__list .sem-nav__item {
  margin: 0;
}

/* Widgets en footer */
.sem-site-footer .sem-widget {
  margin-bottom: var(--sem-spacing-lg);
}

.sem-site-footer .sem-widget__title {
  color: var(--sem-color-white);
  font-size: 1rem;
  margin-bottom: var(--sem-spacing-md);
}

/* ── Entradas (listado) ─────────────────────────────────── */

.sem-entries {
  display: grid;
  gap: var(--sem-content-card-gap, var(--sem-spacing-xl));
}

.sem-entry {
  padding-bottom: var(--sem-spacing-lg);
  border-bottom: 1px solid var(--sem-color-border);
}

.sem-entry__title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.sem-entry__title a {
  color: var(--sem-color-dark);
  text-decoration: none;
}

.sem-entry__title a:hover,
.sem-entry__title a:focus-visible {
  color: var(--sem-color-primary);
}

.sem-entry__sticky {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background-color: var(--sem-color-primary);
  color: var(--sem-color-white);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--sem-radius-sm);
  margin-bottom: 0.5rem;
}

.sem-entry__thumbnail {
  margin-bottom: var(--sem-spacing-md);
}

.sem-entry__image {
  border-radius: var(--sem-radius-md);
}

.sem-entry__excerpt {
  color: var(--sem-color-text-light);
  margin-bottom: var(--sem-spacing-md);
}

.sem-entry__read-more {
  font-weight: 500;
}

.sem-entry__meta,
.sem-search-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin-bottom: var(--sem-spacing-md);
  color: var(--sem-color-text-light);
  font-size: 0.875rem;
}

.sem-content-layout--grid-2,
.sem-content-layout--grid-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sem-content-layout--grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sem-content-layout--grid-2 .sem-entry,
.sem-content-layout--grid-3 .sem-entry {
  height: 100%;
}

.sem-entry--box {
  padding: var(--sem-content-card-padding, var(--sem-spacing-md));
  border: var(--sem-content-card-border, 1px solid var(--sem-color-border));
  border-radius: var(--sem-content-card-radius, var(--sem-radius-md));
  box-shadow: var(--sem-content-card-shadow, none);
}

@media (prefers-reduced-motion: reduce) {
  .sem-entry--animated {
    transition: none;
  }

  .sem-entry--animated:hover {
    transform: none;
  }
}

.sem-single-entry--narrow,
.sem-page-entry--narrow {
  max-width: 760px;
}

.sem-single-entry--wide,
.sem-page-entry--wide {
  max-width: 100%;
}

.sem-search-entry {
  display: grid;
  gap: var(--sem-spacing-sm);
  padding-bottom: var(--sem-spacing-md);
  border-bottom: 1px solid var(--sem-color-border);
}

.sem-search-entry__thumbnail {
  display: block;
}

.sem-search-entry__image,
.sem-page-entry__image {
  height: auto;
  max-width: 100%;
  border-radius: var(--sem-radius-md);
}

.sem-author-header {
  display: flex;
  align-items: center;
  gap: var(--sem-spacing-md);
  margin-top: var(--sem-spacing-md);
}

.sem-author-header__avatar {
  flex: 0 0 auto;
  border-radius: 50%;
}

.sem-author-header__bio > :last-child {
  margin-bottom: 0;
}

.sem-breadcrumbs {
  margin-bottom: var(--sem-spacing-sm);
  font-size: 0.8125rem;
}

.sem-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: inherit;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sem-breadcrumbs__separator {
  opacity: .55;
}

.sem-breadcrumbs a {
  color: inherit;
}

@media (max-width: 767px) {
  .sem-content-layout--grid-2,
  .sem-content-layout--grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ── Paginación ─────────────────────────────────────────── */

.navigation.pagination {
  margin-top: var(--sem-spacing-xl);
}

.nav-links {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--sem-color-border);
  border-radius: var(--sem-radius-sm);
  color: var(--sem-color-dark);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--sem-transition-base), color var(--sem-transition-base), border-color var(--sem-transition-base);
}

.nav-links .page-numbers.current {
  background-color: var(--sem-color-primary);
  border-color: var(--sem-color-primary);
  color: var(--sem-color-white);
}

.nav-links .page-numbers:hover:not(.current):not(.dots),
.nav-links .page-numbers:focus-visible:not(.current):not(.dots) {
  background-color: var(--sem-color-light);
  border-color: var(--sem-color-primary);
  color: var(--sem-color-primary);
}

/* ── Entrada individual ─────────────────────────────────── */

.sem-single-entry__header {
  margin-bottom: var(--sem-spacing-lg);
}

.sem-single-entry__title {
  margin-bottom: 0.5rem;
}

.sem-single-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--sem-color-text-light);
}

.sem-single-entry__meta > *:not(:last-child)::after {
  content: '·';
  margin-inline: 0.5rem;
}

.sem-single-entry__thumbnail {
  margin-bottom: var(--sem-spacing-lg);
}

.sem-single-entry__image {
  border-radius: var(--sem-radius-md);
}

.sem-single-entry__content {
  margin-bottom: var(--sem-spacing-xl);
}

.sem-single-entry__footer {
  padding-top: var(--sem-spacing-lg);
  border-top: 1px solid var(--sem-color-border);
}

.sem-single-entry__tags-label {
  font-weight: 600;
}

/* Navegación entre entradas */
.sem-post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sem-spacing-lg);
  margin-top: var(--sem-spacing-xl);
  padding-top: var(--sem-spacing-lg);
  border-top: 1px solid var(--sem-color-border);
}

.sem-post-navigation__label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sem-color-text-light);
  margin-bottom: 0.25rem;
}

.sem-post-navigation__title {
  font-weight: 500;
}

.sem-post-navigation__next {
  text-align: right;
}

/* ── Página 404 ─────────────────────────────────────────── */

.sem-404 {
  text-align: center;
  padding-block: var(--sem-spacing-xl);
}

.sem-404__title {
  font-size: 3rem;
  margin-bottom: var(--sem-spacing-md);
}

.sem-404__body {
  max-width: 500px;
  margin-inline: auto;
}

.sem-404 .sem-search-form {
  margin-block: var(--sem-spacing-lg);
}

/* ── Formulario de búsqueda ─────────────────────────────── */

.sem-search-form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.sem-search-form__fields {
  display: flex;
  gap: 0.5rem;
}

.sem-search-form__input {
  flex: 1;
}

.sem-search-form__submit {
  flex-shrink: 0;
}

/* ── Page header (título de archivo, blog, etc.) ─────────── */

.sem-page-header {
  margin-bottom: var(--sem-spacing-xl);
}

.sem-page-header__title {
  margin-bottom: 0.5rem;
}

.sem-page-header__description {
  color: var(--sem-color-text-light);
}

/* ── Páginas con contenido paginado ─────────────────────── */

.sem-page-links {
  margin-top: var(--sem-spacing-lg);
}

/* ── Sin contenido ──────────────────────────────────────── */

.sem-no-content {
  text-align: center;
  padding-block: var(--sem-spacing-xl);
}

.sem-no-content__title {
  margin-bottom: var(--sem-spacing-md);
}

.sem-no-content .sem-search-form {
  margin-top: var(--sem-spacing-lg);
}

/* ── Comentarios ────────────────────────────────────────── */

.sem-comments {
  margin-top: var(--sem-spacing-xl);
}

.sem-comments__title {
  margin-bottom: var(--sem-spacing-lg);
}

.sem-comments__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sem-comments__list .comment {
  padding-block: var(--sem-spacing-md);
  border-bottom: 1px solid var(--sem-color-border);
}

.sem-comments__list .children {
  list-style: none;
  margin: 0;
  padding-left: var(--sem-spacing-xl);
}

.sem-comments__closed {
  font-style: italic;
  color: var(--sem-color-text-light);
}

.sem-comment-form {
  margin-top: var(--sem-spacing-xl);
}

.sem-comment-form__title {
  margin-bottom: var(--sem-spacing-md);
}

/* ── Widgets ────────────────────────────────────────────── */

.sem-widget {
  margin-bottom: var(--sem-spacing-xl);
}

.sem-widget__title {
  font-size: 1rem;
  margin-bottom: var(--sem-spacing-md);
}

.sem-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sem-widget li {
  margin-bottom: 0.5rem;
}

/* ── Alineaciones de Gutenberg ──────────────────────────── */

.aligncenter {
  margin-inline: auto;
}

.alignleft {
  float: left;
  margin-right: var(--sem-spacing-lg);
  margin-bottom: var(--sem-spacing-md);
}

.alignright {
  float: right;
  margin-left: var(--sem-spacing-lg);
  margin-bottom: var(--sem-spacing-md);
}

.alignwide,
.alignfull {
  margin-inline: calc(-1 * (100vw - 100%) / 2);
  max-width: 100vw;
  width: 100vw;
}

.alignwide {
  width: calc(100vw - 2 * var(--sem-spacing-xl));
  max-width: var(--sem-container-max);
  margin-inline: auto;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1023px) {

  /* Sin JS: nav desktop visible como fallback. */
  /* Con JS: ocultar nav desktop, mostrar toggle móvil. */
    .js .sem-menu--primary {
    display: none;
  }

  .js .sem-mobile-toggle {
    display: block;
  }

  .js .sem-site-header__cta {
    display: none;
  }
}

@media (min-width: 1024px) {

  /* Ocultar menú móvil en desktop */
  .sem-mobile-menu.is-active {
    display: none;
  }
}

@media (max-width: 767px) {

  .sem-site-main__inner--has-sidebar {
    grid-template-columns: 1fr;
  }

  .sem-site-footer__columns {
    grid-template-columns: 1fr;
  }

  .sem-site-footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .sem-footer-legal-nav__list {
    justify-content: center;
  }

  .sem-post-navigation {
    grid-template-columns: 1fr;
  }

  .sem-post-navigation__next {
    text-align: left;
  }

  .sem-single-entry__meta {
    flex-direction: column;
    gap: 0.25rem;
  }

  .sem-single-entry__meta > *:not(:last-child)::after {
    display: none;
  }

  .sem-page-header {
    padding-inline: min(var(--sem-spacing-md), 5vw);
  }

  .home .sem-page-header__title {
    font-size: min(var(--sem-blog-header-title-size, 40px), 9vw);
  }

  .archive .sem-page-header__title {
    font-size: min(var(--sem-archive-header-title-size, 40px), 9vw);
  }

  .search .sem-page-header__title {
    font-size: min(var(--sem-search-title-size, 40px), 9vw);
  }

  .single .sem-single-entry__title {
    font-size: min(var(--sem-single-title-size, 48px), 10vw);
  }

  .page .sem-page-entry__title {
    font-size: min(var(--sem-page-title-size, 40px), 9vw);
  }

  .sem-author-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sem-content-layout--grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}