/* The banner that asks about posts from X, Facebook and YouTube, and the privacy page's settings
   (includes/consent.php). The theme's colours when it has them, else their own; dark mode follows
   the reader's system. "Accept" and "Refuz" are the same size, weight and colour: no choice is
   pushed. The banner is small and sits at the bottom; the page gets room under it to scroll clear. */

.csn-consent, .csn-consent-set {
	--cs-card: var(--card, #fffdf8);
	--cs-ink: var(--ink, #17191f);
	--cs-ink-2: var(--ink-2, #424753);
	--cs-line: var(--line, #ddd4c2);
	--cs-paper: var(--paper, #f6f2e9);
	--cs-link: var(--blue, #2a5aa6);
}
@media (prefers-color-scheme: dark) {
	.csn-consent, .csn-consent-set {
		--cs-card: var(--card, #22262e);
		--cs-ink: var(--ink, #efebe2);
		--cs-ink-2: var(--ink-2, #c9c4b8);
		--cs-line: var(--line, #353a45);
		--cs-paper: var(--paper, #16181d);
		--cs-link: var(--blue, #8db0ec);
	}
}

.csn-consent {
	position: fixed;
	z-index: 50;
	left: 8px;
	right: 8px;
	bottom: max(8px, env(safe-area-inset-bottom));
	margin: 0 auto;
	max-width: 620px;
	max-height: 60vh;
	overflow: auto;
	padding: 10px 12px;
	background: var(--cs-card);
	color: var(--cs-ink);
	border: 1px solid var(--cs-line);
	border-top: 3px solid var(--cs-ink);
	border-radius: 4px;
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .45);
	font: 15px/1.45 var(--body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}
.csn-consent[hidden] { display: none; }
/* While a story's graphic holds the screen (assets/csn-story.js sets the class), the banner steps
   down out of the way, so it never sits on the graphic or the step being read; it comes back as
   soon as the story is passed. Not while the keyboard is in it. Nothing loads meanwhile. */
html.csn-in-story .csn-consent:not(:focus-within):not(:focus) { transform: translateY(calc(100% + 32px)); visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.csn-consent { transition: transform .28s ease, visibility 0s; }
	html.csn-in-story .csn-consent:not(:focus-within):not(:focus) { transition: transform .28s ease, visibility 0s linear .28s; }
}
.csn-consent__text, .csn-consent__now { margin: 0 0 8px; }
.csn-consent__text b { font-weight: 700; }
.csn-consent__now { color: var(--cs-ink-2); font-size: 14px; }
.csn-consent a, .csn-consent-set a { color: var(--cs-link); text-underline-offset: 3px; }

.csn-consent__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.csn-consent__btn {
	min-height: 44px;
	padding: 8px 12px;
	font: 700 16px/1.2 var(--head, var(--body, system-ui, sans-serif));
	color: var(--cs-ink);
	background: var(--cs-paper);
	border: 2px solid var(--cs-ink);
	border-radius: 4px;
	cursor: pointer;
}
.csn-consent__btn:hover { background: var(--cs-card); }
.csn-consent__btn:focus-visible { outline: 3px solid var(--cs-link); outline-offset: 2px; }
.csn-consent__btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--cs-ink); }

@media (min-width: 900px) {
	.csn-consent { left: 24px; right: auto; bottom: 24px; width: 520px; padding: 14px 16px; }
}

/* Room under the page while the banner is up, so its last lines, and whatever the keyboard
   moves to, can be scrolled clear of it. */
html.csn-consent-open body { padding-bottom: calc(var(--csn-consent-h, 0px) + 16px); }
html.csn-consent-open { scroll-padding-bottom: calc(var(--csn-consent-h, 0px) + 16px); }

/* Only when the banner is opened again over a choice already made. */
.csn-consent__close { display: block; margin: 8px auto 0; padding: 6px 8px; min-height: 36px; font: 15px/1.2 var(--body, system-ui, sans-serif); color: var(--cs-link); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.csn-consent__close[hidden] { display: none; }
.csn-consent:focus { outline: none; }
.csn-consent:focus-visible { outline: 3px solid var(--cs-link); outline-offset: 2px; }

/* The privacy page's "Setări cookie". */
.csn-consent-set {
	margin: 0 0 24px;
	padding: 14px 16px;
	background: var(--cs-card);
	color: var(--cs-ink);
	border: 1px solid var(--cs-line);
	border-left: 4px solid var(--cs-ink);
	border-radius: 4px;
	font-size: 16px;
	line-height: 1.5;
	scroll-margin-top: 24px;
}
.csn-consent-set:focus { outline: none; }
.csn-consent-set:focus-visible { outline: 3px solid var(--cs-link); outline-offset: 2px; }
.csn-consent-set .csn-consent-set__h { margin: 0 0 6px; font: 800 18px/1.2 var(--head, var(--body, system-ui, sans-serif)); letter-spacing: 0; }
.csn-consent-set__now { margin: 0 0 12px; color: var(--cs-ink-2); }
.csn-consent-set [data-csn-consent-ask][hidden] { display: none; }
.csn-consent-set .csn-consent__buttons { max-width: 360px; }

@media (prefers-reduced-motion: no-preference) {
	.csn-consent:not([hidden]) { animation: csn-consent-in .18s ease-out; }
	@keyframes csn-consent-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
}