/*
 * SIYG · Home photo header 2.9.83
 * Alcance: solo Home y solo cuando existe una fotografia seleccionada.
 * No modifica estructura, textos, tamaños, orden de bloques ni comportamiento de páginas interiores.
 */

body.siyg-home-photo-active .site-header {
  position: fixed;
  width: 100%;
  background: transparent;
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.siyg-home-photo-active .site-header:not(.is-scrolled) .brand,
body.siyg-home-photo-active .site-header:not(.is-scrolled) .brand:link,
body.siyg-home-photo-active .site-header:not(.is-scrolled) .brand:visited,
body.siyg-home-photo-active .site-header:not(.is-scrolled) .menu,
body.siyg-home-photo-active .site-header:not(.is-scrolled) .menu > li > a,
body.siyg-home-photo-active .site-header:not(.is-scrolled) .menu-toggle {
  color: var(--siyg-editorial-paper);
}

/* Estado inicial de Home: el mismo isotipo subido en WordPress se presenta en blanco sobre la fotografía.
   No se duplica el archivo ni se modifica su color de origen. */
body.siyg-home-photo-active .site-header:not(.is-scrolled) .brand-mark {
  filter: none;
}

body.siyg-home-photo-active .site-header:not(.is-scrolled) .brand img {
  filter: brightness(0) invert(1);
}

body.siyg-home-photo-active .site-header:not(.is-scrolled) .menu > li > a:hover,
body.siyg-home-photo-active .site-header:not(.is-scrolled) .menu > li > a:focus-visible,
body.siyg-home-photo-active .site-header:not(.is-scrolled) .brand:hover,
body.siyg-home-photo-active .site-header:not(.is-scrolled) .brand:focus-visible {
  color: var(--siyg-editorial-paper);
  opacity: .76;
}

body.siyg-home-photo-active .site-header.is-scrolled {
  background: color-mix(in srgb, var(--siyg-editorial-paper) 94%, transparent);
  background-color: color-mix(in srgb, var(--siyg-editorial-paper) 94%, transparent);
  border-bottom-color: rgba(3, 28, 44, .16);
  box-shadow: 0 8px 28px rgba(23, 21, 18, .06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.siyg-home-photo-active .site-header.is-scrolled .brand,
body.siyg-home-photo-active .site-header.is-scrolled .brand:link,
body.siyg-home-photo-active .site-header.is-scrolled .brand:visited,
body.siyg-home-photo-active .site-header.is-scrolled .menu,
body.siyg-home-photo-active .site-header.is-scrolled .menu > li > a,
body.siyg-home-photo-active .site-header.is-scrolled .menu-toggle {
  color: var(--siyg-editorial-petroleum);
}

/* Al abandonar la primera pantalla recuperamos el color original del isotipo. */
body.siyg-home-photo-active .site-header.is-scrolled .brand-mark,
body.siyg-home-photo-active .site-header.is-scrolled .brand img {
  filter: none;
}

/* La portada empieza en el borde superior: la cabecera flota sobre la misma fotografía. */
body.siyg-home-photo-active .hero,
body.siyg-home-photo-active.front-page .hero,
body.siyg-home-photo-active.home .hero {
  margin-top: 0;
  background-color: var(--siyg-editorial-petroleum);
  background-image:
    linear-gradient(
      180deg,
      rgba(3, 28, 44, calc(var(--siyg-home-photo-overlay) + .14)) 0%,
      rgba(3, 28, 44, var(--siyg-home-photo-overlay)) 38%,
      rgba(3, 28, 44, calc(var(--siyg-home-photo-overlay) + .08)) 100%
    ),
    var(--siyg-home-photo-desktop);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--siyg-home-photo-x) var(--siyg-home-photo-y);
}

/* Conservamos textura y viñeta originales, pero sin volver a pintar el degradado sólido del hero. */
body.siyg-home-photo-active .hero::before {
  opacity: .09;
}

body.siyg-home-photo-active .hero::after {
  background:
    linear-gradient(180deg, rgba(3, 28, 44, .34) 0%, transparent 22%, transparent 70%, rgba(3, 28, 44, .34) 100%),
    radial-gradient(ellipse at center, transparent 35%, rgba(3, 28, 44, .2) 78%, rgba(3, 28, 44, .38) 120%);
}

/* El texto original permanece intacto; solo aseguramos contraste sobre fotografía. */
body.siyg-home-photo-active .hero-copy h1 {
  color: var(--siyg-editorial-paper);
}

body.siyg-home-photo-active .hero-copy .lead,
body.siyg-home-photo-active .hero-copy .hero-note {
  color: color-mix(in srgb, var(--siyg-editorial-paper) 82%, var(--siyg-editorial-sand));
}

body.siyg-home-photo-active .hero-copy h1 em,
body.siyg-home-photo-active .hero-copy .hero-eyebrow {
  color: var(--siyg-editorial-earth);
}

@media (max-width: 900px) {
  body.siyg-home-photo-active .site-header .navbar.is-open .menu {
    border-color: rgba(3, 28, 44, .12);
    background: var(--siyg-editorial-paper);
    color: var(--siyg-editorial-petroleum);
    box-shadow: 0 20px 54px rgba(23, 21, 18, .14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.siyg-home-photo-active .site-header .navbar.is-open .menu a,
  body.siyg-home-photo-active .site-header:not(.is-scrolled) .navbar.is-open .menu a {
    color: var(--siyg-editorial-petroleum);
  }

  body.siyg-home-photo-active .site-header .navbar.is-open .menu a:hover,
  body.siyg-home-photo-active .site-header .navbar.is-open .menu a:focus-visible {
    color: var(--siyg-editorial-earth);
  }
}

@media (max-width: 700px) {
  body.siyg-home-photo-active .hero,
  body.siyg-home-photo-active.front-page .hero,
  body.siyg-home-photo-active.home .hero {
    background-image:
      linear-gradient(
        180deg,
        rgba(3, 28, 44, calc(var(--siyg-home-photo-overlay) + .16)) 0%,
        rgba(3, 28, 44, var(--siyg-home-photo-overlay)) 42%,
        rgba(3, 28, 44, calc(var(--siyg-home-photo-overlay) + .1)) 100%
      ),
      var(--siyg-home-photo-mobile);
    background-position: var(--siyg-home-photo-mobile-x) var(--siyg-home-photo-mobile-y);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.siyg-home-photo-active .site-header {
    transition: none;
  }
}

/* ==========================================================
   2.9.80 · Ajuste móvil conservador
   Perímetro: solo Home con fotografía activa, <= 700 px.
   - Reserva aire real entre cabecera y H1.
   - Elimina el marco visual de la hamburguesa sin perder un
     estado de foco perceptible para teclado.
   Escritorio y resto del sitio quedan intactos.
   ========================================================== */
@media (max-width: 700px) {
  body.siyg-home-photo-active .hero-grid,
  body.siyg-home-photo-active.front-page .hero-grid,
  body.siyg-home-photo-active.home .hero-grid {
    transform: translateY(
      calc(
        var(--hero-shift-y)
        + var(--hero-shift-y-mobile)
        + clamp(72px, 18vw, 96px)
      )
    );
  }

  body.siyg-home-photo-active .site-header .menu-toggle,
  body.siyg-home-photo-active .site-header .menu-toggle:hover,
  body.siyg-home-photo-active .site-header .menu-toggle:active,
  body.siyg-home-photo-active .site-header .menu-toggle:focus,
  body.siyg-home-photo-active .site-header .menu-toggle:focus-visible {
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }

  body.siyg-home-photo-active .site-header .menu-toggle:focus-visible .menu-toggle-lines {
    opacity: .72;
    transform: scale(1.06);
    transform-origin: center;
  }
}

/* ==========================================================
   2.9.83 · Móvil: fotografía a pantalla completa
   Perímetro: solo Home con fotografía activa, <= 700 px.
   La primera pantalla cubre el viewport completo sin alterar
   la composición de escritorio ni los bloques posteriores.
   ========================================================== */
@media (max-width: 700px) {
  body.siyg-home-photo-active .hero,
  body.siyg-home-photo-active.front-page .hero,
  body.siyg-home-photo-active.home .hero {
    min-height: 100svh;
    min-height: 100dvh;
    background-size: cover;
  }
}