/*
 * The legal documents: /privatumo-politika/ and /paslaugu-taisykles/.
 *
 * A per-page stylesheet enqueued only where it is used (plan section 1.1,
 * engineering standards section 7). It loads after components.css and may build
 * on both it and tokens.css; like the others it declares no colour of its own.
 *
 * NAMED AFTER A DOCUMENT TYPE RATHER THAN A TEMPLATE, which is why it is
 * legal.css and not privatumo-politika.css. Every rule below is the shape of a
 * legal document - hero, contents sidebar, numbered sections, editorial note -
 * and WPS-045 gave that shape a second page. The alternatives were both worse:
 * a second copy of 270 lines is the duplication this theme's one-page-one-
 * stylesheet rule exists to prevent, and moving it into components.css would
 * bill every other page on the site for a layout only these two use. bookly.css
 * already set the precedent of a stylesheet that follows what is on the page
 * rather than which template drew it.
 *
 * THE ONLY PAGES ON THE SITE WITH A SIDEBAR, and that is the whole layout story.
 * A phone gets one column with the contents list above the text; from 921 px the
 * list becomes a 260 px column that sticks under the header while the body
 * scrolls past it. Written mobile first, which means the sidebar arrives in a
 * `min-width: 921px` block - the mockups are authored the other way round with
 * `max-width: 920px` and reading them backwards is the translation this project
 * performs everywhere (config/review-rules.md rule 7).
 *
 * WHAT WAS SNAPPED TO THE CANON, each written down rather than quietly rounded:
 *
 *   THE EDITORIAL NOTE'S SURFACE. The mockup paints it on a warm cream the
 *   palette does not carry - it appears four times in this one mockup and
 *   nowhere else in the other thirteen, and the design system has no amber
 *   surface at all. The nearest palette member by ROLE is the error surface,
 *   and the role is a good match rather than a compromise: a note still visible
 *   on the live site means the page shipped unfinished, which is an error state
 *   and not a friendly aside. Meta text on it measures 4.94:1 and clears the
 *   4.5:1 floor. The exact value the design would need is recorded in
 *   docs/dizaino-auditas.md rather than repeated here, because a hex spelled out
 *   in a comment is still a colour that left tokens.css (qa-grep G4). The same
 *   question was settled the same way for the front page (AS-97), the FAQ page
 *   (AS-116) and the contacts page.
 *
 *   TWO RADII BELOW THE SHAPE SCALE. The note is drawn at 8 px and each contents
 *   link at 10 px, and the scale starts at 12 (12-16 icon boxes, 20-28 cards,
 *   999 pills). Both are snapped UP to 12, which is the nearest legal value and
 *   two pixels away in each case - unlike the contacts page's 6 px checkbox,
 *   where snapping up would have turned a square control into a circle and the
 *   radius was dropped instead. This is the same gap in the design system that
 *   AS-128 already records, now with two more instances.
 *
 *   THE SECTION NUMBERS ARE NOT MONOSPACED. The mockup sets 01..07 in JetBrains
 *   Mono, and three separate canon documents restrict that face to documentation
 *   and token values: the design system's own readme, the design skill, and
 *   invariant I9, which says in as many words that any other font-family is a
 *   finding. The theme therefore renders them in the one typeface at the
 *   mockup's size, weight and colour, and the conflict goes to the design round
 *   with everything it needs to decide - including the 22 KB the face would cost
 *   and the twelve elements across three mockups that would use it.
 *
 * ONE MEASUREMENT THE MOCKUP FAILS. Every contents link renders 34.89 px tall at
 * both widths, against the 44 px invariant I8.2 fixes - measured in the rendered
 * mockup, not read off its CSS. The link keeps the drawing's padding and gains a
 * min-height, the same treatment AS-72 and AS-81 gave the payment page's rows.
 */

/* ---------------------------------------------------------------------------
 * Hero
 *
 * The same opening band as the other pages, with one size of its own: this
 * heading is a notch smaller than the rest of the site (30 -> 46 against
 * 32 -> 50). A legal page is quieter, and that is the design saying so.
 */

.legal-hero {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: clamp( 24px, 4vw, 44px );
	padding-bottom: clamp( 14px, 2vw, 22px );
}

.legal-hero > * {
	margin: 0;
}

.legal-hero__title {
	font-size: clamp( 30px, 4.6vw, 46px );
	line-height: 1.08;
}

.legal-hero__updated {
	display: flex;
	align-items: center;
	gap: var( --space-2 );
	color: var( --text-meta );
	font-size: var( --fs-caption );
}

.legal-hero__updated .material-symbols-outlined {
	font-size: 18px;
}

/* ---------------------------------------------------------------------------
 * Layout
 *
 * One column on a phone, contents first. The wrap is what folds it: the body
 * asks for 480 px and the list for 200, so the two share a row only once the
 * container can hold both - which is also how the mockup expresses it.
 */

.legal-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp( 20px, 3vw, 44px );
	padding-top: clamp( 8px, 1.5vw, 16px );
	padding-bottom: clamp( 48px, 7vw, 80px );
}

/* ---------------------------------------------------------------------------
 * Table of contents
 */

.legal-toc {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	gap: 3px;
}

.legal-toc__title {
	margin: 0;
	padding: 6px 12px;
	color: var( --text-heading );
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-bold );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
}

.legal-toc__list {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * min-height rather than more padding: I8.2 asks for the target, not for a
 * taller drawing, and the mockup's 8 px of padding is what sets the text's
 * distance from the corner.
 */
.legal-toc__list a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: var( --radius-sm );
	color: var( --text-body );
	font-size: var( --fs-caption );
	line-height: 1.35;
	text-decoration: none;
}

.legal-toc__list a:hover {
	background: var( --surface-card );
	color: var( --text-link );
}

/*
 * The part label inside the contents list. /paslaugu-taisykles/ only, and it is
 * a plain <li> rather than a link: it names the group of entries under it and is
 * not itself a destination. Smaller than the list's own heading, so the eye
 * reads it as a divider rather than as a first entry.
 *
 * SNAPPED TO THE CANON. The mockup paints it a lighter grey the palette does not
 * carry - tokens.css merged that step away on purpose, because it lands near
 * 3.4:1 and text has a 4.5:1 floor. It takes the meta ink (5.65:1) instead, so
 * the label is quieter than the entries by SIZE rather than by contrast. The
 * exact value the design uses is recorded in docs/dizaino-auditas.md rather than
 * repeated here: a hex spelled out in a comment is still a colour that left
 * tokens.css, which is what qa-grep's G4 rule is looking for.
 */
.legal-toc__part {
	padding: 12px 12px 4px;
	color: var( --text-meta );
	font-size: 11px;
	font-weight: var( --fw-bold );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
}

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

.legal-body {
	display: flex;
	flex: 3 1 480px;
	flex-direction: column;
	/* Without this a long unbroken string - an address, a domain - would push
	 * the column past its share of the row instead of wrapping. */
	min-width: 0;
	gap: clamp( 24px, 3.5vw, 38px );
}

.legal-intro {
	margin: 0;
	color: var( --text-body );
	font-size: clamp( 16px, 1.9vw, 17.5px );
	line-height: 1.7;
}

/*
 * WHERE AN ANCHORED HEADING LANDS, and why the number here is not the mockup's.
 *
 * The mockup writes `scroll-margin-top: 84px` and lands the heading 84 px from
 * the top: its header measures 67 px at 1440, so the air there is 17 px (on a
 * phone the mockup's header shrinks to 63 and the air grows to 21). The theme
 * needs the same 84, but base.css already reserves 64 px of `scroll-padding-top`
 * on `html` so that no anchor on the site lands under the sticky header. The two
 * ADD UP, so writing 84 here put the heading at 148 - measured, and the reason
 * this line is 20 rather than the drawing's number.
 *
 * The theme's header measures 67.4 px at 1440 and 67 on a phone, so 64 + 20
 * leaves about 16 px of air, which is the mockup's spacing to within a pixel.
 */
.legal-section {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
	scroll-margin-top: 20px;
}

.legal-section > * {
	margin: 0;
}

.legal-section__number {
	color: var( --text-link );
	font-size: var( --fs-meta );
	font-weight: var( --fw-bold );
}

.legal-section__title {
	font-size: clamp( 21px, 2.6vw, 27px );
	line-height: 1.16;
	letter-spacing: -0.01em;
}

.legal-section__text {
	color: var( --text-body );
	font-size: 15.5px;
	line-height: 1.7;
}

/* ---------------------------------------------------------------------------
 * The editorial note
 *
 * Deliberately unlike everything else on the page: dashed rather than solid,
 * and on a surface no other block uses. It is scaffolding, and it has to read
 * as scaffolding at a glance - the audit finding that created it (AS-71) was
 * raised because the placeholders looked like content.
 */

.legal-note {
	display: flex;
	align-items: flex-start;
	gap: var( --space-2 );
	padding: 10px 12px;
	border: 1px dashed var( --border-control );
	border-radius: var( --radius-sm );
	background: var( --color-danger-bg );
	color: var( --text-meta );
	font-size: var( --fs-meta );
	line-height: 1.5;
}

.legal-note__icon {
	flex-shrink: 0;
	font-size: 18px;
}

/* ---------------------------------------------------------------------------
 * The controller's details
 *
 * The mockup's two-column grid, rendered by a <dl>. `auto 1fr` is what makes the
 * label column exactly as wide as its longest label and hands the rest to the
 * value, which is the measured behaviour of the drawing.
 */

.legal-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 20px;
	margin: 0;
	padding: clamp( 18px, 2.5vw, 24px );
	border: 1px solid var( --border-hairline );
	border-radius: var( --radius-md );
	background: var( --surface-card );
	font-size: 14.5px;
}

.legal-card dt {
	margin: 0;
	color: var( --text-meta );
}

.legal-card dd {
	margin: 0;
	color: var( --text-heading );
	font-weight: 600;
}

/*
 * The one value that is a link, and it keeps the site's link colour and the
 * browser's underline rather than the contacts page's undecorated treatment.
 * Sitting between two values painted in ink, an unmarked link would be a link
 * nobody can see is one - the address is the way a visitor exercises a data
 * subject right, so it has to look like something you can press.
 *
 * An inline element's box is the height of its glyphs, not of its line, which is
 * why the target measured 17 px until this rule made it inline-block: 14.5px at
 * the body line-height is 23.2 px, so 11 px a side clears 44. The negative
 * margin gives the padding back to the grid so the row keeps the mockup's
 * height, the same technique the footer links use.
 */
.legal-card dd a {
	display: inline-block;
	padding-block: 11px;
	margin-block: -11px;
}

/* ---------------------------------------------------------------------------
 * Optional health-questionnaire consent withdrawal
 *
 * This first-party panel appears only after JavaScript finds and removes a
 * withdrawal token from the URL fragment. The compact white card follows the
 * privacy page's existing legal-card surface and the consent flow's Storybook
 * reference, while the status colours reuse the established role tokens.
 */

.health-withdrawal {
	padding-bottom: var( --space-6 );
}

.health-withdrawal[hidden] {
	display: none;
}

.health-withdrawal__card {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
	max-width: 760px;
	padding: clamp( 18px, 3vw, 26px );
	border: 1px solid var( --border-hairline );
	border-radius: var( --radius-lg );
	background: var( --surface-card );
	box-shadow: var( --shadow-soft );
}

.health-withdrawal__title {
	margin: 0 0 var( --space-3 );
	font-size: 21px;
	line-height: 1.2;
}

.health-withdrawal__text {
	margin: 0 0 var( --space-4 );
	color: var( --text-body );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
}

.health-withdrawal__card .btn {
	white-space: normal;
}

.health-withdrawal__status {
	margin: 0;
	padding: var( --space-3 ) var( --space-4 );
	border-left: 3px solid var( --border-control );
	border-radius: 0 var( --radius-md ) var( --radius-md ) 0;
	background: var( --surface-soft );
	color: var( --text-body );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
}

.health-withdrawal__status--error {
	border-left-color: var( --color-danger );
	background: var( --color-danger-bg );
	color: var( --color-danger-text );
}

[data-health-withdrawal-error] .btn {
	margin-top: var( --space-3 );
}

/* ---------------------------------------------------------------------------
 * Desktop
 *
 * The one breakpoint on the page, and it is the site's own: 921 px is where the
 * header restores its desktop row, so the contents list joins the body in the
 * same movement rather than at a width of its own.
 */

@media ( min-width: 921px ) {

	.legal-toc {
		position: sticky;
		top: 84px;
		flex: 1 1 200px;
		align-self: flex-start;
		max-width: 260px;
	}
}

/* ---------------------------------------------------------------------------
 * Part divider
 *
 * /paslaugu-taisykles/ only. The document carries two legally distinct halves -
 * the distance-selling terms for the vouchers and the rules for a visit - and a
 * reader has to be able to tell which one they are standing in, because the
 * checkout links into the first and the booking consent into the second.
 *
 * A rule plus an eyebrow rather than a heading level: the section outline is
 * h1 -> ten h2s, and slotting an h3 between them to draw a line would break
 * that outline for a screen reader in order to make a visual point. The part is
 * announced in the contents list instead, where it is a plain label rather than
 * a link, so it never becomes a target that scrolls nowhere.
 */

.legal-part {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-top: 1px solid var( --border-hairline );
	scroll-margin-top: 20px;
}

.legal-part > * {
	margin: 0;
}

.legal-part__eyebrow {
	padding-top: 18px;
	color: var( --text-link );
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-bold );
	letter-spacing: var( --ls-eyebrow );
	text-transform: uppercase;
}

.legal-part__title {
	color: var( --text-heading );
	font-size: clamp( 17px, 2vw, 19px );
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
 * The "not trading yet" band
 *
 * The same statement /dovanu-kuponai/ makes above its own terms, on the same
 * amber wash, because it is the same fact: vouchers are sold before the studio
 * reopens, so the buyer is told before the terms rather than inside them.
 *
 * It is NOT an editorial note and deliberately carries no G7 marker. The notes
 * are slots waiting for a lawyer; this is finished text about a real situation,
 * and the day it disappears is the day the studio opens, not the day somebody
 * writes the missing paragraph.
 */

.legal-band {
	display: flex;
	align-items: flex-start;
	gap: var( --space-3 );
	padding: clamp( 16px, 2.4vw, 20px );
	border-radius: var( --radius-lg );
	background: var( --tint-amber );
}

.legal-band .material-symbols-outlined {
	flex-shrink: 0;
	color: var( --color-amber-ink );
}

.legal-band p {
	margin: 0;
	color: var( --text-body );
	font-size: var( --fs-caption );
	line-height: var( --lh-relaxed );
}

/* ---------------------------------------------------------------------------
 * Bulleted terms
 *
 * Legal text that enumerates conditions reads as a list, and it IS one - so it
 * is a <ul>, and the marker is drawn rather than typed. The mockup sets the
 * bullet in the accent colour, which `::marker` cannot take independently of
 * the text in every browser this site supports; a positioned pseudo-element
 * can, and it also keeps the hanging indent exact when a line wraps.
 */

.legal-list {
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
	color: var( --text-body );
	font-size: 15.5px;
	line-height: 1.7;
}

.legal-list li {
	position: relative;
	padding-left: 22px;
}

/*
 * SNAPPED TO THE CANON. The mockup paints the bullet in the fill accent, whose
 * own token comment restricts it to fills, borders and focus rings because it
 * measures 3.27:1 - below the 4.5:1 text floor. A bullet is a glyph the browser
 * paints as text, so it takes the text accent (5.72:1) instead, which is the
 * colour the section numbers and contents links on this same page already use.
 * The same snap the note surface and the two radii above are recorded for.
 */
.legal-list li::before {
	content: "\2022";
	position: absolute;
	left: 4px;
	color: var( --text-link );
}