/* ==========================================================================
   JKT LEGAL PAGES
   ==========================================================================
   Privacy Policy, Cookie Policy, Terms and Conditions.

   Loaded on those three pages only (see JKT COMPLIANCE in the mu-plugin).
   This is long-form document styling — measure, headings, tables, the
   [TO CONFIRM] callouts — and it has no business on the rest of the site.

   Same language as everything else: navy ground, Zilla Slab display, Public
   Sans body, IBM Plex Mono for labels, coral only where something is a link
   or needs attention, hairlines rather than boxes.
   ========================================================================== */

.jkt-legal-main {
	background-color: var(--jkt-navy);
	padding: var(--jkt-space-5) var(--jkt-space-3) var(--jkt-space-6);
}

.jkt-legal {
	max-width: 74ch;          /* comfortable reading measure for body copy */
	margin: 0 auto;
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-body);
	font-size: 16px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.jkt-legal__eyebrow {
	margin: 0 0 var(--jkt-space-1);
	color: var(--jkt-coral);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.jkt-legal__title {
	margin: 0 0 12px;
	color: var(--jkt-white, #fff);
	font-family: var(--jkt-font-display);
	font-weight: 700;
	font-size: clamp(34px, 5vw, 54px);
	line-height: 1.05;
	letter-spacing: -.01em;
}

.jkt-legal__meta {
	margin: 0 0 var(--jkt-space-3);
	padding-bottom: var(--jkt-space-2);
	border-bottom: 1px solid var(--jkt-hair);
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Body copy
   -------------------------------------------------------------------------- */

.jkt-legal h2 {
	margin: var(--jkt-space-3) 0 12px;
	color: var(--jkt-white, #fff);
	font-family: var(--jkt-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
}

.jkt-legal p { margin: 0 0 16px; }

.jkt-legal ul {
	margin: 0 0 16px;
	padding-left: 0;
	list-style: none;
}

.jkt-legal li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 22px;
}

/* Hairline dash rather than a bullet — same device as the spec lists. */
.jkt-legal li::before {
	content: "";
	position: absolute;
	top: .75em;
	left: 0;
	width: 12px;
	height: 1px;
	background-color: var(--jkt-coral);
}

.jkt-legal strong { color: var(--jkt-ice); font-weight: 600; }

.jkt-legal a {
	color: var(--jkt-ice);
	text-decoration: underline;
	text-decoration-color: var(--jkt-coral);
	text-underline-offset: 3px;
	transition: color .2s ease;
}

.jkt-legal a:hover { color: var(--jkt-coral); }

.jkt-legal code {
	padding: 1px 5px;
	background-color: var(--jkt-navy-deep);
	border: 1px solid var(--jkt-hair-subtle);
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-size: 12px;
	/*
	 * Never break inside a cookie name — "wp_woocommerce_session_*" split
	 * across two lines reads as two different cookies. Rows with several names
	 * still wrap between them, and the table itself scrolls horizontally.
	 */
	white-space: nowrap;
}

.jkt-legal__aside {
	color: var(--jkt-ice-label);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Tables — processors, cookie inventory, lawful bases
   -------------------------------------------------------------------------- */

/*
 * The table scrolls inside its own container rather than pushing the page
 * sideways; the cookie inventory is four columns of long strings and will not
 * fit a phone.
 */
.jkt-legal__table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--jkt-space-3);
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 14px;
}

.jkt-legal__table thead th {
	padding: 10px 14px 10px 0;
	border-bottom: 1px solid var(--jkt-hair-strong);
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .12em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.jkt-legal__table td {
	padding: 12px 14px 12px 0;
	border-bottom: 1px solid var(--jkt-hair-subtle);
	vertical-align: top;
}

.jkt-legal__table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Unresolved items
   --------------------------------------------------------------------------
   These are meant to be impossible to miss. They are not decoration: every
   one marks a fact the client still has to supply, and the pages must not go
   live with any of them showing.
   -------------------------------------------------------------------------- */

.jkt-legal__flag {
	margin: 0 0 var(--jkt-space-3);
	padding: 18px 20px;
	background-color: var(--jkt-navy-deep);
	border-left: 3px solid var(--jkt-coral);
}

.jkt-legal__flag p { margin: 0 0 10px; font-size: 15px; }
.jkt-legal__flag p:last-child { margin-bottom: 0; }

.jkt-legal__flag--strong {
	border-left-width: 3px;
	box-shadow: inset 0 0 0 1px var(--jkt-hair);
}

.jkt-legal__todo {
	display: inline;
	padding: 2px 6px;
	background-color: rgba(240, 82, 47, .14);
	box-shadow: inset 0 0 0 1px rgba(240, 82, 47, .45);
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-size: 12px;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.jkt-legal-main { padding: var(--jkt-space-4) var(--jkt-space-2) var(--jkt-space-5); }
	.jkt-legal { font-size: 15px; }
	.jkt-legal h2 { font-size: 21px; }
}