/* Shared accessibility rules for every page: skip link, focus rings, touch targets, text size, motion. */

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 12px 18px; border-radius: 10px;
  background: var(--gold, #FFD700); color: var(--bg, #080010); font: 700 16px "Lora", Georgia, serif; text-decoration: none;
}
.skip-link:focus { left: 16px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* A clear gold ring for keyboard users. */
:focus-visible { outline: 3px solid var(--gold, #FFD700); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* Touch targets: at least 44 by 44 CSS pixels. */
button, select, .btn, .pill-btn, .gold-btn, .icon, .link-btn, .chips button, .footer button, .sizes button, .day .btn {
  min-height: 44px; min-width: 44px;
}
.chips button, .footer button, .sizes button, .btn.small, .btn.ghost, .icon, .link-btn {
  display: inline-flex; align-items: center; justify-content: center;
}

/* Small labels: 14px minimum. */
.label, .version-label, .tag, .progress, .kjv, .meta, .byline, .times, .btn.small, .btn.ghost.small, .get { font-size: 14px; }

/* Header links are full-height targets too. */
nav a, .brand, .get { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

/* People who ask for less motion get none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ad spaces: hidden until ads are switched on; clearly labelled when shown. */
.ad-slot { width: min(780px, 100%); margin: 8px auto; }
.ad-slot[hidden] { display: none; }
.ad-label { margin: 0 0 6px; font: 600 12px "Cinzel", Georgia, serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted, #aaa); text-align: center; }

/* Page footer links, shared by every page. */
.page-foot { padding: 22px 4vw 30px; color: var(--muted, #aaa); font-size: 16px; border-top: 1px solid var(--line-faint, rgba(255, 215, 0, 0.22)); text-align: center; }
.page-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--gold-soft, #E6BE8A); }

/* Page translator (opt-in) */
.translate-box { width: min(760px, 92vw); margin: 24px auto 40px; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(255, 215, 0, 0.3); background: var(--surface, #150A25); color: var(--text, #F0E8FF); text-align: center; }
.translate-box h2 { margin: 0 0 6px; font: 800 18px "Cinzel", Georgia, serif; color: var(--gold, #FFD700); letter-spacing: 0.04em; }
.translate-box p { margin: 0 0 12px; font: 400 16px "Lora", Georgia, serif; }
.translate-box button { min-height: 44px; }

/* Translate bar: one slim line under the header, so visitors see it without scrolling. */
.translate-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 8px 4vw; font: 15px/1.4 "Lora", Georgia, serif; color: var(--text, #F0E8FF);
  background: var(--surface, #150A25); border-bottom: 1px solid var(--line-faint, rgba(255, 215, 0, 0.22));
}
.translate-bar button {
  font: 700 13px "Cinzel", Georgia, serif; letter-spacing: 0.06em; color: var(--gold, #FFD700); background: none;
  border: 1px solid var(--gold, #FFD700); border-radius: 8px; padding: 6px 12px; min-height: 36px; cursor: pointer;
}
.translate-bar button[disabled] { opacity: 0.7; cursor: default; }
.translate-bar #google_translate_element[hidden] { display: none; }

/* Home page links to topic search and reading plans. */
.link-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0 0 24px; }
.card-link {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px;
  border: 1px solid var(--line-faint, rgba(255, 215, 0, 0.22)); background: var(--card, #12081F); color: var(--text, #F0E8FF); text-decoration: none;
}
.card-link strong { font: 800 18px/1.2 "Cinzel", Georgia, serif; color: var(--gold-soft, #E6BE8A); letter-spacing: 0.04em; }
.card-link span { font-size: 15px; color: var(--muted, rgba(240, 232, 255, 0.72)); }
.card-link:hover, .card-link:focus-visible { border-color: var(--gold, #FFD700); }


/* Ad spaces: reserved height so the layout stays still, nothing visible until an ad loads. */
.ad-slot { min-height: 250px; margin: 12px auto; }
.ad-slot.ad-small { min-height: 90px; margin: 6px auto; }
.ad-slot .ad-label { display: none; }
.ad-slot.has-ad .ad-label { display: block; }

/* Light look. Dark is the default; these values apply when the reader picks light, or the device prefers it. */
html[data-theme="light"] {
  color-scheme: light;
  --bg-top: #F4EEF9; --bg: #FBF7EF; --bg-bottom: #F1EBE0;
  --surface: #F3EEF8; --card: #FFFFFF;
  --gold: #7A5800; --gold-deep: #8A6500; --gold-soft: #5E4A1A; --amber: #8A6500;
  --text: #1B1230; --muted: rgba(27, 18, 48, 0.74);
  --line: rgba(122, 88, 0, 0.5); --line-faint: rgba(122, 88, 0, 0.25);
  /* Guides page names */
  --ink: #FBF7EF; --panel: #FFFFFF; --panel-2: #F3EEF8; --gold-hi: #7A5800; --cream: #1B1230;
  --violet: #6B3A8A; --glow: #F4EEF9;
}
html[data-theme="light"] .btn, html[data-theme="light"] .play-button { color: #FFFFFF; }
html[data-theme="light"] select { background-color: #FFFFFF; color: #1B1230; border-color: rgba(122, 88, 0, 0.5); }
html[data-theme="light"] .ghost { color: #7A5800; border-color: #7A5800; background: transparent; }
html[data-theme="light"] .card, html[data-theme="light"] .post-card { background: #FFFFFF; }
html[data-theme="light"] .translate-bar button, html[data-theme="light"] .theme-toggle { color: var(--gold); }

/* Light mode on/off switch in the header. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; cursor: pointer;
  background: none; border: 0; color: var(--gold, #FFD700); font: 600 13px "Cinzel", Georgia, serif; letter-spacing: 0.08em;
}
.theme-toggle .switch-track {
  position: relative; width: 44px; height: 24px; border-radius: 999px; border: 1px solid var(--gold, #FFD700);
  background: transparent; transition: background 0.2s;
}
.theme-toggle .switch-knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold, #FFD700); transition: transform 0.2s;
}
.theme-toggle[aria-checked="true"] .switch-knob { transform: translateX(20px); }
.theme-toggle[aria-checked="true"] .switch-track { background: var(--gold, #FFD700); }
.theme-toggle[aria-checked="true"] .switch-knob { background: #FFFFFF; }
.theme-toggle:focus-visible { outline: 3px solid var(--gold, #FFD700); outline-offset: 3px; border-radius: 8px; }

/* Reader: the ad space sits in the flex column, so only the column gap separates it from the chapter. */
.shell > .ad-slot { margin: 0; }
.shell { gap: 10px; }

/* Articles page: the five AI writing personas. Labelled, never presented as real people. */
.writers { margin: 24px 0 28px; }
.writers h2 { font: 800 22px "Cinzel", Georgia, serif; color: var(--gold, #FFD700); margin: 0 0 4px; }
.writers .writers-note { margin: 0 0 14px; font-size: 15px; color: var(--muted, rgba(240, 232, 255, 0.72)); }
.writers ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.writers li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.writers img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold, #FFD700); }
.writers strong { font: 800 16px "Cinzel", Georgia, serif; color: var(--text, #F0E8FF); }
.writers li span { font-size: 14px; color: var(--muted, rgba(240, 232, 255, 0.72)); }
.writers em { font-style: normal; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold, #FFD700); }

/* Topic search page: the picture at the top, like the home page. */
.search-hero { margin: 0 0 18px; border-radius: 22px; overflow: hidden; border: 2px solid var(--line, rgba(255, 215, 0, 0.55)); }
.search-hero img { display: block; width: 100%; height: auto; }

/* Back to top: appears after scrolling down, on every page. */
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 880; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--gold, #FFD700); background: var(--surface, #150A25); color: var(--gold, #FFD700);
  font: 700 13px "Cinzel", Georgia, serif; letter-spacing: 0.08em; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.to-top[hidden] { display: none; }

/* Pages that are not the home page: a clear way back. */
.page-back { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 14px; font: 600 15px "Lora", Georgia, serif; color: var(--gold, #FFD700); text-decoration: underline; }

/* Section tabs: Today, Find a verse, Reading plans. */
.section-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 10px 4vw 0; }
.section-tabs a { font: 700 14px "Cinzel", Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text, #F0E8FF); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 3px solid transparent; }
.section-tabs a.on, .section-tabs a[aria-current="page"] { color: var(--gold, #FFD700); border-bottom-color: var(--gold, #FFD700); }

/* Connect block on every page: Get the app row, follow links and email sign-up. */
.follow { width: min(760px, 92vw); margin: 32px auto 0; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.follow-app {
  display: flex; align-items: center; gap: 16px; width: 100%; max-width: 520px; box-sizing: border-box; min-height: 72px; padding: 12px 18px;
  border-radius: 18px; border: 1px solid var(--line, rgba(122, 88, 0, 0.5)); background: var(--card, #FFFFFF); color: var(--text, #1B1230);
  text-decoration: none; text-align: left; box-shadow: 0 2px 10px rgba(60, 40, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.follow-app:hover, .follow-app:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(60, 40, 0, 0.14); }
.follow-app img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.follow-app > span { flex: 1; display: grid; gap: 2px; font: 700 17px "Cinzel", Georgia, serif; letter-spacing: 0.02em; }
.follow-app small { display: block; font: 400 14px "Lora", Georgia, serif; color: var(--muted, rgba(27, 18, 48, 0.74)); }
.follow-app::after { content: "\203A"; flex: none; font: 400 30px "Lora", Georgia, serif; line-height: 1; color: var(--gold, #7A5800); }
.follow-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.follow-links > span { width: 100%; font: 700 12px "Cinzel", Georgia, serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted, rgba(27, 18, 48, 0.74)); }
.follow-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; box-sizing: border-box;
  border: 1px solid var(--line-faint, rgba(122, 88, 0, 0.25)); background: var(--card, #FFFFFF); color: var(--gold-soft, #5E4A1A);
  font: 600 15px "Lora", Georgia, serif; text-decoration: none;
}
.follow-links a:hover, .follow-links a:focus-visible { border-color: var(--line, rgba(122, 88, 0, 0.5)); background: var(--surface, #F3EEF8); }
.follow-links a svg { width: 18px; height: 18px; margin-right: 8px; flex: none; }
.signup { width: min(760px, 92vw); margin: 28px auto 0; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line-faint, rgba(255, 215, 0, 0.22)); background: var(--surface, #150A25); }
.signup[hidden] { display: none; }
.signup h2 { margin: 0 0 6px; font: 800 18px "Cinzel", Georgia, serif; color: var(--gold, #FFD700); letter-spacing: 0.04em; }
.signup > p { margin: 0 0 12px; font: 400 16px "Lora", Georgia, serif; }
.signup-form { display: grid; gap: 10px; }
.signup-form label { font: 600 15px "Lora", Georgia, serif; }
.signup-form input[type="email"] {
  min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(255, 215, 0, 0.55));
  background: var(--card, #12081F); color: var(--text, #F0E8FF); font: 16px "Lora", Georgia, serif;
}
.signup-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.signup-consent input { min-width: 20px; min-height: 20px; margin-top: 4px; }
.signup-form .btn { justify-self: start; }
.signup-status { min-height: 1.4em; margin: 0; }