/* ==========================================================================
   Cookie consent — the banner and the preferences window.
   Markup in inc/cookies.php, behaviour in assets/js/cookies.js.

   Both sit on ink, like the header and footer they appear between, so the
   notice reads as part of the site rather than a plugin dropped on top of it.
   The banner is a card in the bottom-left corner, not a full-width bar: it
   leaves the page usable behind it (no cookie wall) and stays clear of
   Astra's scroll-to-top arrow on the right.
   ========================================================================== */

/* Several rules below set `display`, which would beat the `hidden` attribute
   the script toggles. State it explicitly so hidden always wins. */
.lb-cookie[hidden],
.lb-cookie-cat__panel[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   The banner
   --------------------------------------------------------------------------- */
.lb-cookie {
	--lb-cookie-gap: clamp(0.75rem, 2vw, 1.5rem);

	position: fixed;
	left: var(--lb-cookie-gap);
	bottom: var(--lb-cookie-gap);
	z-index: 1000;
	/* Kept compact: at 27rem with 1rem text it covered more than half of a
	   laptop screen. */
	width: min(23rem, calc(100vw - 2 * var(--lb-cookie-gap)));
	max-height: calc(100vh - 2 * var(--lb-cookie-gap));
	max-height: calc(100dvh - 2 * var(--lb-cookie-gap));
	overflow-y: auto;
	padding: var(--lb-space-sm) var(--lb-space-md) var(--lb-space-md);
	background-color: var(--lb-ink-raised);
	border: 1px solid var(--lb-ink-line);
	border-radius: var(--lb-radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 30px 70px rgba(0, 0, 0, 0.45);
	color: var(--lb-text-on-ink);
	font-family: var(--lb-font-body);
}

/* The prism hairline along the top edge, the site's one decorative line. */
.lb-cookie::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--lb-prism);
}

@media (prefers-reduced-motion: no-preference) {
	.lb-cookie:not([hidden]) {
		animation: lb-cookie-in var(--lb-dur-slow) var(--lb-ease-out) both;
	}
}

@keyframes lb-cookie-in {
	from { opacity: 0; transform: translateY(1rem); }
	to   { opacity: 1; transform: none; }
}

.lb-cookie__title {
	margin: 0 0 var(--lb-space-2xs);
	font-family: var(--lb-font-display);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.15;
	color: var(--lb-text-on-ink);
}

.lb-cookie__text {
	margin: 0 0 var(--lb-space-xs);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--lb-text-on-ink-muted);
}

/* Folded to three lines until "Citește mai mult" is pressed. */
.lb-cookie__text.is-folded {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin-bottom: 0;
}

.lb-cookie__readmore[hidden] { display: none; }

.lb-cookie .lb-cookie__readmore,
.lb-cookie .lb-cookie__readmore:hover,
.lb-cookie .lb-cookie__readmore:focus {
	appearance: none;
	display: inline-block;
	overflow: visible;
	isolation: auto;
	margin: 0 0 var(--lb-space-xs);
	padding: 0.2em 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--lb-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.5;
	text-transform: none;
	color: var(--lb-gold-bright);
	cursor: pointer;
}

.lb-cookie .lb-cookie__readmore::before { display: none; }
.lb-cookie .lb-cookie__readmore:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.lb-cookie__more { margin: 0; font-size: 0.875rem; line-height: 1.5; }

.lb-cookie__more a,
.lb-cookie-dialog a {
	font-weight: 600;
	color: var(--lb-text-on-ink);
	text-decoration: underline;
	text-decoration-color: var(--lb-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: color var(--lb-dur-fast) var(--lb-ease);
}

.lb-cookie__more a:hover { color: var(--lb-gold-bright); }

.lb-cookie__actions {
	display: grid;
	gap: var(--lb-space-xs);
	margin-top: var(--lb-space-sm);
}

/* Three classes, so it outranks the shared button padding further down. */
.lb-cookie .lb-cookie__actions .lb-btn {
	width: 100%;
	padding: 0.9em 1.25em;
}

/* ---------------------------------------------------------------------------
   Buttons inside both layers.

   No rising fill here. The theme's buttons fill on hover by scaling a
   pseudo-element up from the bottom edge; inside the preferences window
   (a <dialog> in the browser's top layer) Chrome left stripes of that fill
   painted on the button after the pointer moved away. A plain colour fade
   gives the same result and repaints cleanly.

   Astra also colours every focused <button> gold (`button:focus`, 0,1,1),
   so after a click an outline button would stay filled while it keeps
   focus. The last rule puts it back to the outline state.
   --------------------------------------------------------------------------- */
.lb-cookie .lb-btn,
.lb-cookie-dialog .lb-btn {
	padding: 0.9em 1.2em;
	transition: background-color var(--lb-dur-fast) var(--lb-ease),
		border-color var(--lb-dur-fast) var(--lb-ease),
		color var(--lb-dur-fast) var(--lb-ease);
}

.lb-cookie .lb-btn::before,
.lb-cookie-dialog .lb-btn::before { display: none; }

.lb-cookie .lb-btn:hover,
.lb-cookie-dialog .lb-btn:hover {
	background-color: var(--lb-text-on-ink);
	border-color: var(--lb-text-on-ink);
	color: var(--lb-ink);
}

.lb-cookie .lb-btn--primary,
.lb-cookie-dialog .lb-btn--primary {
	background-color: var(--lb-gold);
	border-color: var(--lb-gold);
	color: var(--lb-ink);
}

.lb-cookie .lb-btn--primary:hover,
.lb-cookie-dialog .lb-btn--primary:hover {
	background-color: var(--lb-gold-bright);
	border-color: var(--lb-gold-bright);
}

.lb-cookie .lb-btn:not(.lb-btn--primary):focus:not(:hover),
.lb-cookie-dialog .lb-btn:not(.lb-btn--primary):focus:not(:hover) {
	background-color: transparent;
	border-color: rgba(236, 233, 226, 0.55);
	color: var(--lb-text-on-ink);
}

/* ---------------------------------------------------------------------------
   The preferences window
   --------------------------------------------------------------------------- */
/* Compact, like the banner: at 54rem with 1rem text it filled a laptop
   screen top to bottom. */
.lb-cookie-dialog {
	width: min(42rem, calc(100vw - 2rem));
	max-width: none;
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	overflow: hidden;
	background-color: var(--lb-ink-raised);
	border: 1px solid var(--lb-ink-line);
	border-radius: var(--lb-radius);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
	color: var(--lb-text-on-ink);
	font-family: var(--lb-font-body);
}

.lb-cookie-dialog[open] {
	display: flex;
	flex-direction: column;
}

.lb-cookie-dialog::backdrop { background-color: rgba(11, 13, 18, 0.72); }

/* The page behind does not scroll while the window is open. */
html:has(.lb-cookie-dialog[open]) { overflow: hidden; }

.lb-cookie-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lb-space-md);
	padding: var(--lb-space-sm) var(--lb-space-md);
	border-bottom: 1px solid var(--lb-ink-line);
}

.lb-cookie-dialog__title {
	margin: 0;
	font-family: var(--lb-font-display);
	font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: var(--lb-tracking-display);
	color: var(--lb-text-on-ink);
}

.lb-cookie-dialog__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: var(--lb-space-md);
}

.lb-cookie-dialog__intro {
	margin: 0 0 var(--lb-space-md);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--lb-text-on-ink-muted);
}

.lb-cookie-dialog__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-xs);
	padding: var(--lb-space-sm) var(--lb-space-md);
	border-top: 1px solid var(--lb-ink-line);
}

.lb-cookie-dialog__save { margin-left: auto; }

/* Plain buttons in the window: the close cross and the category headings.
   Reset from the theme's uppercase button style and from Astra's gold
   hover and focus fill. */
.lb-cookie-dialog .lb-cookie-dialog__close,
.lb-cookie-dialog .lb-cookie-cat__toggle {
	appearance: none;
	overflow: visible;
	isolation: auto;
	margin: 0;
	border-radius: var(--lb-radius);
	background: none;
	box-shadow: none;
	font-family: var(--lb-font-body);
	letter-spacing: normal;
	text-transform: none;
	color: var(--lb-text-on-ink);
}

.lb-cookie-dialog .lb-cookie-dialog__close:hover,
.lb-cookie-dialog .lb-cookie-dialog__close:focus,
.lb-cookie-dialog .lb-cookie-cat__toggle:hover,
.lb-cookie-dialog .lb-cookie-cat__toggle:focus {
	background: none;
	color: var(--lb-text-on-ink);
}

.lb-cookie-dialog .lb-cookie-dialog__close {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--lb-ink-line);
	transition: border-color var(--lb-dur-fast) var(--lb-ease), color var(--lb-dur-fast) var(--lb-ease);
}

.lb-cookie-dialog .lb-cookie-dialog__close:hover {
	border-color: var(--lb-gold);
	color: var(--lb-gold-bright);
}

/* --- Categories ---------------------------------------------------------- */
.lb-cookie-cats {
	display: grid;
	gap: var(--lb-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-cookie-cat {
	margin: 0;
	background-color: var(--lb-ink-soft);
	border: 1px solid var(--lb-ink-line);
	border-radius: var(--lb-radius);
}

.lb-cookie-cat__head {
	display: flex;
	align-items: center;
	gap: var(--lb-space-sm);
	padding-right: var(--lb-space-sm);
}

.lb-cookie-dialog .lb-cookie-cat__toggle {
	flex: 1 1 auto;
	justify-content: flex-start;
	gap: var(--lb-space-xs);
	min-height: 3rem;
	padding: var(--lb-space-xs) var(--lb-space-sm);
	border: 0;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
}

.lb-cookie-cat__chevron {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--lb-ink-line);
	border-radius: 50%;
	color: var(--lb-gold-bright);
	transition: border-color var(--lb-dur-fast) var(--lb-ease);
}

.lb-cookie-cat__chevron svg { transition: transform var(--lb-dur-fast) var(--lb-ease); }
.lb-cookie-cat__toggle[aria-expanded="true"] .lb-cookie-cat__chevron svg { transform: rotate(180deg); }
.lb-cookie-cat__toggle:hover .lb-cookie-cat__chevron { border-color: var(--lb-gold); }

.lb-cookie-cat__panel {
	padding: var(--lb-space-sm) var(--lb-space-md);
	border-top: 1px solid var(--lb-ink-line);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--lb-text-on-ink-muted);
}

.lb-cookie-cat__text { margin: 0; }

/* As in the owner's layout: indented lines, no bullets. */
.lb-cookie-cat__list {
	margin: var(--lb-space-2xs) 0 0;
	padding: 0 0 0 var(--lb-space-lg);
	list-style: none;
}

.lb-cookie-cat__list li { margin: 0; }

/* --- The switch -----------------------------------------------------------
   A real checkbox (role="switch"), transparent and stretched over the drawn
   track, so clicking, keyboard and screen readers all work natively. */
.lb-switch {
	position: relative;
	flex: none;
	width: 2.9rem;
	height: 1.6rem;
}

.lb-cookie-dialog .lb-switch__input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.lb-cookie-dialog .lb-switch__input:disabled { cursor: not-allowed; }

.lb-switch__track {
	position: absolute;
	inset: 0;
	border: 1px solid var(--lb-ink-line);
	border-radius: 999px;
	background-color: var(--lb-ink);
	transition: background-color var(--lb-dur-fast) var(--lb-ease), border-color var(--lb-dur-fast) var(--lb-ease);
}

.lb-switch__thumb {
	position: absolute;
	top: 50%;
	left: 0.18rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background-color: var(--lb-text-on-ink-muted);
	color: var(--lb-ink);
	transform: translateY(-50%);
	transition: transform var(--lb-dur-fast) var(--lb-ease), background-color var(--lb-dur-fast) var(--lb-ease);
}

.lb-switch__icon { display: block; width: 0.7rem; height: 0.7rem; }
.lb-switch__icon--on { display: none; }

.lb-switch__input:checked + .lb-switch__track {
	border-color: var(--lb-gold);
	background-color: var(--lb-gold);
}

.lb-switch__input:checked + .lb-switch__track .lb-switch__thumb {
	background-color: var(--lb-ink);
	color: var(--lb-gold-bright);
	transform: translate(1.2rem, -50%);
}

.lb-switch__input:checked + .lb-switch__track .lb-switch__icon--on { display: block; }
.lb-switch__input:checked + .lb-switch__track .lb-switch__icon--off { display: none; }

/* Functional cookies: always on, visibly not changeable. */
.lb-switch__input:disabled + .lb-switch__track { opacity: 0.5; }

.lb-switch__input:focus-visible + .lb-switch__track {
	outline: 2px solid var(--lb-gold);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Phones
   --------------------------------------------------------------------------- */
@media (max-width: 40rem) {
	.lb-cookie { padding: var(--lb-space-sm); }
	.lb-cookie__title { font-size: 1.3rem; }
	/* A touch larger than on desktop, read at arm's length. */
	.lb-cookie__text,
	.lb-cookie__more,
	.lb-cookie-dialog__intro,
	.lb-cookie-cat__panel { font-size: 0.9rem; }

	.lb-cookie-dialog__head,
	.lb-cookie-dialog__foot { padding-inline: var(--lb-space-md); }
	.lb-cookie-dialog__body { padding: var(--lb-space-md); }

	.lb-cookie-dialog__foot { flex-direction: column; }
	.lb-cookie-dialog__foot .lb-btn { width: 100%; }
	.lb-cookie-dialog__save { margin-left: 0; }

	.lb-cookie-cat__head { padding-right: var(--lb-space-sm); }
	.lb-cookie-dialog .lb-cookie-cat__toggle { padding-inline: var(--lb-space-sm); }
	.lb-cookie-cat__panel { padding: var(--lb-space-sm); }
	.lb-cookie-cat__list { padding-left: var(--lb-space-md); }
}

@media print {
	.lb-cookie,
	.lb-cookie-dialog { display: none !important; }
}