/*
Theme Name: Xalar
Theme URI: http://example.com/xalar
Author: Xalar Team
Author URI: http://example.com
Description: Custom WordPress Theme for Xalar Festival 2026.
Version: 1.0.0
Text Domain: xalar
*/

:root {
  /* COLORS */
  --bg: #f7f2e8;
  --black: #000000;
  --dark: #030303;
  --white: #ffffff;

  --blue: #707ff9;
  --yellow: #f8d172;
  --orange: #efa12d;
  --green: #33cc99;
  --green02: #5bc583;
  --lightgreen: #51e29c;
  --pink: #ff5e79;
  --violet: #ff85fd;

  /* TYPOGRAPHY */
  --font-primary: "GothamBook", Arial, Helvetica, sans-serif;
  --font-bold: "GothamBold", Arial, Helvetica, sans-serif;
  --font-black: "GothamBlack", Arial, Helvetica, sans-serif;
  --font-medium: "GothamMedium", Arial, Helvetica, sans-serif;
  --font-heading: "Combatest", Arial, Helvetica, sans-serif;

  /* SPACING TOKENS (Desktop Default) */
  /* Previously: 40px, 80px, 120px, 180px */
  --space-sm: 2.5rem;
  --space-md: 5rem;
  --space-lg: 7.5rem;
  --space-xl: 11.25rem;
}

/* =========================================
   2. RESET & BASE
   ========================================= */
* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  /* Base 16px */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--black);
  line-height: 1.5;
  font-family: var(--font-primary);
  font-size: 1.875rem;
  /* 30px */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================
   3. TYPOGRAPHY
   ========================================= */
@font-face {
  font-family: "Combatest";
  src: url("assets/fonts/combatest.woff2") format("woff2"),
    url("assets/fonts/combatest.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GothamBook";
  src: url("assets/fonts/gotham-book.woff2") format("woff2"),
    url("assets/fonts/gotham-book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GothamBold";
  src: url("assets/fonts/gotham-bold.woff2") format("woff2"),
    url("assets/fonts/gotham-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GothamBlack";
  src: url("assets/fonts/gotham-black.woff2") format("woff2"),
    url("assets/fonts/gotham-black.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GothamMedium";
  src: url("assets/fonts/gotham-medium.woff2") format("woff2"),
    url("assets/fonts/gotham-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  margin: 0 0 0.5em;
  font-weight: normal;
}

h1,
h2 {
  font-size: 3.4375rem;
  /* 55px */
  line-height: 1.3;
}

a {
  font-family: var(--font-bold);
  font-size: 1.6875rem;
  /* 27px */
  color: var(--black);
  text-decoration: none;
}

/* =========================================
   4. LAYOUT
   ========================================= */
.container {
  max-width: 90rem;
  /* 1440px */
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.indent-content {
  width: 100%;
  padding-left: 4rem;
  box-sizing: border-box;
  text-align: left;
}

/* =========================================
   5. GLOBAL COMPONENTS
   ========================================= */

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 0.8em 1em;
  border-radius: 62.4375rem;
  /* 999px */
  text-align: center;
  font-weight: bold;
  font-family: var(--font-bold);
  text-decoration: none;
  background: var(--black);
  color: var(--white);
  border: 2px solid transparent;
  transition: transform 0.2s;
  text-transform: none;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn.primary {
  background: var(--green02);
  color: var(--black);
}

.btn.blue {
  background: var(--blue);
  color: var(--black);
}

.btn.orange {
  background: var(--orange);
  color: var(--black);
}

.btn.green {
  background: var(--green);
  color: var(--black);
}

.btn.lightgreen {
  background: var(--lightgreen);
  color: var(--black);
}

.btn.violet {
  background-color: var(--violet);
  color: var(--black);
}

.btn.yellow {
  background-color: var(--yellow);
  color: var(--black);
}

.btn.dark {
  background: var(--black);
  color: var(--white);
}

.btn.ghost {
  background: transparent;
  border: 2px solid var(--black);
  color: var(--black);
}

.btn.ghost-white {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.btn.ghost-white:hover {
  background: var(--white);
  color: var(--black);
}

.btn.small {
  font-size: 0.875rem;
  /* ~14px approx form 0.85rem */
  margin-top: 1rem;
}

.disabled-link {
  pointer-events: none;
  cursor: default;
}

/* --- Cards --- */
.card {
  text-align: center;
  padding: 2.3rem;
  border-radius: 3.125rem;
  /* 50px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 18.75rem;
  /* 300px */
}

.card hr {
  margin: 0;
  border: none;
  border-top: 2px solid var(--black);
}

.card h3 {
  font-family: var(--font-medium);
  font-size: 2.875rem;
  /* 46px */
  margin: 0;
}

.card p {
  text-align: left;
  font-size: 0.875rem;
  /* 14px */
}

.card p .time {
  font-family: var(--font-bold);
}

.place {
  display: inline-block;
  font-family: var(--font-medium);
  font-size: 1.375rem;
  /* 22px */
  margin-bottom: 20px;
  text-transform: uppercase;
}

/* Color Utilities for Cards/Sections */
.blue {
  background: var(--blue);
}

.yellow {
  background: var(--yellow);
}

.green {
  background: var(--green);
}

.pink {
  background: var(--pink);
}

.violet {
  background: var(--violet);
}

/* --- Info Cards (Projecte) --- */
.info-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  padding-top: 3rem;
  border-radius: 1.5rem;
  /* 24px */
}

.info-card h4 {
  text-transform: none;
  font-family: var(--font-bold);
  font-size: 1.6875rem;
  /* 27px */
}

.info-card p {
  font-size: 1.375rem;
  /* 22px */
}

/* =========================================
   6. PAGE-SPECIFIC STYLES
   ========================================= */

/* --- Header Section --- */
.main-header {
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 31.25rem;
  /* 500px */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.main-header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.header-logo {
  display: flex;
  justify-content: center;
  width: 100%;
}

.header-logo img {
  width: 19.5rem;
  /* 312px */
  max-width: 100%;
  margin: 0 auto;
}

.header-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.nav-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Navigation Button States Refactor --- */
.header-nav .btn {
  background-color: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
  transition: all 0.3s ease;
}

/* Hover & Active States: Colors */
/* Note: Active states excluded for anchor links (#) to avoid stuck colors on one-page nav */

/* Violet */
.header-nav .btn.violet:hover,
.header-nav .btn.violet.current-menu-item:not([href*="#"]),
.header-nav .current-menu-item .btn.violet:not([href*="#"]),
.header-nav .btn.violet.current_page_item:not([href*="#"]),
.header-nav .current_page_item .btn.violet:not([href*="#"]) {
  background-color: #8c52ff;
  border-color: #8c52ff;
  color: #ffffff;
}

/* Orange */
.header-nav .btn.orange:hover,
.header-nav .btn.orange.current-menu-item:not([href*="#"]),
.header-nav .current-menu-item .btn.orange:not([href*="#"]),
.header-nav .btn.orange.current_page_item:not([href*="#"]),
.header-nav .current_page_item .btn.orange:not([href*="#"]) {
  background-color: #ff6600;
  border-color: #ff6600;
  color: #ffffff;
}

/* Light Green */
.header-nav .btn.lightgreen:hover,
.header-nav .btn.lightgreen.current-menu-item:not([href*="#"]),
.header-nav .current-menu-item .btn.lightgreen:not([href*="#"]),
.header-nav .btn.lightgreen.current_page_item:not([href*="#"]),
.header-nav .current_page_item .btn.lightgreen:not([href*="#"]) {
  background-color: #99cc33;
  border-color: #99cc33;
  color: #ffffff;
}

/* Primary (Corporate Pink) */
.header-nav .btn.primary:hover,
.header-nav .btn.primary.current-menu-item:not([href*="#"]),
.header-nav .current-menu-item .btn.primary:not([href*="#"]),
.header-nav .btn.primary.current_page_item:not([href*="#"]),
.header-nav .current_page_item .btn.primary:not([href*="#"]) {
  background-color: #ff0066;
  border-color: #ff0066;
  color: #ffffff;
}

/* Yellow */
.header-nav .btn.yellow:hover,
.header-nav .btn.yellow.current-menu-item:not([href*="#"]),
.header-nav .current-menu-item .btn.yellow:not([href*="#"]),
.header-nav .btn.yellow.current_page_item:not([href*="#"]),
.header-nav .current_page_item .btn.yellow:not([href*="#"]) {
  background-color: #ffcc00;
  border-color: #ffcc00;
  color: #000000;
}

/* Blue */
.header-nav .btn.blue:hover,
.header-nav .btn.blue.current-menu-item:not([href*="#"]),
.header-nav .current-menu-item .btn.blue:not([href*="#"]),
.header-nav .btn.blue.current_page_item:not([href*="#"]),
.header-nav .current_page_item .btn.blue:not([href*="#"]) {
  background-color: #00aaff;
  border-color: #00aaff;
  color: #ffffff;
}

/* --- Hero Section --- */
.hero p {
  font-size: 1.1875rem;
  /* 19px */
}

.hero h4 {
  font-family: var(--font-bold);
  font-size: 1.625rem;
  /* 26px */
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.hero-art {
  position: relative;
  background-color: var(--black);
  order: 1;
}

.hero-art img {
  width: 100%;
  transform: translate(-30px, 50px);
}

.hero-text {
  padding-right: 3.125rem;
  /* 50px */
}

/* --- Programacio Section --- */
.programacio h2 {
  margin-bottom: 2rem;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* --- Projecte Section --- */
.projecte.pattern {
  padding: 6.25rem 0;
  /* 100px */
  background-image: url("assets/img/patron.png");
  background-repeat: repeat;
}

.projecte .container {
  width: 90%;
  padding: 9.375rem 5rem 5rem 5rem;
  /* 150px 80px 80px 80px */
  background-color: var(--bg);
  border-radius: 3.125rem;
  /* 50px */
}

.projecte .indent-content .lead {
  /* Special styling if needed, implicitly inherits body font-size */
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

/* --- Companies Section --- */
.companies-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

.companies-grid p span {
  font-family: var(--font-bold);
}

.companies-detall p {
  font-size: 1.375rem;
  /* 22px */
}

/* --- Note / Fem Comboi --- */
.note {
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.note .container {
  background-color: var(--black);
  border-radius: 0;
  padding: 3rem 2rem;
  max-width: 90rem;
  /* 1440px */
}

.note-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  background-color: var(--dark);
  color: var(--bg);
  padding: 1.5rem 1.5rem;
}

.note-grid h2 {
  font-family: var(--font-primary);
  text-transform: none;
  font-size: 2.75rem;
  /* 44px */
}

.note-grid h2 span {
  font-family: var(--font-black);
}

.note-grid p {
  font-size: 1.375rem;
  /* 22px */
}

/* --- Project Page Structure (ZigZag) --- */
.project-steps {
  background-color: var(--bg);
  overflow: hidden;
}

.step-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  margin-bottom: 6rem;
}

.step-row:last-child {
  margin-bottom: 0;
}

.step-row.reverse {
  flex-direction: row-reverse;
}

.step-content {
  width: 55%;
}

.step-content h3 {
  font-family: var(--font-bold);
  font-size: 2rem;
  /* 32px */
  margin-bottom: 1.5rem;
  text-transform: none;
  line-height: 1.2;
}

.step-content p {
  font-family: var(--font-primary);
  font-size: 1.375rem;
  /* 22px */
  line-height: 1.6;
  color: var(--black);
}

.step-image {
  width: 40%;
  display: flex;
  justify-content: center;
}

.step-image img {
  width: 100%;
  max-width: 500px;
}

/* --- Archive (Historic) --- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.archive-item {
  color: var(--black);
  display: block;
  transition: transform 0.2s ease;
}

.archive-item:hover {
  transform: translateY(-10px);
  opacity: 0.9;
}

.poster-wrapper {
  width: 100%;
  margin-bottom: 1.5rem;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.poster-wrapper img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.edition-title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  /* 20px */
  margin: 0;
  text-transform: none;
}

/* --- Schedule List --- */
.schedule-block {
  margin-bottom: 0;
  padding-bottom: 4rem;
  background-color: var(--bg);
}

.schedule-header {
  width: 100%;
  padding: 1.5rem 0;
  margin-bottom: 3rem;
}

.bg-blue {
  background-color: var(--blue);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-green {
  background-color: var(--green);
}

.bg-pink {
  background-color: var(--pink);
}

.schedule-header h2 {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 2.25rem;
  /* 36px */
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.schedule-header .location {
  font-family: var(--font-primary);
  font-size: 0.6em;
}

.schedule-header .container {
  padding-top: 0;
  padding-bottom: 0;
}

.schedule-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

.schedule-card {
  border: 1px solid var(--black);
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s ease;
}

.schedule-card:hover {
  transform: translateY(-5px);
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 1);
}

.card-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-bottom: 1px solid var(--black);
}

.card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
}

.card-meta {
  font-family: var(--font-bold);
  font-size: 1rem;
  /* 16px */
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}

.card-excerpt {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  /* 18px */
  line-height: 1.4;
  margin-bottom: 0;
}

h3.card-title {
  font-family: var(--font-bold);
  font-size: 1.6875rem;
  /* 27px */
  text-transform: none;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

/* --- Single Espectacle --- */
.single-page {
  background-color: var(--bg);
  padding-bottom: 5rem;
}

.single-page .container {
  max-width: 998px;
}

.single-show-layout {
  width: 100%;
  margin-bottom: 4rem;
}

.single-hero-image {
  margin: 0;
  width: 100%;
  line-height: 0;
}

.single-hero-image img {
  width: 100%;
  max-height: 700px;
  object-fit: cover;
}

.single-info-bar {
  width: 100%;
  padding: 1.5rem 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.single-info-bar .show-date {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 2.25rem;
  /* 36px */
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  gap: 0.5rem;
}

.single-info-bar .show-location {
  font-family: var(--font-primary);
  font-size: 0.6em;
}

.single-meta {
  font-family: var(--font-bold);
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}

.single-content-body {
  padding: 3rem;
  max-width: 900px;
}

.single-content-body h1 {
  font-family: var(--font-black);
  line-height: 1.1;
  text-transform: none;
}

/* --- Single Text Block (WYSIWYG) --- */
.single-text-block {
  width: 100%;
}

/* Universal Text Standard (Mobile Default: 1rem) */
.single-text-block p,
.single-text-block ul,
.single-text-block ol,
.single-text-block li,
.single-text-block a,
.single-text-block blockquote,
.single-text-block div {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--black);
}

/* Margins for Block Elements */
.single-text-block p,
.single-text-block ul,
.single-text-block ol,
.single-text-block blockquote,
.single-text-block div {
  margin-bottom: 1.5rem;
}

/* Desktop Text Resize (>= 768px: 1.125rem) */
@media (min-width: 768px) {

  .single-text-block p,
  .single-text-block ul,
  .single-text-block ol,
  .single-text-block li,
  .single-text-block a,
  .single-text-block blockquote,
  .single-text-block div {
    font-size: 1.125rem;
    /* 18px */
  }
}

/* Typography: Headings */
.single-text-block h2,
.single-text-block h3,
.single-text-block h4,
.single-text-block h5,
.single-text-block h6 {
  font-family: var(--font-bold);
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.5em;
  line-height: 1.2;
  text-transform: none;
  color: var(--black);
}

.single-text-block h2 {
  font-family: var(--font-black);
}

/* Lists */
.single-text-block ul,
.single-text-block ol {
  padding-left: 1.5rem;
}

.single-text-block ul {
  list-style-type: disc;
}

.single-text-block ol {
  list-style-type: decimal;
}

.single-text-block li {
  margin-bottom: 0.5rem;
}

/* Links */
.single-text-block a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.single-text-block a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* Bold & Italic */
.single-text-block strong,
.single-text-block b {
  font-family: var(--font-bold);
  font-weight: 700;
}

.single-text-block em,
.single-text-block i {
  font-style: italic;
}

/* Blockquotes */
.single-text-block blockquote {
  border-left: 4px solid var(--black);
  font-style: italic;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background-color: rgba(0, 0, 0, 0.03);
}

/* Images */
.single-text-block figure,
.single-text-block img {
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
}

/* Separators */
.single-text-block hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 3rem 0;
}

/* Embedded Media (CRITICAL) */
.single-text-block iframe,
.single-text-block embed,
.single-text-block object,
.single-text-block video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  margin: 2rem 0;
}

/* --- Legal Pages --- */
.legal-page .container {
  max-width: 1440px !important;
  margin: 0 auto;
}

.legal-page h1 {
  font-family: var(--font-black);
  line-height: 1.1;
  text-transform: none;
  margin-bottom: 2rem;
  font-size: 3.5rem;
  /* ~56px */
}

/* Consolidated .legal-content-body */
.legal-content-body {
  margin: 0 auto;
  /* Center the text block */
  font-family: var(--font-primary);
  color: var(--black);
  font-size: 1.125rem;
  /* 18px */
  line-height: 1.6;
}

.legal-content-body h2 {
  font-size: 2rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-family: var(--font-bold);
  text-transform: none;
}

.legal-content-body h3 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-family: var(--font-bold);
  text-transform: none;
}

.legal-content-body h4 {
  font-size: 1.25rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-family: var(--font-bold);
  text-transform: none;
}

.legal-content-body h5 {
  font-size: 1.125rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-family: var(--font-bold);
  text-transform: none;
}

.legal-content-body h6 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-bold);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.legal-content-body p,
.legal-content-body ul,
.legal-content-body ol {
  margin-bottom: 1.5rem;
}

.legal-content-body ul,
.legal-content-body ol {
  padding-left: 2rem;
}

.legal-content-body li {
  margin-bottom: 0.8rem;
  padding-left: 0.5rem;
}

.legal-content-body ul {
  list-style-type: disc;
}

.legal-content-body ol {
  list-style-type: decimal;
}

.legal-content-body a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.legal-content-body a:hover {
  color: var(--blue);
  text-decoration: none;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 2rem;
  border: 1px solid var(--black);
}

.legal-content-body table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.legal-content-body th,
.legal-content-body td {
  padding: 1rem;
  border: 1px solid var(--black);
  text-align: left;
  vertical-align: top;
}

.legal-content-body th {
  font-family: var(--font-bold);
  background-color: #f0f0f0;
}

.legal-content-body blockquote {
  border-left: 5px solid var(--black);
  margin: 2rem 0;
  padding: 1rem 2rem;
  background-color: rgba(0, 0, 0, 0.05);
  font-style: italic;
}

/* --- Footer --- */
.main-footer {
  background-color: #262626;
  color: var(--bg);
  padding: 4rem 0 2rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  /* 13px */
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-brand .footer-logo {
  width: 12.625rem;
  /* 202px */
  height: auto;
  display: block;
}

.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.social-icons {
  display: flex;
  gap: 1rem;
}

.social-icons img {
  width: 2.875rem;
  /* 46px */
  height: 2.875rem;
  transition: transform 0.2s ease;
}

.social-icons img:hover {
  transform: scale(1.1);
}

.footer-copy {
  text-align: left;
  line-height: 1.2;
}

.footer-copy p {
  margin: 0;
}

.footer-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 3rem 0;
}

.footer-partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;
}

.footer-partners img {
  max-height: 3.125rem;
  /* 50px */
  width: auto;
  opacity: 0.9;
}

.footer-legal {
  font-family: var(--font-primary);
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 0.8125rem;
  /* 13px */
  opacity: 0.8;
}

.footer-legal a {
  color: var(--bg);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
}

.footer-legal a:hover {
  text-decoration: underline;
}


/* =========================================
   7. UTILITIES
   ========================================= */
.actions {
  margin-top: 2rem;
}

.actions .indent-content {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.actions .ghost {
  font-size: 1.125rem; /* ~18px secondary size */
  font-family: var(--font-primary);
  text-decoration: underline;
  color: var(--black);
  transition: opacity 0.2s;
}

.actions .ghost:hover {
  opacity: 0.7;
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.pb-lg {
  padding-bottom: var(--space-lg);
}


/* =========================================
   8. MEDIA QUERIES (CONSOLIDATED)
   ========================================= */

/* --- Tablet / Small Laptop (< 1024px) --- */
@media (max-width: 1024px) {

  .hero-grid,
  .note-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .container.hero-grid {
    padding: 0;
  }

  .hero-art {
    order: -1;
    margin-bottom: 1rem;
  }

  .hero-text,
  .container {
    padding: 1rem;
  }

  .hero-art img {
    transform: none;
    max-width: 37.5rem;
    /* 600px */
    margin: 0 auto;
  }

  .projecte .container {
    background-color: transparent;
  }

  .indent-content p {
    font-size: 1.375rem;
    /* 22px */
  }

  .indent-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    padding-top: 3rem;
    border-radius: 1.5rem;
    background-color: var(--bg);
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-grid {
    grid-template-columns: 1fr;
    margin-top: 1rem;
  }

  .companies-grid {
    grid-template-columns: 1fr;
  }

  section.projecte .container {
    padding: 5rem 2.5rem;
    /* 80px 40px */
  }

  .schedule-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 768px) {
  :root {
    /* Mobile Scale */
    --space-sm: 0.875rem;
    /* 14px */
    --space-md: 1.75rem;
    /* 28px */
    --space-lg: 2.125rem;
    /* 34px */
    --space-xl: 3.125rem;
    /* 50px */
  }

  body,
  .hero p {
    font-size: 1.125rem;
    /* 18px */
  }

  h1,
  h2 {
    font-size: 2.25rem;
    /* 36px */
  }

  .note-grid h2 {
    font-size: 2rem;
    /* 32px */
  }

  .main-header {
    height: auto;
    padding: 5rem 0;
  }

  .header-logo img {
    width: 50%;
    max-width: 12.5rem;
    /* 200px */
    min-width: 8.75rem;
    /* 140px */
  }

  .nav-row {
    gap: 0.5rem;
  }

  .header-nav .btn {
    font-size: 0.875rem;
    padding: 0.6em 1em;
  }

  /* 1-column layouts */
  .cards-grid,
  .info-grid,
  .companies-grid {
    grid-template-columns: 1fr;
  }

  .companies-grid {
    display: flex;
    flex-direction: column;
  }

  .hero-grid {
    gap: 1rem;
  }

  .note {
    padding: 15px;
  }

  section.projecte .container {
    padding: 40px 20px;
    border-radius: 30px;
  }

  .pattern {
    padding: 40px 0;
  }

  .indent-content {
    padding: 0;
  }

  .projecte .indent-content {
    padding: 1.5rem;
    padding-top: 3rem;
  }

  /* Footer Mobile */
  .main-footer {
    text-align: center;
  }

  .footer-top {
    flex-direction: column;
    gap: 2.5rem;
  }

  .footer-brand .footer-logo {
    margin: 0 auto;
    width: 60%;
    max-width: 202px;
    min-width: 150px;
    height: auto;
  }

  .footer-copy {
    order: 3;
    text-align: center;
  }

  .social-icons {
    gap: 1.5rem;
  }

  .footer-partners {
    justify-content: center;
    gap: 2rem 1.5rem;
  }

  .footer-partners img {
    max-height: 40px;
  }

  .footer-legal {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Typpography Specifics */
  .schedule-header h2,
  .schedule-header .location,
  h3.card-title,
  .single-content-body h1,
  .single-info-bar .show-date,
  .step-content h3 {
    font-size: 1.3rem;
  }

  .single-info-bar {
    padding: 1rem;
  }

  .single-info-bar .show-location {
    font-size: 0.9rem;
  }

  .card-excerpt,
  .single-text-block p {
    font-size: 1rem;
  }

  .card-meta,
  .single-meta {
    font-size: 0.8rem;
  }

  .single-content-body {
    padding-left: 0;
    padding-right: 0;
  }

  /* Steps Zig-Zag reset */
  .step-row,
  .step-row.reverse {
    flex-direction: column-reverse;
    gap: 2rem;
    margin-bottom: 4rem;
    align-items: stretch;
  }

  .step-content,
  .step-image {
    width: 100%;
  }

  .step-image img {
    margin: 0 auto;
    max-width: 300px;
  }

  /* Archive */
  .archive-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .poster-wrapper {
    max-width: 60%;
    margin: 0 auto 1.5rem;
  }

  .archive-item {
    text-align: center;
  }

  .edition-title {
    font-size: 1.125rem;
  }

  /* Legal Mobile */
  .legal-page h1 {
    font-size: 2.25rem;
  }

  .legal-content-body {
    font-size: 1rem;
  }

  .legal-content-body h2 {
    font-size: 1.6rem;
    margin-top: 2rem;
  }

  .legal-content-body h3 {
    font-size: 1.35rem;
    margin-top: 1.5rem;
  }

  .legal-content-body h4 {
    font-size: 1.15rem;
  }

  .legal-content-body h5 {
    font-size: 1rem;
  }

  .legal-content-body h6 {
    font-size: 0.9rem;
  }

  .legal-content-body ul,
  .legal-content-body ol {
    padding-left: 1.25rem;
  }
}

/* --- Small Mobile (< 550px) --- */
@media (max-width: 550px) {
  :root {
    --space-sm: 5px;
    --space-md: 10px;
    --space-lg: 15px;
    --space-xl: 20px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .hero h4,
  .info-card h4 {
    font-size: 1.3rem;
  }

  a,
  .info-card p,
  .note-grid p,
  .indent-content p {
    font-size: 1rem;
  }

  .place,
  .card h3,
  .note-grid h2 {
    font-size: 1.1rem;
  }

  .hero-text,
  .container {
    padding: 0.5rem;
  }

  .schedule-grid {
    grid-template-columns: 1fr;
  }
}

/* Fix for WYSIWYG bold support in titles */
/* Fix for WYSIWYG bold support in titles: Map strong to Black variant globally for headings */
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong,
.note-grid h2 strong {
  font-family: var(--font-black);
  font-weight: normal;
  /* Font-family handles the weight */
}

/* =========================================
   7. 404 PAGE
   ========================================= */
.error-404-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 0;
}

.error-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.error-code {
  font-size: 10rem;
  font-family: var(--font-heading);
  color: var(--orange);
  line-height: 1;
  margin-bottom: 1rem;
}

.error-title {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.error-text {
  font-size: 1.5rem;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 404 Mobile */
@media (max-width: 768px) {
  .error-code {
    font-size: 6rem;
  }

  .error-title {
    font-size: 2rem;
  }

  .error-text {
    font-size: 1.2rem;
  }
}