/*
 * HVB Law Tracker: supplement only.
 *
 * The look comes from the theme's css/page-kratom-legality.css, which this
 * file is enqueued after and depends on. Everything here covers the few
 * fields the legality page's Recent Updates list never had (effective date,
 * citation, scope, verified date, and the upcoming marker) and nothing else.
 * Restating the shared rules here is what would let the two pages drift.
 *
 * All selectors are scoped under .hvb-kratom-legality so they inherit that
 * block's tokens and never leak onto another template.
 */

/* The tracker hero has one column, not the legality page's copy plus visual. */
.hvb-kratom-legality .lt-hero .hero-inner {
	grid-template-columns: minmax(0, 1fr);
}

.hvb-kratom-legality .lt-hero .hero-lede {
	max-width: 70ch;
}

/* Supplementary facts row, set in the same key as .update-text but quieter. */
.hvb-kratom-legality .lt-facts {
	margin: 10px 0 0;
	font-size: 0.85rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
}

.hvb-kratom-legality .lt-facts time {
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.hvb-kratom-legality .lt-facts-label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--gold-soft);
	margin-right: 4px;
}

.hvb-kratom-legality .lt-facts-sep {
	color: rgba(255, 255, 255, 0.28);
	margin: 0 8px;
}

/* Matches .updates-footnote so the per-entry provenance line and the section
   footnote read as the same voice. */
.hvb-kratom-legality .lt-verified {
	margin: 10px 0 0;
	font-size: 0.8rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.5);
}

/* A missing date is worth seeing, not worth shouting about. */
.hvb-kratom-legality .lt-missing {
	color: rgba(255, 255, 255, 0.45);
	font-style: italic;
	text-transform: none;
	letter-spacing: 0.02em;
}

/*
 * Upcoming marker.
 *
 * Takes the same shape as .update-date, so it sits in the meta row as one
 * more fact rather than as a new device. Filled in by lt-upcoming.js and
 * hidden until then: the site sits behind a page cache, and a countdown
 * rendered in PHP would keep insisting "in 6 days" long after the date passed.
 */
.hvb-kratom-legality .lt-upcoming {
	color: var(--gold-light);
	border-bottom: 1px solid rgba(212, 175, 55, 0.45);
	padding-bottom: 2px;
}

.hvb-kratom-legality .lt-upcoming[hidden] {
	display: none;
}

/* Pagination, which the legality page has no equivalent of. */
.hvb-kratom-legality .lt-pagination {
	margin: 32px 0 0;
	font-size: 0.9rem;
}

.hvb-kratom-legality .lt-pagination .page-numbers {
	display: inline-block;
	padding: 7px 13px;
	margin-right: 6px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 100px;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}

.hvb-kratom-legality .lt-pagination .page-numbers:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.hvb-kratom-legality .lt-pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--forest-deep);
	font-weight: 700;
}

.hvb-kratom-legality .lt-empty {
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

/* Fact sheet on the single view. Same key as .lt-facts, laid out as rows. */
.hvb-kratom-legality .lt-sheet {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 8px 28px;
	margin: 16px 0 20px;
	padding: 18px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.9rem;
}

.hvb-kratom-legality .lt-sheet dt {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--gold-soft);
	align-self: center;
}

.hvb-kratom-legality .lt-sheet dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
}

.hvb-kratom-legality .lt-sheet time {
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.hvb-kratom-legality .lt-body {
	white-space: pre-line;
	font-size: 1rem;
}

@media (max-width: 640px) {
	.hvb-kratom-legality .lt-sheet {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px 0;
	}

	.hvb-kratom-legality .lt-sheet dd {
		margin-bottom: 10px;
	}
}

/* -----------------------------------------------------------------
   Alert signup.

   Sits inside the dark updates section, so it borrows that section's
   surface treatment rather than introducing a panel of its own. The
   button is the theme's .btn .btn-primary, unchanged.
   ----------------------------------------------------------------- */

.hvb-kratom-legality .lt-alerts {
	margin: 40px 0 0;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(212, 175, 55, 0.28);
	border-radius: 16px;
	padding: 32px 30px;
}

.hvb-kratom-legality .lt-alerts-inner {
	max-width: 640px;
}

.hvb-kratom-legality .lt-alerts-heading {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	color: #fff;
	margin: 10px 0 8px;
}

.hvb-kratom-legality .lt-alerts-note {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 18px;
}

.hvb-kratom-legality .lt-alerts-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

/* Two fields plus a button. Labels are visible rather than screen-reader
   only, because "optional" has to be readable for the name field to feel
   optional rather than like something the form forgot to mark required. */
.hvb-kratom-legality .lt-alerts-field {
	flex: 1 1 200px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.hvb-kratom-legality .lt-alerts-field label {
	font-family: var(--font-body);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.hvb-kratom-legality .lt-alerts-optional {
	text-transform: none;
	letter-spacing: 0;
	font-style: italic;
	color: rgba(255, 255, 255, 0.42);
	margin-left: 4px;
}

.hvb-kratom-legality .lt-alerts-input {
	width: 100%;
	min-width: 0;
	padding: 13px 16px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.95rem;
}

.hvb-kratom-legality .lt-alerts-input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.hvb-kratom-legality .lt-alerts-input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-color: var(--accent);
}

.hvb-kratom-legality .lt-alerts-submit {
	flex: 0 0 auto;
	cursor: pointer;
	border: 0;
}

.hvb-kratom-legality .lt-alerts-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Honeypot. Off screen rather than display:none, which some bots skip. */
.hvb-kratom-legality .lt-alerts-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hvb-kratom-legality .lt-alerts-fine {
	margin: 12px 0 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.5);
}

.hvb-kratom-legality .lt-alerts-message {
	margin-top: 10px;
	font-size: 0.9rem;
	min-height: 1.2em;
}

.hvb-kratom-legality .lt-alerts-message.is-ok {
	color: var(--gold-light);
}

.hvb-kratom-legality .lt-alerts-message.is-error {
	color: #f1b3b3;
}

@media (max-width: 560px) {
	.hvb-kratom-legality .lt-alerts { padding: 24px 20px; }
	.hvb-kratom-legality .lt-alerts-field { flex: 1 1 100%; }
	.hvb-kratom-legality .lt-alerts-submit { width: 100%; }
}