@import url("/css/nav-book.css");

/* Fixed wave scene behind the page. The photo hero stays opaque and scrolls away. */
:root {
  --sky-daylight: 0;
  --sky-warmth: 0;
  --phil-veil: 0.46;
  /* Night defaults. waves.js snaps these to ink once the day field can carry it. */
  --nav-word: #f5f0e8;
  --nav-deva: #a3b18a;
  --nav-scrim: transparent;
  --blog-hero-title: #f5f0e8;
  --blog-hero-accent: #a3b18a;
  --blog-hero-sub: #d6d3d1;
  --blog-hero-scrim: transparent;
}

html:has(body.has-waves[data-wave-tone="dark"]) {
  background: #1c1917;
}

html:has(body.has-waves[data-wave-tone="light"]) {
  background: #f5f0e8;
}

body.has-waves {
  background: transparent;
}

.wave-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

.wave-scene[data-wave="great-wave"],
.wave-scene[data-wave="moonlit"] {
  background: #1c1917;
}

.wave-scene[data-wave="seigaiha"],
.wave-scene[data-wave="sumi-e"] {
  background: #f5f0e8;
}

.wave-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
}

/* In-flow content sits above the fixed scene. Fixed chrome keeps its own layer. */
body.has-waves > :not(.wave-scene):not(.sticky-bar):not(.topnav-fixed):not(.mob-overlay):not(.mob-drawer):not(.back-strip) {
  position: relative;
  z-index: 1;
}

/* Light paper scenes. The pattern shows through; text stays on a cream veil.
   The book masthead is the exception: title and confirmation copy sit on the field. */
body.has-waves[data-wave-tone="light"] :is(section, footer, .container):not(.dosha-hero):not(.certs-section):not(.schedule):not(.book-hero) {
  background-color: rgba(245, 240, 232, 0.74);
}

body.has-waves[data-wave-tone="light"] .book-hero {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  background-color: transparent;
}

body.has-waves[data-wave-tone="light"] .certs-section {
  background-color: rgba(28, 25, 23, 0.9);
}

/* The scheduler stays a flat paper fill so the form does not sit on the ink.
   No radius or shadow: the intro above it is not a card. */
body.has-waves[data-wave-tone="light"] section.schedule {
  background-color: #f5f0e8;
}

/* Dark scenes. Narrow text columns keep a cream veil. The blog masthead
   and the philosophy line sit in the scene instead of a floating card. */
body.has-waves[data-wave-tone="dark"] :is(section, footer, article, .post-back, .container):not(.philosophy-band):not(.dosha-hero):not(.blog-hero) {
  background-color: rgba(245, 240, 232, 0.82);
}

/* The nav has no bar of its own, so the wordmark follows the sky.
   Cream and sage on the night field; ink and sage-dark once the sky is paper. */
body.has-waves[data-wave-tone="dark"] .topnav {
  background-color: var(--nav-scrim);
}
body.has-waves[data-wave-tone="dark"] .topnav .topnav-brand,
body.has-waves[data-wave-tone="dark"] .topnav .topnav-links a {
  color: var(--nav-word);
}
body.has-waves[data-wave-tone="dark"] .topnav .topnav-brand .nav-deva,
body.has-waves[data-wave-tone="dark"] .topnav .topnav-links a:hover,
body.has-waves[data-wave-tone="dark"] .topnav .topnav-links a.active {
  color: var(--nav-deva);
}
body.has-waves[data-wave-tone="dark"] .topnav .hamburger span {
  background: var(--nav-word);
}

body.has-waves[data-wave-tone="dark"] .blog-hero {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  background-color: var(--blog-hero-scrim);
}
body.has-waves[data-wave-tone="dark"] .blog-hero .blog-eyebrow {
  color: var(--blog-hero-accent);
}
body.has-waves[data-wave-tone="dark"] .blog-hero .blog-title {
  color: var(--blog-hero-title);
}
body.has-waves[data-wave-tone="dark"] .blog-hero .blog-subtitle {
  color: var(--blog-hero-sub);
}
body.has-waves[data-wave-tone="dark"] .blog-hero .blog-rule {
  border-top-color: var(--blog-hero-accent);
}

body.has-waves[data-wave-tone="dark"] .philosophy-band {
  /* Night keeps the original veil. By day it opens and the type turns to ink.
     The swap is immediate: a crossfade of these two passes through unreadable gray. */
  background-color: rgba(28, 25, 23, var(--phil-veil, 0.46));
}

body.has-waves[data-wave-tone="dark"] .philosophy-band .phil-deva {
  color: var(--phil-deva, var(--sage-light));
}

body.has-waves[data-wave-tone="dark"] .philosophy-band .phil-trans {
  color: var(--phil-trans, var(--stone-500));
}

body.has-waves[data-wave-tone="dark"] .philosophy-band .phil-body {
  color: var(--phil-body, var(--stone-300));
}

body.has-waves[data-wave-tone="dark"] .philosophy-band .phil-body strong {
  color: var(--phil-strong, var(--stone-100));
}

footer .footer-services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin: 0 auto 0.75rem;
  max-width: 40rem;
}
footer .footer-services a {
  color: var(--stone-500, #78716c);
  text-decoration: none;
}
footer .footer-services a:hover {
  color: var(--sage-dark, #5a6b4a);
}