/*
 * ZTTK Explained (/zttk-explained/) — design handoff "ZTTK Syndrome.dc.html".
 * Loaded only on this page, after trm-redesign.css (inc/zttk.php).
 * Colours, type and spacing are final values from the handoff.
 */

/* ---------- Hero: the theme's inner hero, with this page's values ---------- */

.trm-hero--zttk .trm-hero__shell {
	padding-top: clamp(36px, 6vw, 88px);
}

.trm-hero--zttk .trm-hero__content {
	max-width: 820px;
	padding-bottom: clamp(30px, 4.6vw, 60px);
}

.trm-zttk-eyebrows {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 30px;
}

.trm-hero--zttk .trm-hero__eyebrow { margin: 0; }

.trm-zttk-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 !important;
	padding: 8px 15px 8px 13px;
	border: 1px solid rgba(245, 168, 28, 0.5);
	border-radius: 999px;
	font: 600 12.5px/1 var(--trm-font);
	letter-spacing: 0.01em;
	color: #f5d7a0;
}

.trm-zttk-badge__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #f5a81c;
}

.trm-hero--zttk .trm-hero__title { margin-bottom: 30px !important; }

.trm-hero--zttk .trm-hero__intro {
	margin: 0 !important;
	text-wrap: pretty;
}

/* Stat band */
.trm-zttk-stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.trm-zttk-stats__cell {
	padding: 26px 30px 30px;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.trm-zttk-stats__cell:first-child { padding: 26px 30px 30px 0; }

.trm-zttk-stats__cell:last-child {
	padding: 26px 0 30px 30px;
	border-right: 0;
}

.trm-zttk-stats__figure {
	margin: 0 0 12px !important;
	font: 700 clamp(30px, 3.6vw, 42px)/1 var(--trm-font);
	letter-spacing: -0.035em;
	color: #f5a81c;
}

.trm-zttk-stats__label {
	margin: 0 !important;
	font: 400 14.5px/1.55 var(--trm-font);
	color: #a9b5d4;
}

/* ---------- Shared section parts ---------- */

.trm-zttk-col {
	max-width: 760px;
	margin: 0 auto;
	font-family: var(--trm-font);
}

.trm-zttk-eyebrow {
	margin: 0 0 14px !important;
	font: 600 11px/1 var(--trm-font);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: #8a5a00;
}

.trm-zttk-h2 {
	margin: 0 0 10px !important;
	font: 700 clamp(24px, 3vw, 34px)/1.15 var(--trm-font) !important;
	letter-spacing: -0.03em;
	color: #122a63;
}

.trm-zttk-intro {
	margin: 0 0 26px !important;
	font: 400 16px/1.65 var(--trm-font);
	color: #5b6580;
}

/* ---------- Questions accordion ---------- */

.trm-zttk-questions {
	background: #ffffff;
	padding-top: clamp(34px, 5vw, 72px);
	padding-bottom: clamp(20px, 3vw, 34px);
}

.trm-zttk-qs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.trm-zttk-q {
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba(18, 42, 99, 0.16);
	border-radius: 14px;
}

.trm-zttk-q[open] { border-color: #122a63; }

.trm-zttk-q__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 26px);
	background: transparent;
	text-align: left;
	cursor: pointer;
	list-style: none;
}

.trm-zttk-q__head::-webkit-details-marker { display: none; }
.trm-zttk-q__head::marker { content: ""; }

.trm-zttk-q__head:focus-visible {
	outline: 2px solid #122a63;
	outline-offset: -4px;
	border-radius: 12px;
}

.trm-zttk-q__num {
	flex: none;
	min-width: 22px;
	font: 600 12px var(--trm-font);
	color: #8a5a00;
}

.trm-zttk-q__text {
	flex: 1;
	font: 700 clamp(17px, 1.9vw, 20px)/1.3 var(--trm-font);
	letter-spacing: -0.022em;
	color: #122a63;
}

.trm-zttk-q__sign {
	flex: none;
	width: 22px;
	font: 400 24px/1 var(--trm-font);
	text-align: center;
	color: #8a5a00;
}

.trm-zttk-q__sign::before { content: "+"; }
.trm-zttk-q[open] > .trm-zttk-q__head .trm-zttk-q__sign::before { content: "–"; }

.trm-zttk-q__body {
	max-width: 620px;
	padding: 0 clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 26px);
}

.trm-zttk-q__para {
	margin: 0 0 14px !important;
	font: 400 16px/1.7 var(--trm-font);
	color: #42506f;
	text-wrap: pretty;
}

/* Term chips: native <details>, one open per question (shared name). */
.trm-zttk-terms {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgba(18, 42, 99, 0.12);
}

.trm-zttk-terms__label {
	margin: 0 0 11px !important;
	font: 600 11px var(--trm-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #5b6580;
}

.trm-zttk-terms__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.trm-zttk-term__chip {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 38px;
	padding: 9px 14px;
	border: 1px solid rgba(18, 42, 99, 0.22);
	border-radius: 8px;
	background: #ffffff;
	font: 600 13.5px var(--trm-font);
	letter-spacing: -0.01em;
	color: #122a63;
	cursor: pointer;
	list-style: none;
}

.trm-zttk-term__chip::-webkit-details-marker { display: none; }
.trm-zttk-term__chip::marker { content: ""; }

.trm-zttk-term[open] > .trm-zttk-term__chip {
	background: #f5a81c;
	border-color: #f5a81c;
}

.trm-zttk-term__chip:focus-visible {
	outline: 2px solid #122a63;
	outline-offset: 2px;
}

.trm-zttk-term__panel {
	margin-top: 14px;
	padding: 15px 17px;
	border-radius: 10px;
	background: #f4f6fb;
}

/* Where supported, each chip's definition drops below the whole row of
   chips (full width). Older browsers show it under its own chip. */
@supports selector(::details-content) {
	.trm-zttk-term { display: contents; }

	.trm-zttk-term::details-content {
		order: 1;
		flex-basis: 100%;
	}

	/* Closed definitions take no space in the chip row. */
	.trm-zttk-term:not([open])::details-content { position: absolute; }

	.trm-zttk-term__panel { margin-top: 6px; }
}

.trm-zttk-term__name {
	margin: 0 0 6px !important;
	font: 700 14.5px var(--trm-font);
	color: #122a63;
}

.trm-zttk-term__def {
	margin: 0 !important;
	font: 400 14.5px/1.65 var(--trm-font);
	color: #5b6580;
}

/* ---------- Resources ---------- */

.trm-zttk-resources {
	background: #ffffff;
	padding-top: clamp(20px, 3vw, 34px);
	padding-bottom: clamp(34px, 5vw, 72px);
}

.trm-zttk-resources__inner {
	padding-top: clamp(28px, 4vw, 46px);
	border-top: 1px solid rgba(18, 42, 99, 0.14);
}

.trm-zttk-res-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.trm-zttk-res {
	padding: 20px 22px;
	background: #ffffff;
	border: 1px solid rgba(18, 42, 99, 0.16);
	border-radius: 13px;
	transition: border-color 0.2s;
}

.trm-zttk-res:hover { border-color: #122a63; }

.trm-zttk-res__source {
	margin: 0 0 12px !important;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(18, 42, 99, 0.12);
	font: 700 13.5px/1.35 var(--trm-font);
	letter-spacing: -0.01em;
	color: #122a63;
}

.trm-zttk-res__kind {
	margin: 0 0 8px !important;
	font: 600 10.5px var(--trm-font);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8a5a00;
}

.trm-zttk-res__title {
	margin: 0 0 7px !important;
	font: 700 17.5px/1.3 var(--trm-font) !important;
	letter-spacing: -0.022em;
	color: #122a63;
}

.trm-zttk-res__note {
	margin: 0 !important;
	font: 400 14.5px/1.6 var(--trm-font);
	color: #5b6580;
	text-wrap: pretty;
}

.trm-zttk-res__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.trm-zttk-res__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 44px;
	padding: 12px 18px;
	border: 1px solid rgba(18, 42, 99, 0.25);
	border-radius: 9px;
	background: #ffffff;
	font: 600 14px var(--trm-font);
	color: #122a63 !important;
	text-decoration: none !important;
	transition: border-color 0.2s;
}

.trm-zttk-res__link:hover {
	border-color: #122a63;
	color: #122a63 !important;
}

.trm-zttk-res__link:focus-visible {
	outline: 2px solid #122a63;
	outline-offset: 2px;
}

.trm-zttk-res__arrow { color: #8a5a00; }

/* ---------- Author's note ---------- */

.trm-zttk-note-section {
	background: #ffffff;
	padding-top: 0;
	padding-bottom: clamp(34px, 5vw, 72px);
}

.trm-zttk-note {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: 22px;
	background: #f4f6fb;
	border-radius: 12px;
}

.trm-zttk-note__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 10px;
}

.trm-zttk-note__eyebrow { margin-bottom: 12px !important; }

.trm-zttk-note__text {
	margin: 0 !important;
	font: 400 14.5px/1.7 var(--trm-font);
	color: #42506f;
	text-wrap: pretty;
}

.trm-zttk-note__sign {
	font-weight: 600;
	color: #122a63;
}

.trm-zttk-note__btn {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	margin-top: 20px;
	padding: 15px 24px;
	border-radius: 11px;
	background: #f5a81c;
	font: 600 15px var(--trm-font);
	color: #122a63 !important;
	text-decoration: none !important;
	transition: background-color 0.2s;
}

.trm-zttk-note__btn:hover {
	background: #e09a13;
	color: #122a63 !important;
}

.trm-zttk-note__btn:focus-visible {
	outline: 2px solid #122a63;
	outline-offset: 2px;
}

/* ---------- Responsive (single breakpoint) ---------- */

@media (max-width: 760px) {
	.trm-zttk-stats { grid-template-columns: minmax(0, 1fr); }

	.trm-zttk-stats__cell,
	.trm-zttk-stats__cell:first-child,
	.trm-zttk-stats__cell:last-child {
		padding: 18px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	.trm-zttk-stats__cell:last-child { border-bottom: 0; }

	.trm-zttk-note {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.trm-zttk-note__photo { max-width: 130px; }
}