/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  PAPIK · Header pla (oct 2026) · integrat al projecte           ║
   ║  Portada: barra d'ample complet, transparent, logotip i navegació en     ║
   ║  blanc sobre la foto. Amb scroll: fons blanc, tot en verd #002819, mateixa║
   ║  posició i mida, transició de 250 ms. Fora de la portada (pàgines que    ║
   ║  neixen sobre fons clar) la barra comença ja en l'estat blanc/verd.      ║
   ║  Marcat, enllaços, submenús, idiomes, scroll i teclat: els de sempre.    ║
   ║  Els selectors porten .rl-header al davant per guanyar als estils que    ║
   ║  lang-switcher.js injecta en temps d'execució.                           ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Barra · ample complet, sense càpsula ───────────────────────────────── */
.rl-header,
.rl-header.is-scrolled,
.rl-header.on-similar,
.rl-header.on-similar.is-scrolled {
  top: 0; left: 0; right: 0;
  height: 88px;
  background: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: background 250ms ease, box-shadow 250ms ease;
}
.rl-header .rl-header__container {
  max-width: none;
  padding: 0 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.rl-header .rl-header__menu { margin-left: auto; justify-self: auto; }
.rl-header .rl-header__menu > ul { gap: 34px; }

/* ── Estat blanc / verd (base de totes les pàgines i estat amb scroll) ──── */
.rl-header .rl-header__logo svg { width: 140px; height: auto; }
.rl-header .rl-header__logo svg path,
.rl-header .rl-header__logo svg polygon { fill: #002819; transition: fill 250ms ease; }

.rl-header .rl-header__menu > ul > li > a,
.rl-header .rl-header__menu-trigger {
  font-size: 13px; font-weight: 400; letter-spacing: 0.04em;
  color: #002819;
  transition: color 250ms ease;
}
.rl-header .rl-header__menu a:hover,
.rl-header .rl-header__menu-trigger:hover,
.rl-header .rl-header__menu-trigger[aria-expanded="true"] { color: #002819; }
.rl-header .rl-header__menu a::after,
.rl-header .rl-header__menu-trigger::after { background: currentColor; }

.rl-header .rl-lang-switch__toggle,
.rl-header .rl-lang-switch__current,
.rl-header .rl-lang-switch__toggle:hover,
.rl-header .rl-lang-switch.is-open .rl-lang-switch__toggle { color: #002819; background: transparent; font-size: 13px; font-weight: 400; transition: color 250ms ease; }
.rl-header .rl-lang-switch__btn { color: #002819; }
.rl-header .rl-lang-switch__btn.is-active { color: #ffffff; background: #002819; }
.rl-header .rl-lang-switch__sep { background: #d9e4e0; }

.rl-header .rl-header__login,
.rl-header .rl-header__login:hover,
.rl-header .rl-header__login:focus-visible { color: #002819; background: transparent; transition: color 250ms ease; }
.rl-header .rl-header__login::before { background: #d9e4e0; transition: background 250ms ease; }

/* CTA Pressupost · contorn hairline (opció B, triada el 23 oct 2026): sense
   farciment, una línia d'1px del color del text; en passar-hi s'omple de verd */
.rl-header .rl-header__cta,
.rl-header .rl-header__cta:focus-visible {
  background: transparent; color: #002819 !important;
  box-shadow: inset 0 0 0 1px #002819;
  border-radius: 10px; padding: 10px 22px;
  font-size: 13px; font-weight: 400; letter-spacing: 0.04em;
  transition: background 250ms ease, color 250ms ease, box-shadow 250ms ease;
}
.rl-header .rl-header__cta:hover { background: #002819; color: #ffffff !important; box-shadow: inset 0 0 0 1px #002819; }
.rl-header .rl-mobile-nav__toggle { color: #002819; border-radius: 10px; transition: color 250ms ease; }

/* Amb scroll, una hairline menta separa la barra blanca del contingut blanc */
.rl-header.is-scrolled { box-shadow: 0 1px 0 #d9e4e0; }

/* ── Mega-menú · continuació de la barra ────────────────────────────────────
   Mateix llenguatge que la navegació: títols de columna en majúscules 13px
   regular (com els ítems del menú), sense filets sota els títols, enllaços
   a 14px amb subratllat hairline en passar-hi. Panell blanc d'ample complet
   enganxat a la barra, tancat per una hairline menta. Columnes d'amplada
   de contingut, alineades al marge del logotip. Entrada: fos curt, sense
   desplaçament. */
.rl-header .rl-mega {
  top: 100%;
  left: 0; right: 0;
  background: #ffffff;
  border: 0;
  border-top: 1px solid #d9e4e0;
  border-bottom: 1px solid #d9e4e0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: opacity 200ms ease;
}
.rl-header .rl-mega.is-open { transform: none; }
.rl-header .rl-mega__inner {
  max-width: none;
  padding: 30px 48px 34px;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 96px;
}
.rl-header .rl-mega .rl-mega__col-title {
  font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase;
  color: #002819;
  border-bottom: 0;
  padding: 0; margin: 0 0 12px;
}
.rl-header .rl-mega .rl-mega__col-title:hover { color: #002819; }
.rl-header .rl-mega__col ul { gap: 0; }
.rl-header .rl-mega .rl-mega__col li a {
  position: relative;
  font-size: 14px; font-weight: 400; line-height: 1.35; letter-spacing: 0;
  padding: 5px 0;
  color: #002819;
  transition: color 160ms ease;
}
.rl-header .rl-mega .rl-mega__col li a:hover { color: #002819; transform: none; }
/* Subratllat hairline en passar-hi, el mateix gest que els ítems de la barra */
.rl-header .rl-mega .rl-mega__col li a::after,
.rl-header .rl-mega .rl-mega__col-title::after {
  content: ""; display: block;
  position: absolute; left: 0; bottom: 3px;
  width: 0; height: 1px; background: currentColor;
  transform: none;
  transition: width 220ms cubic-bezier(0.25, 1, 0.5, 1);
}
.rl-header .rl-mega .rl-mega__col-title { position: relative; display: inline-block; width: auto; }
.rl-header .rl-mega .rl-mega__col-title::after { bottom: -2px; }
.rl-header .rl-mega .rl-mega__col li a:hover::after,
.rl-header .rl-mega .rl-mega__col-title:hover::after { width: 100%; }
/* L'ítem SERVEIS queda subratllat mentre el panell és obert */
.rl-header .rl-header__menu-trigger[aria-expanded="true"]::after { width: 100%; }
@media (max-width: 1180px) {
  .rl-header .rl-mega__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .rl-header .rl-mega .rl-mega__col li a { font-size: 13px; line-height: 1.3; padding: 4px 0; }
}
@media (max-width: 980px) {
  .rl-header .rl-mega__inner { grid-template-columns: repeat(2, max-content); gap: 32px 64px; padding: 28px 24px 32px; }
}
/* Mentre el desplegable és obert, la barra és blanca encara que estiguem a dalt
   de la portada: barra i panell es llegeixen com una sola peça. */
.rl-header:has(.rl-mega.is-open) { background: #ffffff; }

/* Focus visible en verd (l'anell menta heretat no es veu sobre blanc) */
.rl-header :where(a, button):focus-visible { outline-color: #002819; }

/* ── Portada (body.is-home) sense scroll · transparent, tot en blanc ────── */
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) { background: transparent; box-shadow: none; }
/* Degradat negre molt subtil darrere la barra, només a la portada i només a dalt,
   per garantir la lectura del blanc sobre la foto. */
body.is-home .rl-header::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
  pointer-events: none;
  opacity: 1;
  transition: opacity 250ms ease;
  z-index: -1;
}
body.is-home .rl-header.is-scrolled::before,
body.is-home .rl-header:has(.rl-mega.is-open)::before { opacity: 0; }
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-header__logo svg path,
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-header__logo svg polygon { fill: #ffffff; }
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-header__menu > ul > li > a,
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-header__menu-trigger,
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-header__menu a:hover,
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-header__menu-trigger:hover,
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-lang-switch__toggle,
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-lang-switch__current,
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-lang-switch__toggle:hover,
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-header__login,
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-header__login:hover,
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-mobile-nav__toggle { color: #ffffff; }
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-header__login::before { background: #ffffff; }
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-header__cta { background: transparent; color: #ffffff !important; box-shadow: inset 0 0 0 1px #ffffff; }
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) .rl-header__cta:hover { background: #ffffff; color: #002819 !important; box-shadow: inset 0 0 0 1px #ffffff; }
body.is-home .rl-header:not(.is-scrolled):not(:has(.rl-mega.is-open)) :where(a, button):focus-visible { outline-color: #ffffff; }

/* ── Escriptori estret ──────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .rl-header .rl-header__menu > ul { gap: 22px; }
  .rl-header .rl-header__container { gap: 24px; }
}

/* ── Mòbil · marges 20px, logotip a l'esquerra, menú a la dreta ─────────── */
@media (max-width: 720px) {
  .rl-header,
  .rl-header.is-scrolled,
  .rl-header.on-similar,
  .rl-header.on-similar.is-scrolled { top: 0; left: 0; right: 0; height: 64px; border-radius: 0; }
  .rl-header .rl-header__container { padding: 0 20px; gap: 12px; }
  .rl-header .rl-header__logo svg { width: 112px; }
  .rl-header .rl-header__cta { padding: 9px 18px; font-size: 12px; }
  body.is-home .rl-header::before { height: 120px; }
  .rl-mobile-nav__panel {
    top: 72px; left: 20px; right: 20px;
    max-height: calc(100% - 72px - 12px);
    border-radius: 16px;
  }
}

/* ── Configurador · reserva d'espai del header fix (88px en lloc de 80) ── */
body.atelier { padding-top: clamp(108px, 12vh, 128px); }

@media (prefers-reduced-motion: reduce) {
  .rl-header, .rl-header::before, .rl-header *, .rl-header *::before { transition: none !important; }
}