/* familytreesapp.com: components for the generated reference pages (relationships, templates,
   learn, GEDCOM, compare). Built on the tokens in site.css; generated by
   marketing/site/build_seo.py, which owns every page that links this file. */

.answer-box {
  margin-top: 24px; padding: 20px 22px; border-radius: 20px; background: var(--accent-soft);
  font-size: clamp(1.05rem, 1rem + .25vw, 1.15rem); line-height: 1.55; color: var(--ink);
}
.answer-box strong { font-weight: 650; }
.answer-box .label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }

.fact-card { width: 100%; padding: 22px; border-radius: 22px; background: var(--panel); }
.fact-card + .fact-card { margin-top: 16px; }
.fact-card h2 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.fact-card dl { display: grid; gap: 12px; }
.fact-card dt { font-size: 13px; color: var(--ink-2); }
.fact-card dd { margin: 2px 0 0; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.fact-card p { font-size: 15px; line-height: 1.5; }
.fact-card .btn { margin-top: 14px; width: 100%; justify-content: center; }
.fact-card .small { margin-top: 10px; }
.cta-card { background: var(--accent-soft); }
.cta-card h2 { color: var(--accent); }

.guide-aside.facts { justify-items: stretch; }

.diagram { margin: 18px 0 8px; padding: 18px; border-radius: 20px; background: var(--panel); overflow-x: auto; }
.diagram svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.diagram figcaption { font-size: 13.5px; color: var(--ink-2); margin-top: 10px; text-align: center; }
.diagram .n rect { fill: var(--card); stroke: var(--hairline); }
.diagram .n.you rect, .diagram .n.them rect { stroke: var(--accent); stroke-width: 2; }
.diagram .n.anc rect { fill: var(--accent-soft); stroke: var(--accent); }
.diagram text { fill: var(--ink); font: 600 13px var(--font); }
.diagram text.sub { fill: var(--ink-2); font-weight: 400; font-size: 11.5px; }
.diagram .ln { stroke: var(--ink-2); stroke-width: 1.5; fill: none; opacity: .55; }
.diagram .ln.path { stroke: var(--accent); opacity: 1; stroke-width: 2.2; }
.diagram .ln.step { stroke-dasharray: 5 4; }

.guide-body h3.sub { font-size: 18px; letter-spacing: -.015em; margin: 26px 0 8px; }
.guide-body ul.list, .guide-body ol.list { margin: 0 0 14px 1.2em; display: grid; gap: 8px; }
.guide-body .table-wrap { margin: 8px 0 18px; }
.guide-body .table td:first-child { white-space: normal; }
.guide-body code { font-family: var(--mono); font-size: .9em; background: var(--panel); padding: 1px 6px; border-radius: 6px; }
.guide-body pre { font-family: var(--mono); font-size: 14px; line-height: 1.55; background: var(--panel); padding: 16px 18px; border-radius: 16px; overflow-x: auto; margin: 8px 0 18px; }
.table .num { font-variant-numeric: tabular-nums; }
.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }
.table th.here, .table td.here { background: var(--accent-soft); font-weight: 650; }
.chart-table th, .chart-table td { text-align: center; font-size: 13.5px; padding: 9px 10px; min-width: 96px; }
.chart-table thead th:first-child, .chart-table tbody th { text-align: left; }

.faq-block { margin-top: 48px; }
.faq-block > h2 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); letter-spacing: -.02em; }
.faq-block .faq { margin-top: 12px; }

.sources { margin-top: 44px; font-size: 14.5px; }
.sources h2 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.sources ul { margin-left: 1.1em; display: grid; gap: 6px; }
.sources a { color: var(--ink-2); text-decoration: underline; text-underline-offset: .18em; }

.hub-intro { max-width: 760px; }
.hub-intro .answer-box { margin-top: 22px; }
.hub-section { padding-bottom: clamp(40px, 5vw, 64px); }
.hub-section > h2 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); letter-spacing: -.02em; margin-bottom: 16px; }
.hub-section > p { max-width: 720px; margin-bottom: 18px; color: var(--ink-2); }

/* Relationship calculator */
.calc { margin-top: 24px; padding: 24px; border-radius: 22px; background: var(--panel); display: grid; gap: 18px; }
.calc label { display: grid; gap: 8px; font-weight: 600; letter-spacing: -.01em; }
.calc label span { font-weight: 400; font-size: 14px; color: var(--ink-2); }
.calc select { font: inherit; font-weight: 500; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--card); color: var(--ink); width: 100%; }
.calc .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc output { display: block; padding: 18px 20px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-sm); font-size: 1.15rem; line-height: 1.45; }
.calc output b { color: var(--accent); }
.calc output a { font-size: 15px; display: inline-block; margin-top: 8px; }
@media (max-width: 640px) { .calc .row { grid-template-columns: 1fr; } }

/* Template previews */
.tpl-preview { margin: 8px 0 18px; padding: 16px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--hairline-soft); }
.tpl-preview img { display: block; width: 100%; height: auto; }
.tpl-card .thumb { display: block; border-radius: 14px; background: #FFFFFF; padding: 8px; box-shadow: inset 0 0 0 1px var(--hairline-soft); margin-bottom: 12px; }
.tpl-card .thumb img { width: 100%; height: auto; display: block; }
.dl-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 18px; }
.guide-list.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-card.tpl-card { flex-direction: column; }
@media (max-width: 1100px) { .guide-list.cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .guide-list.cards-3 { grid-template-columns: 1fr; } }

.notfound { padding: clamp(64px, 10vw, 140px) 0; text-align: center; }
.notfound h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.25rem); letter-spacing: -.032em; }
.notfound .lead { margin: 14px auto 0; max-width: 560px; }
.notfound .cta-row { justify-content: center; margin-top: 28px; }