/*
Theme Name:   VidaConCriterio
Theme URI:    https://vidaconcriterio.com
Description:  Child theme para VidaConCriterio.com — blog editorial en español para el latino ambicioso.
Author:       Silencio
Author URI:   https://vidaconcriterio.com
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  vidaconcriterio
Tags:         blog, editorial, spanish
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* Primary */
  --navy:         #0D2B4E;
  --navy-mid:     #1A4A7A;
  --navy-light:   #E8F0F9;
  --navy-dark:    #071B33;

  /* Accent */
  --amber:        #C9873A;
  --amber-light:  #FDF0E0;
  --amber-hover:  #B5732A;

  /* Neutrals */
  --black:        #111111;
  --gray-90:      #1F1F1F;
  --gray-70:      #4A4A4A;
  --gray-50:      #7A7A7A;
  --gray-20:      #CCCCCC;
  --gray-10:      #F5F6F8;
  --white:        #FFFFFF;

  /* Pillar colors */
  --p1:           #0D5C63;
  --p2:           #1A6B8A;
  --p3:           #2E5FA3;
  --p4:           #2D7A4F;
  --p5:           #5A3E8C;
  --p6:           #B85C00;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Type scale */
  --text-xs:      0.75rem;    /* 12px */
  --text-sm:      0.8125rem;  /* 13px */
  --text-base:    1.0625rem;  /* 17px */
  --text-lg:      1.25rem;    /* 20px */
  --text-xl:      1.5rem;     /* 24px */
  --text-2xl:     1.625rem;   /* 26px */
  --text-3xl:     2.0rem;     /* 32px */
  --text-4xl:     2.25rem;    /* 36px */
  --text-5xl:     2.75rem;    /* 44px */

  /* Spacing (8px base) */
  --space-1:  0.5rem;    /* 8px */
  --space-2:  1rem;      /* 16px */
  --space-3:  1.5rem;    /* 24px */
  --space-4:  2rem;      /* 32px */
  --space-5:  3rem;      /* 48px */
  --space-6:  4rem;      /* 64px */
  --space-7:  6rem;      /* 96px */
  --space-8:  8rem;      /* 128px */

  /* Layout */
  --content-width:    680px;
  --container-width:  1200px;
  --sidebar-width:    280px;
  --border-radius:    4px;
  --border-radius-lg: 8px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(13, 43, 78, 0.08);
  --shadow-md:  0 4px 16px rgba(13, 43, 78, 0.12);
  --shadow-lg:  0 8px 32px rgba(13, 43, 78, 0.16);
  --shadow-sticky: 0 2px 8px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ============================================================
   GOOGLE FONTS IMPORT
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   RESET & BASE
   ============================================================ */

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--black);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--navy-mid);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--amber);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--navy);
  line-height: 1.4;
  font-weight: 600;
}

h1 { font-size: var(--text-4xl); margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-2xl); font-weight: 600; margin: var(--space-5) 0 var(--space-2); }
h3 { font-size: var(--text-xl);  color: var(--navy-mid); margin: var(--space-4) 0 var(--space-2); }
h4 { font-size: var(--text-sm);  color: var(--amber); text-transform: uppercase; letter-spacing: 0.08em; margin: var(--space-3) 0 var(--space-1); }
h5 { font-size: var(--text-sm);  color: var(--gray-90); }
h6 { font-size: var(--text-xs);  color: var(--gray-70); }

p {
  margin: 0 0 var(--space-3);
  max-width: 68ch;
}

strong, b { font-weight: 600; }

em, i { font-style: italic; }

/* Lead paragraph */
.entry-content > p:first-of-type,
.post-lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--gray-70);
}

/* Data / numbers */
.data-figure,
.stat-number {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--navy);
  display: block;
}

/* Labels */
.label,
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header,
#masthead {
  background-color: var(--navy) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow var(--transition);
}

.site-header.scrolled,
.site-header--scrolled {
  box-shadow: var(--shadow-sticky);
}

/* Logo / Site title */
.site-branding .site-title,
.site-logo a,
.kadence-site-title {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  text-decoration: none !important;
}

.site-branding .site-description,
.kadence-site-tagline {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  color: #A0B4CC !important;
  font-style: normal !important;
}

/* Main navigation */
#site-navigation .nav-menu > li > a,
.main-navigation ul li a,
.kadence-navigation .menu > li > a {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #A0B4CC !important;
  padding: 0 var(--space-2) !important;
  transition: color var(--transition) !important;
}

#site-navigation .nav-menu > li > a:hover,
.main-navigation ul li a:hover,
.kadence-navigation .menu > li > a:hover,
#site-navigation .nav-menu > li.current-menu-item > a,
.kadence-navigation .menu > li.current-menu-item > a {
  color: var(--white) !important;
}

/* Active nav item — amber underline */
.main-navigation ul li.current-menu-item > a,
.kadence-navigation .menu > li.current-menu-item > a {
  border-bottom: 2px solid var(--amber) !important;
  padding-bottom: 2px !important;
}

/* Dropdown */
.main-navigation ul ul,
.kadence-navigation .menu ul {
  background-color: var(--white) !important;
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--border-radius) !important;
  border-top: 3px solid var(--amber) !important;
}

.main-navigation ul ul li a,
.kadence-navigation .menu ul li a {
  color: var(--navy) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-1) var(--space-3) !important;
}

.main-navigation ul ul li a:hover,
.kadence-navigation .menu ul li a:hover {
  color: var(--amber) !important;
  background-color: var(--gray-10) !important;
}

/* Mobile hamburger */
.menu-toggle,
.kadence-menu-toggle-btn {
  color: var(--white) !important;
}

/* Reading progress bar */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background-color: var(--amber);
  z-index: 9999;
  transition: width 0.1s linear;
  width: 0%;
}

/* ============================================================
   HERO / PAGE HEADER
   ============================================================ */

.entry-header,
.page-header,
.kadence-page-header {
  background-color: var(--navy);
  padding: var(--space-6) 0 var(--space-5);
  margin-bottom: var(--space-5);
}

.entry-header .entry-title,
.page-header .page-title {
  color: var(--white) !important;
  font-size: var(--text-5xl);
  max-width: 800px;
}

/* Category archive header */
.tax-description {
  color: #A0B4CC;
  font-size: var(--text-base);
  max-width: 600px;
  margin-top: var(--space-2);
}

/* ============================================================
   ARTICLE — SINGLE POST
   ============================================================ */

/* Article container */
.single .entry-content,
article.post .entry-content {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* Article header */
.single .entry-header {
  background: transparent;
  padding: var(--space-5) 0 var(--space-3);
  margin-bottom: 0;
}

.single .entry-title {
  font-size: var(--text-4xl);
  color: var(--navy) !important;
  line-height: 1.2;
  max-width: var(--content-width);
}

/* Post meta */
.entry-meta,
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--gray-50);
  margin: var(--space-2) 0;
}

.entry-meta a {
  color: var(--gray-50);
}

.entry-meta a:hover {
  color: var(--amber);
}

.entry-meta .sep {
  color: var(--gray-20);
}

/* Affiliate disclosure */
.affiliate-disclosure {
  font-size: var(--text-xs);
  color: var(--gray-50);
  font-style: italic;
  padding: var(--space-1) var(--space-2);
  background: var(--gray-10);
  border-radius: var(--border-radius);
  margin: var(--space-2) 0 var(--space-4);
}

/* Featured image */
.post-thumbnail,
.featured-image-wrap {
  margin: var(--space-4) 0;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   ARTICLE CONTENT STYLES
   ============================================================ */

.entry-content {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--black);
}

.entry-content h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-20);
}

.entry-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--navy-mid);
  margin-top: var(--space-4);
}

.entry-content h4 {
  font-size: var(--text-sm);
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-top: var(--space-3);
}

.entry-content p {
  margin-bottom: var(--space-3);
  max-width: 68ch;
}

.entry-content ul,
.entry-content ol {
  padding-left: var(--space-4);
  margin-bottom: var(--space-3);
}

.entry-content li {
  margin-bottom: var(--space-1);
}

.entry-content ul li::marker {
  color: var(--amber);
}

.entry-content ol li::marker {
  color: var(--navy);
  font-weight: 600;
  font-family: var(--font-mono);
}

/* Blockquote — stat or pull quote */
.entry-content blockquote {
  border-left: 4px solid var(--navy);
  margin: var(--space-4) 0;
  padding: var(--space-2) var(--space-4);
  background: var(--navy-light);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.entry-content blockquote p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--navy);
  line-height: 1.4;
  margin: 0;
}

/* Tables */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

.entry-content table th {
  background-color: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-2);
  text-align: left;
}

.entry-content table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--gray-20);
  vertical-align: top;
}

.entry-content table tr:nth-child(even) td {
  background-color: var(--gray-10);
}

.entry-content table tr:hover td {
  background-color: var(--navy-light);
}

/* Winner column in comparison table */
.entry-content table .col-winner th {
  background-color: var(--amber);
  position: relative;
}

.entry-content table .col-winner th::after {
  content: 'Recomendado';
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
  opacity: 0.85;
}

/* ============================================================
   CALLOUT BOXES
   ============================================================ */

/* Base callout */
.callout,
.wp-block-kadence-alert,
[class*="callout-"] {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius);
  margin: var(--space-4) 0;
  border-left: 4px solid var(--navy);
}

/* Info / dato clave */
.callout-info,
.callout--info {
  background-color: var(--navy-light);
  border-left-color: var(--navy);
}

/* Afiliado / recomendación */
.callout-affiliate,
.callout--affiliate {
  background-color: var(--amber-light);
  border-left-color: var(--amber);
}

/* TL;DR */
.callout-tldr,
.callout--tldr {
  background-color: var(--gray-10);
  border-left-color: var(--gray-20);
}

.callout-tldr::before,
.callout--tldr::before {
  content: 'EN RESUMEN';
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--navy);
  margin-bottom: var(--space-1);
}

/* Warning / disclaimer */
.callout-warning,
.callout--warning {
  background-color: #FFF8E1;
  border-left-color: #F5A623;
}

/* Affiliate CTA box */
.affiliate-cta-box {
  background-color: var(--amber-light);
  border: 1px solid rgba(201, 135, 58, 0.3);
  border-left: 4px solid var(--amber);
  border-radius: var(--border-radius);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}

.affiliate-cta-box .cta-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: var(--space-1);
  display: block;
}

.affiliate-cta-box .cta-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--navy);
  margin-bottom: var(--space-2);
}

.affiliate-cta-box .cta-description {
  font-size: var(--text-sm);
  color: var(--gray-70);
  margin-bottom: var(--space-3);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn,
.button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1;
}

/* Primary — amber */
.btn-primary,
.wp-block-button.is-style-fill .wp-block-button__link,
a.btn-primary {
  background-color: var(--amber) !important;
  color: var(--white) !important;
  border-color: var(--amber) !important;
}

.btn-primary:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background-color: var(--amber-hover) !important;
  border-color: var(--amber-hover) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Secondary — outlined navy */
.btn-secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--navy) !important;
  border-color: var(--navy) !important;
}

.btn-secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--navy) !important;
  color: var(--white) !important;
}

/* Affiliate link inline */
a.affiliate-link {
  color: var(--amber);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 135, 58, 0.4);
  transition: all var(--transition);
}

a.affiliate-link:hover {
  color: var(--amber-hover);
  border-bottom-color: var(--amber-hover);
}

a.affiliate-link::after {
  content: ' ↗';
  font-size: 0.75em;
}

/* ============================================================
   PILLAR CATEGORY LABELS
   ============================================================ */

.pillar-label,
.category-label,
.post-category-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 2px;
  color: var(--white);
  text-decoration: none;
  transition: opacity var(--transition);
}

.pillar-label:hover { opacity: 0.85; color: var(--white); }

/* Pillar colors */
.pillar-p1, .category-dinero-inversion      { background-color: var(--p1); }
.pillar-p2, .category-dinero-sin-fronteras  { background-color: var(--p2); }
.pillar-p3, .category-negocios-carrera      { background-color: var(--p3); }
.pillar-p4, .category-salud-longevidad      { background-color: var(--p4); }
.pillar-p5, .category-alto-rendimiento      { background-color: var(--p5); }
.pillar-p6, .category-vida-inteligente      { background-color: var(--p6); }

/* ============================================================
   POST CARDS
   ============================================================ */

.post-card,
article.type-post,
.kadence-post-grid-item {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
  border: 1px solid transparent;
}

.post-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Card image */
.post-card .post-thumbnail img,
.kadence-post-grid-item .post-thumbnail img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.post-card:hover .post-thumbnail img {
  transform: scale(1.03);
}

/* Card content */
.post-card-content {
  padding: var(--space-3);
}

/* Card title */
.post-card .entry-title,
.post-card h2,
.post-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  margin: var(--space-1) 0;
  color: var(--navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card:hover .entry-title,
.post-card:hover h2,
.post-card:hover h3 {
  color: var(--navy-mid);
}

/* Card excerpt */
.post-card .entry-summary p,
.post-card .excerpt {
  font-size: 0.9375rem;
  color: var(--gray-70);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card meta */
.post-card .entry-meta,
.post-card .card-meta {
  font-size: var(--text-xs);
  color: var(--gray-50);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--gray-20);
}

/* Featured card — hero */
.post-card--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / -1;
}

.post-card--featured .post-thumbnail {
  aspect-ratio: unset;
  min-height: 300px;
}

.post-card--featured .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: unset;
}

.post-card--featured .entry-title {
  font-size: var(--text-2xl) !important;
  -webkit-line-clamp: 3;
}

.post-card--featured .entry-summary p {
  -webkit-line-clamp: 3;
}

/* ============================================================
   BLOG GRID
   ============================================================ */

.blog-grid,
.posts-grid,
.kadence-post-loop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar,
#secondary,
.widget-area {
  width: var(--sidebar-width);
  flex-shrink: 0;
}

.widget,
.sidebar-widget {
  background: var(--white);
  border: 1px solid var(--gray-20);
  border-radius: var(--border-radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.widget-title,
.widgettitle {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--amber);
}

/* Newsletter widget in sidebar */
.sidebar-newsletter {
  background: var(--navy);
  border: none;
  padding: var(--space-4);
}

.sidebar-newsletter .widget-title {
  color: var(--white);
  border-bottom-color: var(--amber);
}

.sidebar-newsletter p {
  color: #A0B4CC;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.sidebar-newsletter input[type="email"] {
  width: 100%;
  padding: 0.625rem var(--space-2);
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.sidebar-newsletter input[type="email"]::placeholder {
  color: rgba(255,255,255,0.4);
}

/* ============================================================
   AUTHOR BOX
   ============================================================ */

.author-box,
.author-bio {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--gray-10);
  border-radius: var(--border-radius-lg);
  padding: var(--space-4);
  margin: var(--space-6) 0 var(--space-4);
}

.author-box .author-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-box .author-name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--space-1);
  display: block;
}

.author-box .author-description {
  font-size: 0.875rem;
  color: var(--gray-70);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   RELATED POSTS
   ============================================================ */

.related-posts {
  margin: var(--space-6) 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--gray-20);
}

.related-posts-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  margin-bottom: var(--space-3);
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */

.table-of-contents,
.toc-wrapper {
  background: var(--gray-10);
  border: 1px solid var(--gray-20);
  border-radius: var(--border-radius-lg);
  padding: var(--space-3);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

.toc-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  margin-bottom: var(--space-2);
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}

.toc-list li {
  counter-increment: toc;
  margin-bottom: var(--space-1);
}

.toc-list li::before {
  content: counter(toc) ".";
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--amber);
  font-weight: 500;
  margin-right: var(--space-1);
}

.toc-list a {
  color: var(--navy-mid);
  font-size: var(--text-sm);
}

.toc-list a:hover {
  color: var(--amber);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumbs,
.breadcrumb-trail,
.kadence-breadcrumbs {
  font-size: var(--text-sm);
  color: var(--gray-50);
  margin-bottom: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.breadcrumbs a {
  color: var(--gray-50);
}

.breadcrumbs a:hover {
  color: var(--amber);
}

.breadcrumbs .sep {
  color: var(--gray-20);
  font-size: 0.75em;
}

.breadcrumbs .current {
  color: var(--navy);
  font-weight: 500;
}

/* ============================================================
   NEWSLETTER SECTION (full-width)
   ============================================================ */

.newsletter-section {
  background: var(--navy);
  padding: var(--space-7) var(--space-3);
  text-align: center;
  margin: var(--space-7) 0 0;
}

.newsletter-section h2 {
  color: var(--white) !important;
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
}

.newsletter-section p {
  color: #A0B4CC;
  font-size: var(--text-lg);
  max-width: 560px;
  margin: 0 auto var(--space-4);
}

.newsletter-form {
  display: flex;
  gap: var(--space-2);
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 240px;
  padding: 0.75rem var(--space-3);
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.newsletter-form input[type="email"]::placeholder {
  color: rgba(255,255,255,0.4);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer,
#colophon {
  background-color: var(--navy);
  color: #A0B4CC;
  padding: var(--space-7) 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: var(--space-2);
}

.footer-brand .site-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-1);
  display: block;
}

.footer-brand .site-tagline {
  font-size: var(--text-sm);
  color: var(--amber);
  margin-bottom: var(--space-3);
  display: block;
}

.footer-brand .footer-description {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #A0B4CC;
  max-width: 280px;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer ul li {
  margin-bottom: var(--space-1);
}

.site-footer a {
  color: #A0B4CC;
  font-size: var(--text-sm);
  transition: color var(--transition);
}

.site-footer a:hover {
  color: var(--amber);
}

/* Footer bottom bar */
.footer-bottom {
  background-color: var(--navy-dark);
  padding: var(--space-2) 0;
  margin-top: 0;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: #6A8AAA;
}

.footer-bottom a {
  color: #6A8AAA;
  font-size: var(--text-xs);
}

.footer-bottom a:hover {
  color: var(--amber);
}

/* Social icons in footer */
.social-links {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #A0B4CC;
  transition: all var(--transition);
}

.social-links a:hover {
  background: var(--amber);
  color: var(--white);
}

/* ============================================================
   LAYOUT — CONTENT + SIDEBAR
   ============================================================ */

.content-area-wrap {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.primary-content {
  flex: 1;
  min-width: 0;
}

.sidebar-sticky {
  position: sticky;
  top: calc(64px + var(--space-3));
}

/* ============================================================
   CONTAINER
   ============================================================ */

.container,
.site-container,
.kadence-container,
.wp-block-group.alignwide,
.wp-block-group.alignfull > .wp-block-group__inner-container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination,
.posts-pagination,
.navigation.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-6) 0;
}

.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--navy);
  border: 1px solid var(--gray-20);
  transition: all var(--transition);
}

.page-numbers:hover,
.page-numbers.current {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.page-numbers.current {
  background: var(--amber);
  border-color: var(--amber);
}

/* ============================================================
   SEARCH
   ============================================================ */

.search-form {
  display: flex;
  gap: var(--space-1);
}

.search-form .search-field {
  flex: 1;
  padding: 0.625rem var(--space-2);
  border: 1px solid var(--gray-20);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--black);
  outline: none;
  transition: border-color var(--transition);
}

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

.search-form .search-submit {
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 0.625rem var(--space-3);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

.search-form .search-submit:hover {
  background: var(--amber);
}

/* ============================================================
   UTILITIES
   ============================================================ */

.text-navy    { color: var(--navy); }
.text-amber   { color: var(--amber); }
.text-gray    { color: var(--gray-70); }
.text-sm      { font-size: var(--text-sm); }
.text-xs      { font-size: var(--text-xs); }
.font-mono    { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
.uppercase    { text-transform: uppercase; letter-spacing: 0.08em; }
.bg-navy      { background-color: var(--navy); }
.bg-amber     { background-color: var(--amber); }
.bg-light     { background-color: var(--gray-10); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   RESPONSIVE — TABLET (< 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  :root {
    --content-width: 100%;
  }

  .blog-grid,
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-card--featured {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .content-area-wrap {
    flex-direction: column;
  }

  .sidebar,
  #secondary {
    width: 100%;
  }

  .sidebar-sticky {
    position: static;
  }

  .related-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (< 768px)
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --text-4xl: 1.875rem;
    --text-3xl: 1.5rem;
    --text-2xl: 1.375rem;
    --text-5xl: 2.25rem;
  }

  .blog-grid,
  .posts-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .container,
  .site-container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-1);
  }

  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter-form input[type="email"] {
    min-width: unset;
  }

  .related-posts-grid {
    grid-template-columns: 1fr;
  }

  .author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .entry-content h2 {
    font-size: 1.375rem;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .post-card:hover {
    transform: none;
  }

  .post-card:hover .post-thumbnail img {
    transform: none;
  }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  .site-header,
  .site-footer,
  .sidebar,
  .related-posts,
  .newsletter-section,
  .affiliate-cta-box,
  .breadcrumbs {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  .entry-content {
    max-width: 100%;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}