/**
 * Mi Plugin Base - Estilos personalizados front-end
 * Proyecto: mundobioma.es
 * ─────────────────────────────────────────────────────────
 */


/* ─────────────────────────────────────────────
   1. VARIABLES CSS
   ───────────────────────────────────────────── */

:root {
    /* Colores */
    --color-primary:       #2E7D32;
    --color-primary-dark:  #1B5E20;
    --color-primary-mid:   #388E3C;
    --color-primary-light: #4CAF50;
    --color-primary-bg:    #E8F5E9;
    --color-primary-hover: #C8E6C9;

    /* Texto */
    --color-text:          #1a1a1a;
    --color-text-muted:    #666666;
    --color-text-light:    #999999;

    /* Fondos */
    --color-bg:            #ffffff;
    --color-bg-soft:       #f7f7f5;
    --color-border:        #e8e8e8;

    /* Tipografía */
    --font-heading:        'Poppins', sans-serif;
    --font-body:           'Inter', sans-serif;

    /* Escala tipográfica */
    --text-xs:    13px;
    --text-sm:    15px;
    --text-base:  17px;
    --text-lg:    20px;
    --text-xl:    24px;
    --text-2xl:   30px;
    --text-3xl:   38px;

    /* Interlineado */
    --leading-tight:  1.3;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* Bordes */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
}


/* ─────────────────────────────────────────────
   2. TIPOGRAFÍA GLOBAL
   ───────────────────────────────────────────── */

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
}

h1 { font-size: var(--text-3xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); font-weight: 700; }
h3 { font-size: var(--text-xl);  font-weight: 600; }
h4 { font-size: var(--text-lg);  font-weight: 600; }

p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-loose);
}

/* Botones y navegación — Poppins */
button, .button, .nav a, .et_pb_button {
    font-family: var(--font-heading);
}


/* ─────────────────────────────────────────────
   3. HEADER Y NAVEGACIÓN
   ───────────────────────────────────────────── */
.et-l--header a {
    color: #ffffff !important;
}

.et-l--header a:hover {
    color: #C8E6C9 !important;
}


/* ─────────────────────────────────────────────
   4. HERO / SECCIÓN PRINCIPAL
   ───────────────────────────────────────────── */



/* ─────────────────────────────────────────────
   5. PÁGINA DE INICIO
   ───────────────────────────────────────────── */



/* ─────────────────────────────────────────────
   6. ARTÍCULO INDIVIDUAL (SINGLE POST)
   ───────────────────────────────────────────── */

/* Cuerpo del artículo — máxima legibilidad */
.single .et_pb_post_content,
.single .entry-content {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text);
}

.single .entry-content h2 {
    font-size: var(--text-2xl);
    margin-top: 2em;
    margin-bottom: 0.6em;
    color: var(--color-primary-dark);
}

.single .entry-content h3 {
    font-size: var(--text-xl);
    margin-top: 1.6em;
    margin-bottom: 0.5em;
}

/* modificar margen inferior del indice */
#ez-toc-container {
    margin-bottom: 2em !important;
}

/* ─────────────────────────────────────────────
   7. SIDEBAR
   ───────────────────────────────────────────── */



/* ─────────────────────────────────────────────
   8. FOOTER
   ───────────────────────────────────────────── */
/* Enlaces del footer en blanco */
.et-l--footer .et_pb_text_1_tb_footer a {
    color: #ffffff !important;
}

.et-l--footer .et_pb_text_1_tb_footer a:hover {
    color: #C8E6C9 !important;
}


/* ─────────────────────────────────────────────
   9. UTILIDADES
   ───────────────────────────────────────────── */



/* ─────────────────────────────────────────────
   10. RESPONSIVE
   ───────────────────────────────────────────── */

@media (max-width: 980px) {
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
}

@media (max-width: 767px) {
    body { font-size: 16px; }
    h1 { font-size: var(--text-xl); }
}