/*
 * site.css - public site layout (header/nav, hero, home intro, photo grid, obituary, print).
 * Uses the tokens from base.css only, so light/dark and admin theme overrides apply.
 */

html, body { overflow-x: hidden; }
body { display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }

/* ---------- Header + nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3.5rem;
  position: relative;
}
.site-brand {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border: 0;
  background: transparent;
  color: var(--fg);
  border-radius: var(--radius);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.25rem;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  padding: var(--space-2) 1rem var(--space-4);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.site-nav.is-open { display: flex; }
.site-nav a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding-inline: var(--space-2);
  color: var(--fg);
  text-decoration: none;
  font-size: 1.0625rem;
  border-radius: var(--radius);
}
.site-nav a + a { border-top: 1px solid var(--border); border-radius: 0; }
.site-nav a[aria-current="page"] { color: var(--accent); }

@media (min-width: 40rem) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex;
    position: static;
    flex-direction: row;
    gap: var(--space-1);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .site-nav a { min-height: 2.5rem; padding-inline: var(--space-3); font-size: 0.975rem; }
  .site-nav a + a { border-top: 0; border-radius: var(--radius); }
  .site-nav a:hover { background: var(--card); }
  .site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--space-8);
  padding: var(--space-6) 0 calc(var(--space-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}
.site-footer p { margin-bottom: var(--space-1); }
.site-footer__version { font-size: 0.75rem; opacity: 0.7; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  width: 100%;
  height: min(72vh, 42rem);
  height: min(72svh, 42rem);
  min-height: 18rem;
  overflow: hidden;
  background: var(--card);
}
.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1400ms ease-in-out;
}
.hero__slide.is-active { opacity: 1; }
/* Whole photo, never cropped (cover cut people out of portrait shots): the image is
   contained and the empty space is filled by a blurred, zoomed copy of the same image
   (--hero-bg, set inline for the first slide and by hero.js as each slide loads). */
.hero__slide { overflow: hidden; }
.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-bg, none) center / cover no-repeat;
  filter: blur(28px) saturate(1.1) brightness(0.8);
  transform: scale(1.15);
}
.hero__img {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}
.hero__shade {
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 70%, transparent));
  pointer-events: none;
}
.hero__pause {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgb(0 0 0 / 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0.8;
}
.hero__pause:hover { opacity: 1; }
.hero__pause .i-play { display: none; }
.hero__pause[aria-pressed="true"] .i-play { display: inline; }
.hero__pause[aria-pressed="true"] .i-pause { display: none; }

.hero--empty {
  height: auto;
  min-height: 14rem;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero__empty {
  max-width: 22rem;
  padding: var(--space-6) 1rem;
  text-align: center;
  color: var(--muted);
}
.hero__empty svg { margin: 0 auto var(--space-3); color: var(--accent); }
.hero__empty p { margin: 0; font-family: var(--font-serif); font-size: 1.125rem; font-style: italic; }

@media (min-width: 64rem) {
  .hero { height: min(78vh, 48rem); }
}

/* ---------- Intro ---------- */
.intro {
  max-width: 40rem;
  padding-top: var(--space-6);
  text-align: center;
}
.intro__name { margin-bottom: var(--space-2); }
.intro__dates {
  color: var(--muted);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.intro__tagline {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.4;
}
.intro__rule {
  width: 3rem;
  height: 1px;
  margin: var(--space-5) auto;
  background: var(--accent);
  opacity: 0.6;
}
.intro__excerpt {
  font-size: 1.0625rem;
  text-align: left;
}
@media (min-width: 40rem) { .intro__excerpt { text-align: center; } }
.read-more { font-weight: 500; }
.intro__actions { margin-top: var(--space-5); }
.intro__actions .btn { min-width: 12rem; }

/* ---------- Recent photos grid ---------- */
.recent { margin-top: var(--space-7); }
.section-title { text-align: center; }
.photo-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
@media (min-width: 40rem) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } }
.photo-grid a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: calc(var(--radius) * 0.6);
  background-color: var(--card);
}
.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;  /* square crops: keep faces (upper third) in frame */
  transition: transform 400ms ease;
}
.photo-grid a:hover img { transform: scale(1.03); }

/* ---------- Obituary / prose ---------- */
.obituary { max-width: 40rem; padding-top: var(--space-6); }
.obituary__head { text-align: center; margin-bottom: var(--space-5); }
.prose { font-size: 1.0625rem; line-height: 1.75; overflow-wrap: break-word; }
.prose h2, .prose h3 { margin-top: var(--space-6); }
.prose img { border-radius: var(--radius); margin: var(--space-4) auto; }
.prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.4em;
  line-height: 0.85;
  padding: 0.08em 0.1em 0 0;
  color: var(--accent);
}
.muted-note { color: var(--muted); text-align: center; font-style: italic; }
.obituary__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* ---------- Print ---------- */
@media print {
  :root { --bg: #fff; --fg: #000; --muted: #444; --accent: #000; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .site-header, .site-footer, .skip-link, .no-print, .hero__pause { display: none !important; }
  .site-main { padding: 0; }
  .obituary, .intro { max-width: none; padding: 0; }
  .prose { font-size: 12pt; line-height: 1.55; }
  .prose a { color: #000; text-decoration: none; }
  h1, h2, h3 { break-after: avoid; }
  p { orphans: 3; widows: 3; }
}