/**
 * Legal pages: the look of the fragments from OSKA-Dev/oska-legal, which carry no styles and only class="table".
 * Loaded only on pages that hold a fragment. The fragments stay untouched, so the site's values are restated here:
 *   shell = .blog-wrap · h1 = .blog__title · h2 = .returns__policy
 *   head = See More's without the crumbs: ink line, 36px above it, 44px below. Title at the height of Stores and Looks.
 *   text = .wp-p size and measure · h3 = .wp-h5 · table = .wp-table (without its 640px cap)
 * Measure: 65ch at 16px gives a median of 80 characters per line, measured on the privacy page; 72ch gave 88.
 * ch counts digits, which are wider than average text, so a wider column would pass the 80 of WCAG 1.4.8.
 * The returns page already sits in .blog-wrap and .returns__policy; these rules only add what that lacks.
 */

/* ---- Page shell ---- */
#brx-content.wordpress:has(.oska-legal) {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: calc(1440px + var(--pad) * 2);
	padding: 62px var(--pad) 120px;
	width: 100%;
}
#brx-content.wordpress:has(.oska-legal) > h1 {
	border-bottom: 1px solid var(--ink);
	font-size: clamp(40px, 5.5vw, 64px);
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: .98;
	margin: 0 0 44px;
	padding-bottom: 36px;
}
/* The returns portal prints the head itself; it gets the same one here, so it changes with the other legal pages. */
.seoc-returns:has(.oska-legal) { padding-top: 62px; }
.seoc-returns:has(.oska-legal) > .blog__crumbs { display: none; }
.seoc-returns:has(.oska-legal) > .blog__head {
	border-bottom-color: var(--ink);
	margin-bottom: 44px;
	padding-bottom: 36px;
}
@media (min-width: 960px) {
	#brx-content.wordpress:has(.oska-legal) { padding: 78px var(--pad) 152px; }
	.seoc-returns:has(.oska-legal) { padding-top: 78px; }
}

/* ---- Text ---- */
.oska-legal > * { max-width: 65ch; }
.oska-legal > table { max-width: none; }

.oska-legal h2 {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .14em;
	line-height: 1.4;
	margin: 48px 0 12px;
	text-transform: uppercase;
}
.oska-legal h2:first-child { margin-top: 0; }
.oska-legal h3 {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.4;
	margin: 32px 0 8px;
}
#brx-content .oska-legal p {
	color: var(--color-7);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 14px;
}
.oska-legal ul,
.oska-legal ol {
	margin: 0 0 14px;
	padding-left: 20px;
}
.oska-legal ul { list-style: disc; }
.oska-legal ol { list-style: decimal; }
#brx-content .oska-legal li {
	color: var(--color-7);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 8px;
}
.oska-legal strong { color: var(--ink); font-weight: 500; }
.oska-legal a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.oska-legal a:hover { text-decoration: none; }
.oska-legal a:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* Cookie page: Matomo's opt-out form, printed by its own script as p + input + label */
.oska-legal__optout {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 0 10px;
	margin: 0 0 14px;
}
.oska-legal__optout p { flex: 0 0 100%; }
.oska-legal__optout input {
	box-sizing: border-box; /* the site's checkbox style sets the box, the site's input style adds 12px padding to it */
	margin: 5px 0 0;
	padding: 0;
}
.oska-legal__optout input:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
.oska-legal__optout label {
	color: var(--ink);
	cursor: pointer;
	flex: 1 1 0;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.7;
	min-width: 0;
	text-transform: none;
}

/* Accessibility statement: the provider line after the rule */
.oska-legal hr {
	border: 0;
	border-top: 1px solid var(--line-strong);
	margin: 48px 0 24px;
}
#brx-content .oska-legal hr + p {
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.5;
}

/* Two fragments on one page: withdrawal + returns */
.oska-legal + .oska-legal {
	border-top: 1px solid var(--line-strong);
	margin-top: 56px;
	padding-top: 56px;
}

/* Returns page: the form card's nowrap button forced the page 24px wider than a 375px phone (SC 1.4.10). */
.returns__cols > * { min-width: 0; }
.returns__cols .rform--card .sg-wbtn { white-space: normal; }

/* ---- Tables ---- */
.oska-legal table {
	border-collapse: collapse;
	font-size: 13px;
	margin: 24px 0;
	width: 100%;
}
.oska-legal th,
.oska-legal td {
	border-bottom: 1px solid var(--line);
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}
.oska-legal th {
	background: #fafaf7;
	color: var(--ink-soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.oska-legal td { color: var(--ink); }
.oska-legal tr:hover td { background: #fafaf7; }

/* Wide tables scroll on phones. The build wraps them; on a page without the wrapper the whole fragment scrolls instead. */
.oska-legal > .oska-legal__table { max-width: none; }
.oska-legal__table:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
@media (max-width: 767px) {
	.oska-legal__table,
	.oska-legal:not(:has(.oska-legal__table)) { overflow-x: auto; }
	.oska-legal th,
	.oska-legal td { min-width: 120px; }
}