/* ==========================================================================
   INNOVOFOOD · base.css
   Reset, tipografia de base i utilitats. Consumeix tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   00 · TIPOGRAFIES · allotjades a la web (assets/fonts, llicència OFL)
   Inter Tight substitueix Neue Montreal (la del disseny no té llicència web):
   és la gratuïta més semblant de les que s'han comparat (82 % de forma per
   lletra i un 2–3 % més ampla). Els fitxers només porten els caràcters de la
   web (castellà, anglès i català) i les funcions que s'usen (xifres
   tabulars, kerning, lligadures). El navegador només baixa els que fa servir.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-tight-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-tight-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/inter-tight-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-400-italic.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   01 · RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La nav fixa (48 px) no ha de tapar la secció quan s'hi salta per àncora */
  scroll-padding-top: calc(var(--nav-height) + var(--space-16));
  background-color: var(--bg-secondary);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-none);
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Reserva d'espai: tota imatge porta width/height a l'HTML → CLS zero.
   Sense especificitat (:where): les imatges que han d'omplir la seva caixa
   (object-fit: cover, block-size: 100%) han de poder guanyar-li. A mòbil
   no es notava perquè les proporcions coincidien amb les de la caixa. */
:where(img[width][height]) {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--olive-600);
  color: var(--neutral-white);
}

/* --------------------------------------------------------------------------
   02 · TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

strong, b { font-weight: var(--fw-medium); }

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}

/* Última paraula dels titulars: Serif/Display en oliva sòlid. Sobre un
   titular amb gradient, el color propi la fa sortir per sobre. */
.title-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: #51583F;
}

/* Paraula en cursiva que conserva el color (o gradient) del text */
.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}

/* Les mètriques de la serif són més altes: sense això engreixen la línia */
.title-accent,
.serif-accent {
  line-height: 1;
}

.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   03 · TEXT EN GRADIENT
   El frame pinta pràcticament tots els titulars amb gradient. El color sòlid
   que precedeix cada regla és el fallback per a navegadors sense
   background-clip:text i per a prefers-reduced-transparency.
   -------------------------------------------------------------------------- */
.grad-ink {
  color: var(--olive-600);
}

.grad-rose {
  color: var(--accent-rose);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .grad-ink,
  .grad-rose {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .grad-ink { background-image: var(--grad-ink); }
  .grad-ink--hero { background-image: var(--grad-ink-hero); }
  .grad-rose { background-image: var(--grad-rose); }
}

/* --------------------------------------------------------------------------
   04 · LAYOUT
   El frame aprovat és mòbil (376 px). Fins a 640 px la pàgina es queda en
   una columna de --page-max com a molt; a partir d'aquí ocupa tot l'ample
   i cada secció distribueix el contingut amb el seu layout de tauleta o
   escriptori (sections.css, seccions 13 i 14) dins de --container.
   -------------------------------------------------------------------------- */
.page {
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--page-max);
  margin-inline: auto;
  background-color: var(--bg-secondary);
  overflow-x: clip;
}

@media (min-width: 640px) {
  .page {
    max-inline-size: none;
  }
}

/* Sprite d'icones: invisible però renderitzat, perquè els gradients i
   filtres que conté es puguin referenciar des de la resta de la pàgina */
.sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   05 · ACCESSIBILITAT
   -------------------------------------------------------------------------- */
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-8);
  inset-inline-start: var(--space-8);
  z-index: var(--z-skip);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--neutral-black);
  color: var(--neutral-white);
  font-weight: var(--fw-medium);
  transform: translateY(calc(-100% - var(--space-16)));
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Porpra d'accent: 3.9:1 sobre clar i 3.4:1 sobre fosc, per sobre del 3:1
   que demana WCAG per a indicadors de focus a les dues meitats de la pàgina */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-md);
}

a[href],
button,
input,
select,
textarea,
summary {
  touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   06 · FALLBACK DEL VIDRE
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-navbar-bg: rgba(254, 255, 251, 0.96);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-navbar-bg: var(--accent-natural-white);
    --glass-navbar-blur: 0px;
    --glass-card-blur: 0px;
    --glass-content-blur: 0px;
  }

  .grad-ink,
  .grad-rose {
    background-image: none;
  }

  .grad-ink { color: var(--olive-600); }
  .grad-rose { color: var(--accent-rose); }
}

/* --------------------------------------------------------------------------
   07 · MOVIMENT REDUÏT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-reveal: 0.01ms;
    --delay-stagger: 0ms;
    --reveal-shift: 0px;
  }

  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   08 · ENTRADES EN FER SCROLL
   L'estat ocult només existeix si animations.js ha arrencat (.js-reveal a
   l'<html>). I el mateix script, a més de l'observer, revela a mà el que ja
   és a pantalla: a la versió anterior el primer callback de l'observer no
   sempre arribava i la pàgina es quedava en blanc.
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  translate: 0 var(--reveal-shift);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    translate var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   TRANSICIÓ ENTRE PÀGINES
   Fos suau entre la landing i les pàgines legals (View Transitions entre
   documents; on no n'hi ha, es navega com sempre). La barra porta nom
   propi: d'una pàgina a l'altra es transforma en comptes de fondre's.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur-slow);
    animation-timing-function: var(--ease-out);
  }

  .site-nav {
    view-transition-name: site-nav;
  }

  ::view-transition-group(site-nav) {
    animation-duration: var(--dur-slow);
    animation-timing-function: var(--ease-out);
  }
}

/* Mentre s'apliquen els textos en anglès (vegeu l'script de la capçalera) */
.i18n-pending body {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   09 · IMPRESSIÓ
   -------------------------------------------------------------------------- */
@media print {
  .site-nav,
  .skip-link,
  .hero__video { display: none; }
}