/*
Theme Name:  Orbital Clone
Theme URI:   https://tudominio.com
Author:      Tu Nombre
Author URI:  https://tudominio.com
Description: Tema ultraligero inspirado en Orbital Theme. Mobile-First, PageSpeed 100, cero dependencias externas.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orbital-clone
Tags:        blog, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   1. RESET & VARIABLES
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg:          #ffffff;
  --color-surface:     #f8f8f8;
  --color-border:      #e5e5e5;
  --color-text:        #1a1a1a;
  --color-text-muted:  #6b7280;
  --color-accent:      #e63946;
  --color-accent-dark: #c1121f;
  --color-overlay:     rgba(0, 0, 0, 0.55);
  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-md:   1.125rem;
  --font-size-lg:   1.375rem;
  --font-size-xl:   1.75rem;
  --font-size-2xl:  2.25rem;
  --font-size-3xl:  3rem;
  --line-height-body:    1.75;
  --line-height-heading: 1.2;
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --container-max:    1200px;
  --content-max:      800px;
  --header-height:    64px;
  --nav-bottom-h:     60px;
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.14);
  --transition: 0.2s ease;
}

html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  padding-bottom: var(--nav-bottom-h);
}

@media (min-width: 768px) { body { padding-bottom: 0; } }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-heading); font-weight: 700; color: var(--color-text); }
p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

.site-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); }
@media (min-width: 768px) { .site-container { padding: 0 var(--space-xl); } }
.site-main { padding-top: var(--space-2xl); padding-bottom: var(--space-3xl); }

.skip-link {
  position: absolute; top: -100%; left: var(--space-md);
  background: var(--color-accent); color: #fff;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm); font-weight: 700; z-index: 9999;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-md); }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-bg); border-bottom: 1px solid var(--color-border);
  height: var(--header-height); box-shadow: var(--shadow-sm);
}

.site-header__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--space-md); height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
@media (min-width: 768px) { .site-header__inner { padding: 0 var(--space-xl); } }

.site-logo {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--font-size-lg); font-weight: 800; color: var(--color-text);
  text-decoration: none; flex-shrink: 0; letter-spacing: -0.03em;
}
.site-logo img { height: 36px; width: auto; }
.site-logo:hover { color: var(--color-accent); }
.site-header__right { display: flex; align-items: center; gap: var(--space-md); }

.nav-desktop { display: none; }

@media (min-width: 768px) {
  .nav-desktop { display: flex; align-items: center; }
  .nav-desktop ul { display: flex; align-items: center; gap: var(--space-xs); }
  .nav-desktop a {
    display: block; padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .nav-desktop a:hover,
  .nav-desktop .current-menu-item > a,
  .nav-desktop .current_page_item > a { background: var(--color-surface); color: var(--color-accent); }
  .nav-desktop li { position: relative; }
  .nav-desktop .sub-menu {
    display: none; position: absolute; top: 100%; left: 0; min-width: 200px;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    padding: var(--space-sm) 0; flex-direction: column; z-index: 200;
  }
  .nav-desktop li:hover > .sub-menu { display: flex; }
  .nav-desktop .sub-menu a {
    border-radius: 0; padding: var(--space-sm) var(--space-lg);
    text-transform: none; letter-spacing: 0; font-weight: 500;
  }
}

.header-search { position: relative; }
.header-search__toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  color: var(--color-text); transition: background var(--transition), color var(--transition);
}
.header-search__toggle:hover { background: var(--color-surface); color: var(--color-accent); }
.header-search__form {
  display: none; position: absolute; top: calc(100% + var(--space-sm)); right: 0;
  width: 280px; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden;
}
.header-search__form.is-open { display: block; }
.header-search__form input[type="search"] {
  width: 100%; padding: var(--space-md) var(--space-lg);
  font-family: var(--font-base); font-size: var(--font-size-base);
  border: none; outline: none; background: transparent; color: var(--color-text);
}
.header-search__form input[type="search"]::placeholder { color: var(--color-text-muted); }

.nav-mobile-bottom {
  display: flex; position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--nav-bottom-h); background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08); z-index: 200; align-items: stretch;
}
@media (min-width: 768px) { .nav-mobile-bottom { display: none; } }

.nav-mobile-bottom__items { display: flex; width: 100%; }
.nav-mobile-bottom__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 10px; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  transition: color var(--transition); padding: var(--space-xs); text-decoration: none;
}
.nav-mobile-bottom__item:hover, .nav-mobile-bottom__item.is-active { color: var(--color-accent); }
.nav-mobile-bottom__item svg { width: 22px; height: 22px; flex-shrink: 0; }

.nav-mobile-drawer {
  display: none; position: fixed; inset: 0; z-index: 190;
  background: var(--color-bg); padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
  overflow-y: auto; transform: translateY(100%); transition: transform 0.3s ease;
}
.nav-mobile-drawer.is-open { display: block; transform: translateY(0); }
@media (min-width: 768px) { .nav-mobile-drawer { display: none !important; } }

.nav-mobile-drawer__close { display: flex; justify-content: flex-end; margin-bottom: var(--space-xl); }
.nav-mobile-drawer__close button {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--color-text); background: var(--color-surface);
}
.nav-mobile-drawer ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.nav-mobile-drawer a {
  display: block; padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-md); font-weight: 700;
  border-radius: var(--radius-md); border-left: 3px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.nav-mobile-drawer a:hover, .nav-mobile-drawer .current-menu-item > a {
  background: var(--color-surface); border-left-color: var(--color-accent); color: var(--color-accent);
}
.nav-mobile-drawer .sub-menu { margin-left: var(--space-lg); margin-top: var(--space-xs); }
.nav-mobile-drawer .sub-menu a {
  font-size: var(--font-size-base); font-weight: 500; border-left: none; padding-left: var(--space-md);
}
.nav-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 185; }
.nav-mobile-overlay.is-open { display: block; }

.orbital-cluster { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin: var(--space-xl) 0; }
@media (min-width: 480px) { .orbital-cluster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .orbital-cluster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .orbital-cluster { grid-template-columns: repeat(4, 1fr); } }

.orbital-cluster__item {
  position: relative; display: block; border-radius: var(--radius-lg);
  overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-text);
  box-shadow: var(--shadow-md); transition: transform var(--transition), box-shadow var(--transition); text-decoration: none;
}
.orbital-cluster__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: #fff; }
.orbital-cluster__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.orbital-cluster__item:hover .orbital-cluster__bg { transform: scale(1.05); }
.orbital-cluster__overlay { position: absolute; inset: 0; background: var(--color-overlay); transition: background var(--transition); }
.orbital-cluster__item:hover .orbital-cluster__overlay { background: rgba(0,0,0,0.68); }
.orbital-cluster__title {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--space-md); color: #ffffff; font-size: var(--font-size-md); font-weight: 800;
  text-align: center; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.orbital-cluster__item--no-img { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); }

.posts-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 640px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  display: flex; flex-direction: column; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__thumb-placeholder {
  width: 100%; height: 100%; background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: var(--font-size-2xl);
}
.post-card__category {
  position: absolute; top: var(--space-sm); left: var(--space-sm);
  background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: var(--radius-sm);
}
.post-card__body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; gap: var(--space-sm); }
.post-card__title { font-size: var(--font-size-md); font-weight: 700; line-height: 1.35; color: var(--color-text); transition: color var(--transition); }
.post-card:hover .post-card__title { color: var(--color-accent); }
.post-card__excerpt { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__meta { display: flex; align-items: center; gap: var(--space-sm); font-size: 12px; color: var(--color-text-muted); margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.post-card__meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border); flex-shrink: 0; }

.pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-sm); margin-top: var(--space-3xl); flex-wrap: wrap; }
.pagination a, .pagination span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--space-sm); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: 600; border: 1px solid var(--color-border); transition: background var(--transition), color var(--transition), border-color var(--transition); }
.pagination a:hover, .pagination .current { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

.single-article { max-width: var(--content-max); margin: 0 auto; }
.single-article__hero { margin-bottom: var(--space-2xl); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-surface); }
.single-article__hero img { width: 100%; height: 100%; object-fit: cover; }
.single-article__header { margin-bottom: var(--space-2xl); }
.single-article__category { display: inline-block; background: var(--color-accent); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: var(--space-md); }
.single-article__title { font-size: clamp(var(--font-size-xl), 5vw, var(--font-size-3xl)); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--space-lg); color: var(--color-text); }
.single-article__meta { display: flex; align-items: center; gap: var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-muted); flex-wrap: wrap; }
.single-article__meta-item { display: flex; align-items: center; gap: var(--space-xs); }
.single-article__meta-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border); }
.single-article__divider { height: 1px; background: var(--color-border); margin: var(--space-xl) 0; }

.entry-content { font-size: var(--font-size-md); line-height: var(--line-height-body); color: var(--color-text); }
.entry-content h2 { font-size: clamp(var(--font-size-lg), 4vw, var(--font-size-xl)); margin-top: var(--space-2xl); margin-bottom: var(--space-md); letter-spacing: -0.02em; padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-accent); }
.entry-content h3 { font-size: var(--font-size-lg); margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.entry-content h4 { font-size: var(--font-size-md); margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.entry-content p { margin-bottom: var(--space-lg); }
.entry-content a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { text-decoration: none; }
.entry-content ul, .entry-content ol { margin-bottom: var(--space-lg); padding-left: var(--space-xl); list-style: revert; }
.entry-content li { margin-bottom: var(--space-sm); }
.entry-content blockquote { margin: var(--space-xl) 0; padding: var(--space-lg) var(--space-xl); border-left: 4px solid var(--color-accent); background: var(--color-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--font-size-lg); font-style: italic; color: var(--color-text-muted); }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content code { font-size: 0.9em; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px 6px; font-family: "SF Mono", "Fira Code", Consolas, monospace; }
.entry-content pre { background: #1e1e1e; color: #d4d4d4; border-radius: var(--radius-md); padding: var(--space-lg); overflow-x: auto; margin-bottom: var(--space-xl); font-size: var(--font-size-sm); line-height: 1.6; }
.entry-content pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
.entry-content img { border-radius: var(--radius-md); margin: var(--space-xl) auto; }
.entry-content figure { margin: var(--space-xl) 0; }
.entry-content figcaption { text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-sm); font-style: italic; }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-xl); font-size: var(--font-size-sm); overflow-x: auto; display: block; }
.entry-content th, .entry-content td { padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); text-align: left; }
.entry-content th { background: var(--color-surface); font-weight: 700; }

.related-posts { margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: 2px solid var(--color-border); }
.related-posts__title { font-size: var(--font-size-xl); font-weight: 800; margin-bottom: var(--space-xl); letter-spacing: -0.02em; }

.site-footer { background: var(--color-text); color: rgba(255,255,255,0.7); padding: var(--space-2xl) 0 var(--space-lg); font-size: var(--font-size-sm); }
.site-footer__grid { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); padding: 0 var(--space-xl); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); } }
.site-footer__brand .site-logo { color: #fff; margin-bottom: var(--space-md); }
.site-footer__desc { color: rgba(255,255,255,0.5); line-height: 1.6; }
.site-footer__col-title { font-size: var(--font-size-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin-bottom: var(--space-md); }
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.site-footer__col a { color: rgba(255,255,255,0.6); transition: color var(--transition); }
.site-footer__col a:hover { color: #fff; }
.site-footer__bottom { max-width: var(--container-max); margin: 0 auto; padding: var(--space-lg) var(--space-md) 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; text-align: center; color: rgba(255,255,255,0.4); }
@media (min-width: 640px) { .site-footer__bottom { flex-direction: row; justify-content: space-between; padding: var(--space-lg) var(--space-xl) 0; } }

.sidebar { display: none; }
@media (min-width: 1024px) {
  .has-sidebar .content-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-2xl); align-items: start; max-width: var(--container-max); margin: 0 auto; }
  .has-sidebar .sidebar { display: block; position: sticky; top: calc(var(--header-height) + var(--space-lg)); }
}
.widget { margin-bottom: var(--space-xl); padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.widget-title { font-size: var(--font-size-base); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-accent); color: var(--color-text); }

.breadcrumbs { max-width: var(--content-max); margin: 0 auto var(--space-xl); font-size: var(--font-size-sm); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.breadcrumbs a { color: var(--color-text-muted); transition: color var(--transition); }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs__sep { opacity: 0.4; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.text-accent { color: var(--color-accent); }
.no-posts { text-align: center; padding: var(--space-3xl) 0; color: var(--color-text-muted); font-size: var(--font-size-lg); }

@media (prefers-color-scheme: dark) {
  :root { --color-bg: #0f0f0f; --color-surface: #1a1a1a; --color-border: #2a2a2a; --color-text: #f0f0f0; --color-text-muted: #9ca3af; }
  .site-footer { background: #050505; }
  .entry-content code { background: #1e1e1e; border-color: #333; }
}

@media print {
  .site-header, .nav-mobile-bottom, .site-footer, .related-posts, .breadcrumbs { display: none; }
  body { padding: 0; font-size: 12pt; }
  .single-article { max-width: 100%; }
}


/* ============================================================
   FIX: Estilos de bloque de Gutenberg que rompen el tema
   ============================================================ */

/* Neutralizar colores de fondo del editor de bloques */
.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-column {
  color: var(--color-text);
}

/* Forzar fondo blanco en las tarjetas (fix dark mode override) */
.post-card {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

.post-card__title a {
  color: var(--color-text) !important;
}

/* Fix: thumbnails de WP que aparecen rotos */
.post-card__thumb img,
.single-article__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fix imagen placeholder cuando WP genera miniatura pequeña */
.post-card__thumb .attachment-orbital-card,
.post-card__thumb .wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Fix: body background siempre blanco (override Gutenberg) */
body.home,
body.blog,
body.archive,
body.single,
body.page {
  background-color: var(--color-bg) !important;
}

/* Fix: el contenedor principal nunca debe ser negro */
#page,
.site-main,
.site-container {
  background-color: var(--color-bg);
}

/* Fix: thumbnails WP con icono roto — mejorar placeholder */
.post-card__thumb-placeholder {
  background: linear-gradient(135deg, #f3f3f3, #e8e8e8);
  color: #ccc;
}

/* ============================================================
   PAGINAS ESTATICAS — estilos de contenido enriquecido
   ============================================================ */

/* Contact y about pages */
.page-section {
  margin: var(--space-2xl) 0;
}

/* Fix: formulario de búsqueda de WP */
.search-form {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.search-form label {
  flex: 1;
}

.search-form .search-field {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--color-bg);
  color: var(--color-text);
}

.search-form .search-field:focus {
  border-color: var(--color-accent);
}

.search-form .search-submit {
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}

.search-form .search-submit:hover {
  background: var(--color-accent-dark);
}

/* Fix: menu de WP genera <ul> con class menu */
.nav-desktop .menu {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-mobile-drawer .menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ============================================================
   PAGINATION — enhanced with arrows + centered
   ============================================================ */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-3xl);
  flex-wrap: wrap;
  padding: var(--space-lg) 0;
}

/* All links and spans inside nav.pagination */
.pagination > a,
.pagination > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.pagination > a:hover {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}

/* Current page */
.pagination > span.current {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
  font-weight: 800;
  cursor: default;
}

/* Dots ... */
.pagination > span.dots {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  min-width: 24px;
  padding: 0;
}

/* Prev / Next arrows — wider */
.pagination > a.prev,
.pagination > a.next {
  padding: 0 var(--space-lg);
  font-weight: 700;
  gap: var(--space-xs);
}

/* Fix: WP outputs page-numbers class on the wrapping element */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.page-numbers:hover {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.page-numbers.current {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  font-weight: 800;
}

.page-numbers.dots {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  min-width: 24px;
}

.page-numbers.prev,
.page-numbers.next {
  padding: 0 var(--space-lg);
  font-weight: 700;
}

/* ============================================================
   FIX: Gutenberg block styles overriding theme
   ============================================================ */

body.home,
body.blog,
body.archive,
body.single,
body.page {
  background-color: var(--color-bg) !important;
}

#page,
.site-main,
.site-container {
  background-color: var(--color-bg);
}

.post-card {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

.post-card__title a {
  color: var(--color-text) !important;
}

.post-card__thumb img,
.single-article__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-orbital-card,
.wp-post-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Fix: WP nav_menu outputs <ul class="menu"> */
.nav-desktop .menu {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-mobile-drawer .menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Fix: search form styling */
.search-form {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.search-form label {
  flex: 1;
}

.search-form .search-field {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--color-bg);
  color: var(--color-text);
}

.search-form .search-field:focus {
  border-color: var(--color-accent);
}

.search-form .search-submit {
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}

.search-form .search-submit:hover {
  background: var(--color-accent-dark);
}


/* ============================================================
   MOBILE BOTTOM NAV — 2 items only (Search + Menu)
   ============================================================ */

.nav-mobile-bottom__items {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 0;
}

/* With only 2 items, give each more breathing room */
.nav-mobile-bottom__item {
  flex: 0 0 50%;
  max-width: 200px;
}

/* Also fix: "Mayo" still showing — date override via CSS impossible,
   this is a reminder that functions.php locale filter handles it */