/* =====================================================================
   Carnet d'Entitats — pàgines públiques (landing + zona d'entitats)
   El markup porta estils inline (fidel al disseny); aquí només keyframes,
   estats :hover/:focus (que substitueixen style-hover/style-focus del
   prototip) i ajustos responsius. Tokens/font de kit-public.css.
   ===================================================================== */

@keyframes dbFadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes dbFloat{ 0%,100%{ transform:rotate(-7deg) translateY(0); } 50%{ transform:rotate(-7deg) translateY(-14px); } }
@keyframes dbToastIn{ from{ opacity:0; transform:translate(-50%,20px); } to{ opacity:1; transform:translate(-50%,0); } }

.cn { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }
.cn ::selection{ background:#FFEA59; color:#1D1D1B; }
.cn-fade{ animation:dbFadeUp .5s cubic-bezier(.2,.7,.2,1); }

/* estats hover (substitueixen style-hover del prototip) */
.h-dark:hover{ background:#000 !important; }
.h-invert:hover{ background:#1D1D1B !important; color:#fff !important; }
.h-yellow:hover{ background:#FFE03A !important; }
.h-ea:hover{ background:#EAE7DD !important; }
.h-nav:hover{ background:rgba(29,29,27,.05); }
.h-border:hover{ border-color:#1D1D1B !important; color:#1D1D1B !important; }
.h-card{ transition:box-shadow .25s cubic-bezier(.2,.7,.2,1), transform .25s cubic-bezier(.2,.7,.2,1); }
.h-card:hover{ box-shadow:0 12px 40px rgba(29,29,27,.09); transform:translateY(-3px); }
.h-link:hover{ color:#000; }

/* focus d'inputs (substitueix style-focus) */
.cn-inp{ transition:border-color .18s, background .18s; }
.cn-inp:focus{ border-color:#1D1D1B !important; background:#fff !important; }
.cn-inp-dark:focus{ border-color:#FFEA59 !important; }

/* franja/pill de reserva seleccionada */
.cn-slot input:checked + span{ background:#1D1D1B !important; color:#fff !important; border-color:#1D1D1B !important; }

/* ---------------------------------------------------------------------
   Focus de teclat visible (a11y). El disseny amaga l'input real dins la
   franja/pill; en navegar amb teclat, marquem l'etiqueta germana. També
   afegim un anell genèric per a enllaços/botons/inputs que no en tenien.
   --------------------------------------------------------------------- */
.cn-slot input:focus-visible + *{ outline:2px solid #1D1D1B; outline-offset:2px; border-radius:10px; }
.cn a:focus-visible,
.cn button:focus-visible,
.cn [tabindex]:focus-visible,
.cn-nav:focus-visible{ outline:2px solid #1D1D1B; outline-offset:2px; }
.cn-inp:focus-visible{ outline:2px solid #1D1D1B; outline-offset:1px; }
/* sobre fons foscos, l'anell fosc no es veu: usem el groc de marca */
.cn-inp-dark:focus-visible{ outline:2px solid #FFEA59 !important; outline-offset:1px; }

/* Àncores internes: compensa el header enganxós en fer scroll a un #id */
.cn :target{ scroll-margin-top:96px; }

/* zona: panells (canvi via JS) */
.cn-panel[hidden]{ display:none; }

/* responsive */
@media (max-width:960px){
  .cn-grid-hero{ grid-template-columns:1fr !important; }
  .cn-grid-hero .cn-carnet-visual{ order:-1; height:300px !important; }
  .cn-grid-4{ grid-template-columns:1fr 1fr !important; }
  .cn-grid-3{ grid-template-columns:1fr 1fr !important; }
  .cn-grid-adhesio{ grid-template-columns:1fr !important; }
  .cn-grid-adhesio .cn-adhesio-aside{ position:static !important; }
  .cn-grid-zona{ grid-template-columns:1fr !important; }
  /* Menú de la zona: tira horitzontal desplaçable en comptes d'apilar
     botons a width:100%. NOTA per a l'agent 'zona': cal treure l'inline
     "width:100%" de zona/show.php:60 ($navBtn); aquí ho forcem amb
     !important perquè sigui robust encara que l'inline hi continuï. */
  .cn-zona-aside{ position:static !important; flex-direction:row !important; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .cn-zona-aside > div:first-child{ display:none; } /* etiqueta "Menú" sobra a la tira */
  .cn-zona-aside .cn-nav{ width:auto !important; flex:0 0 auto; white-space:nowrap; border:1px solid #E6E2D6 !important; background:#fff !important; }
  .cn-zona-aside .cn-help{ display:none; }
  .cn-grid-2{ grid-template-columns:1fr !important; }
  .cn-grid-adh{ grid-template-columns:1fr !important; }
}
@media (max-width:640px){
  .cn-grid-4, .cn-grid-3, .cn-form-2{ grid-template-columns:1fr !important; }
  .cn-nav-links{ display:none !important; }
  .cn-footer-grid{ grid-template-columns:1fr !important; }
}

/* ---------------------------------------------------------------------
   Impressió / Desa en PDF: aïlla la targeta del carnet digital. Amaga
   capçalera, menú lateral, ajuda i la resta de panells perquè només
   surti net el panell "carnet" (i el seu contingut) a la pàgina.
   --------------------------------------------------------------------- */
@media print{
  .cn{ background:#fff !important; min-height:0 !important; }
  .cn > header,
  .cn-zona-aside,
  .cn-help,
  #cn-flash,
  .cn-footer,
  footer{ display:none !important; }
  .cn-grid-zona{ display:block !important; max-width:none !important; margin:0 !important; padding:0 !important; }
  .cn-panel{ display:none !important; }               /* amaga tots els panells... */
  .cn-panel[data-panel="carnet"]{ display:block !important; }  /* ...excepte el carnet */
  .cn-grid-2{ grid-template-columns:1fr !important; }
  /* evita ombres/animacions en paper */
  .cn *{ box-shadow:none !important; animation:none !important; }
}