/* La capçalera d'una línia i el peu clar (tools/capcalera.mjs). Complementa el
   CSS base de cada pàgina, que ve d'index.html, i hi passa per sobre. */

/* Només per al lector de pantalla. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* L'atribut hidden mana sempre, encara que el component tingui un display propi. */
[hidden]{display:none!important}

/* ---------- La franja ---------- */
header.nav{position:sticky;top:0;z-index:50;background:var(--papel)}
.nav-in{height:64px;gap:28px;justify-content:flex-start}
.nav-publics{display:flex;align-self:stretch;gap:4px}
.nav-publics a{position:relative;display:flex;align-items:center;padding:0 12px;font-size:14.5px;font-weight:500;color:var(--gris);transition:color .18s}
.nav-publics a:hover{color:var(--tinta)}
.nav-publics a[aria-current="page"]{color:var(--tinta)}
.nav-publics a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--ultramar)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-acc{font-size:14.5px;font-weight:500;color:var(--gris);padding:10px 0}
.nav-acc:hover{color:var(--tinta)}
.nav-login{min-width:0;white-space:nowrap;height:40px;padding:0 16px}

/* Quin botó es veu: el del públic de la capçalera. */
.nav [data-menu]{display:none!important}
.nav[data-public="profesorado"] [data-menu~="profesorado"],
.nav[data-public="centros"] [data-menu~="centros"],
.nav[data-public="redes"] [data-menu~="redes"],
.nav[data-public="inici"] [data-menu~="inici"]{display:inline-flex!important}

/* ---------- A les pàgines de públic: el desplegable i el menú de seccions ---------- */
.nav:not([data-public="inici"]) .nav-publics{display:none!important}
.public-tria{position:relative}
/* A la portada els tres públics ja són a la vista; el desplegable és per al mòbil. */
.nav[data-public="inici"] .public-tria{display:none}
.public-boto{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:1px solid var(--linea);border-radius:999px;background:#fff;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--tinta);cursor:pointer;white-space:nowrap}
.public-boto span[aria-hidden]{font-size:9px;color:var(--gris)}
.public-llista{position:absolute;left:0;top:calc(100% + 8px);min-width:200px;background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:0 14px 34px rgba(20,22,30,.12);padding:6px;display:flex;flex-direction:column;z-index:70}
.public-llista a{display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:0 12px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--tinta)}
.public-llista a:hover{background:var(--papel)}
.public-llista a[aria-current="page"]{color:var(--ultramar)}
.public-llista a[aria-current="page"]::after{content:"✓";font-weight:600}
.nav-seccions{gap:20px;align-items:center}
.nav-seccions a{font-size:14.5px;color:var(--gris);white-space:nowrap;transition:color .18s}
.nav-seccions a:hover{color:var(--tinta)}
.panel-seccions{flex-direction:column;margin-bottom:12px;border-bottom:1px solid var(--linea);padding-bottom:8px}
.nav[data-public="profesorado"] .panel-seccions[data-menu~="profesorado"],
.nav[data-public="centros"] .panel-seccions[data-menu~="centros"],
.nav[data-public="redes"] .panel-seccions[data-menu~="redes"]{display:flex!important}
.panel-seccions a{display:flex;align-items:center;min-height:44px;font-size:16px;color:var(--tinta);padding-left:12px}
/* Quan el menú de seccions no hi cap, va a l'hamburguesa: el del professorat, que és més
   llarg, per sota de 1080 px; el de centres i xarxes, per sota de 1020. */
@media (max-width:1080px){
  .nav[data-public="profesorado"] .nav-in .nav-seccions{display:none!important}
  .nav[data-public="profesorado"] .nav-burger{display:inline-flex!important;order:9;padding:11px;margin:-4px -8px -4px 0}
}
@media (max-width:1020px){
  .nav[data-public] .nav-in .nav-seccions{display:none!important}
  .nav:not([data-public="inici"]) .nav-burger{display:inline-flex!important;order:9;padding:11px;margin:-4px -8px -4px 0}
}

.nav[data-sense-boto] .nav-right .nav-login{display:none!important}

/* ---------- L'idioma: un sol botó que desplega ---------- */
.idioma{position:relative}
.idioma-boto{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--linea);border-radius:999px;background:#fff;font-family:inherit;font-size:13px;font-weight:500;color:var(--tinta);cursor:pointer}
.idioma-boto span[aria-hidden]{font-size:9px}
.idioma-llista{position:absolute;right:0;top:calc(100% + 8px);width:180px;background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:0 14px 34px rgba(20,22,30,.12);padding:6px;display:flex;flex-direction:column;z-index:70}
.idioma-llista button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:8px;background:none;font-family:inherit;font-size:14.5px;color:var(--tinta);cursor:pointer;text-align:left}
.idioma-llista button:hover{background:var(--papel)}
.idioma-llista button[aria-current="true"]::after{content:"✓";color:var(--ultramar);font-weight:600}

/* ---------- L'hamburguesa i el seu panell: només al mòbil ---------- */
.nav-burger{display:none!important}
.nav-burger .tanca{display:none}
.nav.menu-open .nav-burger .obre{display:none}
.nav.menu-open .nav-burger .tanca{display:inline}
.nav-panel{position:absolute;left:0;right:0;top:100%;background:var(--papel);border-bottom:1px solid var(--linea);box-shadow:0 18px 36px rgba(20,22,30,.10);max-height:calc(100dvh - 56px);overflow-y:auto}
.nav-panel .wrap{padding-top:14px;padding-bottom:18px}
.panel-mes{display:flex;flex-direction:column;margin-top:6px}
.panel-mes a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--gris);padding-left:12px}

@media (max-width:820px){
  .nav-in{height:56px;gap:12px}
  .nav-in,.nav-panel .wrap{padding-left:16px;padding-right:16px}
  /* Els públics, al desplegable de la barra; l'hamburguesa porta la resta. */
  .nav-publics{display:none!important}
  .nav[data-public="inici"] .public-tria{display:block}
  /* Un públic de nom llarg («Norentzat den Aunova») es parteix en dues línies
     abans que fer sortir res de la franja. */
  .public-boto{height:auto;min-height:34px;max-width:100%;padding:4px 12px;font-size:14px;gap:6px;white-space:normal;line-height:1.15;text-align:left}
  /* «Acceder», a l'hamburguesa: a la barra hi ha el desplegable. */
  .nav[data-public] .nav-in .nav-acc{display:none!important}
  .nav-right{gap:10px}
  .nav-burger{display:inline-flex!important;padding:11px;margin:-4px -8px -4px 0;order:9}
  .nav-right .idioma,.nav-right .nav-login,.nav-right .nav-acc{order:0}
  /* La casella: l'idioma mentre es veu el botó de l'heroi; després, el botó. */
  .nav[data-public] .nav-right .nav-login{display:none!important}
  .nav.passat[data-public="profesorado"] .nav-right .nav-login[data-menu~="profesorado"],
  .nav.passat[data-public="centros"] .nav-right .nav-login[data-menu~="centros"],
  .nav.passat[data-public="redes"] .nav-right .nav-login[data-menu~="redes"]{display:inline-flex!important;height:40px;padding:0 12px;font-size:13px;white-space:normal;line-height:1.15;text-align:center}
  .nav.passat:not([data-public="inici"]) .idioma{display:none}
}
@media (max-width:380px){
  .nav .nav-login{white-space:normal;line-height:1.15;text-align:center;font-size:13px;padding:4px 10px}
  .nav-in{gap:10px}
  .nav-right{gap:8px}
  .public-boto{padding:4px 10px}
  .nav.passat[data-public] .nav-right .nav-login[data-menu][data-i18n]{padding:0 10px}
}

/* Saltar al contingut: només es veu amb el focus. */
.salta{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:8px;font-size:14px}
.salta:focus{top:10px}
/* Les àncores no queden sota la capçalera enganxada. */
html{scroll-padding-top:76px}
@media (max-width:820px){html{scroll-padding-top:66px}}
/* Un anell de focus igual a tot el web. */
:focus-visible{outline:2px solid var(--ultramar);outline-offset:2px;border-radius:4px}

/* Contrast (WCAG 2.2 AA): el gris de text, prou fosc a tots els fons. */
:root{--gris:#66686E}
.pasos .eyebrow{color:var(--brillo)}

/* ---------- El peu: clar i d'una línia ---------- */
footer{background:var(--papel);color:var(--gris);border-top:1px solid var(--linea);padding:20px 0}
footer .wrap{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;font-size:13.5px}
footer .brand{color:var(--tinta);font-size:17px;order:1}
footer .fbaix{display:contents}
footer .fcopy{order:2}
footer .fcontacte{order:3;margin-left:auto}
footer .fbaix a{order:4}
footer a{color:var(--gris);padding:8px 0}
footer a:hover{color:var(--tinta)}
footer a.mail{color:var(--ultramar)}
@media (max-width:820px){
  footer .wrap{display:grid;grid-template-columns:1fr auto;gap:6px 12px}
  footer .fcontacte{margin-left:0}
  footer .brand{justify-self:start;align-items:flex-start}
  footer .fbaix{order:4;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 12px;align-items:center;font-size:13px}
}