/* css/site.css
   Shared look for every page: type, header, footer, buttons, forms, page hero.
   Loaded by include/header.php after header.css.
   Palette unchanged: slate primary #334155 + existing teal accent. */

:root {
    --lp-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lp-display: 'Archivo', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    --lp-bg: var(--color-slate-50, #f8fafc);
    --lp-ink: var(--color-slate-900, #0f172a);
    --lp-muted: var(--color-slate-500, #64748b);
    --lp-line: var(--color-slate-200, #e2e8f0);
    --color-primary-dark: #1e293b;
}

body {
    font-family: var(--lp-font);
    background: var(--lp-bg);
    color: var(--lp-ink);
}

/* ---------- Header ---------- */
.navbar {
    background-color: rgba(248, 250, 252, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--lp-line);
}
.logo-icon {
    background: none;
    color: var(--color-primary);
    width: 32px;
    height: 32px;
    border-radius: 0;
}
.logo-icon:hover { transform: none; box-shadow: none; }
.logo-text { font-family: var(--lp-display); font-weight: 800; letter-spacing: -0.02em; }
.nav-link { font-size: 14px; letter-spacing: 0; color: var(--color-slate-600); }
.nav-link::after { display: none; }
.nav-link:hover,
.nav-link.active { color: var(--lp-ink); }
.nav-link.active { font-weight: 600; }
.language-button,
.btn-auth { border-radius: 999px; }
.language-button { background: transparent; }
.btn-signup { padding-inline: 22px; font-weight: 600; box-shadow: 0 6px 16px rgba(51, 65, 85, 0.22); }
.btn-signup:hover { transform: none; box-shadow: 0 8px 20px rgba(51, 65, 85, 0.3); }

/* ---------- Footer (selectors bumped: footer.css loads after this file) ---------- */
body .footer { background: transparent; border-top: 1px solid var(--lp-line); margin-top: 96px; }
body .footer-logo-icon { background: none; color: var(--color-primary); width: 32px; height: 32px; border-radius: 0; }
body .footer-logo-text { font-family: var(--lp-display); font-weight: 800; letter-spacing: -0.02em; }
body .footer-tagline { color: var(--lp-muted); }
body .social-link { border-radius: 50%; background: var(--color-slate-100); }
body .social-link:hover { transform: none; box-shadow: none; }
body .footer-heading {
    font-family: var(--lp-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
}
body .footer-links a::before { display: none; }
body .footer-links a:hover { color: var(--lp-ink); }
body .footer-bottom { border-top: 1px solid var(--lp-line); }

/* ---------- Buttons ---------- */
.btn,
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--lp-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn-primary,
.lp-btn-solid {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 10px 24px rgba(51, 65, 85, 0.25);
}
.btn-primary:hover,
.lp-btn-solid:hover { background: var(--color-primary-dark); box-shadow: 0 12px 28px rgba(51, 65, 85, 0.32); transform: none; }
.btn-secondary,
.lp-btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--lp-line);
    box-shadow: none;
}
.btn-secondary:hover,
.lp-btn-outline:hover { border-color: var(--color-primary); background: rgba(51, 65, 85, 0.05); color: var(--color-primary); transform: none; box-shadow: none; }
.lp-btn-sm { padding: 10px 18px; font-size: 13px; box-shadow: none; }
.btn:focus-visible,
.lp-btn:focus-visible,
.lp-link:focus-visible,
.back-link:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* ---------- Page hero (map, support, community, legal) ---------- */
.map-hero,
.support-hero,
.community-hero,
.page-header {
    position: relative;
    isolation: isolate;
    padding: 80px 24px 64px;
    text-align: center;
    overflow: hidden;
    background: none;
    border: 0;
}
.map-hero { padding: 48px 24px 40px; border-bottom: 1px solid var(--lp-line); }
.map-hero::before,
.support-hero::before,
.community-hero::before,
.page-header::before,
.map-hero::after,
.support-hero::after,
.community-hero::after,
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.map-hero::before,
.support-hero::before,
.community-hero::before,
.page-header::before {
    background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(51, 65, 85, 0.12), transparent 70%);
}
.map-hero::after,
.support-hero::after,
.community-hero::after,
.page-header::after {
    background-image: radial-gradient(circle, rgba(51, 65, 85, 0.22) 1px, transparent 1.4px);
    background-size: 9px 9px;
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.2) 60%, transparent 85%);
            mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.2) 60%, transparent 85%);
}
.map-hero-content,
.support-hero-content,
.community-hero-content { max-width: 680px; margin: 0 auto; }

.map-hero-title,
.support-hero-title,
.community-hero-title,
.page-header h1 {
    font-family: var(--lp-display);
    font-weight: 800;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: var(--lp-ink);
    margin: 0;
}
.map-hero-title { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.map-hero-subtitle,
.support-hero-subtitle,
.community-hero-subtitle,
.page-updated {
    max-width: 520px;
    margin: 18px auto 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--lp-muted);
}
.map-hero-subtitle { margin-top: 10px; font-size: 16px; }

@media (prefers-reduced-motion: no-preference) {
    .map-hero-content > *,
    .support-hero-content > *,
    .community-hero-content > *,
    .page-header > * { animation: lp-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
    .map-hero-content > :nth-child(2),
    .support-hero-content > :nth-child(2),
    .community-hero-content > :nth-child(2),
    .page-header > :nth-child(2) { animation-delay: .07s; }
    .support-hero-content > :nth-child(3),
    .community-hero-content > :nth-child(3) { animation-delay: .14s; }
}
@keyframes lp-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Shared content bits ---------- */
.section-header { margin: 0 0 28px; }
.section-header h2 {
    font-family: var(--lp-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--lp-ink);
}
.section-subtitle { margin-top: 10px; font-size: 16px; color: var(--lp-muted); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    padding: 8px 16px 8px 12px;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-slate-600);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.back-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* avatars: always brand slate (inline colours from sample data are ignored) */
.avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-primary) !important;
    color: var(--color-white);
    font-family: var(--lp-display);
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
}
.avatar-lg { width: 52px; height: 52px; font-size: 20px; }

/* forms */
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 0; }
.form-row .form-group { margin-bottom: 20px; }
.form-group .form-label { display: block; margin: 0; font-size: 14px; font-weight: 600; color: var(--lp-ink); }
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--lp-line);
    border-radius: 16px;
    background: var(--color-white);
    font-family: var(--lp-font);
    font-size: 15px;
    color: var(--lp-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; border-radius: 20px; }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-slate-400); }
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(51, 65, 85, 0.1);
}

.error-list { display: grid; gap: 8px; margin-bottom: 24px; }
.error-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid rgba(185, 28, 28, 0.25);
    border-radius: 16px;
    background: rgba(185, 28, 28, 0.05);
    color: #991b1b;
    font-size: 14px;
}

.empty-state { padding: 56px 24px; text-align: center; color: var(--lp-muted); }

@media (max-width: 768px) {
    .map-hero, .support-hero, .community-hero, .page-header { padding: 56px 20px 44px; }
    .map-hero { padding: 32px 20px 28px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
}