/* =========================================================================
   ESTRUCTURA: barra de navegació, contenidor de pàgina i peu
   Mòbil: barra inferior com l'app · Ordinador (≥ 840px): barra superior
   ========================================================================= */

/* ---------- Contenidor de cada pantalla ---------- */
.view { outline: none; }
.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px 16px calc(var(--nav-h) + 32px + env(safe-area-inset-bottom));
}

/* ---------- Marca (només a l'ordinador) ---------- */
.brand { display: none; }

/* ---------- Navegació: MÒBIL (barra inferior) ---------- */
.app-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: var(--surface);
  padding-bottom: env(safe-area-inset-bottom);
}
.app-nav {
  display: grid;
  grid-auto-flow: column;           /* una sola fila, tants botons com hi hagi (ara 7, amb «Hosting» i «Compte») */
  grid-auto-columns: minmax(0, 1fr);
  height: var(--nav-h);
  max-width: 560px;
  margin: 0 auto;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--on-variant);
}
.nav-label { max-width: 100%; padding: 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 7 botons: la lletra s'ajusta a l'amplada perquè els noms hi càpiguen sencers (fins a 320 px) */
@media (max-width: 559px) { .nav-item { font-size: clamp(9px, 2.95vw, 12px); letter-spacing: -.015em; } }
.nav-ind {
  display: grid;
  place-items: center;
  width: min(64px, calc(100% - 8px));
  height: 32px;
  border-radius: 16px;
  transition: background-color .2s;
}
.nav-item[aria-current="page"] { color: var(--on-bg); font-weight: 700; }
.nav-item[aria-current="page"] .nav-ind { background: var(--secondary-container); color: var(--on-secondary-container); }
.nav-item:focus-visible { outline-offset: -4px; }

/* El detall d'un projecte és una pantalla a part, com a l'app: sense barra inferior al mòbil */
body[data-route="project"] .app-bar { display: none; }
body[data-route="project"] .page { padding-bottom: 40px; }

/* ---------- Peu ---------- */
.site-footer { display: none; }

/* ---------- Navegació: ORDINADOR (barra superior) ---------- */
@media (min-width: 840px) {
  :root { --nav-h: 0px; }

  .app-bar,
  body[data-route="project"] .app-bar {
    position: sticky;
    top: 0;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--bar-h);
    padding: 0 max(24px, calc((100vw - var(--page-max)) / 2 + 16px));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--outline-variant);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -.01em;
  }
  .brand-badge {
    width: 34px; height: 34px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--brand-violet), var(--brand-magenta), var(--brand-coral));
  }
  .app-nav {
    display: flex;
    gap: 4px;
    height: auto;
    margin: 0;
    max-width: none;
  }
  .nav-item {
    flex-direction: row;
    gap: 8px;
    height: 44px;
    padding: 0 16px 0 12px;
    border-radius: 22px;
    font-size: 15px;
    transition: background-color .2s;
  }
  .nav-item:hover { background: var(--surface-low); }
  .nav-ind { width: auto; height: auto; background: none !important; }
  .nav-ind .icon { width: 20px; height: 20px; }
  .nav-item[aria-current="page"] { background: var(--secondary-container); color: var(--on-secondary-container); }

  .page { padding: 32px 24px 48px; }
  body[data-route="project"] .page { padding-bottom: 48px; }

  .site-footer {
    display: block;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 24px 24px 40px;
    border-top: 1px solid var(--outline-variant);
    color: var(--on-variant);
    font-size: 14px;
  }
}

/* ---------- Carret: botó flotant al mòbil, a la barra superior a l'ordinador ---------- */
.cart-link { position: fixed; z-index: 21; right: 16px; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 14px; border-radius: 24px;
  background: var(--primary); color: var(--on-primary); font-weight: 700; box-shadow: 0 8px 22px -8px rgba(40, 20, 120, .55); }
.cart-link .icon { width: 22px; height: 22px; }
.cart-link-text { display: none; }
.cart-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--on-primary); color: var(--primary); font-size: 12px; font-variant-numeric: tabular-nums; }
.cart-link.is-current { display: none; }
body[data-route="project"] .cart-link { bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (min-width: 840px) {
  .cart-link, .cart-link.is-current { position: static; display: inline-flex; height: 44px; box-shadow: none; flex: none; }
  .cart-link-text { display: inline; }
  .cart-link.is-current { background: var(--secondary-container); color: var(--on-secondary-container); }
  .cart-link.is-current .cart-count { background: var(--on-secondary-container); color: var(--secondary-container); }
}
@media (min-width: 840px) {
  .brand { white-space: nowrap; flex: none; }
}
@media (min-width: 840px) and (max-width: 1299px) {
  .cart-link-text { display: none; }
  .cart-link, .cart-link.is-current { padding: 0 12px; }
}