/* 2026-10-13: role surfaces supersede the historic mint mappings discussed below.
 * White helpers, paper gifts, dark closing actions; mint only for signed Diana quotes.
 */
/*
 * The contacts page.
 *
 * The fifth 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 other four it declares no colour of
 * its own.
 *
 * MOBILE FIRST WITH NO BREAKPOINT OF OUR OWN. Every band on this page is either
 * one column or an auto-fit grid that folds on its own when the columns can no
 * longer hold their minimum, which is how the mockup expresses it too. A media
 * query here would put a boundary where the design has none.
 *
 * TWO WIDTHS, BOTH THE MOCKUP'S. The page rides the shared 1100 px container,
 * except the location card, which the mockup caps at 640 px and centres. 640 is
 * one of the narrow reading widths the measurer knows (canon.mjs
 * NARROW_MAX_WIDTHS), and nothing inside it is meant to line up with the bands
 * above or below.
 *
 * WHAT WAS SNAPPED TO THE CANON, each written down rather than quietly rounded:
 *
 *   THREE COLOURS THE MOCKUP INVENTS. Its error banner sits on a pink the
 *   palette does not carry, its success tick is a green the palette does not
 *   carry, and the teaser's lead is a dark teal the palette does not carry -
 *   three values for three roles the palette already names. All three take the
 *   nearest palette member (--color-danger-bg, --color-green-ink,
 *   --color-mint-ink), which is exactly how AS-97 and AS-116 settled the same
 *   question for the front page and the FAQ page. Every one of them clears the
 *   contrast floor, so what is traded here is a shade. The values themselves are
 *   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 CONSENT BOX IS SQUARE. The mockup draws it as a 24 px box with a 6 px
 *   corner, and 6 px is outside the shape scale qa-tokens enforces (12-16 icon
 *   boxes, 20-28 cards, 999 pills). Snapping it up is not available either: at
 *   24 px a 12 px radius is exactly half the box and the checkbox comes out a
 *   circle, which is the shape that means "radio button". So the radius is
 *   dropped, which is what base.css already did the last time a 6 px corner
 *   arrived from the design - and it is a gap in the system rather than a slip
 *   in this mockup. Counted across all fourteen: 6 px appears 33 times - 28 as
 *   `border-radius: 6px` and 5 as the inline `borderRadius: 6` the mockups'
 *   renderer emits, which is the form the consent box itself uses. For scale,
 *   `border-radius: 10px` appears 33 times and 14px 22 times. The system's
 *   smallest entry is 12. Filed as an open question for the design system.
 *
 *   ONE CONTRAST THE PALETTE CANNOT MEET. An unchecked box is a white square
 *   with a --tint-line-strong border on a white card, which measures 1.46:1 -
 *   under the 3:1 invariant I15.1 asks of a UI element, and on a checkbox that
 *   border is the ONLY thing saying the control is there. The palette has no
 *   light neutral anywhere near 3:1, so the theme does not invent one (AS-132,
 *   open against the design system). The class is not new: --border-control
 *   measures 1.40:1 and already draws the secondary button on five shipped
 *   pages. The CHECKED state passes at 3.27:1.
 *
 *   TWO TOUCH TARGETS. Measured in the rendered mockup at 390 px, not read off
 *   its CSS: the two direct contact rows are 358x42 and the consent row is
 *   318x41 around a 24 px square. All of them are under the 44 px floor
 *   invariant I8.2 fixes. Neither VISUAL grows - I8.2 asks for the target, not
 *   the drawing - so the rows get a min-height the 42 px circle sits inside, and
 *   the checkbox gets the treatment below.
 *
 * HOW THE CHECKBOX REACHES 44 PX WITHOUT BECOMING A 44 PX CHECKBOX. The input is
 * transparent, fills the whole 44 px target and sits above the 24 px square the
 * visitor actually sees. It is a real <input type="checkbox"> with a real
 * <label for>, so the keyboard, the browser's own required-field message and the
 * accessibility tree all behave exactly as they would with no styling at all;
 * only the painting moved to the sibling.
 *
 * The one thing that has to move with it is the focus ring: an outline drawn on
 * an element with opacity 0 is an invisible outline, so base.css's ring is
 * turned off for the input and drawn on the square instead. Without that pair
 * the page keeps a :focus-visible rule that qa-a11y is happy with and a control
 * whose focus nobody can see - which is finding AS-120 all over again.
 */

/* ---------------------------------------------------------------------------
 * Section rhythm
 *
 * The same shape as the other pages': no space above, a gap below, and the
 * shared container. The FAQ teaser closes the page, so its gap is the larger one.
 */

.kt-section {
	padding-block: 0 clamp( 24px, 3.5vw, 40px );
}

.kt-faq {
	padding-block: 0 clamp( 48px, 7vw, 80px );
}

/* ---------------------------------------------------------------------------
 * Hero
 */

.kt-hero {
	display: flex;
	flex-direction: column;
	padding-block: clamp( 28px, 5vw, 60px ) clamp( 20px, 3vw, 32px );
	gap: 14px;
}

.kt-hero__title {
	margin: 0;
	font-size: clamp( 32px, 5vw, 50px );
}

.kt-hero__lead {
	max-width: 640px;
	margin: 0;
	color: var( --text-body );
	font-size: clamp( 16px, 2vw, 19px );
}

/* ---------------------------------------------------------------------------
 * Where Diana works
 *
 * What is left of the mockup's location card once the map tile, the navigation
 * buttons and the opening hours are gone - page-kontaktai.php sets out why each
 * of them is. The card keeps the mockup's width, its corner and its lift.
 */

.kt-place__card {
	display: flex;
	flex-direction: column;
	max-width: 640px;
	margin-inline: auto;
	padding: clamp( 20px, 2.6vw, 28px );
	gap: 14px;
	background: var( --surface-card );
	border-radius: var( --radius-2xl );
	box-shadow: var( --shadow-card );
}

/*
 * In the mockup this pill floats over the map tile on a translucent white. With
 * the tile gone it would be a white pill on a white card, so it takes the
 * palette member the tokens file names for exactly this job - "location pills"
 * is --color-mint's own description - rather than a new tint.
 */
.kt-place__chip {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin: 0;
	padding: var( --space-2 ) 14px;
	gap: 6px;
	background: var( --tint-ice );
	border-radius: var( --radius-pill );
	color: var( --color-accent-text );
	font-size: var( --fs-meta );
	font-weight: var( --fw-bold );
}

.kt-place__chip .material-symbols-outlined {
	font-size: 16px;
}

.kt-place__facts {
	display: flex;
	flex-direction: column;
	margin: 0;
	gap: 14px;
}

/*
 * The mockup's row is one flex line: a 22 px icon, then a column with the small
 * label above the value. A valid <dl> cannot express that nesting - the term and
 * the description have to be siblings - so the same picture is drawn the other
 * way round: the icon rides inside the term, and the description is indented to
 * start under it. 34 px is the icon's own advance (22, one em at this size) plus
 * the 12 px gap, so the value lines up with the label to the pixel.
 */
.kt-fact {
	display: flex;
	flex-direction: column;
}

.kt-fact__label {
	display: flex;
	align-items: flex-start;
	gap: var( --space-3 );
	color: var( --text-meta );
	font-size: var( --fs-eyebrow );
}

.kt-fact__icon {
	flex-shrink: 0;
	color: var( --text-link );
	font-size: 22px;
}

.kt-fact__value {
	margin: 0 0 0 34px;
	color: var( --text-heading );
	font-size: var( --fs-sm );
	font-weight: 600;
}

/* Padding pulled back by an equal negative margin, the same technique the footer
 * links use: 15px text at line-height 1.6 is 24 px, so 10 px a side lands at
 * 44 px without the row growing. */
.kt-fact__value a {
	display: inline-block;
	padding-block: 10px;
	margin-block: -10px;
	color: inherit;
	text-decoration: none;
}

.kt-fact__value a:hover {
	color: var( --text-link );
}

.kt-place__action {
	margin: 2px 0 0;
}

.kt-place__book {
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * The message form
 *
 * ONE COLUMN UNTIL THE CHROME BREAKPOINT, two above it.
 *
 * The mockup folds this grid on its own with an auto-fit track floor of 300 px,
 * which puts the fold at about 660 px - so a tablet got the form squeezed into
 * half the page while the other half held three lines of introduction. Andrius
 * asked for the form to run the full width on a tablet exactly as it does on a
 * phone (2026-08-29, WPS-066), and that is a departure from the mockup rather
 * than a correction to it: the mockup draws two columns at 768, 900 and 1024
 * (measured).
 *
 * 1100 px, so the fold matches the breakpoint everything else in the chrome
 * uses - below it the site is in its compact mode, and a form the visitor has
 * to type into belongs in the full width there. The auto-fit rule is kept above
 * that point rather than replaced, so the desktop layout is still the mockup's.
 */

.kt-form {
	display: grid;
	grid-template-columns: 1fr;
	padding-block: clamp( 12px, 2vw, 20px ) clamp( 24px, 3.5vw, 40px );
	gap: clamp( 24px, 4vw, 48px );
	align-items: start;
}

/*
 * DESKTOP IS 2:3, NOT 1:1 (Andrius, 2026-08-29). The auto-fit rule the mockup
 * uses splits the row down the middle, which reads as the page being halved and
 * gives the half a visitor has to TYPE into no more room than the half they
 * only read. The introduction is a heading, three lines and two contact rows -
 * it needs less. minmax(0, …) rather than bare fr so a long e-mail address
 * cannot push the intro column wider than its share.
 */
@media ( min-width: 1100px ) {

	.kt-form {
		grid-template-columns: minmax( 0, 2fr ) minmax( 0, 3fr );
	}
}

.kt-form__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kt-form__title {
	margin: 0;
	font-size: clamp( 24px, 3.2vw, 34px );
	line-height: var( --lh-heading );
}

.kt-form__lead {
	max-width: 460px;
	margin: 0;
	color: var( --text-body );
	font-size: var( --fs-body );
}

/* ---------------------------------------------------------------------------
 * Write or call, without the form
 */

.kt-direct {
	display: flex;
	flex-direction: column;
	margin: 6px 0 0;
	gap: var( --space-3 );
}

/*
 * min-height, not a bigger circle. The 42 px mark is the design; 44 px is the
 * target invariant I8.2 asks for, and the two are different things.
 */
.kt-direct__link {
	display: flex;
	align-items: center;
	min-height: 44px;
	gap: var( --space-3 );
	color: inherit;
	text-decoration: none;
}

.kt-direct__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var( --tint-ice );
	border-radius: 50%;
	color: var( --color-accent-text );
}

.kt-direct__icon .material-symbols-outlined {
	font-size: 20px;
}

.kt-direct__body {
	display: flex;
	flex-direction: column;
}

.kt-direct__label {
	color: var( --text-meta );
	font-size: var( --fs-eyebrow );
}

.kt-direct__value {
	color: var( --text-heading );
	font-size: var( --fs-sm );
	font-weight: var( --fw-bold );
}

.kt-direct__link:hover .kt-direct__value {
	color: var( --text-link );
}

/* ---------------------------------------------------------------------------
 * The form card
 */

.kt-form__card {
	padding: clamp( 20px, 3vw, 32px );
	background: var( --surface-card );
	border-radius: clamp( 20px, 2.5vw, 28px );
	box-shadow: var( --shadow-card );
}

.kt-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kt-fields__row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 160px ), 1fr ) );
	gap: 14px;
}

.kt-field {
	display: flex;
	flex-direction: column;
	margin: 0;
	gap: 6px;
}

.kt-field__label {
	color: var( --text-heading );
	font-size: 13px;
	font-weight: 600;
}

.kt-field__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	background: var( --surface-page );
	border: 1px solid var( --tint-line-strong );
	border-radius: var( --radius-sm );
	color: var( --text-heading );
	font-family: var( --font-sans );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
	transition:
		background var( --dur ) var( --ease ),
		border-color var( --dur ) var( --ease );
}

/*
 * The mockup paints the field's resting border in the value the design system
 * carries as --tint-line-strong. Its documented role there is card and map
 * outlines rather than form fields, so the token is used and the role gap is
 * noted rather than a second token being invented for the same hex.
 */
.kt-field__input:focus {
	background: var( --surface-card );
	border-color: var( --color-accent );
}

.kt-field__input::placeholder {
	color: var( --text-meta );
	opacity: 1;
}

.kt-field__select {
	cursor: pointer;
}

.kt-field__textarea {
	resize: vertical;
	line-height: var( --lh-relaxed );
}

/* ---------------------------------------------------------------------------
 * The consent row
 *
 * The header comment explains the pair: a transparent 44 px input over a 24 px
 * square. The negative margin keeps the square where the mockup draws it while
 * the target extends past it in every direction.
 */

.kt-consent {
	display: flex;
	align-items: flex-start;
	margin: 0;
	gap: 10px;
}

/*
 * -10px on three sides, not -11 on the left. Both numbers are (44 - box) / 2,
 * and the left one was derived from the 22 px square this file used to draw -
 * so after the square grew to 24 the mark sat one pixel left of the text block
 * it is supposed to line up with. Measured, and the kind of arithmetic that only
 * goes wrong when a constant moves.
 */
.kt-consent__control {
	position: relative;
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: -10px 0 -10px -10px;
}

.kt-consent__box {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/*
 * 24, not the 22 the mockup's inline style names. That style is React's, where a
 * width is the CONTENT box, so the border it declares in the next line lands
 * outside it - measured in the rendered mockup, the square is 24x24. This theme
 * sets border-box on everything (base.css), so 22 here would have shipped a
 * square two pixels smaller than the design.
 */
.kt-consent__mark {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;

	/*
	 * THE SQUARE MUST NOT ANSWER THE POINTER, and this line is the difference
	 * between a working checkbox and one with a hole in the middle.
	 *
	 * The tick inside carries opacity: 0 while unchecked. An opacity below 1
	 * creates a stacking context, so the tick paints in its own layer - and
	 * because it comes AFTER the absolutely positioned input in the document, it
	 * paints on top of it and takes the hit test with it. The control is a
	 * <span> rather than a <label>, so a click that lands there has nowhere to
	 * go and is simply lost.
	 *
	 * Measured on the built page at 390 px: 357 of the target's 1936 pixels
	 * answered with the tick instead of the input - one solid block in the exact
	 * middle of the 24 px square - and a real mouse click on the centre did not
	 * tick the box, while a click four pixels in from the corner did. With this
	 * line: 0 dead pixels, and the centre works.
	 *
	 * Asymmetric, which is what made it easy to miss: once checked, the tick is
	 * opaque, the stacking context is gone and the centre starts working again.
	 * So the box could always be UNticked in the middle and never ticked there.
	 * The keyboard and the label text were unaffected throughout, which is why
	 * every gate stayed green: qa-measure sees a 44x44 rect, qa-a11y sees a
	 * label. Neither asks what answers at the centre of a target.
	 */
	pointer-events: none;
	background: var( --surface-card );
	border: 1px solid var( --tint-line-strong );
	color: var( --color-surface );
	transition:
		background var( --dur-fast ) var( --ease ),
		border-color var( --dur-fast ) var( --ease );
}

.kt-consent__mark .material-symbols-outlined {
	font-size: 16px;
	opacity: 0;
}

.kt-consent__box:checked + .kt-consent__mark {
	background: var( --color-accent );
	border-color: var( --color-accent );
}

.kt-consent__box:checked + .kt-consent__mark .material-symbols-outlined {
	opacity: 1;
}

/* An outline on a transparent element is an outline nobody sees, so base.css's
 * ring moves to the square the visitor is looking at. */
.kt-consent__box:focus-visible {
	outline: none;
}

.kt-consent__box:focus-visible + .kt-consent__mark {
	outline: 3px solid var( --focus-ring );
	outline-offset: 2px;
}

.kt-consent__text {
	color: var( --text-body );
	font-size: 13.5px;
	line-height: var( --lh-relaxed );
	cursor: pointer;
}

.kt-consent__text a {
	font-weight: 600;
	text-decoration: none;
}

.kt-consent__text a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * The two outcomes
 */

.kt-error {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 10px 14px;
	gap: var( --space-2 );
	background: var( --color-danger-bg );
	border-radius: var( --radius-sm );
	color: var( --color-danger-text );
	font-size: 13.5px;
	font-weight: 600;
}

.kt-error .material-symbols-outlined {
	flex-shrink: 0;
	font-size: 18px;
}

.kt-submit {
	width: 100%;
	padding-block: 15px;
}

/*
 * The honeypot. display:none rather than the hidden attribute or an off-screen
 * clip, because display:none is the one that takes the field out of the tab
 * order AND out of the accessibility tree in a single declaration - and because
 * a field a robot fills has to be a field a person is never offered.
 */
.kt-trap {
	display: none;
}

.kt-sent {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: clamp( 16px, 3vw, 32px );
	gap: var( --space-3 );
	text-align: center;
}

.kt-sent__icon {
	color: var( --color-green-ink );
	font-size: 52px;
}

.kt-sent__title {
	margin: 0;
	color: var( --text-heading );
	font-size: 21px;
	font-weight: var( --fw-black );
}

.kt-sent__text {
	max-width: 360px;
	margin: 0;
	color: var( --text-meta );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
}

/* ---------------------------------------------------------------------------
 * Company details
 */

.kt-legal__card {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 240px ), 1fr ) );
	padding: clamp( 22px, 3vw, 36px );
	gap: clamp( 20px, 3vw, 40px );
	background: var( --surface-card );
	border: 1px solid var( --border-hairline );

	/*
	 * The mockup writes clamp( 18px, 2.2vw, 24px ) here and on the teaser below.
	 * On a 390 px phone 2.2vw is 8.6, so both corners land on the clamp's FLOOR -
	 * 18 px, under the 20 px the shape scale starts cards at. Raising the floor to
	 * 20 costs two pixels at phone width and nothing at all above 909 px, where
	 * the middle term takes over. Measured rather than assumed, and filed against
	 * the mockup: a card corner is not supposed to leave the scale on the one
	 * width the whole site is designed for first.
	 */
	border-radius: clamp( 20px, 2.2vw, 24px );
}

.kt-legal__intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kt-legal__title {
	margin: 0;
	font-size: clamp( 19px, 2.4vw, 24px );
	line-height: 1.16;
}

.kt-legal__text {
	max-width: 340px;
	margin: 0;
	color: var( --text-meta );
	font-size: var( --fs-caption );
	line-height: var( --lh-body );
}

/*
 * A description list drawn as a two-column grid: the labels take the width they
 * need and the values take the rest. grid-auto-flow stays the default row order,
 * so a term and its description always land on the same line.
 */
.kt-legal__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 0;
	gap: var( --space-3 ) var( --space-6 );
	align-content: start;
	font-size: 14.5px;
}

.kt-legal__facts dt {
	color: var( --text-meta );
}

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

/* 14.5px at line-height 1.6 is 23.2 px, so 11 px a side clears 44. */
.kt-legal__facts dd a {
	display: inline-block;
	padding-block: 11px;
	margin-block: -11px;
	text-decoration: none;
}

.kt-legal__facts dd a:hover {
	color: var( --text-heading );
}

.kt-legal__external {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.kt-legal__external .material-symbols-outlined {
	font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * The FAQ teaser
 */

.kt-faq__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: clamp( 22px, 3vw, 36px );
	gap: 18px var( --space-6 );
	background: var( --surface-card );

	/* The same clamp, raised off the same floor - see the details card above. */
	border-radius: clamp( 20px, 2.2vw, 24px );

	border: 1px solid var( --border-hairline );
}

.kt-faq__body {
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 260px;
	gap: var( --space-4 );
}

.kt-faq__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var( --tint-ice );
	border-radius: 50%;
	color: var( --color-accent-text );
}

.kt-faq__icon .material-symbols-outlined {
	font-size: 28px;
}

.kt-faq__title {
	margin: 0;
	font-size: clamp( 19px, 2.4vw, 24px );
	line-height: 1.16;
}

.kt-faq__text {
	max-width: 440px;
	margin: var( --space-1 ) 0 0;
	color: var( --text-body );
	font-size: var( --fs-sm );
	line-height: var( --lh-relaxed );
}

.kt-faq__cta {
	flex-shrink: 0;
	padding: 14px 28px;
	background: var( --action-primary );
	color: var( --color-surface );
}

/* The mockup darkens this one button to the mint ink rather than to the shared
 * accent, because it sits on the mint panel. White on it measures 6.59:1. */
.kt-faq__cta:hover {
	background: var( --action-primary-hover );
}