/*
Theme Name: Astra Child - ESI
Theme URI: https://englishskillsintegrated.com
Description: Child theme for English Skills Integrated. Brand Kit v2.0 customizations live here.
Author: Silverio De La Mora
Author URI: https://englishskillsintegrated.com
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* ============================================================
   ESI BRAND KIT v2.0 — Baseline CSS
   Globals live in Elementor Kit 3205 and Astra Customizer.
   This file covers what those cannot reach: native WP UI,
   comments, forms, classic-editor blocks, plugin output, etc.
   ============================================================ */

/* --- Google Fonts (defensive — Elementor also loads these) --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Outfit:wght@400;500;600;700&display=swap');

/* --- Brand tokens. Use var(--esi-*) anywhere in child CSS. --- */
:root {
    /* Nivel 1 — Identidad */
    --esi-cyan: #00CFD5;
    --esi-sol: #E8765C;
    --esi-arena: #FBF4ED;
    --esi-negro: #1F1A14;

    /* Nivel 2 — Apoyo */
    --esi-cyan-30: #A8E8EC;
    --esi-sol-40: #F5BCB0;
    --esi-buganvilia: #C77FA8;

    /* Nivel 3 — Funcional */
    --esi-buganvilia-30: #E8C8DC;
    --esi-gris-calido: #A8A29E;
    --esi-gris-oscuro: #5C5651;

    /* Typography stacks */
    --esi-font-heading: 'Outfit', sans-serif;
    --esi-font-body: 'DM Sans', sans-serif;
}

/* --- Base body fallback (non-Elementor pages, classic posts, login) --- */
body {
    background-color: var(--esi-arena);
    color: var(--esi-negro);
    font-family: var(--esi-font-body);
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title {
    font-family: var(--esi-font-heading);
    color: var(--esi-negro);
}
h1, h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }

/* --- Brand Rule 04: blanco puro prohibido → reemplazo a Arena --- */
.ast-container,
.site-content,
.entry-content,
.hentry,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-comment-list li.depth-1,
#comments,
.comment-respond {
    background-color: var(--esi-arena);
}

/* --- Links: Sol normal, Buganvilia hover, underline on hover --- */
a {
    color: var(--esi-sol);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover, a:focus {
    color: var(--esi-buganvilia);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* --- Buttons: native WP / comments / forms --- */
input[type="submit"],
button:not(.elementor-button),
.button,
.wp-block-button__link,
.ast-button {
    background-color: var(--esi-cyan);
    color: var(--esi-negro);
    font-family: var(--esi-font-body);
    font-weight: 500;
    border: none;
    border-radius: 4px;
    padding: 0.65em 1.5em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
input[type="submit"]:hover,
button:not(.elementor-button):hover,
.button:hover,
.wp-block-button__link:hover,
.ast-button:hover {
    background-color: var(--esi-sol);
    color: var(--esi-arena);
}

/* --- Form inputs: Arena field, Negro text, Cyan focus --- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
    background-color: var(--esi-arena);
    color: var(--esi-negro);
    border: 1px solid var(--esi-gris-calido);
    border-radius: 4px;
    padding: 0.55em 0.75em;
    font-family: var(--esi-font-body);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--esi-cyan);
    box-shadow: 0 0 0 3px rgba(0, 207, 213, 0.18);
    outline: none;
}
::placeholder { color: var(--esi-gris-calido); }

/* --- Text selection: Sol 40 + Negro --- */
::selection {
    background-color: var(--esi-sol-40);
    color: var(--esi-negro);
}

/* --- Horizontal rules + table borders --- */
hr {
    border: none;
    border-top: 1px solid var(--esi-gris-calido);
    margin: 2em 0;
}
table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid var(--esi-buganvilia-30);
    padding: 0.6em 0.9em;
}
th {
    background-color: var(--esi-cyan-30);
    color: var(--esi-negro);
    font-family: var(--esi-font-heading);
    font-weight: 600;
}

/* --- Blockquote (citas / taglines) --- */
blockquote {
    border-left: 3px solid var(--esi-sol);
    background-color: var(--esi-sol-40);
    padding: 1em 1.25em;
    margin: 1.5em 0;
    font-family: var(--esi-font-body);
    font-style: italic;
    color: var(--esi-negro);
}

/* --- Code blocks --- */
code, pre, kbd {
    background-color: var(--esi-cyan-30);
    color: var(--esi-negro);
    border-radius: 3px;
    padding: 0.15em 0.4em;
    font-family: 'Consolas', 'Monaco', monospace;
}
pre {
    padding: 1em;
    overflow-x: auto;
}

/* --- Utility classes for brand-rule typography --- */
.esi-tagline {
    font-family: var(--esi-font-body);
    font-style: italic;
    color: var(--esi-negro);
}

.esi-label {
    font-family: var(--esi-font-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--esi-negro);
}

.esi-bg-arena { background-color: var(--esi-arena) !important; }
.esi-bg-cyan { background-color: var(--esi-cyan); color: var(--esi-negro); }
.esi-bg-sol { background-color: var(--esi-sol); color: var(--esi-arena); }
.esi-bg-negro { background-color: var(--esi-negro); color: var(--esi-arena); }

.esi-text-cyan { color: var(--esi-cyan); }
.esi-text-sol { color: var(--esi-sol); }
.esi-text-buganvilia { color: var(--esi-buganvilia); }

/* --- Astra search form, comment list, widget defaults --- */
.search-field, .ast-search-menu-icon .search-field {
    background-color: var(--esi-arena);
    border-color: var(--esi-gris-calido);
}
.comment-author, .comment-meta {
    color: var(--esi-gris-oscuro);
    font-family: var(--esi-font-body);
}

/* --- Accessibility: focus visible everywhere --- */
:focus-visible {
    outline: 2px solid var(--esi-cyan);
    outline-offset: 2px;
}

/* --- Smooth scroll --- */
html { scroll-behavior: smooth; }