/* =====================================================================
   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; }

/* aula (formació en vídeo) */
.cn-aula-item{ transition:background .15s; }
.cn-aula-item:hover{ background:#F4F2EC; }
.cn-reply > summary::-webkit-details-marker{ display:none; }
.cn-reply[open] > summary{ color:#8C8779 !important; }

/* desplegables (notes, dubtes, tallers): informació secundària plegada */
.cn-acc{ background:#fff; border:1px solid #EAE7DD; border-radius:18px; }
.cn-acc > summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:15px 18px; cursor:pointer; font-family:'Forma DJR Display',sans-serif; font-weight:700; font-size:15.5px; border-radius:18px; transition:background .15s; }
.cn-acc > summary::-webkit-details-marker{ display:none; }
.cn-acc > summary:hover{ background:#FBFAF7; }
.cn-acc[open] > summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.cn-acc-chev{ margin-left:auto; flex:none; transition:transform .2s; color:#8C8779; }
.cn-acc[open] .cn-acc-chev{ transform:rotate(180deg); }
.cn-acc-count{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; background:#EFE5FF; color:#1D1D1B; border-radius:9999px; padding:1px 8px; }
.cn-acc-body{ padding:2px 18px 18px; }
.cn-acc-dark{ background:#1D1D1B; border-color:#1D1D1B; color:#F4F2EC; }
.cn-acc-dark > summary:hover{ background:rgba(255,255,255,.05); }
.cn-acc-dark .cn-acc-chev{ color:#B7B2A4; }
.cn-acc-dark .cn-acc-count{ background:#FFEA59; }

/* responsive */
@media (max-width:960px){
  .cn-aula-grid{ grid-template-columns:1fr !important; padding:20px !important; }
  .cn-aula-aside{ position:static !important; }
  .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-hide-sm{ 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; }
}