/* =====================================================================
   footer-extras.css — Estils del footer NATIU Kadence + sister sites
   BRIEF-015 T3 (30/5/2026)

   Objectiu: NO substituir el footer Kadence (com feia footer.css de B-014),
   sinó només afegir estilització lleugera sobre l'estructura nativa i estilar
   el shortcode [passa_sister_sites] que viu en el widget Custom HTML del
   Middle Row.

   Filosofia:
     - El layout (cols, gap, responsive) el gestiona Kadence.
     - Aquest fitxer només toca tipografia, colors d'enllaços específics i
       el bloc sister sites.
     - Si Andrea desactiva alguna fila des de Customizer, NO trenca res.
   ===================================================================== */

/* ===== Tipografia uniforme dels widgets de footer ===== */
#colophon .footer-widget-area,
#colophon .widget {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
}
#colophon .widget-title,
#colophon h2.widget-title,
#colophon h3.widget-title {
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: 0.02em;
    text-transform: none;
}
#colophon a {
    text-decoration: none;
}

/* ===== Brand widget (footer1) ===== */
.passa-footer-brand__desc {
    margin: 0 0 14px;
    max-width: 280px;
}
.passa-footer-brand__contact {
    font-size: 12px;
    opacity: 0.75;
    margin: 0;
}
.passa-footer-brand__contact a {
    color: inherit;
}
.passa-footer-brand__contact a:hover {
    color: var(--passa-accent, #e6a528);
}

/* ===== Nav menu widgets (Cursos / Acadèmia / Alumnat) ===== */
#colophon .widget_nav_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#colophon .widget_nav_menu li {
    margin: 0 0 8px;
}
#colophon .widget_nav_menu a {
    font-size: 13.5px;
}

/* ===== Sister sites (shortcode dins widget Custom HTML, footer5) ===== */
.passa-sister {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 8px 0;
    /* B-015 post-cierre: sense bordes (Eric demana quitar les 2 hr). */
}
.passa-sister__intro {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    flex: 1 1 280px;
}
.passa-sister__intro strong {
    color: #fff;
    font-weight: 600;
}
.passa-sister__links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.passa-sister__chip {
    padding: 8px 14px;
    border-radius: 2px;
    font-size: 13px;
    color: #fff !important;
    background: var(--passa-purple, #4c1b69);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.passa-sister__chip:hover {
    background: var(--passa-accent, #e6a528) !important;
    color: var(--passa-purple-dark, #2a0e3a) !important;
}

/* ===== Bottom Row (copyright + legals) ===== */
#colophon .site-bottom-footer-wrap {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}
#colophon .footer-html {
    font-size: 13px;
}
#colophon .footer-navigation ul {
    list-style: none;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
}
#colophon .footer-navigation a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

/* ===== Responsive · móvil ===== */
@media (max-width: 600px) {
    .passa-sister {
        flex-direction: column;
        align-items: flex-start;
    }
    #colophon .footer-navigation ul {
        justify-content: flex-start;
    }
}

/* ---- Alineació de la banda de germanes ----
   `.passa-sister__intro` no declarava alineació i heretava el `text-align:center`
   de la columna del peu. Resultat: la frase surava al mig de la seva caixa
   (començava a 307px) mentre tota la resta del peu comença a 84px. Es veia
   descentrada tot i que la banda sí que ho estava. */
.passa-sister,
.passa-sister__intro { text-align: left; }

/* ---- Xarxes socials ----
   Només Instagram i WhatsApp: són les úniques que tenen (comprovat al clon). */
.passa-footer-brand__social {
  display: flex;
  gap: 10px;
  margin: 18px 0 0 !important;
}
.passa-social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .78);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.passa-social .passa-icona { display: block; line-height: 0; }
.passa-social svg { width: 19px; height: 19px; display: block; }

.passa-social:hover,
.passa-social:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--passa-purple);
}

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

/* ---- Barra inferior: llegals i copyright ----
   Amb quatre enllaços legals i el copyright a l'esquerra, «Contacte» queia a
   una segona línia i quedava desmanegat. Es baixa la separació i es permet
   que la barra respiri. */
.site-footer .footer-html,
.site-footer .site-info { font-size: 13px; }
.site-footer #footer-navigation ul.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  justify-content: flex-end;
}
.site-footer #footer-navigation ul.menu a { font-size: 13px; white-space: nowrap; }
@media (max-width: 900px) {
  .site-footer #footer-navigation ul.menu { justify-content: flex-start; }
}

/* La banda de germanes quedava a 122px de les columnes i semblava despenjada.
   ⚠️ NO s'hi posa cap filet: l'Eric va demanar expressament treure les dues
   <hr> que hi havia (v. nota de B-015 més amunt). Només s'ajusta l'espai. */
/* Primer ho vaig apretar massa: de 122px vaig baixar a 26 i quedava ofegat.
   Amb -4px queden uns 56, que és el que respira bé. */
.passa-sister { margin-top: -4px; }
@media (max-width: 900px) { .passa-sister { margin-top: 0; } }

/* ⚠️ `.passa-sister__intro` porta `flex: 1 1 280px`, pensat per a una fila.
   En mòbil la banda passa a columna i llavors aquest 280px deixa de ser
   AMPLADA i passa a ser ALÇADA: quedava un forat de 280px entre la frase i
   els botons. En columna, la base ha de ser automàtica. */
@media (max-width: 900px) {
  .passa-sister { flex-direction: column; align-items: flex-start; }
  .passa-sister__intro { flex: 0 1 auto; }
}

/* Els botons anaven a l'extrem dret per culpa del `space-between`, i amb una
   frase curta quedaven despenjats a l'altra punta. Van just després del text:
   es llegeix com una frase amb les seves dues sortides. */
.passa-sister {
  justify-content: flex-start;
  gap: 14px 26px;
}
.passa-sister__intro { flex: 0 1 auto; }

/* ---- Barra inferior desalineada ----
   Les dues meitats començaven a la mateixa alçada, però la caixa del copyright
   fa 47px i la dels legals 29: els seus centres quedaven a 9px l'un de l'altre
   i es veia tort. Es centren verticalment i s'iguala l'interlineat. */
.site-footer-bottom-section-1,
.site-footer-bottom-section-2 {
  display: flex;
  align-items: center;
}
.site-footer .footer-html,
.site-footer .site-info,
.site-footer #footer-navigation ul.menu a { line-height: 1.5; }
.site-footer .footer-html p,
.site-footer .site-info p { margin: 0; }

/* =====================================================================
   Hover dels enllaços del peu — ES CONFIGURA AL PERSONALITZADOR, no aquí

   Les columnes ja feien hover en mostassa perquè està posat al Personalitzador
   de Kadence. El que quedava blau era **només la barra de legals**, que es
   controla amb un altre ajust (`footer_navigation_color`) que estava buit.

   Arreglat allà, no amb CSS: la regla guanyadora era
   `#colophon .footer-navigation .footer-menu-container > ul li a:hover`, que
   Kadence genera des del Personalitzador i té més pes que qualsevol cosa que
   escriguem aquí. A més, així l'Andrea ho pot canviar sense tocar codi.

   👉 Personalitzador → Peu → Navegació del peu → Colors.
   ===================================================================== */

/* La descripció de marca, un pèl més clara que la resta: és la frase que
   defineix qui són i ha de destacar sobre les dades de contacte. */
.passa-footer-brand__desc { color: rgba(255, 255, 255, .86); }

/* ---- Les tres portes ----
   Abans només se'n pintaven dues i el text deia «tres portes»: no lligava.
   Ara hi són les tres i l'actual va marcada com a premuda, així es veu on ets
   sense haver de llegir res. La fletxa s'ha tret: embrutava i no aportava. */
.passa-sister__chip.is-actual {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .30);
  color: rgba(255, 255, 255, .62) !important;
  cursor: default;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28);
}
/* No és clicable: no ha de reaccionar. */
.passa-sister__chip.is-actual:hover { background: transparent !important; }

/* =====================================================================
   Peu en mòbil

   Feia 1.215px (gairebé pantalla i mitja) perquè els tres menús anaven
   apilats i sumaven 484px ells sols.

   ⚠️ Arreglat al PERSONALITZADOR, no aquí: `footer_top_layout` tenia
   `mobile: row` (una columna) mentre que en tauleta ja estava a `two-grid`.
   Posat també a `two-grid` en mòbil → 1.024px. La regla que manava era de
   Kadence, a 719px i amb més pes que qualsevol cosa del tema.
   👉 Personalitzador → Peu → Fila superior → Disseny de columnes (mòbil).

   Aquí només queden dos ajustos que el Personalitzador no cobreix.
   ===================================================================== */
@media (max-width: 767px) {
  /* La marca ocupa les dues columnes: hi ha l'adreça i no ha de partir-se. */
  .site-top-footer-inner-wrap .site-footer-top-section-1 { grid-column: 1 / -1; }

  /* Els buits entre blocs eren de 60px, massa en una pantalla petita. */
  .site-middle-footer-wrap .site-footer-row,
  .site-bottom-footer-wrap .site-footer-row { gap: 20px; }
  .passa-sister { margin-top: -18px; }
}