/*
 Theme Name: Astra Accesibilitat (Child)
 Template: astra
 Description: Tema fill d'Astra per a la pàgina d'accessibilitat
 Version: 1.0
*/

/* Aquí empieza tu CSS */
/* Reset lleuger i base de càlcul de mida */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Variables de tema (ajusta al teu cas) */
:root {
  --header-h: 88px;

  /* Paleta nova més clara per millorar la lectura dels blocs */
  --bg: #453764; /* fons general lleugerament il·luminat */
  --surface: #5f5180; /* targetes/seccions més clares */
  --surface-2: #6d5c90; /* targetes secundàries */
  --fg: #ffffff; /* text principal */
  --muted: #f3ecff; /* text secundari més llegible */
  --accent: #f2e1ff; /* color principal (títols, botons) */
  --accent-2: #ffe9b8; /* hover/actiu amb més contrast */
  --link-contrast: #0b4a8f; /* enllaços amb contrast AA sobre #F0F5FA */
  --link-contrast-hover: #08366c;
  --help-bg: transparent;
  --help-text: #0b132a;
  --input-bg: #f0f5fa;
  --input-text: #0b132a;
  --placeholder-contrast: #334155;
  --shadow: rgba(0, 0, 0, 0.25);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 25px;
}
/* Cos del document */
body {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  line-height: 1.6;
  color: var(--fg);
  background-color: var(--bg);
  overflow-x: hidden;
  font-size: 1.1rem;
  position: relative; /* stacking context per la capa animada */
}

a {
  color: var(--link-contrast);
  font-weight: 700;
}

a:visited {
  color: #0a3b72;
}

a:hover,
a:focus-visible {
  color: var(--link-contrast-hover);
}

/* Barra d’administració WP (offset quan és visible) */
body.admin-bar header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar header {
    top: 46px;
  }
}

/* Scrollbar (estètic) */
body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background: var(--bg);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 10px;
  border: 2px solid var(--bg);
}

/* Contenidor fluid centrat */
.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 1.5rem 2.5rem;
}

/* Classe utilitària per als títols amagats però accessibles */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   LAYOUT GENERAL I LANDMARKS
   ======================================================= */

/* Compensació del header fix al contingut principal */
main,
.site-content,
.main-content,
#primary,
.ast-container {
  padding-top: calc(var(--header-h) + 8px) !important;
}

/* Neteja d’elements decoratius del tema que afegeixen buit a dalt */
.page .entry-title,
.single .entry-title,
.wp-block-post-title,
.entry-header,
.wp-block-separator:first-of-type,
.wp-block-spacer:first-of-type {
  display: none !important;
}
.wp-block-group:first-child,
.wp-site-blocks > *:first-child {
  margin-top: 0 !important;
}

/* =========================================================
   CAPÇALERA FIXA (consolidada)
   ======================================================= */

/* ----------------------
   Formulari accessible
   ---------------------- */
.form-required-note {
  margin: 0 0 1rem 0;
  padding: 0.75rem 1rem;
  background: #73639a;
  border-left: 4px solid var(--accent);
  color: var(--fg);
  border-radius: var(--radius-sm);
}

.required-flag {
  color: var(--accent-2);
  font-weight: 700;
}

.form-row,
fieldset {
  margin-bottom: 1.5rem;
}

fieldset {
  border: 1px solid #6a598d;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: #3c3054;
}

fieldset legend {
  padding: 0 0.35rem;
}

.form-row label,
legend {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.help,
.help-text {
  margin: 0.35rem 0;
  padding: 0.6rem 0.85rem;
  background: var(--help-bg);
  color: var(--help-text);
  border-left: 4px solid var(--link-contrast);
  border-radius: var(--radius-sm);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row select {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--link-contrast);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--input-text);
}

.form-row input[type="checkbox"] {
  margin-right: 0.5rem;
}

.form-row--invalid input,
.form-row--invalid select,
fieldset.form-row--invalid {
  border-color: #f29cb1;
  box-shadow: 0 0 0 2px rgba(242, 156, 177, 0.25);
}

.form-row--invalid label,
.form-row--invalid legend {
  color: var(--accent-2);
}

.error-message {
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #f29cb1;
  background: #53354d;
  color: #fff1f7;
  border-radius: var(--radius-sm);
  min-height: 1.75rem;
}

.hint {
  margin: 0.35rem 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* CAPÇALERA FIXA (consolidada) — NOMÉS PER A LA TEVA PÀGINA */
.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg);
  margin: 0;
  padding: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.page-header .container {
  max-width: none;
  width: 100%;
  padding: 1.25rem clamp(16px, 4vw, 48px);
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Commutador d’idioma */
.lang-switcher a {
  color: #a3a3a3;
  text-decoration: none;
  margin-right: 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.lang-switcher a:last-child {
  margin-right: 0;
}
.lang-switcher a:hover,
.lang-switcher a:focus-visible {
  color: var(--fg);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Marca */
.logo-text {
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--fg);
  text-transform: lowercase;
}

/* Botó de menú */
.menu-toggle {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 2.5rem;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  transition: color 0.2s;
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
  color: var(--fg);
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* =========================================================
   NAVEGACIÓ LATERAL (menú hamburguesa)
   ======================================================= */

.side-nav {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background-color: var(--accent);
  padding: 2rem;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
  transition: right 0.3s ease-in-out;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.side-nav.open {
  right: 0;
}

.menu-close {
  background: none;
  border: none;
  color: var(--bg);
  font-size: 2.5rem;
  cursor: pointer;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.5rem;
  line-height: 1;
  transition: color 0.2s;
}
.menu-close:hover,
.menu-close:focus-visible {
  color: var(--fg);
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.side-nav ul {
  list-style: none;
  padding: 0;
  margin-top: 4rem;
}
.side-nav li {
  margin-bottom: 1.8rem;
}
.side-nav a {
  color: var(--bg);
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.2s;
}
.side-nav a .fas {
  font-size: 1.1rem;
}
.side-nav a:hover,
.side-nav a:focus-visible {
  color: var(--fg);
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* =========================================================
   CONTINGUT PRINCIPAL I SECCIONS
   ======================================================= */

.main-content {
  padding-top: 1rem;
}

h2,
h3 {
  color: var(--accent);
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
  text-align: center;
}
h3 {
  font-size: 2.4rem;
}

section h3 {
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  color: #f4e9ff;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.8rem;
}

section h3::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 60px;
  height: 4px;
  border-radius: 4px;
  background: #bda7ff;
  box-shadow: 0 0 10px rgba(189, 167, 255, 0.7);
}

.page-title {
  margin: 0 auto 1.5rem;
  text-align: center;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-title__link {
  color: var(--fg);
  text-decoration: none;
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color 0.2s, box-shadow 0.2s, text-decoration-color 0.2s;
  text-decoration-thickness: 0.18em;
}

.page-title__link:hover,
.page-title__link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Hero */
.hero-section {
  padding-top: 1rem;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    circle at center,
    rgba(140, 82, 255, 0.1) 0%,
    transparent 70%
  );
  border-radius: 0;
  box-shadow: none;
}
.hero-text {
  font-size: 6rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1.1;
  margin-bottom: 2rem;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.blinking-cursor {
  animation: blink 0.75s step-end infinite;
}

.pause-animations .blinking-cursor {
  animation: none;
}

.main-content a {
  color: var(--link-contrast);
  font-weight: 700;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.18em;
  color: var(--link-contrast);
  padding: 0.05em 0.25em;
  border-radius: var(--radius-sm);
}

.main-content a:visited {
  color: #072c55;
}

.main-content a:hover,
.main-content a:focus-visible {
  color: var(--link-contrast-hover);
}

.motion-toggle {
  margin: 2rem 0 3rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  gap: 0.75rem;
  align-items: center;
}

.motion-toggle__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.motion-toggle__btn {
  background: var(--link-contrast);
  color: #ffffff;
  border: 0;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
}

.motion-toggle__btn:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
}

.motion-toggle__status {
  margin: 0;
  color: var(--fg);
  font-weight: 600;
}
.scroll-indicator {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  font-size: 1rem;
  color: var(--muted);
  writing-mode: vertical-lr;
  text-orientation: mixed;
  letter-spacing: 0.1em;
  transform: rotate(180deg);
}

.animation-paused-note {
  display: none;
  margin: 0.75rem auto;
  padding: 0.75rem 1rem;
  background: var(--help-bg);
  color: var(--help-text);
  border-radius: var(--radius-sm);
  max-width: 720px;
}

.pause-animations .non-decorative-anim {
  display: none;
}

.pause-animations .animation-paused-note {
  display: block;
}

/* Grid d’imatges (Secció A) */
.grid-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 3rem;
  margin-bottom: 4rem;
}
.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.image-card {
  background-color: var(--surface-2);
  padding: 2rem;
  border-radius: var(--radius-sm);
  text-align: center;
}
.image-card img {
  border-radius: 6px;
  display: block;
  margin: 1.5rem auto 1.5rem; /* centre horitzontal i espai a dalt/baix */
  max-width: 100%;
}
.image-description {
  font-size: 1rem;
  color: var(--fg);
}

/* Targeta de projecte */
.project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--surface-2);
  padding: 3rem;
  border-radius: var(--radius);
  text-align: center;
  max-width: 900px;
  margin: 0 auto 4rem;
}
.project-card .project-img {
  border-radius: 8px;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.project-card h3 {
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
  color: var(--accent);
}
.project-card p {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  color: var(--fg);
}

/* --- Diferenciar les dues capes --- */

/* Capa del fons (secció gran) una mica més clara */
section {
  background: linear-gradient(180deg, #4b3a6a, #624f85);
}

/* Targetes internes una mica més fosques per destacar */
.project-card,
.image-card,
.media-container,
aside,
form {
  background: linear-gradient(180deg, #524270, #66538c);
}

/* Contenidors media */
.media-container {
  margin-bottom: 3.5rem;
  background-color: var(--surface-2);
  padding: 2.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.media-container h3 {
  text-align: left;
  margin-bottom: 1.8rem;
  font-size: 2rem;
  color: var(--fg);
}
.responsive-video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1.8rem;
  border-radius: 8px;
}

/* Transcripció */
.transcription-text {
  background-color: var(--surface);
  padding: 1.2rem;
  border-left: 4px solid var(--accent);
  margin-top: 1.8rem;
  max-height: 250px;
  overflow-y: auto;
  border-radius: 6px;
  font-size: 1rem;
  color: var(--muted);
}
.transcription-text h4 {
  color: var(--fg);
  margin-bottom: 1rem;
}
.transcription-text p {
  margin: 0 0 0.8rem 0;
}

/* Botons i enllaços tipus botó */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2.5rem;
}
button,
a[role="button"] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.2rem;
  background-color: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.1s;
  letter-spacing: 0.03em;
}
button:hover,
a[role="button"] {
  text-decoration: none;
}
button:hover,
a[role="button"]:hover {
  background-color: var(--accent-2);
  transform: translateY(-2px);
}
button:focus-visible,
a[role="button"]:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
  background-color: var(--accent-2);
}
button svg,
a[role="button"] svg {
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
}

/* Cites */
blockquote {
  background-color: var(--surface-2);
  border-left: 5px solid var(--accent);
  margin: 2.5rem auto;
  padding: 1.8rem 2.5rem;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--fg);
  border-radius: var(--radius-sm);
  max-width: 800px;
}
blockquote p {
  margin: 0 0 1.2rem 0;
}
blockquote footer {
  text-align: right;
  font-size: 1rem;
  color: var(--muted);
}

/* Fragments en altre idioma */
span[lang] {
  font-style: italic;
  font-weight: 500;
}

/* Formularis */
form {
  max-width: 700px;
  margin: 0 auto;
  background-color: var(--surface-2);
  padding: 3rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.form-group {
  margin-bottom: 1.8rem;
}
label {
  display: block;
  margin-bottom: 0.8rem;
  font-weight: 600;
  color: var(--fg);
  font-size: 1.15rem;
}
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 1.1rem;
  border: 1px solid var(--link-contrast);
  border-radius: 8px;
  font-size: 1.05rem;
  background-color: var(--input-bg);
  color: var(--input-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input::placeholder,
textarea::placeholder {
  color: var(--placeholder-contrast);
  opacity: 1;
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.25rem rgba(140, 82, 255, 0.3);
  outline: none;
}
.help-text {
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 0.6rem;
}
form button[type="submit"] {
  width: auto;
  display: block;
  margin: 2.5rem auto 0;
}

/* =========================================================
   ASIDE I PEU
   ======================================================= */

aside {
  background-color: var(--surface);
  padding: 3rem;
  margin-bottom: 5rem;
  border-radius: var(--radius);
  border-left: 5px solid var(--accent);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
aside h3 {
  color: var(--accent);
  font-size: 2.4rem;
  margin-bottom: 1.8rem;
  text-align: left;
}
aside p {
  color: var(--fg);
  line-height: 1.7;
  font-size: 1.05rem;
}

footer {
  background-color: var(--bg);
  color: var(--muted);
  padding: 3rem 0;
  font-size: 0.95rem;
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--fg);
  text-decoration: underline;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.footer-info {
  text-align: right;
  margin-top: 0;
}
.footer-info p {
  margin-bottom: 0.5rem;
  color: var(--fg);
}
.social-icons a {
  color: var(--muted);
  font-size: 1.6rem;
  margin-left: 1.2rem;
  transition: color 0.2s;
}
.social-icons a:hover,
.social-icons a:focus-visible {
  color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =========================================================
   ENLLAÇ "SALTAR AL CONTINGUT" (2.4.1)
   ======================================================= */

.skip-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  z-index: 1000;
  font-weight: bold;
  font-size: 1.1rem;
  background-color: var(--accent);
  color: var(--bg);
  padding: 0.7rem 1.5rem;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.3s, left 0.3s, outline 0.2s;
}
.skip-link:focus-visible {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  clip: auto;
  outline: 4px solid var(--fg);
  outline-offset: 3px;
}

/* =========================================================
   MARCA DEV D’ELEMENTS DECORATIUS (1.1.1.x)
   ======================================================= */

[data-decorative] {
  position: relative;
  display: block;
  outline: 1px dashed rgba(140, 82, 255, 0.6);
  outline-offset: 2px;
}
[data-decorative] img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/*[data-decorative]::after {
  content: "decorativa";
  position: absolute;
  top: 6px;
  left: 6px;
  font: 600 10px/1.6 system-ui, sans-serif;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(140, 82, 255, 0.9);
  color: #fff;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
*/
/* =========================================================
   ANIMACIÓ DECORATIVA DE FONS (1.1.1.3)
   ======================================================= */

.bg-animacio {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translateX(-50%); /* centra i garanteix 100vw real */
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
      40% 40% at 20% 30%,
      rgba(123, 92, 255, 0.3) 0%,
      rgba(123, 92, 255, 0) 60%
    ),
    radial-gradient(
      45% 45% at 80% 20%,
      rgba(255, 94, 168, 0.3) 0%,
      rgba(255, 94, 168, 0) 60%
    ),
    radial-gradient(
      50% 50% at 50% 80%,
      rgba(0, 212, 255, 0.3) 0%,
      rgba(0, 212, 255, 0) 60%
    ),
    var(--bg);
  background-size: 200% 200%, 220% 220%, 240% 240%, auto;
  animation: drift 10s ease-in-out infinite;
}
@keyframes drift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0 0;
  }
  50% {
    background-position: 80% 30%, 20% 40%, 55% 20%, 0 0;
  }
  100% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0 0;
  }
}

/* Respecte a “reduir moviment” */
@media (prefers-reduced-motion: reduce) {
  .bg-animacio {
    animation-duration: 20s;
  }
}

/* Assegura contingut per sobre de l’animació */
header,
main,
aside,
footer {
  position: relative;
  z-index: 1;
}

/* Icona decorativa (SVG inline) */
.ico-deco {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  opacity: 0.6;
  pointer-events: none;
}

/* =========================================================
   CENTRAT FORÇAT — SECCIÓ A (imatges)
   (Neutralitza “floats” i alineacions del tema/Gutenberg)
   ======================================================= */

/* 1) Centrar la graella i ítems */
.grid-images {
  justify-items: center !important;
  align-items: start !important;
}
.grid-images > * {
  justify-self: center !important;
}

/* 2) Centrar figures/cards dins la graella */
.grid-images .image-card,
.grid-images [data-decorative],
.grid-images figure,
.grid-images .wp-block-image {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* 3) Assegurar imatge centrada */
.grid-images img,
.grid-images .wp-block-image img,
.grid-images [data-decorative] img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  height: auto !important;
}

/* 4) Overrides d’alineació típics */
.grid-images .wp-block-image.alignright,
.grid-images img.alignright,
.grid-images .wp-block-image.alignleft,
.grid-images img.alignleft {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.grid-images .wp-block-image figure {
  text-align: center !important;
}

/* 5) Evita heretar text-align dret del pare */
section,
.container,
.main-content {
  text-align: initial;
}
.grid-images {
  text-align: center;
} /* només a la grid */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #43386a;
}
.table-wrapper th,
.table-wrapper td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #43386a;
  text-align: left;
}
.table-wrapper caption {
  text-align: left;
  font-weight: 600;
  margin: 0.25rem 0 0.5rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**1.1.1.8 Botó amb imatge*/

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-icon {
  inline-size: 44px;
  block-size: 44px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: #2f243e;
  color: #e0bbe4;
  cursor: pointer;
}
.btn-text-icon i {
  margin-inline-end: 0.5rem;
}

/* =========================================================
   FORÇAR TEXT FOSC → LILA CLAR (cobreix WP + inline + headings)
   ======================================================= */
:root {
  --lilac: var(--fg);
}

/* Headings i text genèric */
html
  body
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    figcaption,
    caption,
    blockquote,
    dt,
    dd,
    label,
    legend,
    th,
    td,
    small,
    span,
    code,
    pre,
    kbd,
    samp,
    .wp-block-heading,
    .wp-block-post-title,
    .entry-title,
    .site-title,
    .site-description
  ) {
  color: var(--lilac) !important;
}

/* Classes de Gutenberg/WordPress que solen posar negre o gris fosc */
.has-text-color,
.has-black-color,
.has-dark-gray-color,
.has-very-dark-gray-color,
.has-foreground-color {
  color: var(--lilac) !important;
}

/* Estils inline típics en negre/gris (hex, rgb i rgba) */
[style*="color:#000"],
[style*="color: #000"],
[style*="color:black"],
[style*="color: black"],
[style*="color:rgb(0,0,0)"],
[style*="color: rgb(0, 0, 0)"],
[style*="color:rgba(0,0,0"],
[style*="color: rgba(0, 0, 0"],
[style*="#111"],
[style*="#222"],
[style*="#333"],
[style*="#444"] {
  color: var(--lilac) !important;
}

/* Evitar que els enllaços tornin a un color fosc per defecte del tema */
main a:not([role="button"]),
aside a,
footer a {
  color: var(--lilac) !important;
}

/* Mantén excepcions on vols un altre color (ja tens això per headings i botons) */
h2,
h3 {
  color: var(--accent) !important;
} /* títols principals */
button,
a[role="button"] {
  color: var(--bg) !important;
} /* text botons */

video::cue {
  font-size: 1rem;
  line-height: 1.4;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  border-radius: 0.2em;
  padding: 0.2em 0.4em;
}

.badge-error {
  display: inline-block;
  margin: 0.5rem 0 1rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  background: #7f1d1d;
  color: #fff;
  font-weight: 600;
}
/* Mostra el skip-link només en focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #000;
  text-decoration: none;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Compensa el header fix perquè el títol no quedi tapat */
:root {
  --header-h: 88px;
} /* ajusta a l’alçada real del teu header */
#titol-pagina {
  scroll-margin-top: var(--header-h);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: #fff;
  color: #000;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  outline: 2px solid currentColor;
}
.titol-pagina a:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text només per a lectors de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==== Criteri 2.5.3 Accessibilitat bàsica: sr-only i focus visible ==== */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Estils neutres per als exemples (opcional) */
.btn-icon,
.icon-only,
.link-icon,
.link-more {
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: none;
}

.btn-icon {
  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;
}

.icon-only,
.link-icon {
  width: 2.25rem;
  height: 2.25rem;
  justify-content: center;
  border-radius: 0.5rem;
}
.nav-pager {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* === Maquetació enriquida per al criteri 2.5.3.2 === */
.label-name-intro {
  color: #f2e6ff;
  max-width: 72ch;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.label-name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.example-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.4rem 1.3rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.label-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, #b079ff, #7b4dff);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.label-demo-btn:hover {
  filter: brightness(1.07);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

.label-demo-btn:focus-visible {
  outline: 3px solid #ffe182;
  outline-offset: 3px;
}

.label-demo-btn--icon svg {
  background: rgba(255, 255, 255, 0.12);
  padding: 0.35rem;
  border-radius: 10px;
}

.label-demo-btn--pill {
  justify-content: space-between;
  min-width: 220px;
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 800;
  line-height: 1;
}

.icon-only--filled {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

.label-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.2rem;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}

.label-demo-link::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.2rem 0;
  height: 3px;
  background: linear-gradient(90deg, #ffe182, #b079ff);
  opacity: 0.55;
  border-radius: 999px;
}

.nav-pager--rich {
  justify-content: flex-start;
  gap: 0.75rem;
}

.pager-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  color: #f2e6ff;
  font-weight: 700;
  transition: transform 120ms ease, filter 120ms ease;
}

.pager-link:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.pager-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 800;
}

/* =========================================================
   MILLORA VISUAL BASSETIS: FONS, TARGETES I TIPOGRAFIA
   ======================================================= */

/* Fons animat una mica més fosc i saturat */
.bg-animacio {
  filter: brightness(0.65) saturate(1.15);
  opacity: 0.9;
}

/* Blocs principals (section + targetes) amb més profunditat */
section,
.project-card,
.image-card,
.media-container,
aside,
form {
  background: linear-gradient(180deg, #615287, #7a69a3);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 4rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Títols amb lila corporativa i lleu ombra */
h1,
h2,
h3,
h4 {
  color: #e7c6ff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Text normal una mica més clar per contrast */
p,
li,
figcaption {
  color: #f2e6ff !important;
}

/* Enllaços i botons (text) amb accent lila */
a,
button {
  color: #d6b3ff;
}

/* Hover: text blanc per diferenciar clarament l’estat */
a:hover,
button:hover {
  color: #ffffff;
}

/* Focus molt visible i coherent */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #d6b3ff;
  outline-offset: 4px;
}

/* CSS mínim per “Resultats” 2.4.1.1*/

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  background: #ffcc00;
  color: #2f243e;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.skip-link:focus-visible {
  top: 1rem;
  outline: 3px solid #2f243e;
  outline-offset: 3px;
}

.demo-saltar-blocs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .demo-saltar-blocs {
    grid-template-columns: 1.2fr 0.8fr 1.2fr;
    align-items: start;
  }
}

.demo-header {
  background: #2f243e;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.menu-demo ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.menu-demo > ul {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.submenu-toggle {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #f2e6ff;
  font-weight: 700;
  cursor: pointer;
}

.submenu-toggle:hover,
.submenu-toggle:focus-visible {
  text-decoration: underline;
}

.submenu[hidden] {
  display: none;
}

.menu-demo li {
  background: #44355b;
  padding: 0.75rem;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.menu-demo li ul {
  margin-top: 0.5rem;
  gap: 0.35rem;
}

.menu-demo a,
.menu-demo .menu-titol {
  color: #f2e6ff;
  font-weight: 700;
  text-decoration: none;
}

.skip-links-demo {
  display: grid;
  gap: 0.5rem;
  align-items: start;
  margin: 1rem 0;
}

.skip-link-status {
  margin: 0;
  font-weight: 700;
}

.filtres {
  background: #2f243e;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.filtres-subtitol {
  margin: 0 0 1rem;
  font-weight: 600;
  color: #cdbbe8;
}

.filtres form {
  display: grid;
  gap: 0.75rem;
}

.filtres label {
  font-weight: 700;
}

.filtres select,
.filtres input[type="checkbox"] {
  margin-top: 0.35rem;
}

.opcions-filtres {
  display: grid;
  gap: 0.35rem;
}

.resultats-llista {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.resultats-llista li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #43386a;
  display: grid;
  gap: 0.2rem;
}
.resultats-llista li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #43386a;
}
.resultat-meta {
  color: #d4c2ff;
  font-size: 0.9rem;
}

.resultats-capcalera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.resultats-count {
  margin: 0;
  font-weight: 700;
}

.resultats-ajuda {
  margin-top: 0.75rem;
  color: #d4c2ff;
}
.resultats-llista a {
  text-decoration: none;
}
.resultats-llista a:focus-visible {
  outline: 3px solid #ffcc00;
  outline-offset: 2px;
}

/* Gràfic de barres WCAG (no és una imatge) */
.wcag-chart {
  max-width: 960px;
  margin: 1.5rem auto;
  padding: 1rem;
  border-radius: 12px;
  background: #2f243e;
  color: #f9f9f9;
}

.wcag-chart figcaption {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.wcag-chart-bars {
  display: flex;
  align-items: stretch; /* totes les barres tenen la mateixa alçada base */
  gap: 1rem;
  height: 220px; /* alçada màxima del gràfic */
  padding: 1rem 0.5rem 0;
}

.wcag-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* enganxa el contingut a la part inferior */
  height: 100%; /* molt important perquè el % funcioni */
  gap: 0.35rem;
}

/* Columna visual de la barra */
.wcag-bar::before {
  content: "";
  display: block;
  width: 100%;
  height: var(--valor); /* 90%, 80%, etc. sobre el 100% del contenidor */
  max-height: 100%;
  border-radius: 8px 8px 0 0;
  background: #8c52ff;
}

/* Etiquetes sota la barra */
.wcag-bar-label {
  font-size: 0.9rem;
  text-align: center;
}

.wcag-bar-value {
  font-weight: 600;
}

/* Taula equivalent del gràfic */
.wcag-chart table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #3b3050;
  border-radius: 8px;
  overflow: hidden;
}

.wcag-chart th,
.wcag-chart td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wcag-chart th {
  text-align: left;
  font-weight: 600;
}

.wcag-chart tbody tr:last-child td {
  border-bottom: none;
}

html,
body {
  background: var(--bg);
}

/* wrappers d’Astra/tema transparents perquè es vegi l’animació */
.site,
.site-content,
.ast-container,
.ast-page-builder-template {
  background: transparent !important;
}

/* La secció hero no ha de tenir marc al voltant */
.hero-section {
  border: none;
}

.captcha-alert {
  max-width: 720px;
  margin: 1rem auto 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.captcha-ok {
  background-color: #1f7a3a;
  color: #f5fff5;
}

.captcha-error {
  background-color: #7a1f2b;
  color: #fff5f7;
}

/* Amagar el header blanc del tema en la pàgina d'accessibilitat */
body.page-id-6 #masthead {
  display: none;
}

/* Ajustar el contingut perquè pugi amunt */
body.page-id-6 #content,
body.page-id-6 .site-content {
  margin-top: 0;
  padding-top: 0;
}

/* Ajustar espai del hero a la pàgina d'accessibilitat */
body.page-id-6 .main-content {
  padding-top: 1.5rem;
}

/* Acostar el "Developing trust" a la part superior */
body.page-id-6 .hero-section {
  padding-top: 1.5rem;
  min-height: auto; /* ja no ocupa 80vh */
  justify-content: flex-start; /* deixa el text enganxat a dalt del hero */
}

/* =========================================================
   Fix global per a la marca "decorativa"
   ======================================================= */

/* El contenidor amb l’atribut data-decorative és el referent */
[data-decorative] {
  position: relative !important;
  display: block;
  outline: 1px dashed rgba(140, 82, 255, 0.6);
  outline-offset: 2px;
}

/* Xapeta DECORATIVA a dalt a la dreta */
[data-decorative]::after {
  content: "DECORATIVA";
  position: absolute;
  top: 12px;
  right: 16px;
  bottom: auto;
  left: auto;
  font: 600 11px/1.6 system-ui, sans-serif;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(42, 35, 54, 0.95);
  color: #fdfbff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   Marca dev per a imatges INFORMATIVES (1.1.1.2, etc.)
   ======================================================= */

/* Xapeta “INFORMATIVA” dins de .image-card */
.image-card {
  position: relative;
}

.badge-img-type {
  position: absolute;
  top: 12px;
  right: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  font: 600 11px/1.6 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(214, 179, 255, 0.95);
  color: #2a2336;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 20;
}

/* --- Xapeta i centrats per a la imatge INFORMATIVA (1.1.1.2) --- */

figure.image-card[data-img-type="informative"] {
  position: relative !important;
  text-align: center;
}

/* Imatge centrada dins la targeta */
figure.image-card[data-img-type="informative"] img {
  display: block;
  margin: 1.5rem auto 1.5rem; /* centre horitzontal i espai a dalt/baix */
  max-width: 100%;
}

/* Xapeta visual “INFORMATIVA” enganxada a dalt a la dreta */
figure.image-card[data-img-type="informative"] > .badge-img-type {
  position: absolute !important;
  top: 12px;
  right: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  font: 600 11px/1.6 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(214, 179, 255, 0.95);
  color: #2a2336;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  display: inline-block;
  z-index: 20;
}

/* === 1.2.1 — Estils específics del vídeo Big Buck Bunny === */

/* Centrar el vídeo i limitar ample */
.video-121 {
  max-width: 720px;
  margin: 0 auto 2rem; /* centre a la targeta */
  text-align: center;
}

.video-121 video {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 1rem;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Figcaption una mica més petit */
.video-121 figcaption {
  font-size: 0.98rem;
  opacity: 0.9;
}

/* Bloc de transcripció molt més llegible */
.transcripcio {
  margin-top: 1.5rem;
  margin-bottom: 1.75rem;
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  background: #2f243e; /* fons fosc coherent amb el tema */
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  max-height: 420px; /* evita que sigui infinitament alta */
  overflow-y: auto; /* apareix scrollbar si cal */
}

/* Ajustos interns de la transcripció */
.transcripcio h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.15rem;
}

.transcripcio ol {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}

.transcripcio li {
  margin-bottom: 0.5rem;
}

.transcripcio a {
  text-decoration: underline;
}

/* Opcional: que la barra de scroll sigui una mica discreta */
.transcripcio::-webkit-scrollbar {
  width: 8px;
}
.transcripcio::-webkit-scrollbar-track {
  background: #241935;
}
.transcripcio::-webkit-scrollbar-thumb {
  background: #8c52ff;
  border-radius: 999px;
}

/* === OVERRIDE FORT per a totes les transcripcions === */
.transcripcio {
  background-color: #2f243e !important;
  color: #f2e6ff !important;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  padding: 1.5rem 1.75rem;
  max-height: 420px;
  overflow-y: auto;
}

/* Mata qualsevol fons blanc que vingui de Gutenberg/tema dins la transcripció */
.transcripcio * {
  background-color: transparent !important;
  color: #f2e6ff !important;
}

/* Títol, paràgrafs i llistes ben llegibles */
.transcripcio h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.transcripcio ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.transcripcio li {
  margin-bottom: 0.5rem;
}

/* Scrollbar visible però discret */
.transcripcio::-webkit-scrollbar {
  width: 8px;
}
.transcripcio::-webkit-scrollbar-track {
  background: #241935;
}
.transcripcio::-webkit-scrollbar-thumb {
  background: #8c52ff;
  border-radius: 999px;
}

/* === OVERRIDE FORT per al vídeo de 1.2.1 === */

/* El figure amb la classe video-121 */
figure.video-121,
figure.video-122 {
  display: block !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* El vídeo dins del figure */
figure.video-121 > video,
figure.video-122 > video {
  display: block !important;
  width: 100% !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0.75rem !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

/* El peu del vídeo una mica més petit i centrat */
figure.video-121 > figcaption,
figure.video-122 > figcaption {
  font-size: 0.98rem !important;
  opacity: 0.9;
  text-align: center !important;
}

/* Botó d'exemple per 2.5.3.x */
.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  background: #7a42ff;
  color: #ffffff !important;
  text-decoration: none;
  font: 600 0.95rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: 0.03em;
  margin-top: 0.5rem;
  border: 2px solid transparent;
}

/* Estat hover + focus visibles */
.btn:hover {
  filter: brightness(1.08);
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #7a42ff;
}

/* Millores de contrast globals per a controls i botons nadius */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select {
  color: var(--input-text);
  border-color: var(--link-contrast);
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder-contrast);
  opacity: 1;
}

.wp-block-button__link:not(.has-background) {
  background-color: #024499;
  color: #ffffff;
}

.wp-block-button__link:not(.has-background):hover,
.wp-block-button__link:not(.has-background):focus-visible {
  background-color: #013875;
  color: #ffffff;
}

/* =========================================================
   ESTILS PÀGINA NO-ACCESSIBLE (Aïllats)
   Això només afecta al contingut dins de .zona-no-accesible
   ======================================================= */

/* Animació global definida fora per poder usar-la */
@keyframes colors-ruins {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(180deg) saturate(2); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes shaky { 
  0% { transform: translateX(0); } 
  50% { transform: translateX(2px); } 
  100% { transform: translateX(0); } 
}

/* Apliquem els estils de "body" i "html" només al contenidor */
.zona-no-accesible {
  margin: 0;
  font-family: "Comic Sans MS", cursive, sans-serif !important;
  font-size: 12px !important;
  background: repeating-linear-gradient(45deg, #cfcfcf 0, #cfcfcf 10px, #d4d4d4 10px, #d4d4d4 20px) !important;
  color: #8b8b8b !important;
  line-height: 1.1 !important;
  overflow-x: hidden;
  animation: colors-ruins 6s linear infinite; /* Animació mareig */
  min-height: 100vh; /* Assegura que ocupi tota la pantalla */
  padding-bottom: 50px;
}

/* Eliminem contorns de focus per perdre referències */
.zona-no-accesible *:focus,
.zona-no-accesible *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.zona-no-accesible .container {
  max-width: none !important;
  padding: 0 10px;
}

/* Menú interminable */
.zona-no-accesible .long-menu {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: #bcbcbc;
  padding: 6px;
  margin-bottom: 20px;
}
.zona-no-accesible .long-menu a {
  display: block;
  padding: 6px;
  background: #c7c7c7;
  color: #c9c9c9 !important;
  text-decoration: none;
  font-size: 11px;
}
.zona-no-accesible .long-menu a:hover {
  color: #c7c7c7 !important;
  cursor: default;
}

/* Hero i seccions amb contrast pobríssim */
.zona-no-accesible .hero-section,
.zona-no-accesible section,
.zona-no-accesible footer,
.zona-no-accesible aside {
  background: rgba(200, 200, 200, 0.4) !important;
  padding: 20px;
  border: 3px dotted #cecece !important;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: none !important; /* Treiem ombres maques anteriors */
}

.zona-no-accesible .hero-text {
  font-size: 30px !important;
  letter-spacing: 0.3em;
  color: #a0a0a0 !important;
  font-weight: normal !important;
}

.zona-no-accesible .grid-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.zona-no-accesible .image-card {
  background: #d6d6d6 !important;
  padding: 10px;
  box-shadow: 0 0 25px rgba(0,0,0,0.1) inset !important;
  border: none !important;
}

/* Imatges borroses */
.zona-no-accesible .image-card img,
.zona-no-accesible .project-card img,
.zona-no-accesible .media-container img,
.zona-no-accesible .media-container video {
  width: 100%;
  height: auto;
  filter: blur(1px) contrast(0.6);
  opacity: 0.7;
}

.zona-no-accesible .project-card,
.zona-no-accesible .media-container,
.zona-no-accesible form,
.zona-no-accesible blockquote {
  background: #d0d0d0 !important;
  color: #9a9a9a !important;
  padding: 14px;
  border-radius: 0 !important;
  box-shadow: 0 0 0 5px #d0d0d0 !important;
  border: none !important;
}

/* Botons que no semblen botons */
.zona-no-accesible button,
.zona-no-accesible a[role="button"] {
  background: #c1c1c1 !important;
  color: #c2c2c2 !important;
  border: none !important;
  padding: 8px 10px;
  font-size: 12px !important;
  text-decoration: none;
  cursor: text !important; /* El cursor no canvia */
  border-radius: 0 !important;
  display: inline-block;
}

.zona-no-accesible button:hover,
.zona-no-accesible a[role="button"]:hover {
  background: #c1c1c1 !important;
  color: #c2c2c2 !important;
  transform: none !important;
}

/* Text tremolant */
.zona-no-accesible .shaky-text { 
  animation: shaky 0.2s infinite; 
  display: inline-block;
}

/* Formulari sense estructura */
.zona-no-accesible form input,
.zona-no-accesible form textarea {
  width: 100%;
  background: transparent !important;
  border: 1px dashed #bfbfbf !important;
  color: #a1a1a1 !important;
  padding: 6px;
  box-shadow: none !important;
}
.zona-no-accesible ::placeholder {
    color: #b0b0b0 !important;
}

/* Icones sense referència */
.zona-no-accesible .fake-icons i {
  font-size: 26px;
  color: #b5b5b5;
}

/* Tipografia plana */
.zona-no-accesible h1, 
.zona-no-accesible h2, 
.zona-no-accesible h3, 
.zona-no-accesible h4, 
.zona-no-accesible h5, 
.zona-no-accesible h6 {
  color: #a5a5a5 !important;
  font-weight: normal !important;
  text-shadow: none !important;
  text-align: left !important;
}
.zona-no-accesible h1 { font-size: 2em !important; }

.zona-no-accesible p { 
    margin: 6px 0; 
    color: #8b8b8b !important;
}

/* Enllaços quasi invisibles */
.zona-no-accesible a { 
    color: #b6b6b6 !important; 
    font-weight: normal !important;
}
.zona-no-accesible a:hover { 
    color: #b6b6b6 !important; 
    text-decoration: none !important;
}

/* Ocultar el skip-link (Trampa mortal d'accessibilitat) */
.zona-no-accesible .skip-link { 
    display: none !important; 
}

/* =========================================================
   ESTILS PER A LA PÀGINA "PARCIALMENT ACCESSIBLE" (Errors)
   Sobrescribim les variables del tema per trencar el contrast
   i eliminem ajudes visuals de navegació.
   ======================================================= */

/* IMPORTANT: Canvia '.page-template-pagina-accessibilitat-errors' 
   per la classe real que WordPress posi al <body> d'aquesta pàgina,
   o fes servir l'ID de la pàgina: body.page-id-XX 
*/

body.page-template-pagina-accessibilitat-amb-errors-php,
body.page-template-pagina-accessibilitat-errors {

  /* 1. CONTRAST INSUFICIENT (Error WCAG 1.4.3)
     Fem servir colors "bonics" (pastels) però que no tenen prou 
     contrast amb el fons #453764 */
  
  --fg: #8c7ba8;           /* Text gris-lila fosc (difícil de llegir sobre fons fosc) */
  --muted: #6b5a8a;        /* Text secundari gairebé invisible */
  --accent: #5e4b85;       /* Títols amb color molt semblant al fons */
  --link-contrast: #6a5acd; /* Enllaços liles sobre fons lila (fatal) */
  --link-contrast-hover: #5a4b7a;
  
  --input-bg: #4e406e;     /* Fons d'inputs fosc */
  --input-text: #7a6a99;   /* Text dins l'input amb poc contrast */
  --placeholder-contrast: #5a4b7a; /* Placeholder gairebé invisible */
  
  /* Mida de lletra fixa i petita (Error WCAG 1.4.4) */
  font-size: 14px; 
}

/* 2. ELIMINAR EL FOCUS VISIBLE (Error WCAG 2.4.7 - Molt comú)
   Això fa que qui navega amb teclat no sàpiga on és. */
body.page-template-pagina-accessibilitat-errors *:focus,
body.page-template-pagina-accessibilitat-errors *:focus-visible,
body.page-template-pagina-accessibilitat-errors a:focus,
body.page-template-pagina-accessibilitat-errors button:focus,
body.page-template-pagina-accessibilitat-errors input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* 3. ENLLAÇOS AMBIGUS (Error WCAG 1.4.1)
   Traiem el subratllat i confiem només en un canvi de color subtil. */
body.page-template-pagina-accessibilitat-errors a {
  text-decoration: none !important;
}
body.page-template-pagina-accessibilitat-errors a:hover {
  text-decoration: none !important;
  opacity: 0.8;
}

/* 4. BOTONS "FANTASMA"
   Botons que semblen text normal o tenen vores massa subtils. */
body.page-template-pagina-accessibilitat-errors .btn-primary,
body.page-template-pagina-accessibilitat-errors button {
  background-color: transparent !important;
  border: 1px solid var(--accent) !important;
  color: var(--fg) !important;
  box-shadow: none !important;
}

/* 5. AMAGAR VISUALMENT ETIQUETES DE FORMULARI (Error de disseny comú)
   Molts dissenys moderns amaguen el label i deixen només el placeholder.
   Això es veu "net" però és un error d'accessibilitat greu si el placeholder desapareix. */
body.page-template-pagina-accessibilitat-errors label {
  display: none; /* Error greu: lectors de pantalla encara el veuen pel codi, però usuaris cognitius no */
}
/* Excepció per als radios/checkboxes perquè s'entenguin mínimament */
body.page-template-pagina-accessibilitat-errors input[type="radio"] + label,
body.page-template-pagina-accessibilitat-errors input[type="checkbox"] + label {
  display: inline-block;
  color: var(--muted);
}

/* 6. SKIP LINK TRENCAT VISUALMENT
   El fem molt petit o el posem en un lloc on no es veu bé quan rep el focus. */
body.page-template-pagina-accessibilitat-errors .skip-link:focus {
  top: 5px;
  left: 5px;
  background: var(--bg); /* Mateix color que el fons */
  color: var(--bg);      /* Text invisible */
  z-index: -1;
  outline: none;
}

/* 7. TIPOGRAFIA JUSTIFICADA (Error WCAG 1.4.8)
   Crea "rius" de blanc que dificulten la lectura a dislèxics. */
body.page-template-pagina-accessibilitat-errors p {
  text-align: justify;
  hyphens: none;
  letter-spacing: -0.5px; /* Lletres massa juntes */
  line-height: 1.1;       /* Línies massa juntes */
}

/* 8. ERROR ESPECÍFIC DE LA TRANSCRIPCIÓ
   Fem que el text de contrast baix que vam posar al HTML es vegi encara pitjor */
body.page-template-pagina-accessibilitat-errors #vid1-trans p {
  font-size: 10px;
  color: #555 !important;
  background-color: #444 !important; /* Gris fosc sobre gris fosc */
}

/* Anul·lar les millores visuals de les targetes per fer-les planes i confuses */
body.page-template-pagina-accessibilitat-errors .image-card,
body.page-template-pagina-accessibilitat-errors .project-card,
body.page-template-pagina-accessibilitat-errors section {
  box-shadow: none !important;
  border: none !important;
  background: rgba(0,0,0,0.2) !important; /* Tot es veu pla */
}