/* ============================================================================
   Es Bassol Nou — Layout / chrome compartido
   Header (3 variantes responsive), menú overlay a pantalla completa y footer.
   Wordmark del logo = texto vivo en Louize (sin SVG por ahora).
   ========================================================================== */

/* ===========================================================================
   HEADER
   Móvil:   [ MENU ]        [ logo ]        [ CONTACT US ]
   Desktop: [ nav izq ]     [ logo ]        [ nav der ]
   ========================================================================== */
.site-header {
  position: relative;
  z-index: var(--z-header);
  background: var(--header-bg, var(--bg));
  color: var(--header-fg, var(--text));
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-m);
  min-height: var(--header-h);
  padding-block: var(--space-s);
  padding-bottom: 7px !important;
  padding-top: 19px !important;
}

/* Logo central */
.logo-wordmark {
  justify-self: center;
  text-align: center;
  line-height: 0.96;
  color: var(--text);
}

/* Wordmark de texto (solo para el tratamiento gigante de Home desktop) */
.logo-wordmark__text {
  display: none;
}

.logo-wordmark__text>span {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.35rem);
}

/* Logo de marca (PNG responsive vía CSS mask; se colorea según el fondo) */
.logo-mark {
  display: block;
  height: clamp(4.5rem, 18vw, 8rem);
  aspect-ratio: 832 / 722;
  background-color: var(--logo-ink, var(--text));
  -webkit-mask-image: url("/assets/icons/logo-blk-400.png");
  mask-image: url("/assets/icons/logo-blk-400.png");
  -webkit-mask-image: image-set(url("/assets/icons/logo-blk-400.png") 1x,
      url("/assets/icons/logo-blk-800.png") 2x,
      url("/assets/icons/logo-blk-1200.png") 3x);
  mask-image: image-set(url("/assets/icons/logo-blk-400.png") 1x,
      url("/assets/icons/logo-blk-800.png") 2x,
      url("/assets/icons/logo-blk-1200.png") 3x);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Header con fondo oscuro → logo en crema */
.theme-projects .site-header .logo-mark {
  --logo-ink: var(--c-ink);
}

.theme-services .site-header .logo-mark,
.theme-property .site-header .logo-mark {
  --logo-ink: var(--c-ink);
}

/* Menú overlay (fondo arena) → siempre tinta */
.menu-overlay .logo-mark {
  --logo-ink: var(--text);
  height: clamp(8rem, 35vw, 20rem);
}

/* Columnas laterales */
.site-header__left {
  justify-self: start;
}

.site-header__right {
  justify-self: end;
  text-align: right;
}

/* Navegación desktop (2 columnas de 3 enlaces apilados) */
.site-header__nav {
  display: none;
}

.site-header__nav a {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--header-fg, var(--text));
  opacity: 0.42;
  transition: opacity var(--transition);
}

.site-header__nav a:hover {
  opacity: 1;
}

/* Página actual resaltada (include.js añade .is-active): oscuro sólido, resto gris */
.site-header__nav a.is-active {
  font-weight: 400;
  opacity: 1;
}

/* Disparadores móvil */
.site-header__menu-btn,
.site-header__contact {
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width: 64rem) {
  .site-header__nav {
    display: block;
  }

  .site-header__menu-btn,
  .site-header__contact {
    display: none;
  }

  /* Header interno grande como el mockup: full-width, nav 45pt=2.34vw apilado a
     los lados, logo (ES BASSOL NOU + caracol) grande centrado. */
  .site-header__inner {
    max-width: none;
    padding-inline: 2.3%;
    /* margen del nav = x44/x1876 del PDF (2.29%) */
    align-items: start;
    padding-block: clamp(1rem, 1.65vw, 2.5rem);
  }

  .site-header__nav a {
    font-size: clamp(1.1rem, 2.34vw, 3.6rem);
    /* 45pt @1920 */
    line-height: 0.92;
    letter-spacing: 0.01em;
  }

  .site-header__left,
  .site-header__right {
    transform: translateY(2vw);
  }

  .logo-mark {
    height: clamp(8rem, 10.25vw, 16rem);
  }

  /* Ajuste óptico del wordmark: ES se alinea con la primera línea del nav y
     NOU con la última, sin alterar la altura del header. */
  .site-header .logo-mark {
    transform: translateY(-0.4vw);
  }
}

/* ===========================================================================
   MENÚ OVERLAY (pantalla completa)
   ========================================================================== */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--c-sand);
  color: var(--text);
  display: flex;
  flex-direction: column;
  padding: var(--space-l) 0 var(--space-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu-overlay__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.5rem, 2vw, var(--space-m));
}

.menu-overlay__top .u-label {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 3.1vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.menu-overlay__top .menu-overlay__close {
  justify-self: start;
}

.menu-overlay__top .menu-overlay__contact {
  justify-self: end;
}

.menu-overlay__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.1rem, 0.5vw, 0.4rem);
  text-align: center;
}

.menu-overlay__nav a {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 1.2rem + 6vw, 4.5rem);
  line-height: 1.06;
  color: var(--text);
  transition: opacity var(--transition);
}

.menu-overlay__nav a:hover {
  opacity: 0.55;
}

.menu-overlay__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1rem, 4vw, 5rem);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.menu-overlay__legal-link,
.menu-overlay__instagram {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.7vw, 4rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.01em;
}

.menu-overlay__legal-link {
  justify-self: start;
}

.menu-overlay__legal-link:nth-child(2) {
  justify-self: center;
  text-align: center;
}

.menu-overlay__legal-link span,
.menu-overlay__social a {
  display: block;
}

.menu-overlay__social {
  justify-self: end;
  text-align: center;
}

.menu-overlay__mail {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.7vw, 4rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.01em;
}

.menu-overlay__foot a:hover {
  opacity: 0.55;
}

.menu-overlay__copy {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 5rem);
  font-family: var(--font-body);
  font-size: clamp(1rem, 3.25vw, 4.5rem);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: 0;
  color: var(--text);
}

@media (max-width: 35.99rem) {
  .menu-overlay__foot {
    gap: 0.75rem;
    padding-inline: 1rem;
  }

  .menu-overlay__legal-link,
  .menu-overlay__instagram,
  .menu-overlay__mail {
    font-size: clamp(0.9rem, 4.3vw, 1.25rem);
  }

  .menu-overlay__copy {
    margin-top: 2rem;
    font-size: clamp(0.9rem, 4.2vw, 1.15rem);
  }
}

/* Bloquea el scroll del fondo cuando el overlay está abierto */
body.menu-open {
  overflow: hidden;
}

/* ===========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background-color: var(--footer-bg, var(--c-sand));
  color: var(--footer-fg, var(--text));
  padding-top: clamp(1rem, 1.6vw, 3rem);
  /* nav a y=46 @1920 (calcado al PDF) */
}

/* Textura del fondo en una capa independiente para no atenuar el contenido. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/img/home/paper-grain.png") repeat;
  background-size: 560px 560px;
  opacity: var(--footer-texture-opacity, 0);
  /* por defecto SIN textura (internas lisas); solo Home la activa */
  pointer-events: none;
}

.site-footer__top {
  display: grid;
  max-width: none;
  padding-inline: 0;
  grid-template-columns: 28.4% 48.6% minmax(0, 25%);
  grid-template-areas:
    ". nav-a nav-b"
    ". con-a con-b";
  row-gap: clamp(4rem, 24.76vw, 34rem);
  margin-bottom: 1.4vw;
  column-gap: 0;
}

.site-footer__nav a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.45rem, 1.82vw, 2.9rem);
  /* 35pt @1920 */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.28;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__contact a,
.site-footer__contact span {
  display: block;
  font-size: clamp(0.4rem, 1.52vw, 2.9rem);
  /* ajuste del compañero */
  font-weight: var(--fw-light);
  line-height: 1.28;
}

.site-footer__nav a:hover,
.site-footer__contact a:hover {
  opacity: 0.55;
}

.site-footer__contact {
  font-style: normal;
}

/* Posición horizontal individual de todos los elementos del footer.
   Modifica cada --footer-offset-x con px, rem, vw, etc. */
.site-footer__item {
  transform: translateX(var(--footer-offset-x, 0));
}

.site-footer__item--project {
  --footer-offset-x: -2.19vw;
}

.site-footer__item--services {
  --footer-offset-x: -2.19vw;
}

.site-footer__item--property {
  --footer-offset-x: -2.19vw;
}

.site-footer__item--approach {
  --footer-offset-x: -2.19vw;
}

.site-footer__item--about {
  --footer-offset-x: -0.55vw;
}

.site-footer__item--contact {
  --footer-offset-x: -0.55vw;
}

.site-footer__item--instagram {
  --footer-offset-x: -2.19vw;
}

.site-footer__item--address {
  --footer-offset-x: -2.19vw;
}

.site-footer__item--phone {
  --footer-offset-x: -0.55vw;
}

.site-footer__item--email {
  --footer-offset-x: -0.55vw;
}

.site-footer__item--wordmark-es {
  --footer-offset-x: 0;
}

.site-footer__item--wordmark-bassol {
  --footer-offset-x: 0;
}

.site-footer__item--wordmark-nou {
  --footer-offset-x: 0;
}

.site-footer__item--terms {
  --footer-offset-x: -1vw;
}

.site-footer__item--ampersand {
  --footer-offset-x: 0.2vw;
}

.site-footer__item--conditions {
  --footer-offset-x: 1.43vw;
}

/* Wordmark gigante inferior del footer.
   Páginas internas (PDF): letras OSCURAS sólidas sobre el color del footer.
   Home (PDF): relieve hundido tono-sobre-tono con la textura del papel. */
.site-footer__wordmark {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.15em;
  padding: 0.9%;
  padding-top: 0;
  padding-bottom: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.78;
  /* line-box ceñido: legal sube a y=1023 como el PDF */
  letter-spacing: 0.068em;
  font-size: 9.7vw;
  /* cap-height BASSOL = 139px @1920 como el PDF */
  color: var(--text);
  /* oscuro sólido (internas) */
  text-decoration: none;
}

.site-footer__wordmark span {
  display: block;
}

/* HOME: una sola textura, aplicada en el fondo del footer. */
body.theme-home .site-footer__wordmark {
  color: var(--footer-bg, var(--c-cream));
  background: transparent;
  text-shadow:
    -1.5px -1.5px 0.35px rgba(255, 255, 255, 0.82),
    1.9px 1.9px 0.5px rgba(0, 0, 0, 0.58),
    0 3px 3px rgba(0, 0, 0, 0.18);
}


/* Legal: Terms (2.1%) · & (26.4%) · Conditions (75%), alineado a la rejilla */
.site-footer__legal {
  max-width: none;
  padding-inline: 2.1%;
  margin-top: 1.4vw;
  margin-bottom: 1.4vw;
  font-size: clamp(0.45rem, 1.82vw, 2.9rem);
  /* 35pt @1920 */
  letter-spacing: 0.02em;
  color: var(--footer-fg, var(--text));
}

.site-footer__legal-summary {
  display: grid;
  grid-template-columns: 24.92% 51.19% 1fr;
  align-items: center;
  max-width: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.site-footer__legal-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 4.5rem);
  margin-top: 0vw;
  max-height: 0;
  padding: 0 2.1%;
  border-top: 0 solid currentColor;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.78vw, 1rem);
  line-height: 1.22;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.55s ease,
    padding-block 0.45s ease,
    border-top-width 0.45s ease,
    opacity 0.3s ease;
}

.site-footer__legal-panel[hidden] {
  display: none;
}

.site-footer__legal-panel.is-open {
  padding: 2.1%;
  border-top-width: 1px;
  opacity: 1;
  pointer-events: auto;
}

.site-footer__legal-panel h2,
.site-footer__legal-panel h3,
.site-footer__legal-panel p {
  margin: 0;
}

.site-footer__legal-panel h2 {
  margin-bottom: 1.15em;
  font-size: inherit;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

.site-footer__legal-panel h3 {
  margin-top: 1.8em;
  margin-bottom: 0.55em;
  font-size: inherit;
  font-weight: var(--fw-medium);
}

.site-footer__legal-panel h2+h3 {
  margin-top: 0;
}

.site-footer__legal-panel p {
  max-width: 29em;
}

.site-footer__legal-panel p+p {
  margin-top: 1em;
}

@media (max-width: 63.99rem) {
  .site-header__menu-btn,
  .site-header__contact {
    font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  }

  .menu-overlay__nav {
    gap: 0;
  }

  .site-footer__nav a {
    font-size: clamp(0.45rem, 2.05vw, 2.9rem);
  }

  .site-footer__contact a,
  .site-footer__contact span {
    font-size: clamp(0.4rem, 2.05vw, 2.9rem);
  }

  .site-footer__legal {
    font-size: clamp(0.45rem, 2.05vw, 2.9rem);
  }

  .site-footer__legal-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .site-footer__legal-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    padding-inline: 5%;
    font-size: 0.75rem;
  }

  .site-footer__legal-panel.is-open {
    margin-top: 0;
    padding: 5%;
  }
}

.site-footer__nav--a {
  grid-area: nav-a;
}

.site-footer__nav--b {
  grid-area: nav-b;
}

.site-footer__contact--a {
  grid-area: con-a;
}

.site-footer__contact--b {
  grid-area: con-b;
}

/* ===========================================================================
   TEMAS POR PÁGINA
   El nav y el footer se re-tematizan por página (según los mockups). Cada
   página añade una clase `theme-*` en <body> que define los colores de
   header y footer vía custom properties.
   --header-bg / --header-fg  → fondo y texto del header
   --footer-bg / --footer-fg  → fondo y texto del footer
   ========================================================================== */
body.theme-home {
  --header-bg: var(--c-cream);
  --footer-bg: #e9e5d9;
  --footer-texture-opacity: 0.55;
  /* solo Home lleva textura de papel (medido en el PDF) */
}

body.theme-projects {
  --header-bg: var(--c-terracota);
  --header-fg: var(--c-ink);
  --footer-bg: #e2ceb8;
}

body.theme-ficha {
  --header-bg: var(--c-cream);
  --footer-bg: var(--c-olive);
}

body.theme-services {
  --header-bg: var(--c-terracota);
  --header-fg: var(--c-ink);
  --footer-bg: var(--c-terracota);
  --footer-fg: var(--c-ink);
}

body.theme-approach {
  --header-bg: #f3f1e4;
  --footer-bg: var(--c-sand);
}

body.theme-property {
  --header-bg: var(--c-olive);
  --footer-bg: #e2ceb8;
}

body.theme-about {
  --header-bg: var(--c-sand);
  --footer-bg: var(--c-olive);
}

body.theme-contact {
  --header-bg: var(--c-sand);
  --footer-bg: var(--c-olive);
}

/* En footers de color, atenúa los tonos "muted" para que se lean */
body[class*="theme-"] .site-footer--on-color .site-footer__legal {
  color: inherit;
  opacity: 0.7;
}