/* ==========================================================================
   Page: Legal (T&C / Privacy)
   The aside renders one tab per built document and is not count-dependent, so
   the withdrawal of Security & Compliance (21 Sept 2026) needed no CSS change.
   Figma: Legal EN D1920 — T&C 4201:97329, aside 4201:97339.
   Light section (Core/White), centred hero + "Updated on" stamp, a vertical
   icon-tab aside (cols 1-3) beside the document body (cols 5-12). The active
   tab is a MintPay glass pill with a teal Bold label; the body sits directly
   on the page (no card). Below 1024 the aside becomes a scrollable row above
   the stamp. RTL: CSS grid is direction-aware, so the logical column lines
   place the aside inline-start in both languages.
   ========================================================================== */

.mada-legal {
	background-color: var(--color-white);            /* #F8FAFC */
	padding-block: var(--pad-section-last-top) var(--pad-section-last-bottom);  /* 80 / 112 */
}
.mada-legal__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-9);                             /* 32 */
}

/* ---- Hero (centred) ---- */
.mada-legal__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-4);
}
.mada-legal__hero h1 {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-banner);                        /* 72 */
	line-height: var(--lh-banner);                      /* 86 */
	color: var(--color-black);
}
.mada-legal__hero p {
	margin: 0;
	font-size: var(--fs-md);
	line-height: 24px;
	color: var(--color-neutral-600);
	max-inline-size: 80ch;
}

/* ---- "Updated on" stamp (centred, SemiBold 16/24 Neutral/500) ---- */
.mada-legal__updated {
	margin: 0;
	text-align: center;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);
	line-height: 24px;
	color: var(--color-neutral-500);
}

/* ---- Aside nav (Figma 4201:97339) ---- */
.mada-legal__nav {
	display: flex;
	flex-direction: row;                             /* scrollable row < 1024 */
	gap: var(--space-4);                             /* 12 */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mada-legal__nav::-webkit-scrollbar { display: none; }
.mada-legal__tab {
	display: flex;
	align-items: center;
	gap: var(--space-4);                             /* 12 */
	padding: var(--space-5);                         /* 16 */
	border-radius: var(--radius-xl);                 /* 12 */
	color: var(--color-neutral-700);                /* #4B5563 */
	font-size: var(--fs-lg);                         /* 18 */
	line-height: 28px;
	font-weight: var(--fw-regular);
	text-decoration: none;
	white-space: nowrap;
	flex: 0 0 auto;
}
.mada-legal__tab img { inline-size: 28px; block-size: 28px; flex: 0 0 auto; }
.mada-legal__tab.is-active {
	background-color: rgba(0, 178, 175, 0.12);       /* Effects/glass/surface/mint */
	color: #008E8C;                                  /* MintPay/60 */
	font-weight: var(--fw-bold);
}

/* ---- Document body (sits directly on the light section) ---- */
.mada-legal__doc {
	color: #555A5C;
	font-size: var(--fs-md);
	line-height: 28px;
	max-inline-size: 80ch;
}
.mada-legal__doc h2 {
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);                         /* 18 — "1- DEFINITIONS" */
	line-height: 28px;
	color: var(--color-black);
	margin-block: var(--space-11) var(--space-5);    /* 40 / 16 */
	text-transform: uppercase;
}
.mada-legal__doc h3 {
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);
	line-height: 24px;
	color: var(--color-black);
	margin-block: var(--space-6) var(--space-2);
}
.mada-legal__doc p { margin-block: 0 var(--space-4); }
.mada-legal__doc ul,
.mada-legal__doc ol { margin-block: 0 var(--space-4); padding-inline-start: var(--space-7); }
.mada-legal__doc li { margin-block-end: var(--space-2); }
.mada-legal__doc a { color: var(--color-secondary); }

/* ---- Desktop: 12-col grid, aside beside body ---- */
@media (min-width: 1024px) {
	.mada-legal__inner {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: var(--space-7);                  /* 24 */
		row-gap: var(--space-9);                      /* 32 */
		align-items: start;
	}
	.mada-legal__hero    { grid-column: 1 / -1; grid-row: 1; }
	.mada-legal__updated { grid-column: 1 / -1; grid-row: 2; }
	.mada-legal__nav {
		grid-column: 1 / 4;                          /* cols 1-3 */
		grid-row: 3;
		flex-direction: column;                      /* vertical list */
		overflow: visible;
		position: sticky;
		inset-block-start: var(--space-15);          /* clears sticky header */
	}
	.mada-legal__tab { inline-size: 100%; }
	.mada-legal__doc { grid-column: 5 / -1; grid-row: 3; }
}

@media (max-width: 639px) {
	.mada-legal__hero h1 { font-size: var(--fs-banner); line-height: var(--lh-banner); }
}