/*!
 * Legal Document (pure PHP) — scoped to .rs-legal.
 * Serves privacy-policy / terms-of-service / foundation-statute (EN+PL, 6
 * pages total) via the "Legal Document (pure PHP)" page template.
 * Typography scale, spacing rhythm and responsive breakpoints are ported
 * verbatim from template-blog-single.php's .rs-bsp-main / .rs-bsp-toc (same
 * prose, same TOC) — per the migration brief: reuse the shipped prose page's
 * scale rather than inventing a new one. Colours/fonts/spacing come from
 * css/rs-design-tokens.css, which loads site-wide.
 *
 * the_content() output on these six pages is bare HTML — no CSS classes on
 * any element — so every rule below is a scoped descendant/child selector
 * off .rs-legal-main, never a class added to the content itself.
 *
 * Tables: only the accessibility declaration has any (added 2026-08-21); the
 * original six documents have none. Their rules are scoped to
 * `.rs-legal-main table` at the bottom of this file, and deliberately still do
 * not touch style.css's unscoped legacy `.single table tbody>tr:nth-child(odd)>td`
 * rule — these pages carry `page`, not `single`, so it never applies to them.
 */

.rs-legal-container{max-width:1140px;margin:0 auto;padding:0 20px;}

/*
 * The prose measure. Declared once because TWO boxes have to resolve to the
 * SAME width or the H1 stops sharing a left edge with the body text below it —
 * which was the reported bug. See the ch caveat on .rs-legal-head.
 */
.rs-legal{--rs-legal-measure:72ch;}

/* --- Hero: banner image, then title, then a short rule.
   Order and rule spec come from Figma 4746-5780 (`info` > `title`): the frame's
   children run img → title → body, and the rule under the H1 is 90×2px in
   #D8E2E3 (--rs-grey-light-30), set 20px below the heading. It replaces a
   full-width 1px border-bottom, which was in neither the design nor the right
   colour (--rs-border-subtle resolves to #B2C9CB, a different grey). The banner
   image is lifted out of post_content — see rs_legal_split_leading_image(). --- */
.rs-legal-hero{padding:60px 0 0;}
.rs-legal-head img{max-width:100%;height:auto;display:block;margin:0 0 40px;}
.rs-legal-rule{width:90px;height:0;border:0;border-top:2px solid var(--rs-grey-light-30);margin:20px 0 0;}
/*
 * Single-column pages (privacy EN/PL): the hero block takes the same measure as
 * the prose column below, so the H1 starts where the body text starts. Before
 * this it ran the full 1100px container while the prose sat in a centred 72ch
 * box, which is the leftward shift Raman flagged. TOC pages need no equivalent
 * rule — there .rs-legal-main is a flex child at the container's left edge, so
 * the two already line up.
 *
 * font-family/size are NOT cosmetic here: `ch` resolves against the element's
 * own font, so reading 72ch against the heading font would produce a different
 * box and re-open the very misalignment this fixes. Matched to .rs-legal-main's
 * 18px serif below. The H1's own font-size is an absolute token, so it is
 * unaffected.
 */
.rs-legal--single .rs-legal-head{
	font-family:var(--rs-font-serif);
	font-size:18px;
	max-width:var(--rs-legal-measure);
	margin-inline:auto;
}
.rs-legal-title{
	font-family:var(--rs-font-display);
	font-weight:var(--rs-weight-bold);
	font-size:var(--rs-h1-size);
	line-height:var(--rs-h1-lh);
	color:var(--rs-text-primary);
	margin:0;
	hyphens:auto;
	overflow-wrap:break-word;
}

/* --- Body + optional TOC column --- */
/* 40px below the rule, matching the Figma frame's 40px gap between the title
   block and the first content section. Was 50px against a 40px hero bottom
   padding (90px total) — that gap belonged to the old full-width border. */
.rs-legal-body{padding:40px 0 80px;}
.rs-legal-cols{display:flex;align-items:flex-start;}
.rs-legal-main{width:64.47%;}
/*
 * No-TOC pages (privacy EN/PL — only 4-5 h2s, below the TOC threshold) would
 * otherwise take the full 1100px container: measured ~120 characters per line at
 * 18px Lora, against ~77 on terms and the statutes, which get 64.47% because the
 * TOC column takes the rest. Same document family reading two different ways, and
 * 120ch is far outside the comfortable 45-85 range for continuous text — these are
 * the pages people actually read start to finish.
 *
 * Capped in `ch` rather than px so the measure stays tied to the font rather than a
 * magic number, and centred, since there is no sidebar to balance against.
 */
.rs-legal-cols--single .rs-legal-main{width:100%;max-width:var(--rs-legal-measure);margin-inline:auto;}
.rs-legal-toc-col{width:35.53%;padding-left:30px;}

/* Prose typography + vertical rhythm — ported from .rs-bsp-main (Figma node
   24567-31826 via template-blog-single.php). Within a section: 18px between
   blocks, 10px between list items; headings get a 40px top margin. */
.rs-legal-main{
	font-family:var(--rs-font-serif);
	font-size:18px;
	line-height:1.65;
	color:var(--rs-text-secondary);
	/*
	 * overflow-wrap only — NOT hyphens:auto. The Polish-overflow guidance that
	 * motivates hyphenation is about DISPLAY type, where one compound noun can
	 * overrun a large heading; applied to 18px body prose it hyphenated constantly
	 * ("mes-sengers", "ac-cordance" were visible in the first paragraph compared
	 * against live), which reads badly in dense legal text and is a difference live
	 * does not have. The measure is capped at 72ch above, so the lines do not need
	 * hyphenation to stay even. hyphens:auto stays on the headings below, where the
	 * original concern actually applies.
	 */
	overflow-wrap:break-word;
}
.rs-legal-main > p,
.rs-legal-main > ul,
.rs-legal-main > ol,
.rs-legal-main > figure,
.rs-legal-main > blockquote{margin:0 0 18px;}
.rs-legal-main > h2,
.rs-legal-main > h3{
	font-family:var(--rs-font-display);
	font-weight:var(--rs-weight-bold);
	color:var(--rs-text-primary);
	margin:40px 0 18px;
}
.rs-legal-main > h2{font-size:40px;line-height:1.3;}
/* Display type keeps hyphenation: Polish compound nouns can overrun a 40px heading
   in the 709px column, which is the case the guidance was written for. */
.rs-legal-main > h2,
.rs-legal-main > h3,
.rs-legal-main > h4,
.rs-legal-title{hyphens:auto;}
.rs-legal-main > h3{font-size:28px;line-height:1.3;}
.rs-legal-main > h4{
	font-family:var(--rs-font-display);
	font-weight:var(--rs-weight-bold);
	color:var(--rs-text-primary);
	margin:30px 0 15px;
}
/* The statutes' "§ N" markers: an H5 mid-chapter. Styled to read as a named
   paragraph marker — bold, heading font, its own line — not the browser
   default's near-invisible tiny text. */
.rs-legal-main > h5{
	font-family:var(--rs-font-display);
	font-weight:var(--rs-weight-bold);
	font-size:var(--rs-h5-size);
	line-height:var(--rs-h5-lh);
	color:var(--rs-text-primary);
	margin:30px 0 10px;
}
.rs-legal-main > :first-child{margin-top:0;}
.rs-legal-main > :last-child{margin-bottom:0;}
.rs-legal-main li{margin-bottom:10px;}
.rs-legal-main li:last-child{margin-bottom:0;}
.rs-legal-main ol,
.rs-legal-main ul{padding-left:1.4em;}
.rs-legal-main a{color:var(--rs-text-accent);text-decoration:none;}
.rs-legal-main a:hover{color:var(--rs-text-link-hover);}
.rs-legal-main img{max-width:100%;height:auto;display:block;}

/* TOC — ported from .rs-bsp-toc (Figma node 31846-23613): card, 4px radius,
   20px pad, 15px between items; chapter/section H2s only. */
.rs-legal-toc{
	position:sticky;
	top:100px;
	background:var(--rs-surface-card);
	padding:20px;
	border-radius:var(--rs-radius-xs);
}
.rs-legal-toc ol{list-style:none;margin:0;padding:0;}
.rs-legal-toc li{margin-bottom:15px;}
.rs-legal-toc li:last-child{margin-bottom:0;}
.rs-legal-toc a{
	display:block;
	font-family:var(--rs-font-body);
	font-size:14px;
	line-height:1.5;
	color:var(--rs-text-secondary);
	text-decoration:none;
	transition:color .2s;
}
.rs-legal-toc a:hover{color:var(--rs-text-primary);}
.rs-legal-toc li.rs-active > a{color:var(--rs-accent-coral);}

/* --- Tablet --- */
@media (max-width:1024px){
	.rs-legal-main{width:70%;}
	.rs-legal-toc-col{width:30%;padding-left:0;}
}

/* --- Mobile --- */
@media (max-width:767px){
	.rs-legal-hero{padding:40px 0 0;}
	.rs-legal-head img{margin-bottom:30px;}
	.rs-legal-title{font-size:var(--rs-h1-size-mobile);line-height:var(--rs-h1-lh-mobile);}
	.rs-legal-body{padding:30px 0 60px;}
	.rs-legal-cols{flex-direction:column-reverse;}
	.rs-legal-main,
	.rs-legal-toc-col{width:100%;padding-left:0;}
	.rs-legal-toc{position:static;margin-bottom:30px;}
}
/* --- Close-tab button ---
 * The first cut of this used --rs-yellow / --rs-black / --rs-yellow-hover, none of
 * which exist in css/rs-design-tokens.css. Every declaration was therefore invalid
 * and the button rendered with a TRANSPARENT background and inherited grey text —
 * structurally present, visually unstyled, and caught only by reading the page
 * rather than by any gate. Real token names, plus literal fallbacks so a renamed
 * token degrades to the right colour instead of blanking the control again.
 */
.rs-legal-close-wrap{margin:40px 0 0;}
.rs-legal-close{
	font-family:var(--rs-font-display,Montserrat,sans-serif);
	font-weight:var(--rs-weight-bold,700);
	font-size:16px;
	line-height:1;
	color:var(--rs-text-primary,#34383C);
	background:var(--rs-accent-yellow,#FFC94B);
	border:0;
	border-radius:var(--rs-radius-xs,4px);
	padding:18px 32px;
	cursor:pointer;
	box-shadow:0 20px 40px -10px rgba(38,50,56,.2);
	transition:background .2s;
}
.rs-legal-close:hover{background:var(--rs-yellow-btn-hover,#FFB710);}

/* --- Tables (added 2026-08-21 for the accessibility declaration, the first
   legal document that has any). The docblock above asked for this to be scoped
   to `.rs-legal-main table` — it is. Visual language is NOT invented here: it
   reuses the shipped "table style 2" from style.css:2511 (teal header row +
   teal first column, white body, hairline borders), re-expressed in design
   tokens and at the prose scale of this column.

   The wrapper carries tabindex="0" in the content so a table wider than the
   709px column is reachable by keyboard, not just by trackpad (WCAG 2.1.1) —
   the only reason the content of this one document has classes at all. */
.rs-legal-tablewrap{overflow-x:auto;margin:0 0 18px;}
.rs-legal-tablewrap:focus-visible{outline:2px solid var(--rs-border-brand);outline-offset:2px;}
.rs-legal-main table{
	border-collapse:collapse;
	width:100%;
	font-family:var(--rs-font-serif);
	font-size:15px;
	line-height:1.55;
}
.rs-legal-main caption{
	caption-side:top;
	font-family:var(--rs-font-body);
	font-size:14px;
	line-height:1.5;
	color:var(--rs-text-secondary);
	text-align:left;
	padding:0 0 8px;
}
/*
 * Specificity note: hello-elementor's reset.css ships
 * `table tbody > tr:nth-child(2n+1) > td, ... > th {background:rgba(128,128,128,.07)}`
 * (0,1,3) and loads AFTER this file. A plain `.rs-legal-main td` (0,1,1) loses to
 * it and every odd row came out grey with white text on it — same class of trap as
 * the parent theme's button reset. Hence the longer `table tbody > tr >` chains
 * below (0,1,4): they beat the reset without !important.
 */
.rs-legal-main table th,
.rs-legal-main table tbody > tr > th,
.rs-legal-main table tbody > tr > td{
	border:var(--rs-border-width) solid var(--rs-border-default);
	padding:12px 14px;
	text-align:left;
	vertical-align:top;
	background:var(--rs-surface-page);
	color:var(--rs-text-secondary);
}
.rs-legal-main table thead > tr > th,
.rs-legal-main table tbody > tr > th{
	background:var(--rs-surface-brand);
	color:var(--rs-text-inverse);
	font-family:var(--rs-font-body);
	font-weight:var(--rs-weight-bold);
}
/* Row headers are the label column: same teal, but not full-bleed bold display
   width — they stay narrow so the value column keeps the measure. */
.rs-legal-main table tbody > tr > th{width:32%;}
/* …but only on the label/value tables. A table with 3+ header cells (the WCAG
   nonconformity plan, the SUS 3.0 mapping) needs every column to negotiate its
   own width inside the 709px measure, and a slightly smaller face to breathe. */
.rs-legal-main table:has(thead > tr > th:nth-child(3)){font-size:14px;}
.rs-legal-main table:has(thead > tr > th:nth-child(3)) tbody > tr > th{width:auto;}
.rs-legal-main table:has(thead > tr > th:nth-child(3)) th,
.rs-legal-main table:has(thead > tr > th:nth-child(3)) tbody > tr > td{padding:10px 11px;}
.rs-legal-main table td a{color:var(--rs-text-accent);text-decoration:none;}
.rs-legal-main table td a:hover{color:var(--rs-text-link-hover);}

/* --- Download list (PDF attachments at the end of a document). */
.rs-legal-downloads{list-style:none;margin:0 0 18px;padding:0;}
.rs-legal-downloads li{margin-bottom:12px;}
.rs-legal-downloads a{
	display:inline-flex;
	align-items:baseline;
	gap:10px;
	font-family:var(--rs-font-body);
	font-size:16px;
	line-height:1.5;
}
.rs-legal-downloads .fa-download{color:var(--rs-text-accent);}
.rs-legal-downloads .rs-legal-dl-meta{color:var(--rs-text-secondary);font-size:14px;}

@media (max-width:767px){
	.rs-legal-main table{font-size:14px;}
	/* The `tbody > tr > th` arm is not redundant with `table th` — it is the arm
	   that outweighs the desktop (0,1,4) rule above. Dropping it left row
	   headers on 12px/14px padding while their cells went to 10px/11px. */
	.rs-legal-main table th,
	.rs-legal-main table tbody > tr > th,
	.rs-legal-main table tbody > tr > td{padding:10px 11px;}
	.rs-legal-main table tbody > tr > th{width:auto;}
}