/*
Theme Name: MauroBernal 2025
Template: twentytwentyfive
Description: Child theme con design system de maurobernal.com.ar
Version: 1.0
*/

/* ============================================
   GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=DM+Sans:wght@400;500&display=swap');

/* ============================================
   VARIABLES & RESET
   ============================================ */
:root {
  --color-bg: #0a0a0a;
  --color-surface-1: #141414;
  --color-surface-2: #1c1c1c;
  --color-border: #222222;
  --color-accent: #E8742A;
  --color-text-primary: #F0EDE8;
  --color-text-secondary: #6B6B6B;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --max-width: 1100px;
  --radius: 6px;
}

/* ============================================
   BASE
   ============================================ */
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 16px;
  line-height: 1.7;
}

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

/* ============================================
   TIPOGRAFÍA
   ============================================ */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.entry-title,
.site-title {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

h1, .wp-block-post-title a { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.7rem); }

p, li, td, th, label, input, textarea {
  font-family: var(--font-body) !important;
  color: var(--color-text-primary);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 200ms ease;
}

a:hover { opacity: 0.8; }

/* ============================================
   HEADER & NAV
   ============================================ */
.wp-block-template-part header,
header.wp-block-template-part,
#masthead,
.site-header {
  background-color: var(--color-surface-1) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0 !important;
}

.site-title a,
.wp-block-site-title a {
  color: var(--color-text-primary) !important;
  font-family: var(--font-heading) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.wp-block-navigation a,
.nav-menu a {
  color: var(--color-text-secondary) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 200ms ease !important;
}

.wp-block-navigation a:hover,
.nav-menu a:hover,
.wp-block-navigation .current-menu-item > a {
  color: var(--color-accent) !important;
}

/* ============================================
   LAYOUT
   ============================================ */
.wp-site-blocks,
.site,
#page {
  background-color: var(--color-bg) !important;
}

.wp-block-group,
.entry-content,
.site-content,
#content,
main {
  background-color: var(--color-bg) !important;
}

.wp-block-post-content,
.entry-content {
  max-width: var(--max-width) !important;
  margin: 0 auto !important;
  padding: 2rem 1.5rem !important;
}

/* ============================================
   CARDS / POST LIST
   ============================================ */
.wp-block-post,
article.post,
.type-post {
  background-color: var(--color-surface-1) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  padding: 2rem !important;
  margin-bottom: 1.5rem !important;
  transition: border-color 200ms ease !important;
}

.wp-block-post:hover,
article.post:hover {
  border-color: var(--color-accent) !important;
}

.wp-block-post-title a {
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
}

.wp-block-post-title a:hover {
  color: var(--color-accent) !important;
}

.wp-block-post-excerpt__excerpt,
.entry-summary p {
  color: var(--color-text-secondary) !important;
  font-size: 0.95rem !important;
}

/* ============================================
   TAGS & CATEGORÍAS
   ============================================ */
.wp-block-post-terms a,
.tag-cloud-link,
.cat-links a {
  background-color: transparent !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
  border-radius: 4px !important;
  padding: 2px 10px !important;
  font-size: 0.75rem !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 200ms ease !important;
}

.wp-block-post-terms a:hover,
.tag-cloud-link:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-bg) !important;
}

/* ============================================
   FECHA / META
   ============================================ */
.wp-block-post-date,
.wp-block-post-date time,
.entry-meta,
.posted-on {
  color: var(--color-text-secondary) !important;
  font-size: 0.8rem !important;
  font-family: var(--font-body) !important;
}

/* ============================================
   SEPARADORES
   ============================================ */
hr,
.wp-block-separator {
  border-color: var(--color-border) !important;
  border-top: 1px solid var(--color-border) !important;
  margin: 3rem 0 !important;
}

/* ============================================
   BLOQUES DE CÓDIGO
   ============================================ */
code, pre,
.wp-block-code {
  background-color: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  color: var(--color-text-primary) !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 0.875rem !important;
}

pre {
  padding: 1.5rem !important;
  overflow-x: auto;
}

code {
  padding: 2px 6px !important;
}

/* ============================================
   BOTONES / CTA
   ============================================ */
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
  background-color: var(--color-accent) !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  padding: 0.75rem 1.5rem !important;
  transition: opacity 200ms ease !important;
  cursor: pointer;
}

.wp-block-button__link:hover,
button[type="submit"]:hover {
  opacity: 0.85 !important;
}

/* ============================================
   FOOTER
   ============================================ */
footer,
.site-footer,
#colophon {
  background-color: var(--color-surface-1) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  font-size: 0.85rem !important;
  padding: 2rem 1.5rem !important;
}

footer a {
  color: var(--color-text-secondary) !important;
}

footer a:hover {
  color: var(--color-accent) !important;
}

/* ============================================
   SIDEBAR (si existe)
   ============================================ */
.widget,
#secondary {
  background-color: var(--color-surface-1) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  padding: 1.5rem !important;
}

.widget-title {
  color: var(--color-text-primary) !important;
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* ============================================
   SELECCIÓN DE TEXTO
   ============================================ */
::selection {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* ============================================
   OCULTAR HEADER ORIGINAL
   ============================================ */
.wp-block-template-part[data-slug="header"],
header .wp-block-navigation,
header nav {
  display: none !important;
}

/* ============================================
   OCULTAR HEADER ORIGINAL DE WORDPRESS
   ============================================ */
.wp-block-template-part,
header.wp-block-template-part,
.wp-block-site-title,
.wp-block-navigation {
  display: none !important;
}

/* ============================================
   OCULTAR TÍTULO "Blog" DE LA PÁGINA
   ============================================ */
.wp-block-query-title,
.page-title,
h1.wp-block-post-title:first-of-type {
  display: none !important;
}

/* ============================================
   LAYOUT CON SIDEBAR
   ============================================ */
main.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr 260px !important;
  gap: 2rem !important;
  max-width: 1100px !important;
  margin: 2rem auto !important;
  padding: 0 1.5rem !important;
  align-items: start !important;
}

/* El contenido principal ocupa la primera columna */
main.wp-block-group > * {
  min-width: 0;
}

/* La sidebar va en la segunda columna */
#blog-sidebar {
  grid-column: 2;
  grid-row: 1 / 99;
  position: sticky;
  top: 70px;
}

@media (max-width: 768px) {
  main.wp-block-group {
    grid-template-columns: 1fr !important;
  }
  #blog-sidebar {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* ============================================
   RESET LAYOUT ANTERIOR
   ============================================ */
main.wp-block-group {
  display: block !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 2rem 1.5rem !important;
  position: relative !important;
}

/* Sidebar flotante a la derecha */
#blog-sidebar {
  position: absolute !important;
  top: 2rem !important;
  right: 0 !important;
  width: 240px !important;
  grid-column: unset !important;
  grid-row: unset !important;
}

/* Contenido principal con margen para la sidebar */
main.wp-block-group > *:not(#blog-sidebar) {
  margin-right: 270px !important;
}

@media (max-width: 900px) {
  #blog-sidebar {
    position: static !important;
    width: 100% !important;
  }
  main.wp-block-group > *:not(#blog-sidebar) {
    margin-right: 0 !important;
  }
}