/* Legal pages — Politika kolačića, Pravila privatnosti.
   Long-form text, so the job is a comfortable reading measure and a clear
   heading rhythm, not decoration. */

/* Kadence wraps a Group block's children in .wp-block-group__inner-container,
   so the measure has to be constrained on that, not on .legal-page itself. */
.legal-page > .wp-block-group__inner-container {
	max-width: 68ch;
	margin: 0 auto;
}

.legal-page p,
.legal-page li {
	color: var(--color-text);
}

.legal-page h2 {
	margin-top: var(--space-lg);
	margin-bottom: var(--space-sm);
	font-size: var(--font-size-xl);
}

.legal-page h2:first-child {
	margin-top: 0;
}

.legal-page__updated {
	color: var(--color-text);
	font-family: var(--font-head);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.legal-page__lead {
	margin-bottom: var(--space-md);
	color: var(--color-heading);
	font-size: var(--font-size-md);
}

.legal-page ul {
	margin-bottom: var(--space-sm);
	padding-left: var(--space-md);
}

.legal-page li {
	margin-bottom: var(--space-xs);
}

.legal-page code {
	padding: 0.1em 0.4em;
	border-radius: var(--radius);
	background: var(--color-bg);
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

/* Table — the cookie/storage inventory. Scrolls inside its own container on
   narrow screens instead of forcing the page to scroll sideways. */

.legal-page__table {
	margin: 0 0 var(--space-md);
	overflow-x: auto;
}

/* min-width is what actually makes the wrapper's overflow-x engage: with only
   width:100% the table is pinned to the container, so it can never overflow and
   instead crushes the first column (47px, breaking the storage key across five
   lines at 375px). */
.legal-page__table table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
}

.legal-page__table th,
.legal-page__table td {
	padding: var(--space-xs);
	border: 1px solid var(--color-bg);
	text-align: left;
	vertical-align: top;
}

.legal-page__table th {
	background: var(--color-bg);
	color: var(--color-heading);
	font-family: var(--font-head);
}

/* Consent withdrawal */

.legal-page__consent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.legal-consent-btn {
	padding: var(--space-xs) var(--space-md);
	border: 0;
	border-radius: var(--radius);
	background: var(--color-coral);
	color: var(--color-white);
	font-family: var(--font-head);
	font-size: var(--font-size-md);
	cursor: pointer;
	transition: var(--transition);
}

/* Kadence globally styles button:hover/:focus/:active with its palette blue and
   a drop shadow, and button:hover (0,1,1) out-specifies a single class (0,1,0).
   All three states must be neutralised explicitly — see groups-page.css. */
.legal-consent-btn:hover,
.legal-consent-btn:focus,
.legal-consent-btn:active {
	background: var(--color-coral-hover);
	color: var(--color-white);
	box-shadow: none;
}

.legal-page__consent-status {
	color: var(--color-text);
	font-size: var(--font-size-sm);
}