/*
Theme Name:   Imagen Diagnóstica ABC
Theme URI:    https://imagendiagnosticaabc.com
Description:  Child theme de GeneratePress para Imagen Diagnóstica ABC
Author:       Joaquin Suarez
Template:     generatepress
Version:      1.0.0
Tags:         medical, diagnostics, spanish
Text Domain:  imagendiagnosticaabc
*/

/* ===================================================
   GENERATEPRESS — TEMPLATES CUSTOM FULL-WIDTH
   Elimina TODOS los contenedores, paddings, márgenes y
   max-widths que GP aplica al contenido, para que
   nuestras secciones sean verdaderamente full-width.
=================================================== */

/* 0) GP puede añadir grid-container al body en ciertas configs,
      lo que pondría max-width al body entero */
body.abc-full-width-template,
body.abc-full-width-template.grid-container {
  max-width: none !important;
  width: 100% !important;
}

/* 1) El wrapper #page no debe tener max-width ni padding */
body.abc-full-width-template #page,
body.abc-full-width-template .grid-container#page {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) #content.site-content: bloque sin flex, sin padding */
body.abc-full-width-template #content {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* 3) Neutralizar márgenes de separate-containers en site-main
      (por si GP los inyecta via hooks en nuestro template) */
body.abc-full-width-template .site-main {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* 4) Nuestras secciones custom: siempre full-width */
body.abc-full-width-template .abc-hero,
body.abc-full-width-template .abc-section,
body.abc-full-width-template .abc-cta {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  clear: both;
}

/* ===================================================
   VARIABLES DE MARCA
=================================================== */
:root {
  /* Colores — paleta 2025 */
  --color-azul:        #1B5FA8;   /* Blue Primary */
  --color-azul-oscuro: #0D3D72;   /* Blue Dark */
  --color-azul-claro:  #3B8BD4;   /* Blue Light */
  --color-azul-tint:   #E6F1FB;   /* Blue Tint — fondos, tarjetas */
  --color-rosa:        #E8388A;   /* Pink Primary */
  --color-rosa-oscuro: #B02060;   /* Pink Dark */
  --color-rosa-suave:  #FBE9F3;   /* Pink Tint — highlights, acentos */
  --color-fondo:       #F8FAFC;   /* Off White */
  --color-texto:       #111827;
  --color-texto-suave: #6B7280;
  --color-blanco:      #FFFFFF;
  --color-borde:       #E5E7EB;

  /* Tipografía */
  --font-body:    'Nunito', system-ui, sans-serif;
  --font-heading: 'Outfit', system-ui, sans-serif;

  /* Espaciado base */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Radio de bordes */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);

  /* Transiciones */
  --transition: 0.2s ease;
}

/* ===================================================
   RESET / BASE
=================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--color-texto);
  background-color: var(--color-fondo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ===================================================
   TIPOGRAFÍA GLOBAL
=================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-azul);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

/* Palabra accent en rosa — uso: <span class="accent">palabra</span> en heroes */
.accent {
  color: var(--color-rosa);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

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

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

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

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

/* ===================================================
   BOTONES
=================================================== */
.btn,
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-rosa);
  color: var(--color-blanco);
  border-color: var(--color-rosa);
}

.btn-primary:hover {
  background-color: var(--color-rosa-oscuro);
  border-color: var(--color-rosa-oscuro);
  color: var(--color-blanco);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-azul);
  border-color: var(--color-azul);
}

.btn-secondary:hover {
  background-color: var(--color-azul);
  color: var(--color-blanco);
}

.btn-blanco {
  background-color: var(--color-blanco);
  color: var(--color-azul);
  border-color: var(--color-blanco);
}

.btn-blanco:hover {
  background-color: transparent;
  color: var(--color-blanco);
}

/* ===================================================
   SECCIONES GENÉRICAS
=================================================== */
.abc-section {
  padding: var(--space-2xl) 0;
}

.abc-section--bg-azul {
  background-color: var(--color-azul);
  color: var(--color-blanco);
}

.abc-section--bg-azul h1,
.abc-section--bg-azul h2,
.abc-section--bg-azul h3 {
  color: var(--color-blanco);
}

.abc-section--bg-rosa {
  background-color: var(--color-rosa);
  color: var(--color-blanco);
}

.abc-section--bg-blanco {
  background-color: var(--color-blanco);
}

.abc-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.abc-section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-rosa);
  margin-bottom: var(--space-xs);
}

.abc-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--color-azul);
  margin-bottom: var(--space-sm);
}

.abc-section-subtitle {
  font-size: 1.1rem;
  color: var(--color-texto-suave);
  max-width: 60ch;
}

/* Centrado de encabezado de sección */
.abc-section-header--center {
  text-align: center;
}

.abc-section-header--center .abc-section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ===================================================
   CARDS GENÉRICAS
=================================================== */
.abc-card {
  background-color: var(--color-blanco);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

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

.abc-card__body {
  padding: var(--space-md);
}

.abc-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-azul);
  margin-bottom: var(--space-xs);
}

.abc-card__text {
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

/* ===================================================
   UTILITIES
=================================================== */
.text-center { text-align: center; }
.text-azul   { color: var(--color-azul); }
.text-rosa   { color: var(--color-rosa); }
.bg-azul     { background-color: var(--color-azul); }
.bg-fondo    { background-color: var(--color-fondo); }
.bg-azul-tint { background-color: var(--color-azul-tint); }
.bg-rosa-tint { background-color: var(--color-rosa-suave); }

/* ===================================================
   BREADCRUMBS — applies to all hero types
=================================================== */
.abc-hero__bc,
.abc-post-hero .abc-hero__bc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    margin-bottom: 1rem;
}

.abc-hero .abc-hero__bc-link,
.abc-post-hero .abc-hero__bc-link {
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.65) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.abc-hero .abc-hero__bc-link:hover,
.abc-post-hero .abc-hero__bc-link:hover {
    color: #fff !important;
}

.abc-hero__bc-sep {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
}

.abc-hero__bc-current {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
}

/* ===================================================
   HEADER / NAVEGACIÓN (GeneratePress overrides)
=================================================== */
.site-header {
  background-color: var(--color-blanco);
  box-shadow: var(--shadow-sm);
}

.main-navigation a {
  font-weight: 500;
}

.main-navigation a:hover {
  color: var(--color-rosa);
}

/* ===================================================
   FOOTER
=================================================== */
.site-footer {
  background-color: var(--color-texto);
  color: #D1D5DB;
  padding: var(--space-xl) 0 var(--space-md);
}

.site-footer a {
  color: #D1D5DB;
}

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

.site-footer .abc-footer-copy {
  text-align: center;
  font-size: 0.85rem;
  color: #6B7280;
  border-top: 1px solid #374151;
  padding-top: var(--space-md);
  margin-top: var(--space-md);
}