/*
Theme Name:     Hospitalidad Lourdes Madrid – Astra Child
Theme URI:      https://hospitalidadlourdesmadrid.com/
Description:    Tema hijo de Astra para Hospitalidad de Nuestra Señora de Lourdes
                de Madrid. Renovación web 2026. Paleta: Navy #041E42 (Pantone 282 C)
                + Bronce #734A18 (logo). Tipografía: Montserrat (titulares) +
                Helvetica system stack (cuerpo).
Author:         Thinking5Zero
Author URI:     https://thinking5zero.com
Template:       astra
Version:        1.0.0
Text Domain:    hospitalidad-lourdes
*/

/* =========================================================
   1. VARIABLES
   ========================================================= */
:root {
    --hl-navy:         #041E42;
    --hl-bronze:       #734A18;
    --hl-bronze-hover: #8C5B1F;
    --hl-white:        #FFFFFF;

    --hl-font-heading: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --hl-font-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* =========================================================
   2. BASE
   ========================================================= */
body {
    font-family: var(--hl-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--hl-navy);
    background-color: var(--hl-white);
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   3. TITULARES — reglas fijas
      H1 y H2 -> NAVY siempre
      H3      -> BRONCE siempre
      H4-H6   -> NAVY
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--hl-font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.75em;
}

h1, .entry-title, .elementor-heading-title.elementor-size-xxl {
    color: var(--hl-navy);
    font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); /* 36 → 56px */
    letter-spacing: -0.02em;
    line-height: 1.1;
}

h2 {
    color: var(--hl-navy);
    font-size: clamp(1.875rem, 3vw + 0.5rem, 2.75rem); /* 30 → 44px */
    letter-spacing: -0.01em;
}

h3 {
    color: var(--hl-bronze);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem); /* 24 → 32px */
    line-height: 1.3;
}

h4 { color: var(--hl-navy); font-size: 1.25rem; }
h5 { color: var(--hl-navy); font-size: 1.125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
h6 { color: var(--hl-navy); font-size: 1rem;     font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }

p { margin: 0 0 1em; }
strong, b { font-weight: 600; }

/* =========================================================
   4. ENLACES
   ========================================================= */
a {
    color: var(--hl-navy);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
a:hover, a:focus {
    color: var(--hl-bronze);
}

/* =========================================================
   5. BOTONES — siempre bronce
   ========================================================= */
.ast-button,
.elementor-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
    font-family: var(--hl-font-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.95em 2em;
    border-radius: 2px;
    border: 1.5px solid var(--hl-bronze);
    background-color: var(--hl-bronze);
    color: var(--hl-white);
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
    cursor: pointer;
    display: inline-block;
}
.ast-button:hover,
.elementor-button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--hl-bronze-hover);
    border-color: var(--hl-bronze-hover);
    color: var(--hl-white);
    transform: translateY(-1px);
}

/* =========================================================
   6. HEADER / MENÚ
   ========================================================= */
.main-header-menu .menu-item > a,
.ast-builder-menu .menu-item > a,
.elementor-nav-menu a {
    font-family: var(--hl-font-heading);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    color: var(--hl-navy);
    text-decoration: none;
}
.main-header-menu .menu-item:hover > a,
.ast-builder-menu .menu-item:hover > a,
.elementor-nav-menu a:hover,
.main-header-menu .current-menu-item > a {
    color: var(--hl-bronze);
}

/* =========================================================
   7. ACCESIBILIDAD — focus visible
   ========================================================= */
*:focus-visible {
    outline: 2px solid var(--hl-bronze);
    outline-offset: 3px;
}

/* =========================================================
   8. SELECCIÓN DE TEXTO
   ========================================================= */
::selection {
    background-color: var(--hl-navy);
    color: var(--hl-white);
}