/*
Theme Name: Mayoralia
Theme URI: https://mayoralia.es
Author: Mayoralia
Description: Tema clásico y ligero para el directorio de residencias y centros de mayores. Sistema de diseño institucional azul sobre blanco (tokens + componentes), accesible y pensado para familias (texto grande, alto contraste). Sin bloques FSE, sin frameworks.
Version: 0.3.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: mayoralia
*/

/*
 * Design-system split:
 *   assets/css/tokens.css      → :root --mv-* tokens (enqueued first)
 *   assets/css/components.css  → reusable component classes (enqueued second)
 *   style.css (this file)      → base reset, typography, layout & global rules
 *
 * All values read from the tokens; a rebrand means editing tokens.css only.
 */

/* ==========================================================================
   Base — mobile first, large readable body text (17-18px, 50+ friendly)
   ========================================================================== */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--mv-font);
    font-size: var(--mv-body);
    line-height: 1.6;
    color: var(--mv-ink);
    background: var(--mv-bg);
    -webkit-font-smoothing: antialiased;
    /* Safety net against horizontal page scroll. `clip` (not `hidden`) does not
       create a scroll container, so the sticky header keeps working. */
    overflow-x: clip;
}

h1, h2, h3, h4 {
    line-height: 1.2;
    color: var(--mv-ink);
    letter-spacing: -.01em;
    text-wrap: balance;
}
h1 { font-size: var(--mv-h1); margin: 0 0 .5em; }
h2 { font-size: var(--mv-h2); margin: 1.4em 0 .5em; }
h3 { font-size: var(--mv-h3); margin: 1em 0 .4em; }

/* In-page anchors (TOC links, ficha sections) must clear the sticky header so
   the target heading is not hidden underneath it when jumped to. */
:target,
[id] { scroll-margin-top: 5.5rem; }

p { margin: 0 0 1em; }
p, li { max-width: 65ch; }

a { color: var(--mv-blue); }
a:hover { color: var(--mv-navy); }

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

:focus-visible {
    outline: 3px solid var(--mv-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.container {
    width: 100%;
    max-width: var(--mv-maxw);
    margin: 0 auto;
    padding: 0 1.2rem;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--mv-navy);
    color: #fff;
    padding: .75rem 1.1rem;
    z-index: 1000;
    border-radius: 0 0 var(--mv-r-md) 0;
    text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   Header — clean white, blue accents
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--mv-card);
    color: var(--mv-ink);
    border-bottom: 1px solid var(--mv-line);
    box-shadow: var(--mv-shadow-sm);
    transition: box-shadow .18s ease;
}
/* Strengthen the bottom shadow once the page has scrolled (nav.js toggles the
   class). Purely cosmetic — the header is sticky with or without JS. */
.site-header.is-scrolled { box-shadow: var(--mv-shadow); }
.site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.site-brand { display: flex; flex-direction: column; }
.site-brand a { color: var(--mv-ink); text-decoration: none; }
.site-title {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--mv-navy);
}
.site-tagline { font-size: .95rem; color: var(--mv-muted); }

.main-nav { margin-left: auto; }
.main-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.2rem;
    margin: 0; padding: 0;
}
.main-nav a {
    color: var(--mv-ink);
    text-decoration: none;
    font-weight: 700;
    padding: .35rem .3rem;
    display: inline-block;
}
.main-nav a:hover,
.main-nav .current-menu-item > a { color: var(--mv-blue); text-decoration: underline; }

/* ==========================================================================
   Layout blocks
   ========================================================================== */
/* No top padding so full-bleed heroes (home .hero, ficha .ficha-hero) sit flush
   under the sticky header; content pages that start with a .container get the
   breathing room back below. */
.site-main { padding: 0 0 3rem; }
.site-main > .container:first-child { padding-top: 2rem; }

.page-intro { margin-bottom: 1.6rem; }
.page-intro p.lead { font-size: 1.15rem; color: var(--mv-muted); max-width: 60ch; }

/* Section titles on home — generous, consistent vertical rhythm between the
   hero, province/type tiles, Imserso promo and featured cards (adjacent margins
   collapse, so this is the gap between sections; bumped further on desktop). */
.home-section { margin: 2.8rem 0; }
.home-section > h2 { margin-top: 0; }

/* ==========================================================================
   Footer — navy, legible attribution
   ========================================================================== */
.site-footer {
    background: var(--mv-navy);
    color: #d7e5f5;
    padding: 2.4rem 0;
    margin-top: 3rem;
    font-size: .98rem;
}
.site-footer a { color: #fff; text-decoration: underline; }
.site-footer .footer-brand { font-weight: 900; color: #fff; font-size: 1.3rem; margin-bottom: .3rem; }
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.1rem;
    margin-top: 1rem;
}
.footer-legal a { color: #fff; text-decoration: underline; font-size: .92rem; }
.footer-legal a:hover { color: var(--mv-sky); }
.atribucion {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
    color: #c2d6ee;
    font-size: .9rem;
}
.atribucion p { max-width: none; margin: 0 0 .75rem; line-height: 1.55; }
.atribucion p:last-child { margin-bottom: 0; }
.atribucion a { color: #fff; }

/* ==========================================================================
   Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}