/*
 * VesiTekno Consent. Wording from traficom.fi, button order from yle.fi (necessary-only left,
 * accept all right, same size). Position from Asetukset → Evästeet: a card at the bottom left
 * (default) or right, a floating bar at the bottom or a centred dialog; on phones the card and
 * bar become a bottom panel. All share one look: white, a hairline edge, square, a soft shadow. Theme tokens
 * with fallbacks. Design and legal basis: trend report "Lisäykset 28.10.2026 (24)".
 */

/* VesiTekno: the novus tokens mapped to the Kadence palette and the site's shapes (11/2026). */
.nvc-banner, .nvc-prefs {
	--nv-ink: var(--global-palette1, #2233ff);        /* buttons, links: brand blue */
	--nv-ink-light: var(--global-palette2, #1b29d1);  /* hover */
	--nv-ink-deep: var(--global-palette4, #000);      /* text (palette4 is the body text colour on this site) */
	--nv-muted: var(--global-palette6, #444);
	--nv-line: var(--global-palette7, #e2e4ea);
	--nv-canvas: var(--global-palette8, #f4f5f8);
	--nv-white: var(--global-palette9, #fff);
	--nv-shadow-ink: #0a1a2e;
	--nv-r-btn: 999px;                                /* pill buttons like the site's own */
	--nv-r-card: 0.75rem;
	--nv-gutter: 1.25rem;
	--nv-wide: 1290px;
	--nv-ease: cubic-bezier(.2, .7, .2, 1);
	--fs-small: 0.9375rem;
	--fs-ui: 0.9375rem;
	--fs-lead: 1.125rem;
	--fs-h3: 1.375rem;
	--ls-h4: 0;
}

/* Shown only when the <head> script flagged html.nvc-ask, or the footer link reopened it. */
.nvc-banner { display: none; color: var(--nv-ink-deep, #0A1A2E); font-size: var(--fs-small, 0.9375rem); line-height: 1.55; }
.nvc-ask .nvc-banner, .nvc-open .nvc-banner { display: block; }
.nvc-banner__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2.5rem; } /* one column that fits the screen */
.nvc-banner p { margin: 0; max-width: 72ch; }
.nvc-banner a { color: var(--nv-ink, #10263F); text-decoration: underline; text-underline-offset: 3px; }
.nvc-banner a:hover { color: var(--nv-ink-light, #2A4566); }
.nvc-banner__actions { display: grid; gap: 0.5rem; justify-items: center; align-content: start; }
.nvc-banner__choices { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 0.75rem; } /* equal width: both take the longer label's width */

/* The two choices look the same: refusing is as easy as accepting (Traficom, EDPB). */
.nvc-btn {
	min-height: 44px; padding: 0.55rem 1.15rem; border-radius: var(--nv-r-btn, 2px); /* the theme's button corner */
	border: 1.5px solid var(--nv-ink, #10263F); background: var(--nv-ink, #10263F); color: var(--nv-white, #fff);
	font: inherit; font-size: var(--fs-ui, 0.9375rem); font-weight: 650; white-space: nowrap; cursor: pointer;
}
.nvc-btn:hover { background: var(--nv-ink-light, #2A4566); border-color: var(--nv-ink-light, #2A4566); }
/* Necessary only: the same size, type and place as accept all, as an outline button (as OP, Evli and Nordea do).
   Allowed while it stays a real button beside accept with readable contrast (Traficom, EDPB taskforce 2023). */
.nvc-banner .nvc-btn[data-nvc="reject"] { background: transparent; color: var(--nv-ink, #10263F); border-color: var(--nv-ink, #10263F); }
.nvc-banner .nvc-btn[data-nvc="reject"]:hover { background: var(--nv-canvas, #F4F3F0); color: var(--nv-ink, #10263F); border-color: var(--nv-ink, #10263F); }
.nvc-link {
	min-height: 44px; padding: 0.25rem 0.5rem; border: 0; background: none; color: var(--nv-ink, #10263F); cursor: pointer;
	font: inherit; font-size: var(--fs-ui, 0.9375rem); font-weight: 650; text-decoration: underline; text-underline-offset: 3px;
}
.nvc-link:hover { color: var(--nv-ink-light, #2A4566); }
/* The theme styles every <button> on hover/focus (blue fill + shadow); this one is a text link. */
.nvc-banner .nvc-link:hover, .nvc-banner .nvc-link:focus, .nvc-banner .nvc-link:active {
	background: none; border: 0; box-shadow: none; color: var(--nv-ink-light, #2A4566); text-decoration: underline;
}
.nvc-btn:focus-visible, .nvc-link:focus-visible, .nvc-banner a:focus-visible { outline: 3px solid var(--nv-ink, #10263F); outline-offset: 3px; }

/* Bottom bar: floats inside the page's width like the corner card (edge, shadow) over the content; --nvc-h (set by the script) only
   keeps focused and anchored elements clear of it. On phones it meets the screen edges as a bottom panel. */
.nvc-banner--bottom {
	position: fixed; z-index: 90; bottom: 1rem; left: 50%; transform: translateX(-50%);
	width: min(calc(var(--nv-wide, 1200px) + 2 * var(--nv-gutter, 1.25rem)), calc(100% - 2rem));
	max-height: calc(85svh - 1rem); overflow-y: auto; overscroll-behavior: contain;
	background: var(--nv-white, #fff); border: 1px solid var(--nv-line, #DCDDDF); border-radius: var(--nv-r-card, 0);
	box-shadow: 0 24px 56px -24px color-mix(in srgb, var(--nv-shadow-ink, #0A1A2E) 45%, transparent);
}

/* Corner card (default): compact, bottom left, the page usable meanwhile; the page reserves its height so nothing at
   the very end stays under it. On phones a full-width bottom panel. */
:is(.nvc-banner--corner, .nvc-banner--corner-right) {
	position: fixed; z-index: 90; left: max(1.5rem, env(safe-area-inset-left)); bottom: 1.5rem;
	width: min(28rem, calc(100% - 3rem)); max-height: calc(100svh - 3rem); overflow-y: auto; overscroll-behavior: contain;
	background: var(--nv-white, #fff); border: 1px solid var(--nv-line, #DCDDDF); border-radius: var(--nv-r-card, 0);
	box-shadow: 0 24px 56px -24px color-mix(in srgb, var(--nv-shadow-ink, #0A1A2E) 45%, transparent);
}
:is(.nvc-banner--corner, .nvc-banner--corner-right) .nvc-banner__inner { padding: 1.5rem; gap: 1.25rem; }
:is(.nvc-banner--corner, .nvc-banner--corner-right) .nvc-banner__actions { justify-items: stretch; }
:is(.nvc-banner--corner, .nvc-banner--corner-right) .nvc-banner__choices { grid-template-columns: 1fr; }
:is(.nvc-banner--corner, .nvc-banner--corner-right) .nvc-btn { white-space: normal; }
:is(.nvc-banner--corner, .nvc-banner--corner-right) .nvc-link { justify-self: center; }
.nvc-banner--corner-right { left: auto; right: max(1.5rem, env(safe-area-inset-right)); }
@media (max-width: 599px) {
	:is(.nvc-banner--corner, .nvc-banner--corner-right) { left: 0; right: 0; bottom: 0; width: auto; max-height: 85svh; border-width: 1px 0 0; }
	:is(.nvc-banner--corner, .nvc-banner--corner-right) .nvc-banner__inner { padding: 1.25rem var(--nv-gutter, 1.25rem) calc(1.25rem + env(safe-area-inset-bottom)); }
}
.nvc-banner--bottom .nvc-banner__inner { padding: 1.25rem 1.5rem; }
@media (max-width: 599px) {
	.nvc-banner--bottom { bottom: 0; width: 100%; max-height: 85svh; border-width: 1px 0 0; }
	.nvc-banner--bottom .nvc-banner__inner { padding: 1.25rem var(--nv-gutter, 1.25rem) calc(1.25rem + env(safe-area-inset-bottom)); }
}
html.nvc-ask:not(.nvc-modal), html.nvc-open:not(.nvc-modal) { scroll-padding-bottom: var(--nvc-h, 0px); }
/* No room is added under the page for the banner: it floats over the content and the page keeps its own length. */
@media (max-width: 899px) {
	.nvc-banner--bottom .nvc-btn { white-space: normal; } /* long labels (German) wrap instead of widening the page */
}
@media (min-width: 900px) {
	.nvc-banner--bottom .nvc-banner__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* Centred dialog: the page behind is inert (script) and dimmed, and does not scroll. */
.nvc-banner--center {
	position: fixed; z-index: 1000; inset: 0; padding: 1rem;
	background: color-mix(in srgb, var(--nv-shadow-ink, #0A1A2E) 60%, transparent); overflow-y: auto;
}
.nvc-ask .nvc-banner--center, .nvc-open .nvc-banner--center { display: grid; place-items: center; }
.nvc-banner--center .nvc-banner__inner {
	width: min(40rem, 100%); padding: 2rem; border: 1px solid var(--nv-line, #DCDDDF); border-radius: var(--nv-r-card, 0);
	background: var(--nv-white, #fff); box-shadow: 0 24px 64px -24px rgb(0 0 0 / .6);
}
.nvc-banner--center .nvc-banner__actions { justify-items: stretch; }
.nvc-banner--center .nvc-btn { white-space: normal; }
.nvc-banner--center .nvc-link { justify-self: center; }
.nvc-modal, .nvc-modal body { overflow: hidden; }
.nvc-banner:focus { outline: none; }

/* Second layer: category dialog (as on yle.fi). Centred card; on phones a bottom sheet. */
.nvc-prefs {
	width: min(34rem, calc(100% - 2rem)); max-height: min(40rem, calc(100svh - 2rem)); padding: 0;
	border: 1px solid var(--nv-line, #DCDDDF); border-radius: var(--nv-r-card, 0); background: var(--nv-white, #fff); color: var(--nv-ink-deep, #0A1A2E);
	box-shadow: 0 24px 64px -24px rgb(0 0 0 / .6); font-size: var(--fs-small, 0.9375rem); line-height: 1.55;
}
.nvc-prefs::backdrop { background: color-mix(in srgb, var(--nv-shadow-ink, #0A1A2E) 60%, transparent); }
.nvc-prefs[open] { animation: nvc-in .2s var(--nv-ease, ease-out); }
@keyframes nvc-in { from { opacity: 0; transform: translateY(12px); } }
.nvc-prefs__inner { display: grid; gap: 1.25rem; padding: 1.75rem; }
.nvc-prefs__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nvc-prefs__head h2 { margin: 0; font-size: var(--fs-h3, 1.375rem); line-height: 1.2; letter-spacing: 0; }
.nvc-prefs__close {
	flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -0.5rem -0.5rem -0.5rem 0;
	border: 0; border-radius: var(--nv-r-btn, 2px); background: none; color: inherit; cursor: pointer;
}
.nvc-prefs__close:hover { background: var(--nv-canvas, #F4F3F0); }
.nvc-prefs__list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.nvc-cat { padding: 0.25rem 1rem; border: 1px solid var(--nv-line, #DCDDDF); border-radius: var(--nv-r-card, 0); background: transparent; }
.nvc-cat__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nvc-cat__toggle {
	display: flex; align-items: center; gap: 0.5rem; min-height: 52px; padding: 0; border: 0; background: none;
	color: inherit; font: inherit; font-size: var(--fs-ui, 0.9375rem); font-weight: 650; text-align: left; cursor: pointer;
}
.nvc-cat__chev { flex: none; transition: transform .15s; }
.nvc-cat__toggle[aria-expanded="true"] .nvc-cat__chev { transform: rotate(90deg); }
.nvc-cat__desc { margin: 0 0 0.9rem 1.625rem; color: inherit; display: grid; gap: 0.4rem; } /* reading text: ink */
.nvc-cat__desc[hidden] { display: none; }
.nvc-cat__desc p { margin: 0; }
.nvc-cat__time { font-size: var(--fs-small, 0.875rem); font-weight: 600; color: var(--nv-ink, #10263F); }
/* Necessary cookies: no switch (there is no choice), the status in words. */
.nvc-cat__always { flex: none; font-size: var(--fs-small, 0.875rem); font-weight: 600; color: var(--nv-ink, #10263F); }
.nvc-cat__time:empty { display: none; }

/* Switch */
.nvc-switch {
	appearance: none; flex: none; position: relative; width: 46px; height: 28px; margin: 0;
	border-radius: 999px; background: var(--nv-muted, #4E5866); cursor: pointer; transition: background-color .15s; /* off: 3:1 or more on white (WCAG 1.4.11) */
}
.nvc-switch::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--nv-white, #fff); box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .15s;
}
.nvc-switch:checked { background: var(--nv-ink, #10263F); }
.nvc-switch:checked::after { transform: translateX(18px); }
.nvc-switch:disabled { opacity: .45; cursor: not-allowed; }

.nvc-prefs__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.nvc-btn--ghost { background: transparent; color: var(--nv-ink, #10263F); }
.nvc-btn--ghost:hover { background: var(--nv-canvas, #F4F3F0); color: var(--nv-ink, #10263F); border-color: var(--nv-ink, #10263F); }
.nvc-prefs__close:focus-visible, .nvc-cat__toggle:focus-visible, .nvc-switch:focus-visible { outline: 3px solid var(--nv-ink, #10263F); outline-offset: 3px; }

/* Phones: stacked in the source order, so what is seen first is also focused first (WCAG C27; no CSS order,
   report "Lisäykset 29.10.2026 (27)"); the dialog becomes a bottom sheet. */
@media (max-width: 599px) {
	.nvc-banner__actions { justify-items: stretch; }
	.nvc-banner__choices { grid-template-columns: 1fr; }
	.nvc-btn { white-space: normal; }
	.nvc-link { justify-self: center; }
	.nvc-banner--center .nvc-banner__inner { padding: 1.5rem 1.25rem; }
	.nvc-prefs { width: 100%; max-width: 100%; max-height: 90svh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 0; }
	.nvc-prefs[open] { animation-name: nvc-up; }
	@keyframes nvc-up { from { transform: translateY(100%); } }
	.nvc-prefs__inner { padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
	.nvc-prefs__actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.nvc-prefs[open] { animation: none; }
	.nvc-switch, .nvc-switch::after, .nvc-cat__chev { transition: none; }
}
/* Visible title: names the banner (aria-labelledby) and tells at a glance what it is about. */
.nvc-banner__title { margin: 0 0 0.35rem; font-size: var(--fs-lead, 1.1875rem); font-weight: 720; line-height: 1.25; letter-spacing: var(--ls-h4, -0.01em); color: inherit; }

/* Compact size (Asetukset → Evästeet, default): the title starts the text and the two buttons sit side by side
   in every position, so the banner stays low (phones: about a third of the screen at most, report 24):
   necessary-only left, accept all right, both the same size. */
.nvc-banner.nvc-banner--compact .nvc-banner__title { display: inline; margin: 0 0.4em 0 0; font-size: inherit; line-height: inherit; }
.nvc-banner.nvc-banner--compact .nvc-banner__text p { display: inline; }
.nvc-banner.nvc-banner--compact .nvc-banner__choices { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.nvc-banner.nvc-banner--compact .nvc-btn { white-space: normal; padding-inline: 0.75rem; }
.nvc-banner.nvc-banner--compact .nvc-link { min-height: 2rem; } /* 32px: above the 24px target size (WCAG 2.5.8) */
.nvc-banner.nvc-banner--compact .nvc-banner__actions { gap: 0.25rem; }
@media (max-width: 599px) {
	.nvc-banner.nvc-banner--compact .nvc-banner__inner { gap: 0.75rem; padding-top: 1rem; }
	.nvc-banner.nvc-banner--compact .nvc-btn { font-size: var(--fs-small, 0.9375rem); padding-inline: 0.5rem; } /* both labels on one line at 360px */
}

/* Theme button hover/focus (blue fill, white text, drop shadow) applies to every <button>: undo it inside the
   banner and settings dialog so each control keeps its own colours. */
.nvc-banner button:hover, .nvc-banner button:focus, .nvc-prefs button:hover, .nvc-prefs button:focus { box-shadow: none; }
.nvc-prefs .nvc-prefs__close:hover, .nvc-prefs .nvc-prefs__close:focus { color: var(--nv-ink, #10263F); background: var(--nv-canvas, #F4F3F0); }
.nvc-prefs .nvc-cat__toggle:hover, .nvc-prefs .nvc-cat__toggle:focus { color: var(--nv-ink, #10263F); background: var(--nv-canvas, #F4F3F0); }