/* ==========================================================================
   Qué Pasa Asturias — Reset + base elements + layout helpers
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp, 1rem);
  color: var(--navy);
  text-wrap: balance;
}

p { margin: 0 0 1rem; text-wrap: pretty; }

a {
  color: var(--pink-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--pink-press); }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

/* A long unbroken run of characters — a web address, an email, a German
   compound — is wider than a phone and cannot be wrapped by ordinary word
   breaking, so it pushes the whole page sideways and gives the entire site a
   horizontal scrollbar. `break-word` only steps in when a word genuinely
   will not fit, so normal text is unaffected.
   This matters here because aviso-legal and privacidad will carry a real
   address, email and site URL once those are filled in. */
body { overflow-wrap: break-word; }

ul, ol { margin: 0 0 1rem; padding-left: 1.2em; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--pink-text);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Layout helpers ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--narrow { max-width: 760px; }

/* The utility bar gets a wider container than the reading column.
   It has to. Inside the standard 1160px wrap, once the 44px padding is taken
   off, the bar can never be wider than 1072px on any monitor — and in
   Spanish, on an inner page, the logo, wordmark, tagline, five pills,
   Instagram and ES/EN/DE need 1161px. It was 89px over on every screen,
   which is why the first pill was landing on top of the wordmark.
   Trimming was measured and does not get there: dropping the tagline AND
   tightening the pills AND shrinking the logo leaves 9px, which is inside
   the margin of error. So the bar is given the room instead, and none of
   the wording had to be cut. */
.wrap--nav { max-width: 1320px; }

.section { padding-block: var(--section-y); }

/* Section heading row: uppercase title left, link right (briefing §5) */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.section-head h2 {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
}
.section-head__link {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-text);
  text-decoration: none;
}
.section-head__link:hover { color: var(--navy); text-decoration: underline; }

/* Kicker / eyebrow (briefing §5) */
.kicker {
  font-size: var(--fs-kicker);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: var(--teal-text);
}

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

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* Language visibility — driven by <html lang="es|en"> (see i18n.js) */
[data-lang-only="en"] { display: none; }
html[lang="en"] [data-lang-only="en"] { display: revert; }
html[lang="en"] [data-lang-only="es"] { display: none; }