/* ==========================================================================
   TopQuaranta CSS
   Ordre:
     1) Variables i reset
     2) Enllaços (política global)
     3) Layout global (contenidors, rich-text)
     4) Header & Nav (incl. submenú)
     5) Panell de cerca
     6) Hero
     7) Seccions
     8) Targetes i grid
     9) Components (chips, paginació, inputs)
    10) Footer
    11) Accessibilitat i focus
    12) Utilitats
   ========================================================================== */

/* ===== 1) Variables i reset ===== */

html, body { margin:0; padding:0; }
*, *::before, *::after { box-sizing: border-box; }

/* === Enllaços (política global) — simplificat === */
a {
  color: currentColor;
  text-decoration: none;
}
a:hover { font-weight: 700; }

/* ===== 3) Layout global (contenidor) ===== */
.container{
  max-width: var(--container-max, 1180px);
  margin: 0 auto;
  padding-left: var(--gutter, 16px);
  padding-right: var(--gutter, 16px);
}

/* Imatges responsives per defecte (evita desbordament horitzontal) */
img{ max-width:100%; height:auto; display:block; }

/* Rich text bàsic */
.rich-text table { width: 100%; }
.rich-text p { line-height: 1.6; }

/* ===== 4) Header & Nav ===== */
header.site-header{
  position: relative;
  width: 100%;
  border-bottom: 1px solid var(--border);
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: var(--header-h, 96px);
  padding-block: 8px;
}

.site-logo{
  display:block;
  max-width: var(--logo-w, 200px);
  max-height: var(--logo-h, 60px);
  object-fit: contain; /* no retalla per defecte */
}

.site-header__nav-right{ display:flex; align-items:center; gap:16px; }

.nav-menu{
  display: flex;
  gap: 1.5rem;
}

/* Estat actiu del menú principal (accent només com a indicador, no com a color del link) */
.nav-menu a.is-active{
  font-weight:600;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}

/* Submenú desplegable */
.nav-menu .menu-item { position: relative; }

.nav-menu__submenu{
  display: none;
  list-style:none;
  margin:0;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.5rem 0;
  min-width: 200px;
  z-index: 1000;
}

/* Submenú del botó d'usuari a la dreta del header */
.site-header__nav-right .menu-item { position: relative; }
.site-header__nav-right .menu-item:hover > .nav-menu__submenu,
.site-header__nav-right .menu-item:focus-within > .nav-menu__submenu { display:block; }
.nav-menu__submenu--right { left:auto; right:0; }


.nav-menu__submenu a{
  display:block;
  padding:0.5rem 1rem;
}

/* Obertura per hover i teclat (accessibilitat) */
.nav-menu .menu-item:hover > .nav-menu__submenu,
.nav-menu .menu-item:focus-within > .nav-menu__submenu { display: block; }

/* ===== 5) Panell de cerca ===== */
.search-toggle{
  background: none;
  border:0;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.search-panel{
  position:absolute;
  left:0; right:0; top:100%;
  background: var(--header-bg);
  border-bottom:1px solid var(--border);
  display:none;
}

.search-panel.open{ display:block; }

.search-panel .container{
  display:flex;
  gap:8px;
  padding:12px 16px;
}

.search-panel input[type="search"]{
  flex:1;
  padding:10px 12px;
  font-size:16px;
  border: 1px solid var(--border);
}

.search-panel button[type="submit"]{
  padding:10px 16px;
  font-weight:600;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--bg);
  cursor:pointer;
}

/* ===== 6) Hero ===== */
.hero{
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--border);
}

.hero h1{
  margin:0 0 8px;
  font-size: 40px;
  line-height:1.15;
}

.hero :where(p){
  margin:0;
  font-size:18px;
  opacity:.8;
}

/* ===== 7) Seccions ===== */
.section{ padding: 32px 0; }

.section > * + *{
  margin-top: 12px;
}

.section-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:16px;
}

.section-header h2{ margin:0; font-size: 22px; }

/* ===== 8) Targetes i grid ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(
    auto-fill,
    minmax(var(--min,180px),1fr)
  );
  gap:var(--gap,20px);
}

.grid-sm{ --min:160px; --gap:16px; }

/* Carrusel d'una sola línia amb scroll */
.carousel{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding-bottom:8px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling: touch;
}
.carousel > a{
  flex:0 0 180px;      /* amplària fixa de targeta */
  scroll-snap-align:start;
}

.thumb{
  aspect-ratio:1/1;
  background: var(--bg);
  border:1px solid var(--border);
  overflow:hidden;
}

.thumb > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== 9) Components ===== */
/* Chips */
.row{ display:flex; align-items:center; gap:8px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }

.chip{
  display:inline-flex;          /* caixa de botó previsible */
  align-items:center;
  padding:6px 10px;
  line-height:1.2;
  border-radius:6px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  white-space:nowrap;           /* evita trencs rars dins del botó */
}

.chip--active{
  background:var(--brand);
  color: var(--bg);
  border-color:var(--brand) !important;
}

/* Hover de xips (component tipus botó: pot usar accent) */
.chip:hover:not(.chip--active){
  border-color: var(--brand);
  color: currentColor;
}

/* Paginació */
.pager{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:20px;
}

.pager .pager-btn{
  padding:8px 12px;
  border: 1px solid var(--border);
  border-radius:4px;
  text-decoration:none;
  color:var(--text);
}

.pager .pager-info{ align-self:center; opacity:.7; }

/* Inputs genèrics */
.input{
  border: 1px solid var(--border);
  padding:6px 8px;
  max-width:240px;
}

/* ===== 9-bis) Auth (login / signup / reset) ===== */

/* Wrapper que centra vertical/horizontalment el formulari */
.auth-wrap{
  min-height: calc(100vh - var(--header-h, 96px));
  display:flex; align-items:center; justify-content:center;
  padding: 32px 16px;
}

/* Targeta del formulari (look compacte i reutilitzable) */
.auth-card{
  width:100%; max-width:520px;
  background: rgba(0,0,0,.18);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

/* Camps + etiquetes coherents */
.auth-card .form-row{ margin:0 0 12px; }
.auth-card .form-row label{ display:block; font-weight:600; margin-bottom:6px; }
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"]{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
}

/* Enllaç d’ajuda (oblidar clau, etc.) alineat a la dreta */
.auth-card .help-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:6px;
}
.auth-card .form-help{ font-size:.9rem; opacity:.8; }

/* Accions: apilar botons verticalment amb separació */
.actions{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Botons reutilitzables del mòdul Auth */
.btn{
  display:inline-block; width:100%;
  padding:12px 16px; text-align:center;
  font-weight:700; border-radius:8px; /* menys rodó que abans */
  border:1px solid transparent; cursor:pointer;
}
.btn--primary{ background:var(--brand); color:var(--bg); border-color:var(--brand); }
.btn--ghost{ background:transparent; color:currentColor; border-color:var(--brand); }

/* Zona inferior per a marca opcional (logo) */
.auth-brand{ margin-top:20px; display:flex; justify-content:center; }
.auth-brand img{ height:56px; width:auto; object-fit:contain; }

/* ===== 10) Footer ===== */
footer.site-footer{
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
}

.site-footer{
  background: var(--footer-bg);
  color: var(--footer-text);
}


/* ===== 11) Accessibilitat i focus ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Inputs de cerca: focus amb brand */
.search-panel input[type="search"]:focus { border-color: var(--brand); }

/* ===== 12) Utilitats ===== */
.mt-0{ margin-top:0; }
.mt-8{ margin-top:8px; }
.mt-24{ margin-top:24px; }

.fw-600{ font-weight:600; }
.fw-800{ font-weight:800; }
.flex-center-10{ display:flex; align-items:center; gap:10px; }
.fs-18{ font-size:18px; line-height:1; }
.muted{ opacity:.6; }
.muted-strong{ opacity:.8; }