/* Loaded AFTER home.css so its overrides win ties. Everything home.css expects from the app but a static page does not have: the colour roles from
   apps/web/app/globals.css, the small reset Tailwind's preflight provided, the logo, and the signup form.
   home.css itself is the source file, unchanged. */

/* Dark is the default; the toggle sets data-theme="light" on <html> (theme.js). home.css only switches on the
   system setting, so both palettes for its own variables are restated here. */
:root {
  color-scheme: dark;
  --canvas: #071425;
  --surface: #0f2740;
  --surface-muted: #16314f;
  --ink: #e8f0fa;
  --ink-muted: #9ab0c8;
  --line: #24405c;
  --focus: #8fbcf5;
  --logo-gold-top: #f6dc96;
  --logo-gold-bottom: #d8a343;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #f4f8fd;
  --surface: #ffffff;
  --surface-muted: #e3eefb;
  --ink: #0c2340;
  --ink-muted: #4d647f;
  --line: #d3deec;
  --focus: #1557b8;
  --logo-gold-top: #a87414;
  --logo-gold-bottom: #85570a;
}

:root .home {
  --deep: #8fbcf5;
  --glow: #ff9447;
  --glow-soft: rgba(255, 148, 71, 0.24);
  --accent-ink: #ffb27a;
  --green: #3f9b70;
  --green-soft: rgba(90, 200, 150, 0.16);
  --green-ink: #8fdcb6;
  --glass: rgba(16, 42, 70, 0.58);
  --glass-line: rgba(232, 240, 250, 0.16);
  --btn-bg: #ff9447;
  --btn-fg: #1d0e02;
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
}

:root[data-theme="light"] .home {
  --deep: #1557b8;
  --glow: #f47b20;
  --glow-soft: rgba(244, 123, 32, 0.24);
  --accent-ink: #b0440a;
  --green: #4fb783;
  --green-soft: rgba(60, 170, 115, 0.16);
  --green-ink: #1b7850;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-line: rgba(255, 255, 255, 0.9);
  --btn-bg: #c94b0c;
  --btn-fg: #ffffff;
  --shadow: 0 24px 60px -28px rgba(12, 35, 64, 0.35);
}

@media print {
  :root, :root[data-theme] {
    --canvas: #ffffff;
    --surface: #ffffff;
    --surface-muted: #f3f3f3;
    --ink: #000000;
    --ink-muted: #444444;
    --line: #bbbbbb;
    --logo-gold-bottom: #85570a;
  }
}

/* reset */
*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: transparent; border: 0; padding: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* logo (the wordmark is text: "CONSTANT" in ink, "PRAY" in a gold gradient) */
.logo { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.75rem; }
.logo img { width: 27px; }
.logo-word { display: flex; align-items: baseline; gap: 0.35em; font: 800 1.2rem/1 var(--font-sans); letter-spacing: 0.04em; white-space: nowrap; text-transform: uppercase; color: var(--ink); }
.logo-pray { background-image: linear-gradient(180deg, var(--logo-gold-top), var(--logo-gold-bottom)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media print { .logo-pray { background: none; color: var(--logo-gold-bottom); } }
@media (forced-colors: active) { .logo-pray { background: none; color: CanvasText; } }

/* what page.tsx set with inline style attributes (the CSP forbids them) */
.home .n1 { --n: 1; }
.home .n2 { --n: 2; }
.home .n3 { --n: 3; }
.home .n4 { --n: 4; }
.home .item:nth-child(2) { --n: 1; }
.home .item:nth-child(3) { --n: 2; }
.home .flush { padding-top: 0; }
.home .no-mb { margin-bottom: 0; }
.home .mt-14 { margin-top: 14px; }
.home .ink { color: var(--ink); }

/* closing box: email signup */
.home .signup { display: flex; flex-wrap: wrap; gap: 10px; width: min(100%, 520px); }
.home .signup input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 1rem var(--font-sans); }
.home .signup input::placeholder { color: var(--ink-muted); }
.home .signup .btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }
.home .turnstile { flex-basis: 100%; max-width: 100%; overflow-x: auto; }
.home .cta-box .consent { font-size: 0.86rem; opacity: 0.92; max-width: 52ch; }
.home .cta-box .form-msg { font-weight: 600; min-height: 1.5em; }
.home .cta-box .form-msg:empty { display: none; }
.home .cta-box :focus-visible { outline-color: #ffffff; }
.home .cta-box a { color: inherit; }

/* anchor jumps land below the sticky nav */
.home [id] { scroll-margin-top: 96px; }

/* phones: the footer blurb takes its own row (home.css leaves it in one 150px column, so the logo overlaps the next one) */
@media (max-width: 520px) { .home .foot-about { grid-column: 1 / -1; } }

/* theme toggle */
.home .theme-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background 0.2s; }
.home .theme-btn:hover { background: var(--surface-muted); }
.home .theme-btn .sun { display: none; }
:root[data-theme="light"] .home .theme-btn .sun { display: block; }
:root[data-theme="light"] .home .theme-btn .moon { display: none; }