/* ==========================================
   33 TRUTHS - MAIN STYLESHEET
   Simple, maintainable, no dependencies
   ========================================== */

/* CSS Variables for easy customization */
/* ==========================================
   DESIGN TOKENS
   Change a value here and it applies everywhere. Nothing in the HTML or the
   JavaScript sets a font size directly - every size on the site comes from
   one of the steps below, either through a component rule or a .t-* utility.
   ========================================== */
:root {
  --color-bg: #E8A87C;
  --color-text: #000;
  --color-border: #ddd;
  --color-button: #333;
  --color-button-hover: #555;
  --max-width: 1000px;

  /* Type scale. Anchored on the reading cards: 15px titles, 16px prose,
     14px sub-titles, 13px supporting detail. */
  --text-2xs: 12px;   /* diagram labels */
  --text-xs:  13px;   /* data blocks, captions, meta, toggle text */
  --text-sm:  14px;   /* sub-card titles, supporting text */
  --text-md:  15px;   /* card titles, secondary prose, site subtitle */
  --text-lg:  16px;   /* body and reading prose, h4 */
  --text-xl:  18px;   /* h3, Tarot entry titles, Go Deeper summary */
  --text-2xl: 22px;   /* h2, snapshot numbers */
  --text-3xl: 28px;   /* site title */

  --leading-tight:   1.35;
  --leading-normal:  1.65;
  --leading-relaxed: 1.8;

  /* Kept as aliases so any older rule still resolves */
  --font-size-base: var(--text-lg);
  --font-size-large: var(--text-xl);
}

/* Type utilities - used where markup needs a size directly. They resolve to
   the tokens above, so sizes are still changed in exactly one place. */
.t-2xs { font-size: var(--text-2xs); }
.t-xs  { font-size: var(--text-xs); }
.t-sm  { font-size: var(--text-sm); }
.t-md  { font-size: var(--text-md); }
.t-lg  { font-size: var(--text-lg); }
.t-xl  { font-size: var(--text-xl); }
.t-2xl { font-size: var(--text-2xl); }
.t-3xl { font-size: var(--text-3xl); }

/* Blueprint diagram labels. SVG can't use a font-size attribute and a token at
   the same time, so the size comes from here. */
.bp-svg-label { font-size: var(--text-2xs); }

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The sticky nav is 73px on desktop but wraps to ~103px on narrow screens,
     so anchor jumps have to clear the tallest case. */
  scroll-padding-top: 110px;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header Styles */
.site-header {
  background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 100%);
  padding: 22px 20px;
  text-align: center;
  border-bottom: 2px solid rgba(0,0,0,0.1);
}

.header-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-text);
  margin-bottom: 6px;
}

/* The wordmark links home. It should read as a logo, not as body copy. */
.site-title a {
  color: inherit;
  text-decoration: none;
}

.site-title a:hover {
  text-decoration: underline;
}

.site-subtitle {
  font-size: var(--text-md);
  color: var(--color-text);
  opacity: 0.8;
  font-style: italic;
}

/* Navigation */
.site-nav {
  background: rgba(0,0,0,0.95);
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: var(--text-lg);
}

.nav-link:hover {
  background: rgba(255,255,255,0.2);
  text-decoration: underline;
}

.nav-link.active {
  background: rgba(255,255,255,0.3);
  text-decoration: underline;
}

/* Nav submenu. The toggle is a <button>, not a link, because there is no
   landing page behind it - it only opens the menu. */
.nav-item {
  position: relative;
  display: flex;
}

.nav-toggle {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,0.2);
}

.nav-caret {
  font-size: var(--text-xs);
  transition: transform 0.3s ease;
}

.nav-toggle[aria-expanded="true"] .nav-caret {
  transform: rotate(180deg);
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: rgba(0,0,0,0.97);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 200;
}

.nav-submenu[hidden] { display: none; }

.nav-sublink {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-md);
  padding: 9px 14px;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.nav-sublink:hover {
  background: rgba(255,255,255,0.2);
  text-decoration: underline;
}

.nav-sublink.active {
  background: rgba(255,255,255,0.3);
  text-decoration: underline;
}

/* Main Content */
.main-content {
  flex: 1;
  padding: 24px 20px 40px;
}

.content-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.main-content h1 {
  font-size: var(--text-2xl);
  margin-bottom: 14px;
  color: var(--color-text);
}

.main-content h2 {
  font-size: var(--text-2xl);
  margin-bottom: 14px;
  color: var(--color-text);
}

.main-content h3 {
  font-size: var(--text-xl);
  margin-top: 30px;
  margin-bottom: 15px;
  color: var(--color-text);
}

.main-content h4 {
  font-size: var(--text-lg);
  margin-top: 20px;
  margin-bottom: 12px;
  color: var(--color-text);
}

.main-content p {
  margin-bottom: 15px;
  line-height: 1.7;
  color: var(--color-text);
}

/* Sections */
.welcome-section {
  margin-bottom: 40px;
}.calculator-section {
  background: rgba(255,255,255,0.2);
  padding: 22px 20px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.info-section {
  background: rgba(255,255,255,0.15);
  padding: 30px 20px;
  border-radius: 12px;
  margin-bottom: 40px;
}

/* Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.info-card {
  background: rgba(255,255,255,0.3);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.1);
}

.info-card h3 {
  font-size: var(--text-xl);
  margin-top: 0;
  margin-bottom: 12px;
}

.info-card p {
  font-size: var(--text-md);
  margin-bottom: 0;
}

/* CTA Button */
.cta-button-container {
  margin-top: 30px;
  text-align: center;
}

.cta-button {
  display: inline-block;
  padding: 16px 32px;
  background: var(--color-button);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--text-xl);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.cta-button:hover {
  background: var(--color-button-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Calculator Wrapper */
.calculator-wrapper {
  background: rgba(255,255,255,0.2);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.1);
}

/* Buttons */
button {
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:active {
  transform: scale(0.98);
}

/* Readings Section */
#readings-section {
  background: rgba(255,255,255,0.15);
  padding: 30px 20px;
  border-radius: 12px;
  border-top: 3px solid rgba(0,0,0,0.2);
}.reading-number {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-button);
  margin-bottom: 10px;
}

.reading-text {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--color-text);
}

.reading-keywords {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text);
}

.reading-fallback-note {
  font-style: italic;
  font-size: var(--text-md);
  margin: 14px 0 8px;
  color: var(--color-text);
  opacity: 0.85;
}

/* "Jump to your detailed reading" note shown after Blueprint / Personal
   Timing results, so the visitor can navigate there by choice, not by
   an automatic scroll. */
.jump-to-reading-note {
  display: block;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  color: var(--color-text);
  text-decoration: underline;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.jump-to-reading-note:hover {
  background: rgba(255,255,255,0.85);
}

/* Quick-links nav inside the readings section */
.quicklink {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 20px;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background 0.2s ease;
}

.quicklink:hover {
  background: rgba(255,255,255,0.85);
}

/* Letter meanings grid */
.letter-meanings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.letter-meaning-item {
  background: rgba(255,255,255,0.35);
  border-radius: 6px;
  padding: 12px;
}

.letter-meaning-item .letter-heading {
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: 6px;
  color: var(--color-button);
}

.letter-meaning-item .letter-text {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.letter-meaning-item .letter-peak {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--color-button);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 4px 4px 0;
  font-size: var(--text-xs);
  line-height: 1.55;
}

.letter-meaning-item .letter-peak-soft {
  border-left-style: dotted;
  font-style: italic;
}

/* Form controls don't inherit typography by default: browsers render them in
   their own font (Arial here, monospace for date inputs), which reads as a
   different typeface from the rest of the page. */
input,
select,
textarea {
  font-family: inherit;
  font-size: var(--text-lg);
}

button {
  font-family: inherit;
  font-size: var(--text-md);
}

/* Calculation / working-out blocks. These were monospace, which read as a
   different typeface from the rest of the site; they now use the site font at
   the same size as the surrounding explanatory text. white-space:pre-wrap is
   kept so the line breaks and indentation in the generated text survive. */
#numerology-combined-calculator pre,
#bp-major,
#bp-minor,
#bp-after81 .bp-line-block {
  font-family: inherit;
  font-size: var(--text-xs);
  line-height: 1.65;
}

/* Two of the blueprint blocks used padded spaces to line their values up,
   which only works in a monospace font. They are built as label/value rows
   instead, so the columns align regardless of typeface.
   minmax(0, max-content) rather than a bare max-content: the longest label
   ("Triangle center (sum of higher sides)") is wider than a phone screen, and
   a bare max-content column refuses to shrink, pushing the whole blueprint
   card off the right edge. The minmax lets it wrap once space runs out while
   still sizing to the content whenever there is room. */
.calc-rows {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, max-content);
  gap: 2px 16px;
  font-size: var(--text-xs);
  line-height: 1.65;
}

.calc-rows .calc-label {
  color: #333333;
}

.calc-rows .calc-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.calc-rows .calc-gap {
  grid-column: 1 / -1;
  height: 8px;
}

/* Sections */
.calculator-section {
  background: rgba(255,255,255,0.2);
  padding: 22px 20px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.reading-number {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-button);
  margin-bottom: 10px;
}

/* Tarot quick-links (inline, next to a result number) */
.tarot-quicklink {
  position: relative;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-button);
  text-decoration: underline;
  margin-left: 8px;
  white-space: nowrap;
}

/* The link's own text box is only 15px tall, which is a poor tap target on
   a phone. This invisible overlay enlarges the touchable area to ~27px.
   It has to be a pseudo-element rather than padding: these links sit in a
   flex summary row, so real padding would grow every row by 9px. */
.tarot-quicklink::after {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -2px;
  right: -2px;
}

/* "Go Deeper" expandable section */
#tarot-section {
  border-top: 2px solid rgba(0,0,0,0.15);
  padding-top: 20px;
}

.tarot-section-summary {
  font-size: var(--text-xl);
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}

.tarot-section-summary::-webkit-details-marker {
  display: none;
}

.tarot-section-summary .chev {
  display: inline-block;
  width: 20px;
}

/* One number's full delineation. Also used, via these same classes, inside the
   collapsible rows on The 78 Numbers and Bible Symbology. */
.tarot-entry {
  background: rgba(255,255,255,0.3);
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid var(--color-button);
}

.tarot-entry-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-button);
}

.tarot-entry-source {
  font-size: var(--text-xs);
  color: var(--color-text);
  opacity: 0.75;
  margin-bottom: 10px;
}

.tarot-subtitle {
  font-weight: 700;
  margin-top: 14px;
  margin-bottom: 4px;
  font-size: var(--text-md);
}

.tarot-text {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* Blueprint major/minor process rows */
.bp-line-block {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.bp-line-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.bp-line-heading { font-weight: 700; margin-bottom: 4px; }
.bp-line-row { margin-left: 12px; }

.bp-line-subrow {
  margin-left: 24px;
  color: #333333;
  opacity: 0.8;
  font-size: var(--text-2xs);
}

/* Footer */
.site-footer {
  background: rgba(0,0,0,0.15);
  padding: 14px 20px;
  border-top: 2px solid rgba(0,0,0,0.1);
  margin-top: auto;
}

/* Button and visitor count share one row, so the footer stays short
   without either element being pressed against the border. The row wraps
   to a stack on narrow screens, keeping the same padding. */
.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Scoped with .site-footer to outrank ".site-footer p" below, which sets
   an 8px bottom margin at the same specificity but later in the file. */
.site-footer .footer-container p { margin-bottom: 0; }

/* line-height:0 collapses the paragraph's own line box so it adds no
   leading around the button. The button restores a normal line-height for
   itself, otherwise it inherits the 0 and loses its text box - which made
   it 24px tall instead of the ~38px its padding describes. */
.site-footer .footer-donate { line-height: 0; }
.site-footer .footer-donate .donate-btn { line-height: 1; }

.site-footer p { margin-bottom: 8px; color: var(--color-text); }
.site-footer a { color: var(--color-text); text-decoration: underline; transition: opacity 0.3s; }
.site-footer a:hover { opacity: 0.7; }

/* Scroll to Top Button */
.scroll-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--color-button);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: var(--text-xl);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 99;
}

.scroll-to-top-btn:hover {
  background: var(--color-button-hover);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* Accessibility */
a { color: inherit; }

.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;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-button);
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 101;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

button:focus,
input:focus,
select:focus,
a:focus {
  outline: 2px solid var(--color-button);
  outline-offset: 2px;
}

/* ==========================================
   CALCULATOR COMPONENTS
   Moved here from an inline <style> block in calculator.html so that card,
   snapshot and accordion styling lives in one file.
   ========================================== */

/* Accordion (DOB Methods) */
.acc-method { border:1px solid #ddd; border-radius:6px; padding:0; margin-bottom: 10px; }
.acc-method > summary { list-style:none; cursor:pointer; padding:10px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; background-color: rgba(255,255,255,0.5); border-radius: 6px; }
.acc-method > summary::-webkit-details-marker { display:none; }
.acc-head { display:flex; gap:10px; align-items:flex-start; flex-wrap:nowrap; flex:1 1 240px; min-width:0; }
.acc-icon { display:inline-block; width:18px; text-align:center; font-weight:700; transform:rotate(0deg); transition:transform .15s ease; flex-shrink:0; }
.acc-icon + span { min-width:0; }
details[open].acc-method .acc-icon { transform:rotate(90deg); }
.acc-body { padding:0 10px 10px 10px; }

/* Personal Months 2-col layout */
.pm-grid { display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width: 720px) { .pm-grid { grid-template-columns:1fr 1fr; } }
.pm-card { border:1px solid #ddd; border-radius:6px; padding:10px; background-color: rgba(255,255,255,0.3); }

/* Letter table compact */
.ltable th, .ltable td { border-bottom:1px solid #f0f0f0; padding:6px; font-size:var(--text-xs); }
.ltable thead th { border-bottom:1px solid #ddd; font-size:var(--text-xs); background-color: rgba(255,255,255,0.3); }

/* Donate button. A plain link rather than Ko-fi's floating widget, so it
   sits in the footer and stays there instead of following the viewport.
   Colors are the ones chosen in the Ko-fi panel. */
/* Scoped to .site-footer so it outranks the generic ".site-footer a"
   underline/color rule, which would otherwise repaint the button. */
.site-footer .donate-btn,
.donate-btn {
  display: inline-block;
  background: #fcbf47;
  color: #323842;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 12px 20px;
  border-radius: 999px;
  transition: all 0.3s ease;
}

.site-footer .donate-btn:hover,
.donate-btn:hover {
  background: #ffd173;
  color: #323842;
  text-decoration: none;
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* Videos page. The thumbnail is a button until it is clicked, at which
   point JS swaps in the real player - so the grid costs one image per
   video instead of one YouTube iframe per video. */
.video-group { margin-bottom: 34px; }
.video-group:last-child { margin-bottom: 0; }

/* min(260px, 100%) rather than a bare 260px: below about 300px wide the
   fixed floor stops exceeding the container, so a card keeps filling the
   width instead of holding 260px and leaving dead space beside it. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 22px;
}

.video-card {
  min-width: 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
}

.video-frame,
.video-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
}

.video-frame {
  position: relative;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

.video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0,0,0,0.66);
  color: #ffffff;
  font-size: var(--text-xl);
  line-height: 58px;
  transition: all 0.3s ease;
}

.video-frame:hover .video-play,
.video-frame:focus-visible .video-play {
  background: var(--color-button);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Scoped to .main-content so it outranks the generic ".main-content h3"
   heading rule, which would otherwise impose its own size and margins. */
.main-content .video-title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin: 6px 0 0;
}

.video-empty {
  font-size: var(--text-sm);
  opacity: 0.8;
}

.retry-btn {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  background: rgba(255,255,255,0.4);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 12px;
  margin-left: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retry-btn:hover {
  background: rgba(255,255,255,0.7);
}

#channels-content { margin-top: 34px; }

.channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.channel-list li {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin-bottom: 4px;
}

/* Credits table on the About page. Reuses .ltable; the wrapper lets a wide
   table scroll on its own instead of pushing the page sideways. */
.credits-scroll { overflow-x: auto; margin: 16px 0; }
.credits-table { border-collapse: collapse; width: 100%; }
.credits-table th { text-align: left; }
.credits-table td { vertical-align: top; }

/* Blueprint diagram wrapper */
.bp-diagram-wrap { border:1px solid #ddd; border-radius:8px; padding:10px; background-color: rgba(255,255,255,0.3); }
.bp-diagram-caption { color:#333; font-size:var(--text-xs); margin-top:6px; }
.bp-note-slot { margin-top:8px; padding:10px; border:1px dashed #ccc; border-radius:8px; color:#333; font-size:var(--text-xs); background-color: rgba(255,255,255,0.2); }

/* Form inputs */
#numerology-combined-calculator input,
#numerology-combined-calculator select { background: rgba(255,255,255,0.8); color: #000; }
#numerology-combined-calculator h2 { font-size: var(--text-xl); margin: 0 0 12px; color: #000; }
#numerology-combined-calculator h3 { font-size: var(--text-lg); margin: 0 0 10px; color: #000; }
#numerology-combined-calculator h4 { margin: 0 0 10px; color: #000; }
#numerology-combined-calculator label span { color: #000; }
#numerology-combined-calculator input[type="checkbox"],
#numerology-combined-calculator input[type="radio"] { accent-color: #333; }

/* Results screen: headline snapshot + collapsible result cards */
.snapshot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:18px 0; }
.snapshot-card { background-color:rgba(255,255,255,0.5); border:1px solid rgba(0,0,0,0.1); border-radius:8px; padding:14px; display:flex; flex-direction:column; }
.snapshot-card .snap-label { font-size:var(--text-xs); line-height:1.35; color:#555; margin:0 0 4px; min-height:2.7em; display:flex; align-items:flex-end; }
.snapshot-card .snap-value { font-size:var(--text-2xl); font-weight:700; margin:0; }
.snapshot-card.snap-highlight { background-color:rgba(51,51,51,0.12); border-color:rgba(51,51,51,0.3); }

.result-card { border:1px solid #ddd; border-radius:8px; padding:14px; margin-bottom:12px; background-color:rgba(255,255,255,0.3); min-width:0; }
.result-card > summary { cursor:pointer; list-style:none; font-weight:700; font-size:var(--text-md); padding:2px 0; display:flex; align-items:baseline; gap:10px; }
.result-card > summary::-webkit-details-marker { display:none; }
.result-card > summary .chev { display:inline-block; width:14px; }
.result-card > summary .label-hide { display:none; }
.result-card[open] > summary .label-show { display:none; }
.result-card[open] > summary .label-hide { display:inline; }
.result-card .result-card-body { margin-top:12px; }
.result-card > summary .card-toggle-text,
.result-subcard > summary .card-toggle-text { font-weight:400; color:#555; font-size:var(--text-xs); margin-left:auto; white-space:nowrap; }

/* Nested cards (e.g. each Period Numbers block) inside a .result-card */
/* min-width:0 because these sit inside grid containers, where the default
   min-width:auto makes an item refuse to shrink below its widest content.
   The letter-reference table sets min-width:680px, and without this that
   680px was transferred out through every ancestor and pushed the results
   off the right edge on a phone. With it, the table scrolls inside its own
   wrapper instead and the page does not. */
.result-subcard { border:1px solid #ddd; border-radius:6px; padding:10px 12px; margin-top:10px; background-color:rgba(255,255,255,0.5); min-width:0; }
.result-subcard > summary { cursor:pointer; list-style:none; font-weight:600; font-size:var(--text-sm); padding:2px 0; display:flex; align-items:baseline; gap:8px; }
.result-subcard > summary::-webkit-details-marker { display:none; }
.result-subcard > summary .chev { display:inline-block; width:12px; }
.result-subcard > summary .label-hide { display:none; }
.result-subcard[open] > summary .label-show { display:none; }
.result-subcard[open] > summary .label-hide { display:inline; }
.result-subcard .result-card-body { margin-top:8px; }

/* Show/hide the two screens */
#screen-results { display:none; }
#screen-input, #screen-results { scroll-margin-top: 90px; }

/* Print / Save as PDF. Strips the site chrome and any interactive-only
   affordances, and prints on plain white so the reading is the whole page.
   Every <details> is forced open by JS before window.print() is called, so
   nothing below is hidden in the printed output. */
@media print {
  .site-nav,
  .skip-link,
  .scroll-to-top-btn,
  #back-to-top-btn,
  #edit-details-btn,
  #readings-quicklinks,
  .jump-to-reading-note,
  .print-reading-btn,
  #a11y-status,
  .cta-button-container,
  .site-footer {
    display: none !important;
  }  details > summary .chev,
  details > summary .card-toggle-text,
  details > summary .label-show,
  details > summary .label-hide {
    display: none !important;
  }

  body {
    background: #fff;
    font-size: var(--text-2xs);
  }

  .site-header {
    background: none;
    border: none;
    padding: 20px 0;
    page-break-after: avoid;
  }

  .site-title {
    font-size: var(--text-xl);
    margin-bottom: 5px;
  }

  .site-subtitle {
    font-size: var(--text-sm);
  }

  .main-content {
    padding: 0;
  }

  .main-content h2 {
    font-size: var(--text-lg);
    margin-top: 20px;
    margin-bottom: 10px;
    page-break-after: avoid;
  }

  .calculator-section,
  .info-section {
    background: none;
    border: 1px solid #ccc;
    padding: 15px;
  }  #readings-section {
    background: none;
    border: none;
    padding: 0;
    margin-top: 20px;
  }

  /* Print-friendly colors */
  * {
    background: white !important;
    color: black !important;
    border-color: #ccc !important;
  }

  a {
    text-decoration: underline;
  }
}
/* Each vowel of a first-vowel combination gets its own block, so a blended
   reading (e.g. "Faith" = A + I) reads as two distinct voices rather than one
   run-on passage. */
.first-vowel-block + .first-vowel-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* ==========================================
   COLLAPSIBLE ENTRY ROWS
   Used by The 78 Numbers and Bible Symbology. Only the row mechanics live
   here - everything inside an open row uses the same .tarot-* classes as the
   calculator's "Go Deeper" section, so one number reads identically wherever
   it appears. An open row picks up the same left accent bar as those cards.
   ========================================== */
.entry-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.3);
}

.entry-row:hover,
.entry-row[open] {
  background: rgba(255, 255, 255, 0.55);
}

.entry-row[open] {
  border-left: 4px solid var(--color-button);
}

.entry-row > summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 14px;
  align-items: baseline;
  gap: 12px;
}

.entry-row > summary::-webkit-details-marker {
  display: none;
}

.entry-toggle {
  margin-left: auto;
  font-size: var(--text-xs);
  color: #555555;
  white-space: nowrap;
}

.entry-row > summary .label-hide { display: none; }
.entry-row[open] > summary .label-show { display: none; }
.entry-row[open] > summary .label-hide { display: inline; }

.entry-body {
  padding: 2px 14px 18px;
}

/* Column heading strip above a set of rows. */
.entry-head {
  padding: 8px 14px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #555555;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

/* The 78 Numbers: number / Tarot key / correspondence / toggle */
.entry-head,
.ref-row > summary {
  display: grid;
  grid-template-columns: 78px 1fr 1.2fr auto;
  gap: 12px;
}

.ref-key { font-weight: 600; }
.ref-ac { color: #444444; font-size: var(--text-sm); }

/* Bible Symbology: number / toggle */
.bible-row > summary {
  display: flex;
}

.ref-table { margin-top: 32px; }
.bible-section { margin-top: 36px; }

.bible-keywords {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 6px 14px;
  margin: 0 0 20px;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.bible-keywords dt { font-weight: 700; text-align: right; }
.bible-keywords dd { margin: 0; }

@media (max-width: 640px) {
  .entry-head { display: none; }

  .ref-row > summary {
    grid-template-columns: 60px 1fr;
    row-gap: 4px;
  }

  .ref-ac,
  .ref-row > summary .entry-toggle { grid-column: 2; }
}

/* Responsive Design */
@media (max-width: 768px) {
  .site-title { font-size: var(--text-2xl); }
  .site-subtitle { font-size: var(--text-md); }
  .main-content h2 { font-size: var(--text-xl); }
  .main-content h3 { font-size: var(--text-xl); }
  .main-content h4 { font-size: var(--text-md); }
  .nav-container { gap: 15px; }
  .nav-link { font-size: var(--text-sm); padding: 6px 12px; }
  .nav-sublink { font-size: var(--text-sm); padding: 8px 12px; }
  .cta-button { font-size: var(--text-lg); padding: 14px 24px; }
  .info-grid { grid-template-columns: 1fr; }
  .scroll-to-top-btn { width: 45px; height: 45px; font-size: var(--text-lg); bottom: 20px; right: 20px; }
}

@media (max-width: 480px) {
  body { font-size: var(--text-md); }
  .site-header { padding: 25px 15px; }
  .site-title { font-size: var(--text-xl); letter-spacing: 1px; }
  .site-subtitle { font-size: var(--text-sm); }
  .main-content { padding: 20px 15px; }
  .main-content h2 { font-size: var(--text-xl); margin-bottom: 15px; }
  .main-content h3 { font-size: var(--text-lg); margin-top: 25px; }
  .main-content h4 { font-size: var(--text-md); }
  .nav-container { gap: 10px; }
  .nav-link { font-size: var(--text-xs); padding: 5px 10px; }
  .nav-sublink { font-size: var(--text-xs); padding: 8px 10px; }
  .nav-submenu { min-width: 170px; }
  .cta-button { font-size: var(--text-md); padding: 12px 20px; width: 100%; }
  .calculator-section { padding: 20px 15px; }
  .site-footer { padding: 14px 15px; }
  /* Not enough width for two columns - stack and center them instead. */
  /* justify-content, not text-align: the container is a flex row, so
     text-align would not move the button. */
  .footer-container { justify-content: center; text-align: center; }
  .scroll-to-top-btn { width: 40px; height: 40px; font-size: var(--text-md); bottom: 15px; right: 15px; }
}

/* Visitor counter. The element is hidden in the markup and only revealed
   once a real number arrives, so a blocked or failed request leaves
   nothing half-rendered. */
.visitor-counter {
  font-size: var(--text-xs);
  color: var(--color-text);
  opacity: 0.7;
}

.visitor-counter span {
  font-weight: 700;
}