/* sms-zmenki.com 2026 redesign: page styles (pravno). Built on css/zm2026.css; same breakpoints: 1100px, 900px, 640px, 420px.
 * privacy.php (/zasebnost.html) and cookies.php (/o-piskotkih.html): long-form reading layout inside the white panel.
 * Markup: .zm-panel.zm-legal > nav.zm-legal__toc ("Na tej strani") + .zm-legal__body (the legal text, h3 sections, h4 subsections).
 * Note: head.php sets <base href>, so in-page links are written as /page.html#id (never a bare #id).
 * The contents box is a <details open> (summary = "Na tej strani"); a small inline script in each page closes it on phones (<=640px)
 * and keeps it open (summary inert) above that. Without JS it simply stays open. */

/* ---------- Layout: contents column + reading column ---------- */
/* Desktop: the contents box sits at the panel's left padding (where today's site had its left column); the text keeps a
 * 40rem (~70ch) reading measure and the cookie tables may use the whole column to its right. */
.zm-legal {
	--zm-legal-measure: 40rem;
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	justify-content: start;
	align-items: start;
	gap: 0 64px;
	padding: 36px 32px 40px;
	font-size: 16px;
}
.zm-legal .zm-nowrap { white-space: nowrap; }

/* ---------- "Na tej strani" (contents) ---------- */
.zm-legal__toc {
	position: -webkit-sticky; position: sticky; top: 16px;
	max-height: calc(100vh - 120px); overflow-y: auto; /* stays clear of the sticky cookie bar */
	padding: 16px 18px 12px;
	border: 1px solid var(--zm-pink-300); border-top: 4px solid var(--zm-plum-500); border-radius: var(--zm-radius);
	background: linear-gradient(180deg, #FDF3F7 0%, #FFFFFF 140px);
}
.zm-legal__toc-title {
	display: block; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--zm-pink-300);
	font-family: var(--zm-font-head); font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: .04em;
	text-transform: uppercase; color: var(--zm-plum-600);
	list-style: none; cursor: default;
}
.zm-legal__toc-title::-webkit-details-marker { display: none; }
.zm-legal__toc-title::marker { content: ""; }
.zm-legal__toc-title::after { display: none; } /* chevron: phones only */
.zm-legal__toc ol { margin: 0; padding: 0; list-style: none; }
.zm-legal__toc li { margin: 0; }
.zm-legal__toc a {
	display: block; padding: 6px 0;
	font-size: 14px; line-height: 20px; font-weight: 600;
	color: var(--zm-plum-700); text-decoration: none;
}
.zm-legal__toc a:hover { color: var(--zm-plum-400); text-decoration: underline; text-underline-offset: 3px; }
.zm-legal__toc ol ol { margin: 0 0 6px; padding-left: 12px; border-left: 2px solid var(--zm-pink-300); }
.zm-legal__toc ol ol a { padding: 4px 0 4px 2px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--zm-rose-600); }
.zm-legal__toc ol ol a:hover { color: var(--zm-plum-700); }

/* ---------- Reading column ---------- */
.zm-legal__body {
	min-width: 0; max-width: 100%;
	font-size: 16px; line-height: 27px; color: var(--zm-text);
	text-align: left; overflow-wrap: break-word; word-wrap: break-word;
}
.zm-legal__body > * { max-width: var(--zm-legal-measure); }
.zm-legal__body > .zm-legal__table { max-width: none; }
.zm-legal__body p, .zm-legal__body ul { margin: 0 0 14px; }
.zm-legal__body p:last-child { margin-bottom: 0; }
.zm-legal__lead {
	font-size: 18px; line-height: 30px; color: var(--zm-plum-800);
}
.zm-legal__body p.zm-legal__lead { margin-bottom: 8px; }
.zm-legal__body h3 {
	margin: 36px 0 14px; padding-top: 28px; border-top: 1px solid var(--zm-pink-300);
	font-family: var(--zm-font-head); font-weight: 700; font-size: 23px; line-height: 30px;
	color: var(--zm-plum-600);
	scroll-margin-top: 16px;
}
.zm-legal__body h4 {
	margin: 28px 0 8px;
	font-family: var(--zm-font-head); font-weight: 700; font-size: 18px; line-height: 25px;
	color: var(--zm-plum-800);
	scroll-margin-top: 16px;
}
.zm-legal__body h3 + h4 { margin-top: 18px; }
.zm-legal__body ul { padding-left: 22px; }
.zm-legal__body li { margin: 0 0 8px; padding-left: 4px; }
.zm-legal__body li::marker { color: var(--zm-rose-400); }
.zm-legal__body strong { font-weight: 700; color: #2B1622; }
.zm-legal__body a { color: var(--zm-plum-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zm-legal__body a:hover { color: var(--zm-plum-400); text-decoration-thickness: 2px; }
.zm-legal__body code {
	padding: 1px 3px; border-radius: 3px; /* no border: punctuation next to a chip stays close to it */
	background: var(--zm-pink-200); color: var(--zm-plum-800);
	font-family: ui-monospace, Consolas, Menlo, "Courier New", monospace; font-size: .86em; line-height: 1;
	white-space: nowrap;
}
.zm-legal__body p.zm-legal__updated {
	margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--zm-pink-300);
	font-size: 14px; line-height: 20px; color: var(--zm-grey-600);
}

/* ---------- Cookie tables ---------- */
.zm-legal__table {
	width: 100%; margin: 6px 0 24px;
	table-layout: fixed; /* same column edges in every table */
	border-collapse: separate; border-spacing: 0;
	border: 1px solid var(--zm-pink-300); border-radius: var(--zm-radius);
	font-size: 14px; line-height: 21px; text-align: left;
}
.zm-legal__table th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--zm-pink-300);
	background: var(--zm-pink-100);
	font-family: var(--zm-font-head); font-weight: 700; font-size: 13px; line-height: 18px; letter-spacing: .03em;
	text-transform: uppercase; color: var(--zm-plum-800);
}
.zm-legal__table th:first-child { border-top-left-radius: 5px; }
.zm-legal__table th:last-child { border-top-right-radius: 5px; }
.zm-legal__table td { padding: 12px 12px; vertical-align: top; }
.zm-legal__table th:first-child, .zm-legal__table td:first-child { padding-left: 14px; }
.zm-legal__table tr + tr td { border-top: 1px solid var(--zm-pink-300); }
.zm-legal__table th:nth-child(1) { width: 20%; }
.zm-legal__table th:nth-child(2) { width: 20%; }
.zm-legal__table th:nth-child(3) { width: 42%; }
.zm-legal__table th:nth-child(4) { width: 18%; }
.zm-legal__table td:first-child { color: var(--zm-plum-800); }
.zm-legal__table code { white-space: normal; }

/* ---------- Cookie settings control (cookies.php #nastavitve) ---------- */
.zm-legal__consent {
	display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px;
	margin: 6px 0 18px; padding: 18px 20px;
	border: 1px solid var(--zm-pink-300); border-left: 5px solid var(--zm-plum-500); border-radius: var(--zm-radius);
	background: linear-gradient(180deg, #FDF3F7 0%, var(--zm-pink-200) 100%);
}
.zm-legal__body p.zm-legal__consent-status { flex: 1 1 240px; margin: 0; font-size: 15px; line-height: 22px; color: var(--zm-plum-800); }
.zm-legal__consent-status [data-consent-status] { font-weight: 700; color: var(--zm-plum-700); }
.zm-legal__consent .zm-btn { flex: none; }
.zm-legal__consent .zm-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ============================ Responsive ============================ */
@media (max-width: 1100px) {
	.zm-legal { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 0 40px; padding: 32px 28px 36px; }
	/* keep the long privacy contents shorter than a 768px-tall viewport (no inner scrollbar) */
	.zm-legal__toc { max-height: calc(100vh - 100px); }
	.zm-legal__toc a { padding: 4px 0; }
	.zm-legal__toc ol ol a { padding: 2px 0 2px 2px; }
}

/* One column from 900px down: the contents become a box above the text (main sections only). */
@media (max-width: 900px) {
	.zm-legal { grid-template-columns: minmax(0, 1fr); padding: 28px 24px 32px; }
	.zm-legal > * { width: 100%; max-width: var(--zm-legal-measure); justify-self: center; }
	.zm-legal__toc { position: static; max-height: none; overflow: visible; margin-bottom: 28px; padding: 14px 18px 8px; }
	.zm-legal__toc nav > ol { columns: 2; column-gap: 32px; }
	.zm-legal__toc li { break-inside: avoid; }
	.zm-legal__toc ol ol { display: none; }
	.zm-legal__toc a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; }
}

@media (max-width: 640px) {
	.zm-legal { padding: 20px 16px 24px; }
	/* Contents collapse to one 44px row ("Na tej strani" + chevron); the script closes the <details> here. */
	.zm-legal__toc { margin-bottom: 20px; padding: 0 14px; }
	.zm-legal__toc nav > ol { columns: 1; margin-bottom: 4px; }
	.zm-legal__toc nav > ol > li + li { border-top: 1px solid var(--zm-pink-300); }
	.zm-legal__toc-title {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		min-height: 44px; margin: 0; padding: 0; border-bottom: 0; cursor: pointer;
	}
	.zm-legal__toc[open] .zm-legal__toc-title { border-bottom: 1px solid var(--zm-pink-300); }
	.zm-legal__toc-title::after {
		content: ""; display: block; flex: none; width: 8px; height: 8px; margin: 0 4px 4px 0;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
	}
	.zm-legal__toc[open] .zm-legal__toc-title::after { margin-bottom: 0; margin-top: 4px; transform: rotate(-135deg); }
	.zm-legal__toc a { font-size: 15px; }
	.zm-legal__body { font-size: 16px; line-height: 26px; }
	.zm-legal__lead { font-size: 17px; line-height: 27px; }
	.zm-legal__body h3 { margin-top: 28px; padding-top: 22px; font-size: 21px; line-height: 27px; }
	.zm-legal__body h4 { margin-top: 22px; font-size: 17px; line-height: 23px; }
	.zm-legal__body ul { padding-left: 20px; }
	/* Lists of standalone links (browser help, more info, contact): each row is 44px (26px line + 9px padding), and the
	 * inline link's padding fills the row, so the tap target is 44px high without the list getting taller. */
	.zm-legal__links li { margin: 0; padding-top: 9px; padding-bottom: 9px; }
	.zm-legal__links a { padding: 9px 0; }

	/* Tables become one card per cookie: name on a pink head row, then label/value rows. */
	.zm-legal__table { border: 0; border-radius: 0; }
	.zm-legal__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.zm-legal__table, .zm-legal__table tbody, .zm-legal__table tr, .zm-legal__table td { display: block; width: auto !important; }
	.zm-legal__table tr { margin: 0 0 12px; border: 1px solid var(--zm-pink-300); border-radius: var(--zm-radius); overflow: hidden; }
	.zm-legal__table tr + tr td { border-top: 0; }
	.zm-legal__table td { position: relative; padding: 6px 14px 6px 112px; }
	.zm-legal__table td::before {
		content: attr(data-label);
		position: absolute; left: 14px; top: 6px; width: 86px;
		font-family: var(--zm-font-head); font-weight: 700; font-size: 12px; line-height: 21px; letter-spacing: .03em;
		text-transform: uppercase; color: var(--zm-rose-600);
	}
	.zm-legal__table td:first-child { padding: 10px 14px; border-bottom: 1px solid var(--zm-pink-300); background: var(--zm-pink-100); }
	.zm-legal__table td:first-child::before { content: none; }
	.zm-legal__table td:nth-child(2) { padding-top: 10px; }
	.zm-legal__table td:nth-child(2)::before { top: 10px; }
	.zm-legal__table td:last-child { padding-bottom: 12px; }

	.zm-legal__consent { padding: 16px; gap: 14px; }
	.zm-legal__consent .zm-btn { flex: 1 1 100%; white-space: normal; text-align: center; }
}

@media (max-width: 420px) {
	.zm-legal { padding: 18px 14px 22px; }
	.zm-legal__table td { padding-left: 98px; padding-right: 12px; }
	.zm-legal__table td::before { left: 12px; width: 76px; }
	.zm-legal__table td:first-child { padding-left: 12px; }
	/* the label may wrap to two lines here: let the button grow instead of clipping */
	.zm-legal__consent .zm-btn { height: auto; min-height: 48px; padding: 8px 14px; font-size: 14px; line-height: 18px; }
}

@media print {
	.zm-legal__toc { display: none; }
	.zm-legal { display: block; padding: 0; }
}