/**
 * TN3DP Legal — document and identity styling.
 *
 * Palette is Tunisia3DPrint's own, per CLAUDE.md → Design & Style Rules: white
 * background, #0a0a0a headings, #1a1a1a body, #e8e8e8 hairlines, and brand red
 * #c0392b used sparingly. Red appears on exactly two things here — the rule under
 * the document title, and the border of a callout that flags something provisional.
 * Section headings are black, not red: a twelve-clause document with a red bar on
 * every heading is a document where nothing stands out.
 *
 * Deliberately NOT the #d32f2f used by the older earnings-policy stylesheet, which
 * is off-palette. That file is left alone; it works and was verified live.
 */

.tnl-doc {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 20px 64px;
	box-sizing: border-box;
	color: #1a1a1a;
	font-size: 15px;
	line-height: 1.85;
}

/* ── Title ─────────────────────────────────────────────────────────────────── */

.tnl-doc .tnl-title {
	font-size: 1.9rem;
	font-weight: 800;
	color: #0a0a0a;
	line-height: 1.25;
	margin: 0 0 6px;
	padding-bottom: 14px;
	border-bottom: 3px solid #c0392b;
}

/* ── Sections ──────────────────────────────────────────────────────────────── */

.tnl-doc h2 {
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #0a0a0a;
	margin: 42px 0 14px;
	padding-top: 20px;
	border-top: 1px solid #e8e8e8;
}

.tnl-doc h3 {
	font-size: 1rem;
	font-weight: 700;
	color: #0a0a0a;
	margin: 26px 0 10px;
}

.tnl-doc p {
	margin: 0 0 14px;
}

.tnl-doc ul,
.tnl-doc ol {
	margin: 12px 0 18px;
	padding-left: 22px;
}

.tnl-doc li {
	margin-bottom: 8px;
}

.tnl-doc strong {
	color: #0a0a0a;
	font-weight: 700;
}

.tnl-doc a {
	color: #0a0a0a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tnl-doc a:hover {
	color: #c0392b;
}

.tnl-doc hr {
	border: none;
	border-top: 1px solid #f0f0f0;
	margin: 30px 0;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */
/* Wide content scrolls inside its own box; the page body never scrolls sideways. */

.tnl-doc .tnl-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 20px 0;
	max-width: 100%;
}

.tnl-doc table {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	font-size: 14px;
}

.tnl-doc th {
	background: #fafafa;
	color: #0a0a0a;
	font-weight: 700;
	text-align: left;
	padding: 11px 14px;
	border-bottom: 2px solid #e8e8e8;
}

.tnl-doc td {
	padding: 11px 14px;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: top;
}

/* ── Callout — used for anything the reader must know is provisional ───────── */

.tnl-doc .tnl-note {
	background: #fff8f8;
	border: 1px solid #e8e8e8;
	border-left: 4px solid #c0392b;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 22px 0;
}

.tnl-doc .tnl-note p {
	margin: 0;
	font-size: 14px;
	color: #1a1a1a;
}

/* ── Binding-version banner ────────────────────────────────────────────────── */

.tnl-doc .tnl-binding {
	background: #fafafa;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 12px 18px;
	margin: 0 0 30px;
}

.tnl-doc .tnl-binding p {
	margin: 0;
	font-size: 13px;
	color: #6b6b6b;
}

.tnl-doc .tnl-binding--is-binding {
	background: #fff;
}

/* ── Version line ──────────────────────────────────────────────────────────── */

.tnl-doc .tnl-version {
	margin-top: 44px;
	padding-top: 18px;
	border-top: 1px solid #e8e8e8;
	font-size: 12px;
	color: #8a8a8a;
	text-align: center;
}

/* ── Staff-only shortcode error ────────────────────────────────────────────── */

.tnl-error {
	max-width: 860px;
	margin: 0 auto 20px;
	padding: 14px 18px;
	border: 1px solid #c0392b;
	border-radius: 8px;
	background: #fff8f8;
	color: #1a1a1a;
	font-size: 14px;
}

/* ── Identity block ────────────────────────────────────────────────────────── */

/* --- Page block (mentions légales): a labelled list on a white page -------- */

.tnl-identity--block {
	max-width: 860px;
	margin: 0 auto 24px;
	padding: 20px 22px;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
	font-size: 15px;
}

.tnl-identity__name {
	margin: 0 0 8px;
	font-weight: 700;
	color: #0a0a0a;
}

.tnl-identity__rows {
	margin: 0;
	padding: 0;
}

.tnl-identity__row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0 0 3px;
}

.tnl-identity__row dt {
	flex: 0 0 auto;
	margin: 0;
	font-weight: 600;
	color: #6b6b6b;
}

.tnl-identity__row dt::after {
	content: ":";
}

/* min-width:0 is mandatory — without it a long unbreakable value refuses to
   shrink and pushes the row off the right edge on a phone. This is the standing
   filename-overflow rule in CLAUDE.md, and an email address triggers it. */
.tnl-identity__row dd {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: #1a1a1a;
	overflow-wrap: anywhere;
}

/* --- Footer: compact small print on a dark bar ---------------------------- */
/*
   ⚠️ Two things went wrong in the first version and both are fixed here.
   1. COLOUR. The block styles above hardcode #0a0a0a / #1a1a1a, which are right
      on a white legal page and invisible on the dark footer. Everything below
      inherits instead, so the footer decides its own colour. Hierarchy comes
      from opacity, which works on any background.
   2. DENSITY. It rendered as eight stacked label/value rows and swamped the
      footer. Small print belongs on two or three quiet lines.
*/

.tnl-identity--footer {
	font-size: 12.5px;
	line-height: 1.75;
	color: inherit;
}

.tnl-identity--footer p {
	margin: 0 0 2px;
	/* An email or a long address must be allowed to break rather than push the
	   footer sideways on a phone — the standing overflow rule in CLAUDE.md. */
	overflow-wrap: anywhere;
}

.tnl-identity__line--lead {
	opacity: .9;
}

.tnl-identity__ids {
	opacity: .68;
}

.tnl-identity--footer .tnl-identity__copyright {
	margin-top: 7px;
	opacity: .55;
}

.tnl-identity__sep {
	margin: 0 .55em;
	opacity: .45;
}

.tnl-identity--footer strong {
	font-weight: 700;
}

.tnl-identity--footer a {
	color: inherit;
	text-decoration: none;
}

.tnl-identity--footer a:hover {
	text-decoration: underline;
}

/* ── Consent lines: checkout, social sign-in, registration ─────────────────── */
/*
   Small print that must be readable, not decorative. No red anywhere — the palette
   rule says red is a signal, and a legal line beside a black PLACE ORDER button is
   not competing for that attention.

   Both blocks wrap and break: the checkout one sits inside printshop-manager's
   narrow sticky summary column, where a long document name would otherwise push the
   card sideways on a phone (the standing filename-overflow rule in CLAUDE.md).
*/

.tnl-checkout-consent,
.tnl-social-consent {
	margin: 10px 0 14px;
	font-size: 12.5px;
	line-height: 1.65;
	color: #6b6b6b;
	overflow-wrap: anywhere;
}

.tnl-checkout-consent a,
.tnl-social-consent a {
	color: #1a1a1a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tnl-checkout-consent a:hover,
.tnl-social-consent a:hover {
	color: #c0392b;
}

.tnl-checkout-consent__intro {
	font-weight: 600;
	color: #1a1a1a;
}

.tnl-social-consent {
	max-width: 420px;
	margin: 10px auto 0;
	text-align: center;
}

/* The checkbox row on /register/. modern-auth-system renders the markup; the
   wording and the links come from this plugin, so the styling lives with them. */

.tnl-consent-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 6px;
	font-size: 13px;
	line-height: 1.6;
	color: #1a1a1a;
}

.tnl-consent-row input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: #c0392b;
}

/* min-width:0 is mandatory: without it the label refuses to shrink and a long
   document name shoves the checkbox off the row on a narrow screen. */
.tnl-consent-row .tnl-consent-row__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.tnl-consent-row a {
	color: #0a0a0a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tnl-consent-row a:hover {
	color: #c0392b;
}

.tnl-consent-row .tnl-consent-required {
	color: #c0392b;
	font-weight: 700;
}

/* ── Arabic / RTL ──────────────────────────────────────────────────────────── */
/* letter-spacing is zeroed on purpose: tracking breaks Arabic letter-joining and
   makes headings genuinely hard to read. Learned on store-mm v1.16.8. */

.tnl-doc[dir="rtl"] h2,
.tnl-identity[dir="rtl"] {
	letter-spacing: 0;
}

.tnl-doc[dir="rtl"] ul,
.tnl-doc[dir="rtl"] ol {
	padding-left: 0;
	padding-right: 22px;
}

.tnl-doc[dir="rtl"] th {
	text-align: right;
}

.tnl-doc[dir="rtl"] .tnl-note {
	border-left: 1px solid #e8e8e8;
	border-right: 4px solid #c0392b;
}

/* ── Phones ────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.tnl-doc {
		padding: 0 16px 48px;
		font-size: 14.5px;
	}

	.tnl-doc .tnl-title {
		font-size: 1.45rem;
	}

	.tnl-doc h2 {
		margin-top: 34px;
	}

	.tnl-identity--block {
		padding: 16px 16px;
	}
}