/*
Theme Name: Sally
Theme URI: https://example.org/sally
Description: A one-page block theme presenting the Scholars Commission report on the Jefferson-Hemings controversy, including a page-turning reader for the digital summary.
Author: Madal Bal
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sally
Tags: one-column, full-site-editing, block-patterns, editor-style
*/

/* ---------------------------------------------------------------------------
   Local aliases for the theme.json presets. Everything below is written against
   these, so the palette can be retuned from theme.json alone.
   ------------------------------------------------------------------------- */
:root {
  --navy: var(--wp--preset--color--navy);
  --navy-deep: var(--wp--preset--color--navy-deep);
  --gold: var(--wp--preset--color--gold);
  --crimson: var(--wp--preset--color--crimson);
  --cream: var(--wp--preset--color--cream);
  --paper: var(--wp--preset--color--paper);
  --ink: var(--wp--preset--color--ink);
  --muted: var(--wp--preset--color--muted);

  --sans: var(--wp--preset--font-family--dm-sans);
  --serif: var(--wp--preset--font-family--caslon-text);
  --display: var(--wp--preset--font-family--caslon-display);

  --line: rgba(18, 36, 60, 0.12);
  --shell: #091320;
  --gutter: 6vw;
}

body {
  font-size: 1.05rem;
  line-height: 1.65;
}

/* WordPress spaces the top-level blocks apart with --wp--style--block-gap,
   which lands 24px of margin between the sticky header and main. Every section
   here carries its own padding, so that flow gap is not wanted. */
.wp-site-blocks > * {
  margin-block-start: 0;
}

/* Sections are full-bleed. The template keeps main and post-content on a flow
   layout rather than a constrained one for the same reason: a constrained
   post-content wrapper picks up max-width from
   `.is-layout-constrained > :where(:not(.alignfull))` and quietly caps every
   section inside it at the content width, however full-width the section
   itself claims to be. */
.sally-hero,
.sally-section,
.sally-reader-section,
.sally-closing {
  width: 100%;
  max-width: none;
  /* Also zeroes the 24px that `:where(.is-layout-flow) > *` would otherwise
     insert between consecutive sections; they are meant to butt together, the
     colour change alone marking the boundary. */
  margin: 0;
}

/* Sections stretch edge to edge; their own padding provides the gutter. */
.sally-hero,
.sally-section,
.sally-reader-section,
.sally-closing {
  padding: 4.5rem var(--gutter);
}

/* ------------------------------ header ---------------------------------- */

.sally-header {
  position: sticky;
  top: 0;
  z-index: 10;
  gap: 1.5rem;
  padding: 0.9rem var(--gutter);
  background: rgba(9, 19, 32, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(246, 241, 231, 0.12);
  color: var(--cream);
}

/* The navigation block sets `color: inherit` on its links, so they follow
   whatever the header inherits -- which, without the rule above, was the body
   ink colour on a near-black bar. Both are set: the inherited colour for
   anything the block adds (the mobile toggle, submenu chevrons), and an
   explicit one for links. */
.sally-header a {
  color: rgba(246, 241, 231, 0.82);
  text-decoration: none;
}

.sally-header a:hover {
  color: var(--gold);
}

.sally-header .wp-block-navigation {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sally-header .wp-block-navigation a {
  text-decoration: none;
  color: rgba(246, 241, 231, 0.82);
}

.sally-header .wp-block-navigation a:hover { color: var(--gold); }

.sally-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--navy-deep);
}

.sally-header-cta a {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.15rem;
}

.sally-header-cta a:hover { color: var(--gold); }

/* ------------------------------- hero ----------------------------------- */

.sally-hero {
  position: relative;
  isolation: isolate;
  padding-top: 5rem;
  padding-bottom: 4.5rem;
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  background: var(--navy-deep);
  color: var(--cream);
  overflow: hidden;
}

/* Light radiating outward from the cover. */
.sally-hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 62% at var(--glow-x, 74%) var(--glow-y, 50%),
      rgba(197, 163, 90, 0.30) 0%,
      rgba(197, 163, 90, 0.14) 26%,
      rgba(38, 62, 94, 0.30) 52%,
      rgba(11, 24, 41, 0) 78%),
    radial-gradient(85% 95% at var(--glow-x, 74%) var(--glow-y, 50%),
      rgba(120, 152, 196, 0.16) 0%,
      rgba(11, 24, 41, 0) 70%);
}

.sally-hero__inner {
  position: relative;
  width: 100%;
  gap: 4vw;
}

.sally-hero h1 {
  margin: 0 0 1.2rem;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.sally-dek {
  margin: 0 0 1.8rem;
  max-width: 38rem;
  color: rgba(246, 241, 231, 0.74);
  font-size: 1.08rem;
}

.sally-hero .wp-block-buttons {
  align-items: center;
  gap: 1.2rem 1.8rem;
}

.sally-hero .wp-block-button__link {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
}

/* The secondary hero action is a plain text link, not a pill. */
.sally-hero .wp-block-button.is-style-sally-text .wp-block-button__link {
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(246, 241, 231, 0.9);
}

.sally-hero .wp-block-button.is-style-sally-text .wp-block-button__link:hover { color: var(--gold); }

.sally-hero__art .wp-block-image {
  margin: 0 auto;
  max-width: 26rem;
  background: rgba(246, 241, 231, 0.08);
  padding: 0.7rem;
  border: 1px solid rgba(246, 241, 231, 0.14);
  box-shadow: 0 0 4rem #224877, 0 28px 60px #183051;
}

.sally-hero__art img { width: 100%; height: auto; display: block; }

/* ---------------------------- story cards -------------------------------- */

.sally-section { background-color: var(--cream); }

.sally-section > h2,
.sally-film h2,
.sally-reader-section h2,
.sally-closing blockquote {
  font-family: var(--display);
  font-weight: 400;
}

.sally-section > h2 {
  margin: 0 0 2.2rem;
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--navy);
}

.sally-story-grid { gap: 1.2rem; }

.sally-card {
  background: var(--paper);
  padding: 1.5rem 1.4rem 1.3rem;
  border: 1px solid var(--line);
}

.sally-card h3 {
  margin: 0.35rem 0 0.7rem;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy);
}

.sally-card p { margin: 0 0 1rem; color: var(--muted); font-size: 0.98rem; }

.sally-kicker {
  display: block;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.sally-card-link {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sally-card-link a {
  text-decoration: none;
  color: var(--crimson);
}

.sally-card.is-style-dark {
  background: var(--navy);
  color: var(--cream);
  border-color: transparent;
}

.sally-card.is-style-dark h3 { color: var(--cream); }
.sally-card.is-style-dark p { color: var(--cream); opacity: 0.86; }
.sally-card.is-style-dark .sally-card-link a { color: var(--gold); opacity: 1; }

/* ------------------------------- reader ---------------------------------- */

.sally-reader-section {
  padding-inline: 4vw;
  padding-bottom: 5rem;
  background: var(--navy-deep);
  color: var(--cream);
}

.sally-reader-intro {
  margin: 0 auto 2.2rem;
  max-width: 72rem;
  gap: 1.5rem 3rem;
}

.sally-reader-section h2 {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3rem);
}

.sally-reader-intro p {
  margin: 0;
  color: rgba(246, 241, 231, 0.72);
}

.wp-block-sally-reader {
  margin-inline: auto;
  max-width: 72rem;
}

.sally-reader-shell {
  background: var(--shell);
  border: 1px solid rgba(246, 241, 231, 0.12);
}

.sally-reader-toolbar,
.sally-reader-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  font-family: var(--sans);
}

.sally-reader-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sally-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #3dcf8e;
  box-shadow: 0 0 0 4px rgba(61, 207, 142, 0.18);
}

.sally-page-status {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.sally-page-status i { font-style: normal; opacity: 0.45; margin: 0 0.25rem; }

.sally-icon-button,
.sally-turn-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}

.sally-icon-button {
  font-size: 1.1rem;
  padding: 0.2rem 0.35rem;
}

.sally-book-stage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem 1rem;
  outline: none;
}

.sally-book {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  min-height: 28vw;
}

.sally-book.is-turning-next .sally-paper-right,
.sally-book.is-turning-previous .sally-paper-left {
  transform: perspective(1200px) rotateY(-6deg);
}

.sally-paper {
  background: #111;
  min-height: 18rem;
  overflow: hidden;
}

.sally-paper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.sally-paper.is-hidden { display: none; }

.sally-turn-button {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(246, 241, 231, 0.25);
  border-radius: 50%;
  font-size: 1.1rem;
}

.sally-turn-button:disabled { opacity: 0.3; cursor: default; }

.sally-reader-footer input[type="range"] {
  flex: 1;
  accent-color: var(--gold);
}

.sally-download-links {
  display: flex;
  gap: 1.1rem;
  font-size: 0.78rem;
}

.sally-download-links a {
  color: var(--gold);
  text-decoration: none;
}

.sally-download-links small {
  display: block;
  color: rgba(246, 241, 231, 0.5);
}

/* -------------------------------- film ----------------------------------- */

.sally-film { gap: 3vw; }

.sally-film h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--navy);
  line-height: 1.1;
}

.sally-film p { color: var(--muted); }

.sally-film .wp-block-embed {
  margin: 0;
  background: #000;
  box-shadow: 0 18px 40px rgba(11, 24, 41, 0.18);
}

.sally-film .wp-block-embed iframe { display: block; border: 0; }

/* ------------------------------- closing --------------------------------- */

.sally-closing {
  padding-bottom: 5rem;
  text-align: center;
}

.sally-closing blockquote {
  margin: 0 auto 1rem;
  max-width: 40rem;
  border: 0;
  padding: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.2;
  color: var(--navy);
}

.sally-closing blockquote p { margin: 0; }

.sally-closing cite {
  display: block;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* -------------------------------- footer --------------------------------- */

.sally-footer {
  gap: 1rem;
  padding: 1.3rem var(--gutter) 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
}

.sally-footer p { margin: 0; }
.sally-footer a { text-decoration: none; color: var(--navy); }

/* ------------------------------ utilities -------------------------------- */

.sally-skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  text-decoration: none;
}

.sally-skip-link:focus { top: 1rem; }

@media (max-width: 980px) {
  .sally-hero {
    min-height: 0;
    padding-top: 3rem;
    --glow-x: 50%;
    --glow-y: 74%;
  }
}

@media (max-width: 600px) {
  :root { --gutter: 1.1rem; }
  .sally-book { grid-template-columns: 1fr; }
  .sally-footer { flex-direction: column; }
}