/* Rent Latino family: shared base styles (D-008, D-015). Plain CSS, no framework.
   Requires tokens.css (generated) and <html data-site="…"> for the accent colours.
   Fonts are self-hosted (no requests to Google: GDPR) and limited to the Latin range, which covers EN/ES/PT/IT/FR. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }

/* ---- Base ---- */
body {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-white);
}
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; font-weight: 600; }
h1 { font-size: clamp(var(--size-2xl), 6vw, var(--size-3xl)); }
h2 { font-size: clamp(var(--size-xl), 4vw, var(--size-2xl)); }
h3 { font-size: var(--size-lg); }
p, ul, ol, table, blockquote { margin-block: var(--space-4); }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
small, .muted { color: var(--color-slate); }

.container { width: min(1120px, 100% - 2 * var(--space-4)); margin-inline: auto; }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-12); }
.prose h3 { margin-top: var(--space-8); }
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-ink); color: var(--color-white); padding: var(--space-2) var(--space-4); z-index: 100; }
.skip-link:focus { left: var(--space-2); }

/* ---- Family bar (component 2) ---- */
.family-bar { background: var(--color-ink); color: var(--color-white); font-size: var(--size-xs); }
.family-bar .container { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; padding-block: var(--space-2); }
.family-bar a { color: var(--color-white); }
.family-bar a[aria-current='true'] { text-decoration: none; font-weight: 600; }

/* ---- Header (component 1) ---- */
.site-header { border-bottom: 1px solid var(--color-line); background: var(--color-white); }
.site-header .container { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); flex-wrap: wrap; }
.wordmark { font-family: var(--font-heading); font-size: var(--size-lg); font-weight: 700; color: var(--color-ink); text-decoration: none; margin-right: auto; }
.wordmark span { color: var(--accent); }
.site-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.site-nav a { color: var(--color-ink); text-decoration: none; font-weight: 500; }
.site-nav a[aria-current='page'] { color: var(--accent); }
.menu-toggle { display: none; }
@media (max-width: 760px) {
  .menu-toggle { display: block; }
  .menu-toggle summary { cursor: pointer; list-style: none; font-weight: 600; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
  .menu-toggle summary::-webkit-details-marker { display: none; }
  .menu-toggle .site-nav ul { flex-direction: column; padding-top: var(--space-3); }
  .site-header > .container > .site-nav { display: none; }
}
.lang-switcher { position: relative; }
.lang-switcher summary { cursor: pointer; list-style: none; font-size: var(--size-xs); font-weight: 600; text-transform: uppercase; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-pill); }
.lang-switcher summary::-webkit-details-marker { display: none; }
.lang-switcher ul { position: absolute; right: 0; z-index: 20; list-style: none; margin: var(--space-2) 0 0; padding: var(--space-2); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); min-width: 10rem; box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); }
.lang-switcher li a { display: block; padding: var(--space-2) var(--space-3); color: var(--color-ink); text-decoration: none; border-radius: var(--radius-sm); }
.lang-switcher li a:hover, .lang-switcher li a[aria-current='true'] { background: var(--color-sand); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); border: 2px solid var(--accent); background: var(--accent); color: var(--color-white); font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(0.95); }
.btn--ghost { background: transparent; color: var(--accent); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---- Main ---- */
main { padding-block: var(--space-12); }
.draft-banner { background: var(--color-warning); color: var(--color-white); text-align: center; font-size: var(--size-xs); padding: var(--space-2); }
.section { padding-block: var(--space-12); }
.section--sand { background: var(--color-sand); }
.grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-6); background: var(--color-white); }
.card h3 { margin-bottom: var(--space-2); }

/* ---- Forms (components 15, 20, 21, 25) ---- */
.field { display: grid; gap: var(--space-1); margin-block: var(--space-4); }
.field label { font-weight: 600; }
.field input, .field textarea, .field select { padding: var(--space-3); border: 1px solid var(--color-slate); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-ink); }
.field textarea { min-height: 8rem; }
.field--consent { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-3); }
.field--consent label { font-weight: 400; }
[aria-invalid='true'] { border-color: var(--color-danger); }
.form-status { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); }
.form-status[data-state='success'] { background: color-mix(in srgb, var(--color-success) 12%, white); color: var(--color-success); }
.form-status[data-state='error'] { background: color-mix(in srgb, var(--color-danger) 10%, white); color: var(--color-danger); }
.visually-hidden, .hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- FAQ (component 8): native <details> in Markdown, no JavaScript ---- */
.prose details { border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.prose details + details { margin-top: var(--space-2); }
.prose summary { cursor: pointer; font-weight: 600; }

/* ---- Footer (component 3) ---- */
.site-footer { background: var(--color-sand); padding-block: var(--space-12) var(--space-8); font-size: var(--size-xs); }
.site-footer .container { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.site-footer h2 { font-size: var(--size-base); font-family: var(--font-body); margin-bottom: var(--space-2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.site-footer a { color: var(--color-ink); }
.site-footer .legal-line { grid-column: 1 / -1; color: var(--color-slate); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }