/* =====================================================================
   header.css — Estils del header tri-capa Passarel·la
   BRIEF-014 T3 + T3-fixes (29/5/2026) + T3-fixes-v2 (29/5/2026 tarda)

   Capes (de DALT a BAIX visual, ORDRE FORÇAT via flex order):
     1. Top-bar línies     (Kadence header_top)    → order 1
     2. Ticker             (Kadence header_bottom) → order 2  ← visualment 2n
     3. Header main        (Kadence header_main)   → order 3  ← visualment 3r

   NOTA: el DOM nadiu de Kadence és top→main→bottom. Aquí FORCEM l'ordre
   visual amb flex order al wrapper comú (.site-header-upper-inner-wrap)
   per evitar tocar el rendering PHP del tema pare.

   Tokens vénen de variables.css. El color accent canvia per línia.
   ===================================================================== */

/* ====================================================================== */
/*  Ordre visual de les 3 capes (top → ticker → main)                     */
/*  El ticker s'injecta amb add_action('kadence_main_header', ..., 1)     */
/*  com a primer fill del wrapper upper-inner-wrap. Així queda            */
/*  garantitzat entre top_header i main_header, sense dependre de         */
/*  flex order (que no funcionava perquè bottom_header viu fora del       */
/*  wrapper upper-inner-wrap, com hereu de upper-wrap).                   */
/* ====================================================================== */

/* Si Kadence renderitza bottom_header (no hauríem de tenir items ja),
   l'amaguem per evitar duplicat visual. */
.site-bottom-header-wrap {
  display: none;
}

/* ====================================================================== */
/*  Capa 1 — Top-bar línies                                              */
/* ====================================================================== */

.site-top-header-wrap {
  background-color: var(--passa-ink);   /* mateix color que el peu */
  color: #fff;
  padding: 6px 0;
}

/* Centrar el .passa-line-nav horitzontalment */
.site-top-header-wrap .site-header-top-section-center {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* El item html del top.right (switcher d'idioma) — alineat dreta amb margen */
.site-top-header-wrap .site-header-top-section-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 16px;            /* certe margen com demanat */
}
.site-top-header-wrap .site-header-html-item {
  display: inline-flex;
  align-items: center;
}

/* Contenidor englobant — pill quasi quadrat, sense borde, fons gris translúcid */
.passa-line-nav {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  background: rgba(255, 255, 255, .07);
  border: 0;
  border-radius: 2px;          /* ínfim, gairebé quadrat */
}

.passa-line-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--passa-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  padding: 9px 24px;
  border-radius: var(--passa-radius);             /* botons cuadrats */
  transition: color .15s ease, background .15s ease;
  line-height: 1;
}
.passa-line-nav__btn:hover,
.passa-line-nav__btn:focus {
  color: #fff;
  background: rgba(255, 255, 255, .04);
}
.passa-line-nav__btn.is-active {
  color: #fff;
  background: var(--passa-nav-active);   /* morat base, distint del top-bar oscur */
  box-shadow: none;
}

/* ====================================================================== */
/*  Capa 2 — Ticker (injectat via hook kadence_main_header priority 1)    */
/* ====================================================================== */

/* Wrapper injectat per passa_inject_ticker_above_main() */
.passa-ticker-wrap {
  background-color: var(--passa-ticker-bg);
  color: #fff;
  width: 100%;
  height: 38px;                  /* altura exacta demanada */
  display: flex;
  align-items: center;
}

.passa-ticker {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Fade gradient als extrems (text apareix/desapareix suau) */
.passa-ticker-wrap .passa-ticker::before,
.passa-ticker-wrap .passa-ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  pointer-events: none;
  z-index: 2;
}
.passa-ticker-wrap .passa-ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--passa-ticker-bg) 0%, transparent 100%);
}
.passa-ticker-wrap .passa-ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--passa-ticker-bg) 0%, transparent 100%);
}

.passa-ticker__track {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 56px;
  white-space: nowrap;
  width: max-content;
  /* Triplicat al PHP + animation -33.333% = loop perfecte sense gap visible */
  animation: passaTickerScroll 60s linear infinite;
}

.passa-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--passa-font-body);
  font-size: 12px;               /* tamany fuente exacte demanat */
  letter-spacing: .02em;
  color: #fff;
}

/* Quadrat accent (color de línia activa) — sense border-radius */
.passa-ticker__chip {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--passa-accent);
  border-radius: var(--passa-radius);              /* cuadrat */
  flex: 0 0 auto;
}

.passa-ticker__title {
  font-weight: 700;
  color: #fff;
  margin-right: 4px;
}
.passa-ticker__body {
  font-weight: 400;
  color: rgba(255, 255, 255, .92);
}

@keyframes passaTickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }   /* triplicat → un terç */
}

.passa-ticker:hover .passa-ticker__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .passa-ticker__track { animation: none; }
  .passa-ticker { overflow-x: auto; }
}

/* ====================================================================== */
/*  Capa 3 — Header main (logo + nav + switcher + CTA)                    */
/* ====================================================================== */

.site-main-header-wrap {
  background-color: #fff;
  border-bottom: 1px solid var(--passa-line);
  border-top: 0;
  padding: 0;                    /* altura controlada per min-height */
}
/* Altura exacta del header main demanada: 80px.
   NO afegim display:flex aquí — Kadence ja aplica display:flex +
   justify-content:space-between via .site-header-row. Si sobrescric,
   trenco la distribució left/center/right del header. */
.site-main-header-wrap .site-main-header-inner-wrap {
  min-height: 80px;
}

/* ---- Logo Passarel·la custom (P cuadrada + nom + sufix dinàmic) ---- */
.passa-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.passa-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--passa-purple);
  color: #fff;
  font-family: var(--passa-font-heading);
  font-size: 22px;
  font-weight: 700;
  border-radius: var(--passa-radius);             /* cuadrat sense radius */
  flex: 0 0 auto;
}

/* Logo com a imatge (PNG o SVG des de assets/logo.{png,svg})
 *
 * ⚠️ El selector porta DUES classes a posta. WooCommerce declara
 *      .woocommerce img, .woocommerce-page img { height: auto; max-width: 100% }
 * i `.woocommerce img` (0,1,1) guanya a `.passa-logo__img` (0,1,0). Com que el
 * <body> de qualsevol pàgina de botiga porta aquesta classe, el logo sortia a
 * 386×111 en comptes de 138×40 a la botiga, la fitxa de producte, el carret,
 * la caixa i «el meu compte». Amb `.passa-logo .passa-logo__img` (0,2,0) ja
 * guanya, sense necessitat d'!important.
 * Detectat el 25/8 desactivant fulles una a una fins trobar la culpable.
 */
.passa-logo .passa-logo__img {
  display: block;
  height: 40px;                 /* mateixa altura que el quadrat morat */
  width: auto;
  max-width: none;              /* WooCommerce hi posa max-width:100% */
  flex: 0 0 auto;
  object-fit: contain;
}
.passa-logo__img--svg {
  color: var(--passa-purple);   /* currentColor del SVG hereta el morat */
}
.passa-logo__word {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.passa-logo__name {
  font-family: var(--passa-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--passa-purple);
  letter-spacing: -.01em;
}
.passa-logo__line {
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--passa-text-2);
  margin-top: 3px;
}

/* Ocultar branding default de Kadence (per si reapareix) */
.site-main-header-wrap .site-branding:not(.passa-logo) {
  display: none;
}

/* ---- Menú primary ---- */
.passa-primary-navigation ul#primary-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.passa-primary-navigation ul#primary-menu li a {
  font-family: var(--passa-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--passa-text);
  text-decoration: none;
  letter-spacing: .01em;
  padding: 6px 0;
  transition: color .15s ease;
}
.passa-primary-navigation ul#primary-menu li a:hover,
.passa-primary-navigation ul#primary-menu li.current-menu-item > a {
  color: var(--passa-purple);
}

/* ---- Switcher idioma (ara al top-bar, no al main) ---- */
.site-top-header-wrap .lang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 0 14px;
  border-radius: var(--passa-radius);
  background: transparent;
  height: 30px;                   /* altura exacta demanada */
  box-sizing: border-box;
}
.site-top-header-wrap .lang a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  transition: color .15s ease;
}
.site-top-header-wrap .lang a:hover {
  color: #fff;
}
.site-top-header-wrap .lang strong {
  color: #fff;
  font-weight: 700;
}
/* Idioma sense traducció disponible per a aquest contingut: atenuat i sense
   enllaç. Abans redirigia a la home, cosa que desconcertava (semblava un
   enllaç trencat). Veure passa_render_lang_switcher() a functions.php. */
.site-top-header-wrap .lang .lang-na,
.passa-mhdr__topbar .lang .lang-na {
  color: rgba(255, 255, 255, .35);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ---- Botó CTA "Reserva una visita" — altura exacta 42px ---- */
.site-main-header-wrap .header-button {
  font-family: var(--passa-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff !important;
  background: var(--passa-purple-dark) !important;
  border: 0 !important;
  border-radius: var(--passa-radius);
  padding: 0 22px;                        /* altura per height, no padding */
  height: 42px;                           /* altura exacta demanada */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: background .15s ease;
  line-height: 1;
  box-sizing: border-box;
}
.site-main-header-wrap .header-button:hover,
.site-main-header-wrap .header-button:focus {
  background: var(--passa-purple) !important;
  color: #fff !important;
}

/* ---- Separació entre items right del main (només el botó ara) ---- */
.site-header-main-section-right {
  display: flex;
  align-items: center;
}

/* ====================================================================== */
/*  Responsive · Tablet (≤ 1023px)                                        */
/* ====================================================================== */

@media (max-width: 1023px) {

  /* Top-bar: 3 botones más compactos */
  .passa-line-nav__btn {
    font-size: 11px;
    padding: 8px 18px;
    letter-spacing: .12em;
  }
  .site-top-header-wrap .site-header-top-section-right { padding-right: 12px; }
  .site-top-header-wrap .lang { font-size: 10px; padding: 0 12px; height: 28px; }

  /* Ticker: fade más corto */
  .passa-ticker-wrap { height: 36px; }
  .passa-ticker__item { font-size: 12px; gap: 9px; }
  .passa-ticker-wrap .passa-ticker::before,
  .passa-ticker-wrap .passa-ticker::after { width: 60px; }

  /* Header main: altura ligeramente reducida */
  .site-main-header-wrap .site-main-header-inner-wrap { min-height: 72px; }
  .passa-logo__mark { width: 36px; height: 36px; font-size: 20px; }
  .passa-logo__img { height: 36px; }
  .passa-logo__name { font-size: 18px; }
  .passa-logo__line { font-size: 10px; letter-spacing: .15em; }
  .passa-logo { gap: 10px; }

  /* Menú primary: gap reducido */
  .passa-primary-navigation ul#primary-menu { gap: 20px; }
  .passa-primary-navigation ul#primary-menu li a { font-size: 13.5px; }

  /* Botón CTA: más compacto */
  .site-main-header-wrap .header-button {
    font-size: 12.5px;
    padding: 0 16px;
    height: 38px;
  }
}

/* ====================================================================== */
/*  Mobile Header CUSTOM (.passa-mhdr — inyectat via wp_body_open)        */
/*  Per defecte ocult. Es mostra a < 768px.                               */
/*  No usa #mobile-header de Kadence (per evitar conflictes CSS).         */
/* ====================================================================== */

/* Per defecte ocult; només es mostra a < 1024px (tablet + mòbil).
   Sota 1024px el header desktop tri-capa no cap bé (6 items nav + logo +
   switcher + CTA), per això activem el mobile-header (logo + hamburger)
   ja a partir de tablet petita. */
.passa-mhdr { display: none; }

@media (max-width: 1023px) {
  body > #wrapper > #masthead,    /* desktop header de Kadence */
  body > #wrapper > #masthead .site-header-upper-wrap,
  body #mobile-header             /* mobile header Kadence */
  {
    display: none !important;
  }
  .passa-mhdr { display: block; }
}

/* ---- Wrapper general (visible només a < 768px per la regla de dalt) ---- */
.passa-mhdr {
  background: #fff;
  width: 100%;
  position: relative;
  z-index: 50;
  font-family: var(--passa-font-body);
}

/* ---- 1. Top-bar: full-width morat fosc, padding intern ---- */
.passa-mhdr__topbar {
  background: var(--passa-ink);   /* mateix color que el peu */
  width: 100%;
  padding: 0;
  margin: 0;
}
.passa-mhdr__topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  width: 100%;
  box-sizing: border-box;
}
.passa-mhdr__topbar .passa-line-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 2px;
  background: rgba(255, 255, 255, .07);
  border: 0;
  border-radius: 2px;
}
.passa-mhdr__topbar .passa-line-nav__btn {
  font-size: 10px;
  padding: 6px 9px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .8);
}
.passa-mhdr__topbar .passa-line-nav__btn.is-active {
  color: #fff;
  background: var(--passa-nav-active);
}
.passa-mhdr__topbar .lang {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--passa-font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 0 8px;
  border-radius: var(--passa-radius);
  height: 26px;
  box-sizing: border-box;
}
.passa-mhdr__topbar .lang a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.passa-mhdr__topbar .lang strong { color: #fff; font-weight: 700; }

/* ---- 2. Ticker: full-width (utilitza .passa-ticker-wrap ja estilitzat) ---- */
#mobile-header .passa-ticker-wrap {
  width: 100% !important;
  height: 32px;
  margin: 0 !important;
}
#mobile-header .passa-ticker { padding: 5px 0; }
#mobile-header .passa-ticker__item { font-size: 11px; gap: 7px; }

/* ---- 3. Main blanc: logo + hamburger ---- */
.passa-mhdr__main {
  background: #fff;
  border-bottom: 1px solid var(--passa-line);
  width: 100%;
}
.passa-mhdr__main__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Logo dins el mobile main */
.passa-mhdr__main .site-header-item { padding: 0; }
.passa-mhdr__main .passa-logo {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.passa-mhdr__main .passa-logo__img { height: 34px; width: auto; }
.passa-mhdr__main .passa-logo__mark { width: 34px; height: 34px; font-size: 19px; }
.passa-mhdr__main .passa-logo__name {
  font-family: var(--passa-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--passa-purple);
  line-height: 1;
}
.passa-mhdr__main .passa-logo__word {
  display: inline-flex;
  flex-direction: column;
}
.passa-mhdr__main .passa-logo__line {
  font-family: var(--passa-font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--passa-text-2);
  margin-top: 2px;
}

/* Hamburger trigger — heretem l'estil de Kadence (button SVG) */
.passa-mhdr__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.passa-mhdr__toggle .menu-toggle-open,
.passa-mhdr__toggle button[class*="toggle"] {
  background: transparent !important;
  border: 0 !important;
  padding: 8px;
  color: var(--passa-purple);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--passa-radius);
  min-width: 44px;
  min-height: 44px;
}
.passa-mhdr__toggle svg {
  width: 26px;
  height: 26px;
  fill: var(--passa-purple);
}

/* ---- En mòbil molt petit (≤ 480px) ---- */
@media (max-width: 480px) {
  .passa-mhdr__topbar__inner { padding: 6px 8px; gap: 6px; }
  .passa-mhdr__topbar .passa-line-nav__btn {
    font-size: 9.5px;
    padding: 5px 7px;
    letter-spacing: .06em;
  }
  .passa-mhdr__topbar .lang { font-size: 9px; padding: 0 7px; height: 24px; }
  .passa-mhdr__main__inner { height: 58px; padding: 0 12px; }
  .passa-mhdr__main .passa-logo__line { display: none; }
  .passa-mhdr__main .passa-logo__name { font-size: 16px; }
  .passa-mhdr__main .passa-logo__img { height: 30px; }
}

/* ---- Pantalla molt petita (≤ 360px): ocultem el switcher idioma per
       evitar que els 3 botons línies es comprimeixin massa ---- */
@media (max-width: 360px) {
  .passa-mhdr__topbar .lang { display: none; }
}

/* ====================================================================== */
/*  Responsive · Mòbil (≤ 768px)                                          */
/* ====================================================================== */

@media (max-width: 768px) {

  /* Top-bar: 3 botones MUY compactos, switcher al lado en row */
  .site-top-header-wrap { padding: 6px 0; }
  .site-top-header-wrap .site-header-top-section-center {
    padding: 0 8px;
  }
  .passa-line-nav { padding: 2px; gap: 0; }
  .passa-line-nav__btn {
    font-size: 10px;
    padding: 7px 11px;
    letter-spacing: .14em;
  }
  .site-top-header-wrap .site-header-top-section-right { padding-right: 8px; }
  .site-top-header-wrap .lang { font-size: 9.5px; padding: 0 9px; height: 26px; gap: 6px; }

  /* Ticker: aún más fino, fade pequeño */
  .passa-ticker-wrap { height: 32px; }
  .passa-ticker { padding: 5px 0; }
  .passa-ticker__item { font-size: 11px; gap: 7px; }
  .passa-ticker__chip { width: 7px; height: 7px; }
  .passa-ticker-wrap .passa-ticker::before,
  .passa-ticker-wrap .passa-ticker::after { width: 30px; }

  /* Header main: nav DESAPARECE, Kadence mostrará hamburger nativo */
  .site-main-header-wrap .site-main-header-inner-wrap { min-height: 60px; }
  .passa-primary-navigation,
  .site-header-item-main-navigation { display: none !important; }

  /* Logo más pequeño */
  .passa-logo__mark { width: 32px; height: 32px; font-size: 18px; }
  .passa-logo__img { height: 32px; }
  .passa-logo__name { font-size: 17px; }
  .passa-logo__line { font-size: 9.5px; letter-spacing: .14em; margin-top: 2px; }
  .passa-logo { gap: 8px; }

  /* Botó CTA: només l'icona ja no cap. Reduïm encara més. */
  .site-main-header-wrap .header-button {
    font-size: 12px;
    padding: 0 12px;
    height: 36px;
  }

  /* Activem el toggle hamburger del tema Kadence (mobile-trigger) */
  .site-header-main-section-right .mobile-toggle-open-container,
  .site-mobile-header-wrap { display: flex !important; }
}

/* ====================================================================== */
/*  Responsive · Mòbil petit (≤ 480px)                                    */
/* ====================================================================== */

@media (max-width: 480px) {

  /* Top-bar: stack vertical si cal */
  .site-top-header-wrap .site-header-top-section-center { padding: 0 4px; }
  .passa-line-nav__btn {
    font-size: 9.5px;
    padding: 6px 8px;
    letter-spacing: .06em;
  }
  .site-top-header-wrap .lang { font-size: 9px; padding: 0 7px; height: 24px; gap: 4px; }

  /* Logo: ocultar el sufijo SEGURETAT/EDUCACIÓ/SANITAT en mòbil petit
     (no cabe sin trencar línia). Es manté "Passarel·la" net. */
  .passa-logo__line { display: none; }
  .passa-logo__name { font-size: 16px; }

  /* CTA: text més curt o reemplaçar per icona (queda al Customizer Kadence)
     Per ara reduïm encara més padding. */
  .site-main-header-wrap .header-button {
    font-size: 11.5px;
    padding: 0 10px;
    height: 34px;
  }
}

/* ====================================================================== */
/*  Mobile Header CUSTOM .passa-mhdr — inyectat via wp_body_open          */
/*  Visibilitat controlada més amunt en la regla principal.               */
/* ====================================================================== */

/* ---- Fila 1: TOP-BAR (línies + switcher) ---- */
.passa-mhdr__topbar {
  background: var(--passa-ink);   /* mateix color que el peu */
  width: 100%;
}
.passa-mhdr__topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  box-sizing: border-box;
}
.passa-mhdr__topbar .passa-line-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  padding: 2px;
  background: rgba(255, 255, 255, .07);
  border-radius: 2px;
}
.passa-mhdr__topbar .passa-line-nav__btn {
  font-size: 10px;
  padding: 6px 9px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .8);
  flex: 1 1 0;
  text-align: center;
}
.passa-mhdr__topbar .passa-line-nav__btn.is-active {
  color: #fff;
  background: var(--passa-nav-active);
}
.passa-mhdr__topbar .lang {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 0 8px;
  height: 26px;
  box-sizing: border-box;
}
.passa-mhdr__topbar .lang a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.passa-mhdr__topbar .lang strong { color: #fff; font-weight: 700; }

/* ---- Fila 2: TICKER ---- */
.passa-mhdr__ticker {
  background: var(--passa-ticker-bg);
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.passa-mhdr__ticker .passa-ticker {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.passa-mhdr__ticker .passa-ticker__item { font-size: 11px; gap: 7px; }
.passa-mhdr__ticker .passa-ticker::before,
.passa-mhdr__ticker .passa-ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 30px;
  pointer-events: none;
  z-index: 2;
}
.passa-mhdr__ticker .passa-ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--passa-ticker-bg), transparent);
}
.passa-mhdr__ticker .passa-ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--passa-ticker-bg), transparent);
}

/* ---- Fila 3: MAIN BLANC (logo + hamburger) ---- */
.passa-mhdr__main {
  background: #fff;
  border-bottom: 1px solid var(--passa-line);
  width: 100%;
}
.passa-mhdr__main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
  padding: 0 16px;
  box-sizing: border-box;
}

.passa-mhdr__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}
.passa-mhdr__logo .passa-logo__img { height: 34px; width: auto; }
.passa-mhdr__logo .passa-logo__word {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.passa-mhdr__logo .passa-logo__name {
  font-family: var(--passa-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--passa-purple);
  letter-spacing: -.01em;
}
.passa-mhdr__logo .passa-logo__line {
  font-family: var(--passa-font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--passa-text-2);
  margin-top: 3px;
  display: block;
}

/* Hamburger trigger */
.passa-mhdr__toggle {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--passa-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.passa-mhdr__toggle:hover,
.passa-mhdr__toggle:focus { color: var(--passa-purple-dark); }
.passa-mhdr__toggle svg { display: block; }

/* ---- DRAWER overlay menú ---- */
.passa-mhdr__drawer {
  position: fixed;
  inset: 0;                          /* top:0 right:0 bottom:0 left:0 */
  z-index: 9998;
  pointer-events: none;
  visibility: hidden;
  /* El drawer és el contenidor de TOT (backdrop + panel). Per defecte
     oculto; activem amb .is-open. */
}
.passa-mhdr__drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop: és un <button> real per ser clickable i accessible amb teclat */
.passa-mhdr__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 30, .55);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .28s ease;
  /* Important: ocupa tota la pantalla i el panel queda per damunt */
  z-index: 1;
}
.passa-mhdr__drawer.is-open .passa-mhdr__backdrop {
  opacity: 1;
}

/* PANEL: el contenidor lateral amb el menú. Per damunt del backdrop. */
.passa-mhdr__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 380px);
  background: #fff;
  box-shadow: -8px 0 32px rgba(20, 12, 30, .18);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22, .68, .26, 1);
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.passa-mhdr__drawer.is-open .passa-mhdr__panel {
  transform: translateX(0);
}

/* HEAD del panel — títol "Passarel·la" + botó tancar */
.passa-mhdr__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--passa-line);
  background: #fff;
  flex: 0 0 auto;
}
.passa-mhdr__panel-title {
  display: inline-flex;
  align-items: center;
  font-family: var(--passa-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--passa-purple);
  letter-spacing: -.01em;
}
.passa-mhdr__close {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--passa-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.passa-mhdr__close:hover,
.passa-mhdr__close:focus {
  background: var(--passa-bg-soft);
  color: var(--passa-purple);
}

/* NAV del panel — menú principal */
.passa-mhdr__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 0;
}
.passa-mhdr__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.passa-mhdr__menu li {
  margin: 0;
}
.passa-mhdr__menu li a {
  display: flex;
  align-items: center;
  font-family: var(--passa-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--passa-ink);
  text-decoration: none;
  padding: 14px 24px;
  transition: background .15s ease, color .15s ease;
}
.passa-mhdr__menu li a:hover,
.passa-mhdr__menu li a:focus,
.passa-mhdr__menu li.current-menu-item > a {
  background: var(--passa-bg-soft);
  color: var(--passa-purple);
}

/* ---- Submenú del calaix (les 8 categories de «Cursos») ----

   2/9/2026. Fins avui el calaix es pintava amb `depth => 1` i els fills no
   s'escrivien al HTML: «Cursos» era un enllaç solt i no hi havia manera
   d'arribar a cap categoria des del mòbil.

   Van SEMPRE desplegades, sense acordió. Motius:
     · No calen ni JS ni ARIA d'estat obert/tancat: una cosa menys que pot
       fallar i que caldria mantenir.
     · Són el producte. Amagar-les darrere d'un toc les fa invisibles per a
       qui no sap que hi són.
     · Al calaix hi ha espai de sobra: 5 + 8 entrades i encara hi cap.

   La jerarquia es llegeix pel sagnat i la mida, no per un desplegable.
   ---- */
.passa-mhdr__menu .sub-menu {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  /* Filet a l'esquerra: lliga visualment les 8 amb el seu pare. */
  border-left: 2px solid var(--passa-line);
  margin-left: 24px;
}
.passa-mhdr__menu .sub-menu li a {
  padding: 11px 24px 11px 16px;
  font-size: 15px;
  font-weight: 400;
  color: var(--passa-text);
}
/* El pare d'un submenú no és un destí més: és una capçalera de grup. */
.passa-mhdr__menu li.menu-item-has-children > a {
  font-weight: 600;
  padding-bottom: 10px;
}

/* FOOT del panel — CTA Reserva una visita */
.passa-mhdr__panel-foot {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--passa-line);
  background: #fff;
  flex: 0 0 auto;
}
.passa-mhdr__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--passa-purple-dark);
  color: #fff !important;
  font-family: var(--passa-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 14px 18px;
  border-radius: var(--passa-radius);
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  transition: background .15s ease;
}
.passa-mhdr__cta:hover { background: var(--passa-purple); }

/* Bloquejar scroll del body quan el drawer és obert */
body.passa-mhdr-open { overflow: hidden; }

/* ---- Mòbil petit (≤ 480px) ---- */
@media (max-width: 480px) {
  .passa-mhdr__topbar-inner { padding: 6px 8px; gap: 6px; }
  .passa-mhdr__topbar .passa-line-nav__btn {
    font-size: 9.5px;
    padding: 5px 6px;
    letter-spacing: .06em;
  }
  .passa-mhdr__topbar .lang { font-size: 9px; padding: 0 6px; height: 24px; }
  .passa-mhdr__main-inner { height: 58px; padding: 0 12px; }
  .passa-mhdr__logo .passa-logo__line { display: none; }
  .passa-mhdr__logo .passa-logo__name { font-size: 16px; }
  .passa-mhdr__logo .passa-logo__img { height: 30px; }
}

/* ---- Pantalla petita (≤ 360px): switcher idioma s'amaga per fer espai ---- */
@media (max-width: 360px) {
  .passa-mhdr__topbar .lang { display: none; }
}

/* ======================================================================
   Ticker + capçalera enganxada (19/8/2026)

   El ticker s'injecta amb `kadence_main_header` i per tant queda DINS del
   contenidor que Kadence fixa (.site-header-upper-inner-wrap). En fer scroll
   viatjava amb la capçalera i menjava pantalla.

   És una banda informativa, no navegació: quan la capçalera es fixa, es
   replega suaument i deixa només la barra de línies + el menú. A dalt de tot
   de la pàgina (item-at-start) es veu sencer, com sempre.
   ====================================================================== */
.passa-ticker-wrap {
  max-height: 20vh;
  overflow: hidden;
  transition: max-height .28s ease, opacity .2s ease;
}
.kadence-sticky-header.item-is-fixed:not(.item-at-start) .passa-ticker-wrap {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .passa-ticker-wrap { transition: none; }
}

/* ======================================================================
   Capçalera mòbil enganxada (19/8/2026)

   A <1024px NO s'usa la capçalera de Kadence (queda amagada més amunt):
   es fa servir .passa-mhdr, pròpia del child theme. Per això les opcions
   `mobile_header_sticky` del tema no hi tenen cap efecte i cal fixar-la
   aquí.

   Igual que a escriptori: es fixen la barra de línies i la principal, i el
   ticker es replega en fer scroll (classe `is-stuck`, la posa mobile-header.js).
   ====================================================================== */
@media (max-width: 1023px) {
  .passa-mhdr {
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .passa-mhdr__ticker {
    max-height: 20vh;
    overflow: hidden;
    transition: max-height .28s ease, opacity .2s ease;
  }
  .passa-mhdr.is-stuck .passa-mhdr__ticker {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
  /* Ombra suau només quan està enganxada, per separar-la del contingut */
  .passa-mhdr.is-stuck { box-shadow: 0 4px 14px rgba(23, 12, 34, .10); }
}
@media (prefers-reduced-motion: reduce) {
  .passa-mhdr__ticker { transition: none; }
}

/* ======================================================================
   CTA "Reserva una visita" — unificat amb el CTA del hero (19/8/2026)

   Tots dos botons (el d'escriptori .header-button i el del panell mòbil
   .passa-mhdr__cta) tenien els colors INVERTITS respecte al .btn-primary
   del hero: arrencaven amb el morat fosc i s'aclarien en passar-hi per
   sobre, cosa que els feia semblar "premuts".

   Ara segueixen el mateix patró que el hero:
     repòs  → morat de marca
     hover  → morat fosc + aixecat de 2px + ombra
   ====================================================================== */
.site-main-header-wrap .header-button,
.passa-mhdr__cta {
  background: var(--passa-purple) !important;
  color: #fff !important;
  border-radius: var(--passa-radius);
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.site-main-header-wrap .header-button:hover,
.site-main-header-wrap .header-button:focus,
.passa-mhdr__cta:hover,
.passa-mhdr__cta:focus {
  background: var(--passa-purple-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 27, 105, .18);
}
.site-main-header-wrap .header-button:focus-visible,
.passa-mhdr__cta:focus-visible {
  outline: 2px solid var(--passa-accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .site-main-header-wrap .header-button:hover,
  .passa-mhdr__cta:hover { transform: none; }
}

/* ======================================================================
   Selector d'idioma — desplegable (19/8/2026)

   Substitueix el "CA · ES" pla. Es manté el comportament acordat a
   D-2026-08-18-006: si el contingut no existeix en l'altre idioma, el codi
   surt atenuat i sense enllaç (no es teletransporta l'usuari a la home).
   Va sobre la barra fosca --passa-ink.
   ====================================================================== */
.passa-lang { position: relative; display: inline-flex; align-items: center; }

.passa-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--passa-radius);
  color: #fff;
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  /* Mateixa alçada que el selector antic perquè la barra no creixi */
  height: 26px;
  padding: 0 10px;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
.passa-lang__btn:hover { border-color: rgba(255, 255, 255, .55); }
.passa-lang__btn:focus-visible { outline: 2px solid var(--passa-accent); outline-offset: 2px; }
.passa-lang__caret { width: 9px; height: 6px; transition: transform .18s ease; }
.passa-lang__btn[aria-expanded="true"] .passa-lang__caret { transform: rotate(180deg); }
.passa-lang__btn[aria-expanded="true"] { border-color: #fff; }

.passa-lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 120;
  margin: 0;
  padding: 4px;
  list-style: none;
  min-width: 100%;
  background: #fff;
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
  box-shadow: 0 10px 26px rgba(23, 12, 34, .18);
}
.passa-lang__menu[hidden] { display: none; }
.passa-lang__menu li { margin: 0; }
.passa-lang__menu a,
.passa-lang__menu .lang-na {
  display: block;
  padding: 6px 12px;
  border-radius: var(--passa-radius);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--passa-ink);
  white-space: nowrap;
}
.passa-lang__menu a:hover,
.passa-lang__menu a:focus-visible { background: var(--passa-purple-soft); color: #fff; outline: none; }
/* Idioma sense traducció: es veu, però no convida a clicar */
.passa-lang__menu .lang-na { color: var(--passa-text-2, #6b6b7b); text-decoration: line-through; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .passa-lang__caret { transition: none; }
}

/* El selector d'idioma segueix les mateixes alçades que abans a cada mida */
@media (max-width: 1200px) { .passa-lang__btn { height: 26px; padding: 0 8px; font-size: 10px; } }
@media (max-width: 1023px) { .passa-lang__btn { height: 24px; padding: 0 7px; font-size: 9.5px; } }

/* Selector d'idioma: cap estat pot introduir color de marca. Fons sempre
   blanc translúcid, com la resta d'elements de la barra fosca. */
.passa-lang__btn,
.passa-lang__btn:hover,
.passa-lang__btn:focus,
.passa-lang__btn:active,
.passa-lang__btn[aria-expanded="true"] {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: #fff;
}
.passa-lang__btn:active { background-color: transparent; }


/* ======================================================================
   Alçada de la barra de sectors (19/8/2026)

   Mesurat amb DevTools: .site-top-header-wrap feia 73,19px (padding 6+6,
   o sigui 61px de contingut) quan el nostre contingut real —el grup de
   botons— només en fa 38. Els ~23px sobrants venien dels contenidors de
   fila de Kadence (.site-header-row / .site-header-section), no dels
   nostres elements: per això tocar els botons no servia de res.

   Es fixa l'alçada A LA FILA i es centra el contingut. Els botons queden
   com estaven.
   Resultat: 6 + 36 + 6 = 48px (abans 73px).
   ====================================================================== */
.site-top-header-wrap .site-top-header-inner-wrap,
.site-top-header-wrap .site-header-row {
  min-height: 0;
  height: 36px;
  align-items: center;
}
.site-top-header-wrap .site-header-section,
.site-top-header-wrap .site-header-item {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}

/* ======================================================================
   Enllaços del menú principal: subratllat animat (19/8/2026)

   Rèplica de la maqueta (nav.main a::after): una línia de 2px del color
   accent que creix des de l'esquerra en passar-hi per sobre, més el canvi
   de color del text.

   El color surt de --passa-accent, que canvia segons la línia activa
   (mostassa a Seguretat, lila a Educació, verd a Sanitat): així el
   subratllat acompanya la secció on ets.
   ====================================================================== */
.passa-primary-navigation ul#primary-menu li a {
  position: relative;
}
.passa-primary-navigation ul#primary-menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--passa-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.passa-primary-navigation ul#primary-menu li a:hover::after,
.passa-primary-navigation ul#primary-menu li a:focus-visible::after,
.passa-primary-navigation ul#primary-menu li.current-menu-item > a::after {
  transform: scaleX(1);
}
/* La pàgina on ets ja té la línia posada: no s'ha d'animar en carregar */
.passa-primary-navigation ul#primary-menu li.current-menu-item > a::after {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .passa-primary-navigation ul#primary-menu li a::after { transition: none; }
}

/* =====================================================================
   Submenú del menú principal

   Kadence el pintava amb el seu gris fosc per defecte (#1A202C) i a sobre
   heretava el color de text nostre (#4A4566): contrast 1,5:1, il·legible.
   I els enllaços no tenien cap padding horitzontal, així que el text tocava
   la vora.

   Ara és una targeta blanca, com la resta de superfícies del lloc.
   ===================================================================== */

/* ⚠️ Cal l'id: la regla nostra de més amunt (`ul#primary-menu li a`) porta un
   selector d'id i guanya a qualsevol combinació de classes. L'id `primary-menu`
   el posa el tema i és el mateix en català i castellà (comprovat). */
.passa-primary-navigation ul#primary-menu ul.sub-menu {
  min-width: 232px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
  box-shadow: 0 14px 34px rgba(76, 27, 105, .13);
  /* Separació visual perquè el submenú llegeixi com una targeta que flota i no
     com una continuació del botó. ⚠️ Deixa un forat de 6px que el ratolí ha de
     travessar; el pont de sota el fa transitable. Si es canvia aquest valor,
     s'ha de canviar també l'alçada del pont. */
  margin-top: 6px;
}

/* ---- El pont dels 6px ----

   2/9/2026. El submenú es tancava abans que el ratolí hi arribés: el <li>
   acaba a y=143 i el submenú comença a y=149, o sigui que entre els dos hi ha
   una franja de 6px on el cursor no és a sobre de cap dels dos. En sortir del
   <li> el `:hover` es perdia i el menú desapareixia a mig camí.

   Mesurat abans d'arreglar-ho: baixant des del botó, es tancava a y=144 —
   un píxel després de sortir del <li>, i 33px abans del primer enllaç.

   La solució és una franja transparent que tapa exactament el forat, de manera
   que el <li> segueix «sota el ratolí» mentre es travessa. Es fa amb ::after
   del <li>, que estava lliure (el subratllat del menú penja de l'<a>, no del
   <li> — comprovat al navegador abans de tocar-ho).

   NO s'ha tret el margin-top: el forat és volgut i el submenú ha de flotar.
   Tapar-lo amb padding tampoc valdria: el submenú té fons blanc i vora, i el
   farciment quedaria pintat, o sigui que el forat es veuria ple.
   ---- */
.passa-primary-navigation ul#primary-menu > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 6px;          /* exactament el margin-top del submenú */
  /* Sense fons: només ha de rebre el ratolí, no veure's. */
}

.passa-primary-navigation ul#primary-menu ul.sub-menu li { margin: 0; }

.passa-primary-navigation ul#primary-menu ul.sub-menu li a {
  display: block;
  padding: 9px 14px;
  border-radius: calc(var(--passa-radius) - 1px);
  font-family: var(--passa-font-body);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--passa-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.passa-primary-navigation ul#primary-menu ul.sub-menu li a:hover,
.passa-primary-navigation ul#primary-menu ul.sub-menu li a:focus-visible,
.passa-primary-navigation ul#primary-menu ul.sub-menu .current-menu-item > a {
  background: var(--passa-bg-soft);
  color: var(--passa-purple);
}

/* El pare es queda marcat mentre el submenú és obert, perquè es vegi d'on surt. */
.passa-primary-navigation li.menu-item-has-children:hover > a { color: var(--passa-purple); }

/* Sense fletxa el desplegable no s'endevina. */
.passa-primary-navigation li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.passa-primary-navigation li.menu-item-has-children:hover > a::after {
  transform: translateY(1px) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .passa-primary-navigation ul#primary-menu ul.sub-menu li a,
  .passa-primary-navigation li.menu-item-has-children > a::after { transition: none; }
}

/* ⚠️ El WordPress passa el contingut de l'element HTML per wpautop i
   n'embolica els codis curts amb <p>. Amb un <p> de bloc i el selector
   d'idioma al costat, els dos quedaven APILATS: l'element creixia a 77px
   i, com que la barra els centra, l'enllaç sortia per damunt (top -23px).
   Amb flex tornen a la mateixa línia. */
.header-html .header-html-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.header-html .header-html-inner > p {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* ---- Accés al compte a la barra de dalt (8/9/2026) -------------------
   El Kadence no té element de «compte» per a la capçalera, així que va
   com a codi curt dins l'element HTML, al costat del selector d'idioma.
   Els colors els hereta de la barra: si l'Andrea la canvia al
   Personalitzador, això la segueix. */
/* ⚠️ Kadence subratlla els enllaços de l'element HTML amb
   `.inner-link-style-normal a:not(.button)`. Cal el mateix prefix per
   guanyar-li; si no, l'enllaç surt subratllat de manera permanent. */
.header-html.inner-link-style-normal .passa-acces,
.passa-acces {
  display: inline-flex;
  align-items: center;
  /* Només icona: escrit feia nosa a la barra. El nom segueix al HTML per
     als lectors de pantalla i al `title` per al ratolí. */
  gap: 0;
  margin-right: 12px;
  padding: 6px;
  color: inherit;
  text-decoration: none;
  opacity: .92;
}

/* El text, amagat a la vista però NO per a l'accessibilitat: res de
   display:none, que el trauria de l'arbre i l'enllaç es quedaria sense nom. */
.passa-acces span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.header-html.inner-link-style-normal .passa-acces:hover,
.header-html.inner-link-style-normal .passa-acces:focus,
.passa-acces:hover,
.passa-acces:focus {
  opacity: 1;
  color: inherit;
}

.passa-acces__ic { flex: 0 0 17px; width: 17px; height: 17px; }

/* Ja identificat: es marca amb la mostassa de marca, que sobre el morat
   fosc de la barra dona 5,6:1. */
/* Mateix prefix que la regla base: si no, el `color: inherit` d'aquella
   li guanyava i l'estat identificat perdia la mostassa. */
.header-html.inner-link-style-normal .passa-acces--dins,
.passa-acces--dins { color: var(--passa-mustard, #e6a528); opacity: 1; }

@media (max-width: 767px) {
  .passa-acces { margin-right: 10px; }
}

/* Accés al compte al peu del calaix del mòbil, just sobre el botó de
   reserva. Secundari respecte del CTA: text amb vora, no botó ple. */
.passa-mhdr__compte {
  display: block;
  margin-bottom: 10px;
  padding: 11px 16px;
  border: 1px solid var(--passa-line, #EDEAF3);
  border-radius: var(--passa-radius, 2px);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--passa-purple, #4c1b69);
  text-decoration: none;
}

.passa-mhdr__compte:hover,
.passa-mhdr__compte:focus {
  border-color: var(--passa-purple, #4c1b69);
  background: var(--passa-purple-bg, #EFE8F3);
  color: var(--passa-purple-dark, #2a0e3a);
}

/* 29/9: amb les línies apagades (inc/linies-actives.php) la barra mòbil només porta
   el selector d'idioma. Sense aquesta regla quedava a l'esquerra. */
.passa-mhdr__topbar-inner { display: flex; align-items: center; justify-content: flex-end; }
.passa-mhdr__topbar-inner > .passa-line-nav { margin-right: auto; }

/* ======================================================================
   29/9: amb Educació i Sanitat apagades, la franja fosca de dalt quedava
   buida. L'accés d'alumnes i l'idioma pugen a la fila del menú (Kadence →
   Header → fila Main, a la dreta del botó). Allà el fons és blanc: tot el
   que abans era blanc sobre fosc passa a morat sobre blanc.
   Per tornar enrere: moure l'element HTML a la fila Top al Personalitzador.
   ====================================================================== */
.site-main-header-wrap .site-header-main-section-right { gap: 18px; }
.site-main-header-wrap .site-header-html-item { display: inline-flex; align-items: center; }
.site-main-header-wrap .header-html.inner-link-style-normal .passa-acces,
.site-main-header-wrap .passa-acces { color: var(--passa-purple); opacity: 1; margin-right: 10px; }
.site-main-header-wrap .header-html.inner-link-style-normal .passa-acces:hover,
.site-main-header-wrap .passa-acces:hover { color: var(--passa-purple-dark); }
/* Identificat: la mostassa sobre blanc no es llegeix (2,1:1); va de fons, amb la icona fosca (8:1). */
.site-main-header-wrap .header-html.inner-link-style-normal .passa-acces--dins,
.site-main-header-wrap .passa-acces--dins { color: var(--passa-purple-dark); background: var(--passa-mustard); border-radius: 50%; }
.site-main-header-wrap .passa-lang__btn,
.site-main-header-wrap .passa-lang__btn:hover,
.site-main-header-wrap .passa-lang__btn:focus,
.site-main-header-wrap .passa-lang__btn:active,
.site-main-header-wrap .passa-lang__btn[aria-expanded="true"] { color: var(--passa-ink); border-color: var(--passa-line); height: 34px; padding: 0 12px; font-size: 12px; }
.site-main-header-wrap .passa-lang__btn:hover,
.site-main-header-wrap .passa-lang__btn[aria-expanded="true"] { border-color: var(--passa-purple); }
/* A 1024 el botó es partia en dues línies en fer lloc a l'accés i l'idioma. */
.site-main-header-wrap .site-header-main-section-right .button,
.site-main-header-wrap .header-button { white-space: nowrap; }
@media (max-width: 1200px) {
  .site-main-header-wrap .site-header-main-section-right { gap: 10px; }
  .site-main-header-wrap .passa-acces { margin-right: 4px; }
}
/* 29/9 (Eric): ordre de dreta a esquerra = accés d'alumnes a l'extrem, idioma, i el botó
   de reserva (l'acció principal) el primer. main_right = button + html, i dins l'html
   primer l'idioma i després l'accés. */
.site-main-header-wrap .header-html.inner-link-style-normal .passa-acces,
.site-main-header-wrap .passa-acces { margin-right: 0; margin-left: 12px; }
@media (max-width: 1200px) { .site-main-header-wrap .passa-acces { margin-left: 6px; } }

/* ======================================================================
   1/10 (Eric): mòbil igual que escriptori. Sense franja fosca, l'idioma i
   l'accés d'alumnes van a la fila blanca: logo · idioma · alumnes · menú.
   Morat sobre blanc; identificat = fons mostassa + icona fosca (8:1).
   ====================================================================== */
.passa-mhdr__eines { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.passa-mhdr__eines .passa-lang__btn,
.passa-mhdr__eines .passa-lang__btn:hover,
.passa-mhdr__eines .passa-lang__btn:focus,
.passa-mhdr__eines .passa-lang__btn:active,
.passa-mhdr__eines .passa-lang__btn[aria-expanded="true"] {
  color: var(--passa-ink); border-color: var(--passa-line); height: 34px; padding: 0 10px; font-size: 12px;
}
.passa-mhdr__eines .passa-lang__btn[aria-expanded="true"] { border-color: var(--passa-purple); }
/* Àrea de toc de 44px encara que la icona en faci 20. */
.passa-mhdr__eines .passa-acces {
  width: 44px; height: 44px; margin: 0; padding: 0; justify-content: center;
  color: var(--passa-purple); opacity: 1; border-radius: 50%;
}
.passa-mhdr__eines .passa-acces .passa-acces__ic { width: 20px; height: 20px; flex-basis: 20px; }
.passa-mhdr__eines .passa-acces--dins { color: var(--passa-purple-dark); background: var(--passa-mustard); width: 36px; height: 36px; margin: 0 4px; }
@media (max-width: 360px) {
  .passa-mhdr__main-inner { gap: 6px; }
  .passa-mhdr__eines .passa-lang__btn { padding: 0 7px; }
}


/* 1/10 (Eric): espais del mòbil iguals a banda i banda de la icona d'alumnes.
   Abans: 4px fins a l'idioma i ~30px fins al menú. La caixa de toc segueix fent 40px. */
.passa-mhdr__eines { gap: 6px; margin-right: -12px; }
.passa-mhdr__eines .passa-acces { width: 40px; height: 40px; }
.passa-mhdr__eines .passa-acces--dins { width: 36px; height: 36px; margin: 0 2px; }

/* 1/10 (Eric): entre 1024 i 1150 px, amb la sessió iniciada, el menú es partia en
   dues files («Contacte · Blog» a sota). Menys espai entre enllaços i mai en dues files. */
@media (min-width: 1024px) and (max-width: 1150px) {
  .passa-primary-navigation ul#primary-menu { gap: 14px; flex-wrap: nowrap; }
  .passa-primary-navigation ul#primary-menu li a { white-space: nowrap; }
}
@media (max-width: 360px) { .passa-mhdr__eines { margin-right: -6px; } }

/* 1/10: cistella al mòbil, al costat de l'accés d'alumnes. Número en mostassa amb text fosc (8:1). */
.passa-mhdr__cistella { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--passa-purple); text-decoration: none; }
.passa-mhdr__cistella-n { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--passa-mustard); color: var(--passa-purple-dark); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-sizing: border-box; }
.passa-mhdr__cistella-n.is-buida { display: none; }
@media (max-width: 380px) { .passa-mhdr__logo .passa-logo__name { font-size: 14px; } .passa-mhdr__eines { gap: 2px; } }
/* Cistella buida: sense la bombolla del «0» (Kadence la pinta sempre). */
.header-cart-total.header-cart-is-empty-true { display: none; }
/* Mòbil: amb idioma, alumnes, cistella i menú no hi cap el nom al costat del logo. Per sota de
   430 px queda només el símbol; el nom sencer torna a partir d'aquí. */
@media (max-width: 430px) { .passa-mhdr__logo .passa-logo__word { display: none; } }

/* 2/10 · Amb «App» al menú i la sessió iniciada (surt «Campus Virtual») són 7 enllaços:
   entre 1200 i 1340 px el «Blog» baixava a una segona línia. Menys separació només aquí. */
@media (min-width: 1151px) and (max-width: 1340px) {
  .passa-primary-navigation ul#primary-menu { gap: 22px; }
}

/* 5/10 · Des que «Cursos Online» surt per a tothom, entre 1024 i 1100 px la capçalera no hi cabia (l idioma, el compte
   i la cistella sortien de la pantalla). Només en aquest tram: menys espai, lletra del menú un punt més petita i botó més estret. */
@media (min-width: 1024px) and (max-width: 1100px) {
  .passa-primary-navigation ul#primary-menu { gap: 10px; }
  .passa-primary-navigation ul#primary-menu li a { font-size: 13px; }
  .site-main-header-wrap .header-button { padding-left: 14px !important; padding-right: 14px !important; }
}

/* 5/10 (Eric): a «Cursos» la línia del hover es quedava a mig camí. No era el submenú: a l enllaç que té submenú,
   una regla de Kadence fixa width:7px al ::after (el pensa per a la fletxa), i el nostre subratllat penja del mateix ::after. */
.passa-primary-navigation ul#primary-menu > li > a::after { width: auto; }