/* LD Core cookie banner. Branded by the theme through custom properties:
   --ldc-consent-bg, --ldc-consent-fg, --ldc-consent-accent, --ldc-consent-radius
   (and optionally --ldc-consent-accent-fg, the button text color). The
   settings screen can override them inline, and adds --ldc-consent-panel-bg,
   --ldc-consent-panel-fg and --ldc-consent-font.
   Fixed to the viewport, so showing it never shifts the page; for the layouts
   along the bottom, html gets bottom padding while it is open so the page's
   last content can scroll clear of it. */

html.ldc-consent-open { padding-bottom: var(--ldc-consent-space, 0px); }
/* Pop-up with the overlay on, or the preferences window: the page waits. */
html.ldc-consent-lock { overflow: hidden; }
html.ldc-consent-lock body { pointer-events: none; }

.ldc-consent {
	position: fixed;
	z-index: 100000;
	inset: auto 0 0 0;
	box-sizing: border-box;
	max-height: 85vh;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	background: var(--ldc-consent-bg, #141414);
	color: var(--ldc-consent-fg, #fff);
	/* Short aliases for the theme's radius and accent, each used several times. */
	--ldc-r: var(--ldc-consent-radius, 6px);
	--ldc-a: var(--ldc-consent-accent, #2563eb);
	--ldc-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
	box-shadow: var(--ldc-shadow);
	font-size: var(--ldc-consent-font, 0.9375rem);
	line-height: 1.5;
	pointer-events: auto;
}
.ldc-consent[hidden], .ldc-consent [hidden] { display: none !important; }
.ldc-consent:focus { outline: none; }
.ldc-consent :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Layouts. The bar along the bottom is the base above. */
.ldc-consent--bar-top {
	inset: var(--wp-admin--admin-bar--height, 0px) 0 auto 0;
	--ldc-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.ldc-consent--popup,
.ldc-consent--slide-left,
.ldc-consent--slide-right,
.ldc-consent--pmodal.is-panel {
	width: min(32rem, calc(100vw - 2rem));
	padding: 1.25rem 1.5rem;
	border-radius: var(--ldc-r);
	--ldc-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* Centered without a transform, which would trap the overlay's shadow. */
.ldc-consent--popup,
.ldc-consent--pmodal.is-panel {
	inset: 0;
	height: fit-content;
	max-height: calc(100vh - 2rem);
	margin: auto;
}
.ldc-consent--slide-left { inset: auto auto 1rem 1rem; }
.ldc-consent--slide-right { inset: auto 1rem 1rem auto; }
.ldc-consent--slide-left, .ldc-consent--slide-right { width: min(24rem, calc(100vw - 2rem)); }
.ldc-consent.ldc-consent--shadow-none { --ldc-shadow: 0 0 0 transparent; }
.ldc-consent.ldc-consent--shadow-strong { --ldc-shadow: 0 12px 48px rgba(0, 0, 0, 0.5); }
/* The dimmed page is the banner's own spread shadow, so it scrolls nowhere and needs no extra element. */
.ldc-consent--overlay,
.ldc-consent--pmodal.is-panel { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55), var(--ldc-shadow); }

/* Preferences open inside the banner: they carry their own Reject / Accept /
   Save, so the first row of buttons steps aside (back when they close). */
.ldc-consent.is-panel .ldc-consent__layer .ldc-consent__actions { display: none; }
.ldc-consent.is-panel .ldc-consent__layer:not([hidden]) + .ldc-consent__panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(128, 128, 128, 0.35); }

/* The preferences, once open, may have colors of their own. */
.ldc-consent.is-panel {
	background: var(--ldc-consent-panel-bg, var(--ldc-consent-bg, #141414));
	color: var(--ldc-consent-panel-fg, var(--ldc-consent-fg, #fff));
}

@media (prefers-reduced-motion: no-preference) {
	.ldc-consent--slide-left { animation: ldc-consent-left 0.3s ease-out; }
	.ldc-consent--slide-right { animation: ldc-consent-right 0.3s ease-out; }
	.ldc-consent--popup { animation: ldc-consent-fade 0.2s ease-out; }
}
@keyframes ldc-consent-left { from { translate: calc(-100% - 1rem) 0; } }
@keyframes ldc-consent-right { from { translate: calc(100% + 1rem) 0; } }
@keyframes ldc-consent-fade { from { opacity: 0; } }

.ldc-consent__layer,
.ldc-consent__panel {
	max-width: 72rem;
	margin: 0 auto;
}
.ldc-consent__layer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
}
.ldc-consent__text { flex: 1 1 28rem; }
.ldc-consent__title { margin: 0 0 0.25rem; font-size: 1.125em; line-height: 1.3; color: inherit; }
.ldc-consent__body > * { margin: 0 0 0.5em; }
.ldc-consent__body > :last-child { margin-bottom: 0; }
.ldc-consent__body :is(ul, ol) { padding-left: 1.25em; list-style: disc; }
.ldc-consent__body ol { list-style: decimal; }
.ldc-consent a { color: inherit; text-decoration: underline; }

.ldc-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Accept and Reject share one class: same size, same weight, same colors. */
.ldc-consent__btn {
	min-width: 9rem;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 2px solid var(--ldc-a);
	border-radius: var(--ldc-r);
	background: var(--ldc-a);
	color: var(--ldc-consent-accent-fg, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ldc-consent--outline .ldc-consent__btn { background: transparent; color: inherit; }
.ldc-consent__btn:hover { filter: brightness(1.1); }
/* Manage preferences, and the footer's Cookie settings: buttons that look like links. */
.ldc-consent__link,
button.ldc-consent-settings {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.ldc-consent__link { min-height: 2.75rem; padding: 0.5rem 0.25rem; }

.ldc-consent__cats { list-style: none; margin: 0.75rem 0; padding: 0; display: grid; gap: 0.75rem; }
.ldc-consent__cat label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.ldc-consent__cat p { margin: 0.125rem 0 0 1.75rem; opacity: 0.85; font-size: 0.93em; }
.ldc-consent__cat input { width: 1.125rem; height: 1.125rem; accent-color: var(--ldc-a); }


/* Phones: bars and slide-ins become a full-width sheet; buttons stack. */
@media (max-width: 600px) {
	.ldc-consent { padding: 1rem; border-radius: var(--ldc-r) var(--ldc-r) 0 0; }
	.ldc-consent--bar-top { border-radius: 0 0 var(--ldc-r) var(--ldc-r); }
	.ldc-consent--slide-left, .ldc-consent--slide-right { inset: auto 0 0 0; width: auto; }
	.ldc-consent--popup, .ldc-consent--pmodal.is-panel { border-radius: var(--ldc-r); }
	.ldc-consent__actions { width: 100%; }
	.ldc-consent__btn { flex: 1 1 100%; }
	.ldc-consent__link { flex: 1 1 100%; text-align: center; }
}