/* Smooth anchors */
html {
  scroll-behavior: smooth;
}

/* Footer title never wraps */
.g-footer-title {
  white-space: nowrap;
}

/* Heroes fill the visible viewport on every template */

/* Post hero image (post pages use a different wrapper) */
.g-post-header__image {
  height: 100vh;
}
.g-post-header__image figure {
  height: 100%;
  margin: 0;
}
.g-post-header__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Default header (homepage): visible at load; fades slower after small scroll */
body.home-template .g-header {
  transition: opacity 1.2s ease, transform 1.2s ease;
}
body.home-template .g-header.is-gone {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Homepage header and links = white */
/*body.home-template .g-header,
body.home-template .g-header a,
body.home-template .g-menu,
body.home-template .g-search {
  color: #fff !important; 
}*/

/* Center logo text + slightly bigger */
.g-header .g-logo {
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 auto;
  display: inline-block;
  font-size: 1.12em;
}

/* Homepage hero content — lifted slightly higher and WHITE */
.sp-hero {
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.sp-hero.is-gone {
  opacity: 0;
  transform: translateY(-8px);
}

.sp-brand-left {
  display: grid;
  align-content: center;
  height: 100vh;
  transform: translateY(-6vh);
}
.sp-aman {
  margin: 0 0 0.15rem clamp(1.25rem, 7vw, 8rem);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  opacity: 0.82; /* less faded */
  color: #fff; /* force white */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.sp-brand-left .g-home-slide__title {
  text-align: left;
  font-size: clamp(2.2rem, 5vw, 4rem);
  margin-left: clamp(1.25rem, 7vw, 8rem);
  line-height: 1.05;
  color: #fff; /* force white */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Social icons (YT, X, IG) — white */
.sp-socials {
  display: flex;
  gap: 0.9rem;
  margin: 0 0 0.6rem clamp(1.25rem, 7vw, 8rem);
  opacity: 0.85;
}
.sp-socials a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}
.sp-socials svg {
  width: 18px;
  height: 18px;
}

/* Greek scroll cue at bottom center with pulsing arrow — white */
.sp-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.25rem;
  transform: translateX(-50%);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
  z-index: 3;
  animation: sp-cue-pulse 2.6s ease-in-out infinite;
  white-space: nowrap;
}
.sp-scroll-cue::before {
  content: "↓";
  display: block;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.6;
  animation: sp-cue-down 1.6s ease-in-out infinite;
}
@keyframes sp-cue-pulse {
  0% {
    opacity: 0.7;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(2px) scale(1.06);
  }
  100% {
    opacity: 0.7;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
@keyframes sp-cue-down {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

/* Sticky section nav (after scroll) — dark frosted, WHITE text, no wrap, horizontal */
#sp-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 2rem);
  padding: 0.6rem 1rem;
  z-index: 50;
  color: #fff; /* white text */
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 24, 0.55),
    rgba(20, 20, 24, 0.25)
  );
  backdrop-filter: blur(8px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.6s ease, transform 0.6s ease; /* slower */
  pointer-events: none;
}
#sp-sticky.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#sp-sticky a {
  text-decoration: none;
  color: inherit;
  padding: 0.4rem 0.2rem;
  line-height: 1.1;
}
#sp-sticky .sp-logo {
  font-weight: 700;
  font-size: 1.12em;
} /* slightly larger center */

/* Sections: full viewport, smoother/longer cross-fade */
.sp-section {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  opacity: 0;
  transition: opacity 1.1s ease; /* slower */
}
.sp-section.is-active {
  opacity: 1;
}

.sp-section .sp-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(105%);
  transition: opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease; /* slower */
}
.sp-section .sp-content {
  position: relative;
  max-width: 64ch;
  margin-left: clamp(1.25rem, 7vw, 8rem);
  padding: 1rem 0;
  color: #fff; /* bright white text */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  /*background: color-mix(in srgb, transparent 92%, white); */
  /*border-radius: 0.25rem; */
}
.sp-section h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
}
.sp-section p {
  margin: 0 0 1rem;
}
.sp-btn {
  display: inline-block;
  text-decoration: none;
  padding: 0.6rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 0.35rem;
}

/* Tiny screens */
@media (max-width: 36rem) {
  #sp-sticky {
    font-size: 0.95rem;
    gap: 0.75rem;
  }
  .sp-section .sp-content {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
/* ========== SP HOMEPAGE OVERRIDES (REPLACED) ========== */

/* Easy knobs (change these to adjust size/position/muting) */
:root {
  /* Identity + cue sizes/opacity */
  --sp-identity-size: clamp(
    2.2rem,
    5vw,
    4rem
  ); /* Aman size; socials/cue follow this */
  --sp-identity-opacity: 0.82; /* translucence for Aman + icons + Katabasis */

  /* Social icon fine-tuning */
  --sp-icon-scale: 0.75; /* 0.75 = 25% smaller than Aman */
  --sp-icon-baseline-shift: 0.06em; /* nudges icons down to sit on text baseline */

  /* Hero block placement (nudge up/left) */
  --sp-hero-left: clamp(
    0.75rem,
    6vw,
    6rem
  ); /* left margin for hero text block */
  --sp-hero-offset-x: -3vw; /* negative = nudge left, positive = right */
  --sp-hero-offset-y: -12vh; /* negative = up, positive = down */

  /* Fade timings */
  --sp-hero-content-fade-duration: 1.4s; /* Aman/Some Psychagogue fade */
  --sp-hero-bg-fade-duration: 3.4s; /* hero background image fade (slower) */

  /* Section image muting (stronger by default) */
  --sp-section-image-opacity: 0.9; /* 0 (invisible) … 1 (fully opaque) */
  --sp-section-image-filter: saturate(95%) brightness(0.99) contrast(0.99);

  /* Safe-area padding for mobile bottom insets (iOS) */
  --sp-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Position the hero block (up & left) */
.sp-brand-left {
  align-content: center;
  height: 100vh;
  transform: translate(var(--sp-hero-offset-x), var(--sp-hero-offset-y));
}

/* Identity row: Aman + socials on one line, same baseline */
.sp-identity {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-left: var(--sp-hero-left);
  font-size: var(--sp-identity-size);
}

.sp-aman {
  margin: 0;
  font-size: 1em; /* follows --sp-identity-size */
  line-height: 1.05;
  color: #fff;
  opacity: var(--sp-identity-opacity);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Socials beside Aman, 25% smaller, baseline-aligned */
.sp-socials {
  display: inline-flex;
  gap: 0.9rem;
  margin: 0;
}
.sp-socials a {
  color: #fff;
  opacity: var(--sp-identity-opacity);
  text-decoration: none;
}
.sp-socials svg {
  width: calc(1em * var(--sp-icon-scale));
  height: calc(1em * var(--sp-icon-scale));
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(var(--sp-icon-baseline-shift));
}

/* Main title (Some Psychagogue) */
.sp-brand-left .g-home-slide__title {
  margin-left: var(--sp-hero-left);
  margin-top: 0.2rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
}

/* Katabasis: FIXED to bottom of viewport, large/translucent, with triangle pulse */
.sp-scroll-cue {
  position: fixed;
  left: 50%;
  bottom: calc(
    1.3rem + var(--sp-safe-bottom)
  ); /* sits at viewport bottom, above safe area */
  transform: translateX(-50%);
  font-size: var(--sp-identity-size);
  color: #fff;
  opacity: var(--sp-identity-opacity);
  text-decoration: none;
  z-index: 60;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.sp-scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.98);
}

.sp-scroll-cue::before,
.sp-scroll-cue::after {
  content: "🜄"; /* alchemical water (down triangle w/ line) */
  display: inline-block;
  margin: 0 0.35rem;
  font-size: 0.55em;
  opacity: 0.7;
  animation: sp-tri-pulse 2.2s ease-in-out infinite;
}
.sp-scroll-cue::before {
  animation-delay: 0.15s;
}
.sp-scroll-cue::after {
  animation-delay: 0.3s;
}
@keyframes sp-tri-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translateY(5px) scale(1.08);
    opacity: 1;
  }
}

/* Slower fades: separate content vs background timing */
.sp-hero .g-home-slide__content {
  transition: opacity var(--sp-hero-content-fade-duration) ease,
    transform var(--sp-hero-content-fade-duration) ease;
}
.sp-hero .g-hero-image {
  opacity: 1;
  transition: opacity var(--sp-hero-bg-fade-duration) ease;
}
.sp-hero.is-gone .g-home-slide__content {
  opacity: 0;
  transform: translateY(-8px);
}
.sp-hero.is-gone .g-hero-image {
  opacity: 0;
}

/* Muted section images (and where to tweak them) */
.sp-section .sp-bg {
  opacity: var(--sp-section-image-opacity);
  filter: var(--sp-section-image-filter);
}

/* Per-section fine-tuning (optional) — uncomment & adjust:*/
/*signal .sp-bg {
  opacity: 0.3;
  filter: saturate(75%) brightness(0.7) contrast(0.88);
}
#map .sp-bg {
  opacity: 0.3;
  filter: saturate(75%) brightness(0.7) contrast(0.88);
}
#path .sp-bg {
  opacity: 0.3;
  filter: saturate(75%) brightness(0.7) contrast(0.88);
}
#train .sp-bg {
  opacity: 0.3;
  filter: saturate(75%) brightness(0.7) contrast(0.88);
}*/

/* === Light/Dark logo color (header) === */
:root {
  --sp-logo-color: rgb(25, 24, 24);
} /* Light mode default = black */
@media (prefers-color-scheme: dark) {
  :root {
    --sp-logo-color: rgb(218, 218, 218);
  } /* Dark mode = white */
}

/* Apply to the center logo text (ψυχαγωγός) in the header */
.g-header .g-logo {
  color: var(--sp-logo-color) !important;
}
header.g-header .g-logo {
  color: var(--sp-logo-color) !important;
}
/* ===== FORCE DARK MODE DEFAULTS ===== */
:root {
  color-scheme: dark; /* native controls, scrollbars, etc. */
  --sp-logo-color: #fff; /* header logo color */
  --sp-nav-fg: #fff; /* hero/identity/sticky text if you use this var */
  --sp-bg: #0b0b0e; /* site background */
}

/* Base background/text (adjust if your theme sets these elsewhere) */
html,
body {
  background: var(--sp-bg);
  color: #fff;
}

/* Header text in dark */
.g-header .g-logo,
.g-header .g-nav a,
.g-header .g-menu,
.g-header .g-search {
  color: #fff !important;
}

/* Sticky section nav in dark */
#sp-sticky {
  color: #fff;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 24, 0.55),
    rgba(20, 20, 24, 0.25)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Kill any previous light/dark auto rules
@media (prefers-color-scheme: light) {
  :root {
    --noop: initial;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --noop: initial;
  }
}
*/
/* === Section typography & spacing system === */
:root {
  --sp-stack-gap: clamp(
    0.6rem,
    1.6vw,
    1rem
  ); /* default gap between stacked items */
  --sp-stack-gap-tight: clamp(0.35rem, 1vw, 0.6rem);
}

.sp-content {
  color: #fff; /* bright text */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  max-width: 68ch; /* a bit wider for multi-paragraph copy */
}

/* Stack layout: adds consistent vertical rhythm between children */
.sp-stack > * + * {
  margin-top: var(--sp-stack-gap);
}

/* Title, lead, note */
.sp-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0;
}

.sp-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.45;
  opacity: 0.95;
  max-width: 60ch;
}

.sp-note {
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0.9;
}
/* Headings (Signal, Map, etc.) */
.sp-content h2 {
  font-size: clamp(2.55rem, 5.1vw, 3.4rem); /* was ~2rem → now 50% bigger */
  font-weight: 700;
  line-height: 1.15;
}
/* Paragraph defaults inside sp-content */
.sp-content p {
  margin: 0; /* stack handles spacing */
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.7;
  font-style: italic;
  max-width: 68ch;
}
.sp-content h2 + p {
  margin-top: 1.5rem; /* space between heading and first paragraph */
}

.sp-content p + p {
  margin-top: 1.1rem; /* space between consecutive paragraphs */
}

/* Button row spacing & alignment */
.sp-btn-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 3rem; /* add space above the buttons */
  margin-bottom: 2rem; /* optional: add space below */
  /*margin-top: var(--sp-stack-gap-tight);*/
}

/* Button aesthetic (keeps your existing border style) */
.sp-btn {
  display: inline-block;
  text-decoration: none;
  padding: 1.02rem 1.7rem;
  font-size: 1.19rem;
  font-weight: 600;
  border: 1px solid currentColor;
  border-radius: 0.4rem;
  line-height: 1.1;
}

/* Tighter rhythm when brief copy */
.sp-content .sp-lead + p {
  margin-top: var(--sp-stack-gap-tight);
}
.sp-content .sp-btn-row + .sp-note {
  margin-top: var(--sp-stack-gap-tight);
}

/* Small screens: keep margins breathing */
@media (max-width: 36rem) {
  .sp-content {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
/* Remove newsletter everywhere (BEM classes used by the theme) */
.g-newsletter,
.g-newsletter__wrapper {
  display: none !important;
}
/* ——— PAGE heroes: exactly full viewport ——— */
.g-generic-hero.with-image {
  height: 100vh !important; /* exact fill */
  min-height: 100vh !important; /* belt + suspenders */
}

/* Make sure the background image stretches with the wrapper */
.g-generic-hero .g-hero-image {
  position: absolute !important;
  inset: 0 !important; /* top/right/bottom/left: 0 */
}
.g-generic-hero .g-hero-image__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Homepage image CTA footer */
.sp-cta-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 1rem;
  background: linear-gradient(
    to top,
    rgba(20, 20, 24, 0.7),
    rgba(20, 20, 24, 0.4)
  );
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sp-cta-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}
.sp-cta-img {
  width: clamp(200px, 30vw, 480px); /* adjust size here */
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.45));
}