/* ==================================================================
   TRUTHSCAPE - Shared components
   ------------------------------------------------------------------
   The vocabulary available to every page type: assessments, one-page
   explainers, listings, and the Glass-Box studies.

   Scoped under .ts, so this file is inert until a page opts in.
   Raw hex values are not permitted here - use tokens.
   ================================================================== */

/* --- Page header band --------------------------------------------- */

.ts .ts-page-header {
	background: var(--ts-navy);
	color: var(--ts-cream);
	padding: var(--s7) 0 calc(var(--s7) + 10px);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.ts .ts-page-header > * {
	position: relative;
	z-index: 1;
}

.ts .ts-page-eyebrow {
	color: var(--ts-gold);
	text-transform: uppercase;
	letter-spacing: .3em;
	font-size: var(--ts-size-label);
	font-weight: 600;
	margin-bottom: var(--s4);
}

.ts .ts-page-header h1 {
	color: var(--ts-cream);
	margin-bottom: var(--s3);
}

.ts .ts-page-tag {
	font-family: var(--ts-font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--ts-gold-light);
	font-size: clamp(16px, 2vw, 20px);
	line-height: 1.5;
	max-width: 740px;
	margin: 0 auto;
}

.ts .ts-page-divider {
	width: 60px;
	height: 1px;
	background: var(--ts-gold);
	margin: var(--s4) auto 0;
	opacity: .75;
}

/* --- Eyebrow ------------------------------------------------------ */

.ts .ts-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--ts-font-sans);
	font-size: var(--ts-size-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: var(--ts-label);
	margin-bottom: var(--s3);
}

.ts .ts-eyebrow::before {
	content: '';
	width: 30px;
	height: 1px;
	background: var(--ts-gold);
	opacity: .7;
}

.ts .ts-page-header .ts-eyebrow,
.ts .ts-on-dark .ts-eyebrow {
	color: var(--ts-gold);
}

.ts .ts-part-label {
	font-family: var(--ts-font-sans);
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: 11px;
	font-weight: 700;
	color: var(--ts-label);
	margin-bottom: var(--s2);
}

/* --- Pull quote --------------------------------------------------- */

.ts blockquote {
	border-left: 3px solid var(--ts-gold);
	margin: var(--s4) 0;
	padding: 6px 0 6px var(--s4);
	font-family: var(--ts-font-serif);
	font-style: italic;
	font-size: 19px;
	line-height: 1.55;
	color: var(--ts-navy);
}

.ts blockquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--ts-font-sans);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: 11px;
	color: var(--ts-label);
}

/* --- Panels ------------------------------------------------------- */

.ts .ts-panel {
	background: var(--ts-white);
	border: 1px solid var(--ts-rule);
	border-top: 3px solid var(--ts-gold);
	padding: var(--s4);
	margin: var(--s3) 0;
}

.ts .ts-note {
	background: var(--ts-cream-deep);
	border: 1px solid var(--ts-rule);
	border-left: 4px solid var(--ts-gold);
	padding: var(--s3) var(--s4);
	margin: var(--s3) 0;
	font-size: 15.5px;
	color: var(--ts-body);
}

.ts .ts-note b,
.ts .ts-panel h4 {
	color: var(--ts-navy);
}

/* --- Buttons ------------------------------------------------------ */

.ts .ts-btn {
	display: inline-block;
	padding: 15px 40px;
	border: 1px solid var(--ts-gold);
	border-radius: var(--ts-radius);
	background: var(--ts-gold);
	color: var(--ts-navy);
	font-family: var(--ts-font-sans);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	text-decoration: none;
	cursor: pointer;
	transition: background .25s, color .25s;
}

.ts .ts-btn:hover {
	background: var(--ts-cream);
	color: var(--ts-navy);
}

.ts .ts-btn-secondary {
	background: transparent;
	border-color: var(--ts-navy);
	color: var(--ts-navy);
}

.ts .ts-btn-secondary:hover {
	background: var(--ts-navy);
	color: var(--ts-cream);
}

/* --- Verse box ---------------------------------------------------- */

.ts .ts-verse {
	font-family: var(--ts-font-serif);
	font-style: italic;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ts-ink);
	background: var(--ts-cream-deep);
	border-left: 2px solid var(--ts-gold);
	padding: 9px 13px;
	margin: 0 0 var(--s3);
}

.ts .ts-verse b {
	font-style: normal;
	color: var(--ts-navy);
}

.ts .ts-verse .tr {
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 10px;
	color: var(--ts-label);
	margin-left: 5px;
}

/* --- Tag pill ----------------------------------------------------- */

.ts .ts-pill,
.ts .wp-block-tag-cloud a {
	display: inline-block;
	font-family: var(--ts-font-sans);
	font-size: .85rem;
	color: var(--ts-navy);
	background: var(--ts-cream);
	border: 1px solid var(--ts-rule);
	border-radius: var(--ts-radius-pill);
	padding: .3rem .75rem;
	margin: .2rem .25rem .2rem 0;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}

.ts .ts-pill:hover,
.ts .wp-block-tag-cloud a:hover {
	background: var(--ts-gold);
	border-color: var(--ts-gold);
	color: var(--ts-navy);
}

/* --- Scholarly table ---------------------------------------------- */

.ts .ts-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	margin: var(--s3) 0 var(--s5);
}

.ts .ts-table th,
.ts .ts-table td {
	border: 1px solid var(--ts-rule-cool);
	padding: 7px 9px;
	text-align: left;
	vertical-align: top;
}

.ts .ts-table thead th,
.ts .ts-table tr:first-child th {
	background: var(--ts-navy);
	color: var(--ts-gold-light);
	border-color: var(--ts-navy);
	font-family: var(--ts-font-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 11px;
}

/* --- Chain list (sequential steps) -------------------------------- */

.ts .ts-chain {
	list-style: none;
	margin: var(--s4) 0 0;
	padding: 0;
}

.ts .ts-chain li {
	position: relative;
	margin-left: var(--s2);
	padding: 12px 0 12px 26px;
	border-left: 2px solid var(--ts-rule);
}

.ts .ts-chain li::before {
	content: '\2193';
	position: absolute;
	left: -11px;
	top: 14px;
	padding: 0 2px;
	background: var(--ts-cream);
	color: var(--ts-gold);
	font-weight: 700;
}

.ts .ts-chain li:first-child::before {
	content: '\25CF';
	font-size: 10px;
	top: 16px;
}

.ts .ts-chain b {
	color: var(--ts-navy);
}

.ts .ts-chain span {
	display: block;
	font-size: var(--ts-size-meta);
	color: var(--ts-muted);
}

/* --- Closing band ------------------------------------------------- */

.ts .ts-close-band {
	background: var(--ts-cream-deep);
	border-top: 1px solid var(--ts-rule);
	padding: var(--s6) 0;
	margin-top: var(--s5);
}

/* --- Scripture reference link ------------------------------------- */

.ts a.ts-ref {
	color: var(--ts-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--ts-gold);
	white-space: nowrap;
}

.ts a.ts-ref:hover {
	background: var(--ts-cream);
	border-bottom-color: var(--ts-navy);
}

/* --- Apparatus / footnote markers --------------------------------- */

.ts a.ts-footnote-ref {
	color: var(--ts-apparatus);
	text-decoration: none;
	font-weight: 700;
	padding: 0 1px;
}

.ts a.ts-footnote-ref:hover {
	color: var(--ts-navy);
}

.ts .ts-highlight {
	background: var(--ts-highlight);
	transition: background 1.2s;
}

/* --- Confidence scale --------------------------------------------- */

.ts .ts-cal          { font-weight: 600; }
.ts .ts-cal-excluded { color: #71777D; }
.ts .ts-cal-possible { color: #8F722B; }
.ts .ts-cal-probable { color: var(--ts-warning); }
.ts .ts-cal-certain  { color: var(--ts-success); }
.ts .ts-cal-explicit { color: var(--ts-info); }

/* --- WPForms container -------------------------------------------- *
 * Deliberately unscoped: forms appear on Contact, Register and Test
 * the Argument, none of which are .ts pages yet.
 * WPForms writes its own container padding from each form's theme
 * settings and loads after this file, so the doubled class raises
 * specificity enough to win without resorting to !important.
 * ------------------------------------------------------------------ */

.wpforms-container.wpforms-container {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ts-gutter) !important;
	padding-right: var(--ts-gutter) !important;
	box-sizing: border-box;
	text-align: left;
}

.wpforms-container .wpforms-field {
	padding: 0 0 var(--s4);
}

.wpforms-container .wpforms-field-label {
	font-family: var(--ts-font-sans);
	font-size: 14px;
	font-weight: 700;
	color: var(--ts-ink);
	text-align: left;
	margin-bottom: 6px;
}

.wpforms-container .wpforms-field-sublabel {
	font-family: var(--ts-font-sans);
	font-size: 12px;
	color: var(--ts-muted);
	text-align: left;
}

.wpforms-container .wpforms-required-label {
	color: var(--ts-alert);
}

.wpforms-container .wpforms-field-hp {
	display: none !important;
}

/* Anti-spam honeypots. WPForms marks them with tabindex="-1" and
   expects them hidden; on this site that hiding does not take effect,
   so they render as stray inputs. Moved off-screen rather than
   display:none so bots still find and fill them. */

.wpforms-container .wpforms-field:has(input[tabindex="-1"]) {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea {
	width: 100% !important;
	max-width: 100% !important;
	font-family: var(--ts-font-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ts-ink);
	background: var(--ts-white);
	border: 1px solid var(--ts-rule);
	border-radius: var(--ts-radius);
	padding: 11px 13px;
	height: auto;
	box-sizing: border-box;
	transition: border-color .15s;
}

.wpforms-container textarea {
	min-height: 150px !important;
}

/* Multi-part fields (First/Last) - WPForms floats fixed-width halves,
   which leaves them narrower than the single-column fields above and
   below. Flex makes the halves fill the column evenly. */

.wpforms-container .wpforms-field-row {
	display: flex;
	gap: var(--s3);
	width: 100% !important;
	max-width: 100% !important;
}

.wpforms-container fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.wpforms-container .wpforms-field-row .wpforms-field-row-block {
	flex: 1 1 0;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

/* Registration page intro shares the form's measure. */

.ts-register-wrap {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	border-color: var(--ts-gold);
	outline: 2px solid var(--ts-gold);
	outline-offset: 1px;
}

.wpforms-container ::placeholder {
	color: var(--ts-muted);
	opacity: 1;
}

.wpforms-container .wpforms-submit {
	background: var(--ts-navy) !important;
	color: var(--ts-gold) !important;
	border: 1px solid var(--ts-navy) !important;
	border-radius: var(--ts-radius) !important;
	font-family: var(--ts-font-sans) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .14em;
	padding: 14px 34px !important;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.wpforms-container .wpforms-submit:hover {
	background: var(--ts-gold) !important;
	color: var(--ts-navy) !important;
}

.wpforms-container .wpforms-submit-container {
	padding-top: var(--s2) !important;
}