/*
Theme Name:   Mercería Milo Child
Theme URI:    https://merceriamilo.es
Description:  Child theme de Astra para Mercería Milo — Paleta: blanco · azul pizarra · terracota. Tipografía: Playfair Display + Lato.
Author:       thinking5zero
Template:     astra
Version:      1.0.0
Text Domain:  merceria-milo-child
*/

/* ═══════════════════════════════════════════════════════
   VARIABLES DE DISEÑO — MERCERÍA MILO
   ═══════════════════════════════════════════════════════ */
:root {
    --mm-white:      #FFFFFF;
    --mm-off-white:  #F4F7FB;
    --mm-peach-bg:   #FDF1EC;
    --mm-blue-lt:    #EAF0F7;
    --mm-blue-bd:    #D0DFF0;
    --mm-slate:      #4A6C91;
    --mm-slate-dk:   #2C4A6B;
    --mm-slate-nav:  #1C3252;
    --mm-terra:      #C96B48;
    --mm-terra-lt:   #EDCFC3;
    --mm-text:       #1A2B3C;
    --mm-text-md:    #4A6278;
    --mm-text-lt:    #7A95A8;
}

/* ═══════════════════════════════════════════════════════
   TIPOGRAFÍA BASE
   ═══════════════════════════════════════════════════════ */
body {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--mm-text);
    background-color: var(--mm-white);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-woocommerce-container h1,
.ast-woocommerce-container h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    line-height: 1.15;
    color: var(--mm-text);
}

h1 { font-size: clamp(36px, 5vw, 64px); }
h2 { font-size: clamp(28px, 3.5vw, 44px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }
h4 { font-size: 20px; }
h5 { font-size: 17px; }
h6 { font-size: 14px; }

p {
    font-family: 'Lato', sans-serif;
    color: var(--mm-text-md);
    line-height: 1.85;
    margin-bottom: 1rem;
}

a {
    color: var(--mm-slate);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--mm-terra);
}

/* ═══════════════════════════════════════════════════════
   CABECERA Y NAVEGACIÓN
   ═══════════════════════════════════════════════════════ */
.site-header,
#masthead,
.ast-header-break-point .main-header-bar,
.main-header-bar {
    background-color: var(--mm-slate-nav) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Logo / nombre del sitio */
.site-title,
.site-title a,
.ast-site-name,
.ast-site-name a {
    font-family: 'Playfair Display', serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    letter-spacing: 0.03em;
}

.site-title a:hover,
.ast-site-name a:hover {
    color: var(--mm-terra-lt) !important;
}

/* Tagline */
.site-description,
.ast-site-tagline {
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Menú principal */
.main-navigation,
.ast-nav-menu {
    background-color: var(--mm-slate-nav);
}

.main-navigation ul li a,
.ast-nav-menu > li > a,
.main-header-bar .main-navigation ul li a {
    font-family: 'Lato', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.65) !important;
    padding: 18px 14px !important;
    transition: color 0.2s ease !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a,
.ast-nav-menu > li > a:hover,
.ast-nav-menu > li.current-menu-item > a {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Línea terracota bajo ítem activo */
.main-navigation ul li.current-menu-item > a {
    box-shadow: inset 0 -3px 0 var(--mm-terra);
}

/* Submenú */
.main-navigation ul ul,
.ast-nav-menu ul ul {
    background-color: var(--mm-slate-dk) !important;
    border-top: 2px solid var(--mm-terra) !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 16px rgba(28, 50, 82, 0.15) !important;
}

.main-navigation ul ul li a,
.ast-nav-menu ul ul li a {
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 12px 20px !important;
    font-size: 11px !important;
}

.main-navigation ul ul li a:hover,
.ast-nav-menu ul ul li a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Menú hamburguesa móvil */
.ast-mobile-menu-buttons,
button.menu-toggle,
.ast-button-wrap .ast-mobile-btn {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════ */
.ast-btn,
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    font-family: 'Lato', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    background-color: var(--mm-slate-dk) !important;
    color: #ffffff !important;
    border: 2px solid var(--mm-slate-dk) !important;
    border-radius: 0 !important;
    padding: 14px 36px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer;
}

.ast-btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--mm-terra) !important;
    border-color: var(--mm-terra) !important;
    color: #ffffff !important;
}

/* Botón terracota (clase alternativa) */
.button-terra,
.ast-btn-terra {
    background-color: var(--mm-terra) !important;
    border-color: var(--mm-terra) !important;
    color: #ffffff !important;
}

.button-terra:hover,
.ast-btn-terra:hover {
    background-color: var(--mm-slate-dk) !important;
    border-color: var(--mm-slate-dk) !important;
}

/* Botón outline */
.button-outline {
    background-color: transparent !important;
    border: 2px solid var(--mm-slate-dk) !important;
    color: var(--mm-slate-dk) !important;
}

.button-outline:hover {
    background-color: var(--mm-slate-dk) !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   CONTENIDO PRINCIPAL
   ═══════════════════════════════════════════════════════ */
.site-content,
#content,
.ast-container {
    background-color: var(--mm-white);
}

/* Separadores / línea de acento terracota */
hr,
.wp-block-separator {
    border-color: var(--mm-blue-bd);
    border-top-width: 1px;
}

/* Blockquote */
blockquote {
    border-left: 4px solid var(--mm-terra);
    padding-left: 1.5rem;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-style: italic;
    color: var(--mm-slate-dk);
}

/* ═══════════════════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
    color: var(--mm-text) !important;
    background-color: var(--mm-white) !important;
    border: 1px solid var(--mm-blue-bd) !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    transition: border-color 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    border-color: var(--mm-slate) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(74, 108, 145, 0.12) !important;
}

label {
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mm-text);
    display: block;
    margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════
   PIE DE PÁGINA
   ═══════════════════════════════════════════════════════ */
.site-footer,
#colophon,
.footer-widget-area,
.ast-footer-overlay {
    background-color: var(--mm-slate-nav) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-top: none !important;
}

.site-footer a,
#colophon a,
.footer-widget-area a {
    color: rgba(255, 255, 255, 0.65) !important;
}

.site-footer a:hover,
#colophon a:hover {
    color: var(--mm-terra-lt) !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
#colophon h3,
#colophon h4 {
    font-family: 'Playfair Display', serif !important;
    color: #ffffff !important;
    font-size: 18px !important;
    margin-bottom: 16px !important;
}

.site-footer p,
#colophon p,
.footer-widget-area p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}

/* Copyright bar */
.footer-bar,
.ast-footer-copyright,
.footer-copy-right {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 12px 0 !important;
}

/* ═══════════════════════════════════════════════════════
   BLOQUES GUTENBERG — COLORES DE MARCA
   ═══════════════════════════════════════════════════════ */

/* Grupo/cover con fondo azul pizarra oscuro */
.wp-block-group.has-slate-nav-background-color,
.has-slate-nav-background-color {
    background-color: var(--mm-slate-nav) !important;
}

/* Grupo con fondo azul suave */
.wp-block-group.has-off-white-background-color,
.has-off-white-background-color {
    background-color: var(--mm-off-white) !important;
}

/* Acento terracota */
.has-terra-color { color: var(--mm-terra) !important; }
.has-terra-background-color { background-color: var(--mm-terra) !important; }

/* Acento azul pizarra */
.has-slate-color { color: var(--mm-slate) !important; }
.has-slate-background-color { background-color: var(--mm-slate) !important; }

/* ═══════════════════════════════════════════════════════
   WIDGETS DE BARRA LATERAL
   ═══════════════════════════════════════════════════════ */
.widget-title,
.widgettitle {
    font-family: 'Playfair Display', serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--mm-text) !important;
    border-bottom: 2px solid var(--mm-terra) !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
}

/* ═══════════════════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════════════════ */
.ast-breadcrumbs,
.astra-breadcrumbs {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    color: var(--mm-text-lt);
}

.ast-breadcrumbs a {
    color: var(--mm-slate) !important;
}

.ast-breadcrumbs a:hover {
    color: var(--mm-terra) !important;
}

/* ═══════════════════════════════════════════════════════
   PAGINACIÓN
   ═══════════════════════════════════════════════════════ */
.page-numbers,
.ast-pagination .page-numbers {
    font-family: 'Lato', sans-serif;
    color: var(--mm-slate);
    border: 1px solid var(--mm-blue-bd);
    border-radius: 0 !important;
    padding: 8px 14px;
}

.page-numbers.current,
.ast-pagination .page-numbers.current {
    background-color: var(--mm-slate-dk) !important;
    border-color: var(--mm-slate-dk) !important;
    color: #ffffff !important;
}

.page-numbers:hover {
    background-color: var(--mm-blue-lt) !important;
    color: var(--mm-slate-dk) !important;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .main-navigation ul li a,
    .ast-nav-menu > li > a {
        font-size: 13px !important;
        padding: 14px 16px !important;
    }

    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h3 { font-size: 20px; }
}