/* consent-banner – sites theme it via the --pcl-consent-* custom properties on :root. */

.pcl-consent,
.pcl-consent-ph,
.pcl-consent-fab {
  --_bg: var(--pcl-consent-bg, #fff);
  --_fg: var(--pcl-consent-fg, #1b1b1b);
  --_muted: var(--pcl-consent-muted, #4a4a4a);
  --_border: var(--pcl-consent-border, #c8c8c8);
  --_btn-bg: var(--pcl-consent-btn-bg, #1b1b1b);
  --_btn-fg: var(--pcl-consent-btn-fg, #fff);
  --_focus: var(--pcl-consent-focus, #0b57d0);
  --_radius: var(--pcl-consent-radius, 8px);
  font-family: var(--pcl-consent-font, inherit);
  line-height: 1.5;
  box-sizing: border-box;
  /* Native controls follow the page's color-scheme; FluentCommunity's dark mode
     sets html.dark { color-scheme: dark }, which drew dark checkboxes on our
     light dialog. The banner has its own light palette, so pin it. */
  color-scheme: light;
}

.pcl-consent *,
.pcl-consent-ph * {
  box-sizing: inherit;
}

/* Themes color text elements themselves: praesentare-2026 gives h1-h4 its
   --text, which is light in dark mode, and drew a light grey title on our
   white dialog. The banner keeps its own palette, so its text takes the color
   of its container. Element plus class, enough for theme rules like
   `.entry-content p` that sit earlier in the page than consent.css. */
.pcl-consent :is(h2, p, label, strong, span, ul, li, dl, dt, dd, summary, code),
.pcl-consent-ph :is(p, a, span) {
  color: inherit;
}

/* ---- dialog ---- */

dialog.pcl-consent {
  width: min(40rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  margin: auto;
  padding: 1.25rem 1.25rem 1rem;
  border: 0;
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_fg);
  font-size: 1rem;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.3);
  z-index: 2147483000;
}

dialog.pcl-consent::backdrop {
  background: rgb(0 0 0 / 0.45);
}

/* Imprint and privacy policy stay readable: no backdrop, no focus trap. */
dialog.pcl-consent.pcl-consent--inline {
  position: fixed;
  inset: auto 1rem 1rem;
  margin: 0 auto;
  max-height: 60dvh;
}

.pcl-consent h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.pcl-consent h2:focus {
  outline: none;
}

.pcl-consent p {
  margin: 0 0 0.75rem;
}

.pcl-consent a {
  color: inherit;
  text-decoration: underline;
}

.pcl-consent-small {
  font-size: 0.875rem;
}

/* above the reset to inherit */
.pcl-consent .pcl-consent-small,
.pcl-consent-ph .pcl-consent-small {
  color: var(--_muted);
}

.pcl-consent-links {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

/* ---- buttons: identical for every choice, no nudging ---- */

.pcl-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
}

/* The choice must be visible without scrolling, even at 320 px (M3): the
   button row sticks to the bottom edge of the dialog while the text scrolls. */
.pcl-consent > .pcl-consent-actions {
  position: sticky;
  bottom: -1rem;
  margin: 1rem -1.25rem 0;
  padding: 0.75rem 1.25rem 1rem;
  background: var(--_bg);
  box-shadow: 0 -6px 12px -8px rgb(0 0 0 / 0.35);
}

@media (max-width: 30rem) {
  dialog.pcl-consent {
    font-size: 0.9375rem;
    padding: 1rem 1rem 1rem;
  }

  .pcl-consent > .pcl-consent-actions {
    margin: 0.75rem -1rem 0;
    padding: 0.5rem 1rem 1rem;
    gap: 0.375rem;
  }

  .pcl-consent-btn {
    min-height: 2.75rem;
    padding: 0.375rem 0.75rem;
  }
}

.pcl-consent-btn {
  flex: 1 1 11rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--_btn-bg);
  border-radius: var(--_radius);
  background: var(--_btn-bg);
  color: var(--_btn-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.pcl-consent-btn:hover {
  filter: brightness(1.15);
}

.pcl-consent :focus-visible,
.pcl-consent-ph :focus-visible,
.pcl-consent-fab:focus-visible {
  outline: 3px solid var(--_focus);
  outline-offset: 2px;
}

/* ---- settings ---- */

.pcl-consent-cat {
  margin: 0 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
}

.pcl-consent-cat ul {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.pcl-consent-cat li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--_border);
}

.pcl-consent-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.pcl-consent-row input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: none;
}

.pcl-consent details {
  margin: 0.25rem 0 0 1.75rem;
  font-size: 0.875rem;
}

.pcl-consent summary {
  cursor: pointer;
  color: var(--_muted);
}

.pcl-consent dl {
  margin: 0.5rem 0 0;
}

.pcl-consent dt {
  font-weight: 600;
}

.pcl-consent dd {
  margin: 0 0 0.5rem;
  overflow-wrap: anywhere;
}

/* ---- placeholder for blocked embeds ---- */

.pcl-consent-ph {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 12rem;
  aspect-ratio: 16 / 9;
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  background: #f2f2f2 center / cover no-repeat;
  color: var(--_fg);
  font-size: 0.9375rem;
  text-align: center;
  overflow: auto;
}

.pcl-consent-ph p {
  margin: 0 auto 0.5rem;
  max-width: 36rem;
}

.pcl-consent-ph .pcl-consent-actions {
  justify-content: center;
  margin: 0.5rem 0;
}

.pcl-consent-ph .pcl-consent-btn {
  flex: 0 1 12rem;
}

.pcl-consent-ph--thumb {
  color: #fff;
  box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 0.6);
}

.pcl-consent-ph--thumb a,
.pcl-consent-ph--thumb .pcl-consent-small {
  color: #fff;
}

/* ---- floating opener where no footer link exists (e.g. community portal) ---- */

.pcl-consent-fab {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 2147482000;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--_border);
  border-radius: 50%;
  background: var(--_bg);
  color: var(--_fg);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
  cursor: pointer;
}

/* "auto" mode hides it while a permanent settings link is on the page */
.pcl-consent-fab[hidden] {
  display: none;
}

@media print {
  .pcl-consent,
  .pcl-consent-fab {
    display: none !important;
  }
}