/* ==========================================================================
   SKAI Technology — components
   Navegació, selector d'idioma, canvi de tema, targetes, formularis, peu.
   ========================================================================== */

/* ==========================================================================
   NAVEGACIÓ
   ========================================================================== */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  /* El sistema demana 32px de desenfoc: es el que fa que la capcalera
     sembli vidre i no un rectangle mig transparent. */
  backdrop-filter: blur(var(--vidre-buf)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--vidre-buf)) saturate(170%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-tou), background 0.3s var(--ease-tou);
}

.nav-shell.is-scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 72px;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-right: auto;
  flex-shrink: 0;
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 6px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.25s var(--ease-tou), background 0.25s var(--ease-tou);
}

.nav-link:hover { color: var(--ink); background: var(--paper-2); }

.nav-cta {
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--btn-fg);
  background: var(--blau-viu);
  text-decoration: none;
  box-shadow: var(--ombra-1);
  transition: filter 0.25s var(--ease-tou), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-cta:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: var(--ombra-2); }

/* ---------- Eines de la barra (tema + idioma) ---------- */
.nav-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.25s var(--ease-tou), border-color 0.25s var(--ease-tou),
              background 0.25s var(--ease-tou);
}

.icon-btn:hover { color: var(--ink); border-color: var(--line-forta); background: var(--paper-2); }
.icon-btn svg { width: 18px; height: 18px; }

/* El sol i la lluna es creuen: es veu el que passaria si prems */
.theme-toggle .ico-sol,
.theme-toggle .ico-lluna { grid-area: 1 / 1; transition: opacity 0.3s var(--ease-tou), transform 0.4s var(--ease); }
.theme-toggle .ico-lluna { opacity: 0; transform: rotate(-90deg) scale(0.6); }

:root[data-theme="dark"] .theme-toggle .ico-sol { opacity: 0; transform: rotate(90deg) scale(0.6); }
:root[data-theme="dark"] .theme-toggle .ico-lluna { opacity: 1; transform: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ico-sol { opacity: 0; transform: rotate(90deg) scale(0.6); }
  :root:not([data-theme="light"]) .theme-toggle .ico-lluna { opacity: 1; transform: none; }
}

/* ---------- Selector d'idioma ---------- */
.lang { position: relative; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.25s var(--ease-tou), border-color 0.25s var(--ease-tou),
              background 0.25s var(--ease-tou);
}

.lang-btn:hover,
.lang-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--line-forta); background: var(--paper-2); }

.lang-btn .caret { width: 11px; height: 11px; opacity: 0.65; transition: transform 0.3s var(--ease); }
.lang-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 176px;
  padding: 6px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--ombra-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}

.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.2s var(--ease-tou), color 0.2s var(--ease-tou);
}

.lang-menu a:hover { background: var(--paper-2); color: var(--ink); }

.lang-menu a[aria-current="true"] {
  background: var(--blau-tou);
  color: var(--blau);
  font-weight: 600;
}

.lang-menu .codi {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  min-width: 30px;
  color: var(--ink-3);
}

.lang-menu a[aria-current="true"] .codi { color: var(--blau); }


/* ---------- Desplegable del menu (Lab) ---------- */


/* On sou ara. aria-current="page" es la pagina exacta; .is-section es quan
   nomes hi sou a sobre (una filla de l'apartat). */
.nav-link[aria-current="page"],
.nav-item.is-section > .nav-link {
  color: var(--ink);
  background: var(--paper-2);
}

.nav-drop { position: relative; }

.nav-drop > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.nav-drop > .nav-link .caret {
  width: 12px; height: 12px; opacity: 0.6;
  transition: transform 0.3s var(--ease);
}

.nav-drop > .nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-drop > .nav-link[aria-expanded="true"] { color: var(--ink); background: var(--paper-2); }

.drop-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: 210px;
  padding: 6px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--ombra-3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}

.nav-drop.is-open .drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.drop-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.2s var(--ease-tou), color 0.2s var(--ease-tou);
}

.drop-menu a:hover { background: var(--paper-2); color: var(--ink); }
.drop-menu a[aria-current="page"] { background: var(--blau-tou); color: var(--blau); font-weight: 600; }

.drop-menu .estat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Sagnat dels fills del Lab al menu mobil */
.m-list a.fill { padding-left: 32px; font-size: 16px; color: var(--ink-2); }

/* ---------- Mòbil ---------- */
.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.nav-burger span {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease-tou);
}

.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 19px; }
.nav-burger span:nth-child(3) { top: 24px; }

.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-panel {
  position: fixed;
  inset: 72px 0 0;
  z-index: 999;
  background: var(--paper);
  padding: 24px var(--gutter) 40px;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.mobile-panel.is-open { opacity: 1; visibility: visible; }

.m-list { display: grid; gap: 2px; margin-bottom: 26px; }

.m-list a {
  padding: 15px 16px;
  border-radius: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}

.m-list a:last-child { border-bottom: 0; }
.m-list a:active { background: var(--paper-2); }

.m-label {
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.m-langs { display: flex; gap: 8px; margin-bottom: 26px; }

.m-langs a {
  flex: 1;
  padding: 12px;
  text-align: center;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink-2);
}

.m-langs a[aria-current="true"] {
  border-color: var(--blau-vora);
  background: var(--blau-tou);
  color: var(--blau);
  font-weight: 600;
}

@media (max-width: 940px) {
  .nav-menu, .nav > .nav-cta, .lang { display: none; }
  .nav-burger { display: block; }
}

/* ==========================================================================
   TARGETES
   ========================================================================== */
.card {
  position: relative;
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  background: var(--card);
  padding: 30px;
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease-tou),
              box-shadow 0.4s var(--ease), background 0.3s var(--ease-tou);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-forta);
  box-shadow: var(--ombra-2);
}

.panel {
  position: relative;
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--ombra-2);
  overflow: hidden;
  transition: background 0.3s var(--ease-tou), border-color 0.3s var(--ease-tou);
}

/* ==========================================================================
   FORMULARIS
   ========================================================================== */
.field { display: grid; gap: 8px; }

.field label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.field label svg { width: 15px; height: 15px; color: var(--blau); flex-shrink: 0; }

.field input,
.field textarea {
  width: 100%;
  background: var(--paper);
  border: 1.5px solid var(--line-forta);
  border-radius: var(--r-s);
  padding: 14px 16px;
  font-size: 17px;
  font-family: var(--sans);
  color: var(--ink);
  transition: border-color 0.2s var(--ease-tou), box-shadow 0.2s var(--ease-tou),
              background 0.3s var(--ease-tou);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blau);
  box-shadow: 0 0 0 4px var(--blau-tou);
}

.field input:focus-visible,
.field textarea:focus-visible { outline: none; }

.field textarea { resize: vertical; min-height: 128px; line-height: 1.6; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* El selector natiu de data es veu clar en mode fosc */
:root[data-theme="dark"] .field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
}

/* El camp trampa. No es "display:none" perque alguns robots ho detecten i
   se'l salten; aixi que existeix, ocupa lloc i simplement no es a la vista.
   Per a un lector de pantalla queda fora amb aria-hidden i tabindex="-1". */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* L'altra porta. Qui ja ho te clar no ha de passar per un formulari i
   esperar resposta: te un calendari a /reserva/. I a l'inreves, qui nomes
   vol preguntar una cosa no s'ha de comprometre a una hora. */
.altra-porta {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-3);
}

.altra-porta a { color: var(--blau); }

.form-avis {
  margin: 14px 0 0;
  padding: 12px 15px;
  border-radius: 11px;
  font-size: 14.5px;
  line-height: 1.5;
}

.form-avis.be {
  background: var(--blau-tou);
  border: 1px solid var(--blau-vora);
  color: var(--ink);
}

.form-avis.mal {
  background: var(--paper-2);
  border: 1px solid var(--line-forta);
  color: var(--ink);
}

.form-note { font-size: 14px; color: var(--ink-3); line-height: 1.55; }

/* ==========================================================================
   PEU
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding-block: 60px 30px;
  background: var(--paper-2);
  transition: background 0.3s var(--ease-tou);
}

.footer-grid {
  display: grid;
  /* Una per la marca i QUATRE de llista. Aixo deia "2fr 1fr 1fr" mentre el
     marcatge ja en portava quatre: la darrera columna queia a la fila de
     sota, a l'esquerra, amb mig peu de buit al costat. */
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: 40px 32px;
  margin-bottom: 44px;
}

.footer-brand { max-width: 300px; }
.footer-brand .brand { margin: 0 0 14px; }

.footer-tagline {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 20px;
}

.socials { display: flex; gap: 8px; }

.socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  transition: color 0.25s var(--ease-tou), border-color 0.25s var(--ease-tou),
              transform 0.3s var(--ease);
}

.socials a:hover { color: var(--blau); border-color: var(--blau-vora); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }

.footer-col h2 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 16px;
}

.footer-col ul { display: grid; gap: 11px; }

.footer-col a {
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.25s var(--ease-tou);
}

.footer-col a:hover { color: var(--blau); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
}

/* L'enllac al panell, al peu. Nomes el veu qui ja ha entrat. */
.footer-dreta { display: inline-flex; align-items: center; gap: 18px; }

.peu-admin {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  transition: color 0.25s var(--ease-tou), border-color 0.25s var(--ease-tou);
}

.peu-admin:hover { color: var(--blau); border-color: var(--blau-vora); }

/* Quatre columnes de llista no caben en una tauleta. Primer passen a dues,
   i despres a una. La marca sempre ocupa tota l'amplada. */
@media (max-width: 1020px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-brand { grid-column: 1 / -1; max-width: none; margin-bottom: 8px; }
}

@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; text-align: center; }
  .field-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CINTA D'ANUNCI
   ==========================================================================
   Sota la capçalera i QUIETA. El text que es mou sol és un problema
   d'accessibilitat (WCAG 2.2.2) i llegeix com una web del 2005; el que fa
   l'efecte de modern és una franja prima i ben tipografiada.

   NO és sticky a propòsit: la capçalera sí que ho és, i dues barres
   enganxades a dalt es mengen mitja pantalla al mòbil. Aquesta es llegeix
   en arribar i se'n va en baixar.

   Els colors vénen inline des del PHP (--cinta-fons i --cinta-text), d'una
   llista tancada de nucli.php amb els contrastos calculats.
   ========================================================================== */
.cinta-anunci {
  background: var(--cinta-fons, var(--blau-tou));
  color: var(--cinta-text, var(--ink));
  border-bottom: 1px solid rgba(20, 20, 28, 0.10);
}

.cinta-cos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-block: 10px;
  font-size: 14.5px;
  line-height: 1.4;
}

.cinta-cos p { margin: 0; font-weight: 500; }

.cinta-boto {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--cinta-text);
  color: var(--cinta-fons);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.2s var(--ease-tou);
}
.cinta-boto:hover { filter: brightness(1.15); }

.cinta-tanca {
  position: absolute;
  right: max(12px, calc((100vw - var(--maxw)) / 2));
  border: 0;
  background: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s var(--ease-tou);
}
.cinta-tanca:hover { opacity: 1; }

.cinta-anunci { position: relative; }

/* Amagada: regla explícita perquè .cinta-cos té display:flex i l'atribut
   hidden del navegador el perd. Ja va passar a la portada amb .dg-crida. */
.cinta-anunci[hidden] { display: none; }

@media (max-width: 640px) {
  .cinta-cos {
    flex-direction: column;
    gap: 8px;
    padding-block: 12px;
    padding-right: 34px;
    text-align: center;
    font-size: 13.5px;
  }
  .cinta-tanca { right: 6px; top: 6px; }
}