/* ── Nomon Cookie Notification Banner ──
   Layout, typography and every colour except the primary button are fixed
   here, reproducing the pre-2.0 CookieConsent v3 appearance. The six primary
   button colours arrive as custom properties from the Styles tab. */

:root {
  --nomon-bg: #ffffff;
  --nomon-text: #2c2c2c;
  --nomon-heading: #000000;
  --nomon-muted: #777777;

  --nomon-secondary: #f2f2f0;
  --nomon-secondary-text: #000000;
  --nomon-secondary-border: #f2f2f0;
  --nomon-secondary-hover: #dddddd;

  --nomon-separator: #f0f0f0;
  --nomon-footer-border: #e8e8e8;
  --nomon-category-bg: #f2f2f0;
  --nomon-category-border: #f2f2f0;
  --nomon-category-hover-bg: #ebebeb;

  --nomon-toggle-off: #b5453a;
  --nomon-toggle-on: #1a7b40;
  --nomon-toggle-readonly: #d8d8d8;

  --nomon-modal-radius: 0.375rem;
  --nomon-btn-radius: 0.25rem;
  --nomon-overlay-bg: rgba(0, 0, 0, 0.65);

  --nomon-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* ── Shell ── */

/* Metrics below are the rendered values of the pre-2.0 CookieConsent v3 banner,
   measured from a live install; ems are relative to the 16px root above. */
.nomon-banner,
.nomon-pm {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  font-family: var(--nomon-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--nomon-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.nomon-banner *,
.nomon-banner *::before,
.nomon-banner *::after,
.nomon-pm *,
.nomon-pm *::before,
.nomon-pm *::after {
  box-sizing: border-box;
}

.nomon-overlay {
  position: fixed;
  inset: 0;
  background: var(--nomon-overlay-bg);
}

/* ── Splash ── */

.nomon-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.nomon-cm {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 55em;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--nomon-bg);
  border-radius: var(--nomon-modal-radius);
  box-shadow: 0 0.625em 1.875em rgba(0, 0, 2, 0.3);
}

.nomon-cm__body {
  display: flex;
  flex-direction: column;
  padding: 30px 34px;
}

.nomon-cm__title {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.15;
  color: var(--nomon-heading);
}

.nomon-cm__desc {
  margin: 1.4em 0 0;
  padding: 0;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--nomon-heading);
}

/* row-reverse puts the second group ("Manage preferences") on the left and the
   accept/reject pair on the right, matching the pre-2.0 flipped layout. */
.nomon-cm__btns {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--nomon-separator);
}

.nomon-cm__btn-group {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
}

.nomon-cm__btn-group + .nomon-cm__btn-group {
  margin-right: 6px;
}

.nomon-cm__footer {
  padding: 12px 34px;
  background: var(--nomon-secondary);
  border-top: 1px solid var(--nomon-footer-border);
  font-size: 0.9em;
  color: var(--nomon-heading);
}

.nomon-policy-link {
  color: inherit;
  font-weight: 600;
  background-image: none;
  text-decoration: none;
  text-underline-offset: 2px;
}

.nomon-policy-link:hover {
  color: inherit;
  text-decoration: underline;
}

/* ── Preferences panel ── */

/* Centred panel with no backdrop, as before 2.0. pointer-events lets clicks
   through the empty area to the page behind, which had no overlay either. */
.nomon-pm {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
}

.nomon-pm__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 43em;
  max-height: calc(100vh - 2rem);
  background: var(--nomon-bg);
  border-radius: var(--nomon-modal-radius);
  box-shadow: 0 0.625em 1.875em rgba(0, 0, 2, 0.3);
  pointer-events: auto;
}

.nomon-pm__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 1.4em;
  border-bottom: 1px solid var(--nomon-separator);
}

.nomon-pm__title {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.15;
  color: var(--nomon-heading);
}

.nomon-pm__close {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--nomon-btn-radius);
  background: var(--nomon-secondary);
  color: var(--nomon-heading);
  cursor: pointer;
}

.nomon-pm__close svg {
  width: 20px;
  height: 20px;
}

.nomon-pm__close:hover {
  background: var(--nomon-secondary-hover);
}

.nomon-pm__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 1.4em;
}

.nomon-pm__section + .nomon-pm__section {
  margin-top: 32px;
}

.nomon-pm__footer {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 16px 1.4em;
  border-top: 1px solid var(--nomon-separator);
}

.nomon-pm__btn-group {
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
}

/* ── Buttons ── */

.nomon-btn {
  min-width: 120px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1.8em;
  border: 1px solid transparent;
  border-radius: var(--nomon-btn-radius);
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nomon-pm__footer .nomon-btn {
  min-width: 110px;
  padding: 0.5em 1.5em;
}

.nomon-btn--primary {
  background: var(--nomon-primary, #000000);
  border-color: var(--nomon-primary-border, #000000);
  color: var(--nomon-primary-text, #ffffff);
}

/* !important mirrors the pre-2.0 override: a theme's generic button:hover rule
   loads later at equal specificity and would otherwise win. */
.nomon-btn--primary:hover,
.nomon-btn--primary:focus {
  background: var(--nomon-primary-hover, #000000) !important;
  border-color: var(--nomon-primary-hover-border, #000000) !important;
  color: var(--nomon-primary-hover-text, #ffffff) !important;
}

.nomon-btn--secondary {
  background: var(--nomon-secondary);
  border-color: var(--nomon-secondary-border);
  color: var(--nomon-secondary-text);
  text-decoration: none;
}

.nomon-btn--secondary:hover {
  background: var(--nomon-secondary-hover);
  border-color: var(--nomon-secondary-hover);
  color: var(--nomon-secondary-text);
}

/* ── Categories ── */

.nomon-pm__section {
  display: flex;
  flex-direction: column;
  border-radius: var(--nomon-btn-radius);
}

.nomon-pm__section + .nomon-pm__section {
  margin-top: 0.375rem;
}

.nomon-category__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  width: 100%;
  padding: 1.1em 1.2em;
  border: 1px solid var(--nomon-category-border);
  border-radius: var(--nomon-btn-radius);
  background: var(--nomon-category-bg);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.nomon-category__header:hover {
  background: var(--nomon-category-hover-bg);
  border-color: var(--nomon-category-hover-bg);
}

.nomon-category__label {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.nomon-category__name {
  font-size: 0.95em;
  font-weight: 600;
  color: var(--nomon-heading);
}

.nomon-category__badge {
  margin-left: 0.76em;
  font-size: 0.76em;
  font-weight: 500;
  color: var(--nomon-muted);
}

/* Description continues the title bar: shared border, square top corners. */
.nomon-category__desc,
.nomon-category__empty-note,
.nomon-category__cookies {
  margin: 0;
  padding: 1em;
  border: 1px solid var(--nomon-category-border);
  border-top: none;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--nomon-heading);
}

.nomon-pm__section > :last-child {
  border-bottom-left-radius: var(--nomon-btn-radius);
  border-bottom-right-radius: var(--nomon-btn-radius);
}

/* Padding stays symmetric so the note and the collapsed summary sit centred in
   their own box; the box above drops its bottom padding instead, which keeps
   the gap between the two at 1em rather than doubling it. Browsers without
   :has() simply show a larger gap. */
.nomon-category__desc:has(+ .nomon-category__empty-note),
.nomon-category__desc:has(+ .nomon-category__cookies),
.nomon-category__empty-note:has(+ .nomon-category__cookies) {
  padding-bottom: 0;
}

.nomon-category__empty-note {
  color: var(--nomon-muted);
}

/* ── Category toggle ── */

.nomon-category__check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nomon-category__toggle {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 50px;
  height: 23px;
  border-radius: 4em;
  background: var(--nomon-toggle-off);
  transition: background-color 0.25s ease;
}

.nomon-category__toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--nomon-bg);
  transition: transform 0.25s ease;
}

.nomon-category__check:checked ~ .nomon-category__toggle {
  background: var(--nomon-toggle-on);
}

.nomon-category__check:checked ~ .nomon-category__toggle::after {
  transform: translateX(27px);
}

.nomon-category__check:disabled ~ .nomon-category__toggle {
  background: var(--nomon-toggle-readonly);
}

.nomon-category__check:focus-visible ~ .nomon-category__toggle {
  outline: 2px solid var(--nomon-primary, #000000);
  outline-offset: 2px;
}

/* ── Per-category cookie tables ── */


/* The summary and the empty-category note are alternatives in the same slot,
   so they share a line box: same size, same leading, same text start. The
   disclosure marker sits after the text so it cannot shift it. */
.nomon-category__empty-note,
.nomon-category__cookies > summary {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 1.5em;
  line-height: 1.5;
}

/* 1em of the 0.9em wrapper, matching the note's own 0.9em. */
.nomon-category__cookies > summary {
  cursor: pointer;
  list-style: none;
  font-size: 1em;
  color: inherit;
}

.nomon-category__cookies > summary::-webkit-details-marker {
  display: none;
}

.nomon-category__cookies > summary::after {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.25s ease;
}

.nomon-category__cookies[open] > summary::after {
  transform: translateY(0.1em) rotate(225deg);
}

.nomon-cookie-list {
  width: 100%;
  margin-top: 0.5em;
  border-collapse: collapse;
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--nomon-text);
}

.nomon-cookie-list th,
.nomon-cookie-list td {
  padding: 0.35em 0.5em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--nomon-separator);
  word-break: break-word;
}

.nomon-cookie-list th {
  font-weight: 600;
  color: var(--nomon-heading);
}

.nomon-cookie-list code {
  font-size: 0.95em;
}

/* ── Floating button ── */

/* Collapsed to a 48px pill that widens on hover to reveal the label. The label
   stays in the DOM at all times so screen readers always announce it. */
.nomon-floating-btn,
.nomon-floating-btn:active,
.nomon-floating-btn:focus {
  position: fixed;
  top: auto;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  overflow: hidden;
  border: none;
  border-radius: 24px;
  background: var(--nomon-primary, #000000);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: width 0.3s ease, visibility 0.3s ease, box-shadow 0.2s ease, opacity 0.3s ease;
}

.nomon-floating-btn:hover {
  width: 180px;
  /* Lift via shadow instead of transform: scale() — scaling magnifies the
     text and makes it shimmer as it re-rasterizes. */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  background: var(--nomon-primary, #000000) !important;
}

.nomon-floating-btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--nomon-primary-text, #ffffff) !important;
  stroke: var(--nomon-primary-text, #ffffff) !important;
}

.nomon-floating-btn__text {
  margin-left: 14px;
  font-family: var(--nomon-font);
  font-size: 14px;
  white-space: nowrap;
  color: var(--nomon-primary-text, #ffffff);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nomon-floating-btn:hover .nomon-floating-btn__text {
  opacity: 1;
}

/* ── Blocked iframes ── */

iframe.nomon-blocked-iframe {
  display: none !important;
}

.nomon-iframe-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  overflow: hidden;
  border-radius: var(--nomon-modal-radius);
  background: var(--nomon-category-bg);
  font-family: var(--nomon-font);
}

.nomon-iframe-placeholder__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px) brightness(0.6);
}

.nomon-iframe-placeholder__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding: 1.5em;
  text-align: center;
}

.nomon-iframe-placeholder__overlay p {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--nomon-heading);
}

.nomon-iframe-placeholder--has-thumb .nomon-iframe-placeholder__overlay p {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.nomon-iframe-placeholder .nomon-btn {
  flex: none;
  min-width: 0;
}

/* Embeds are often wrapped in an absolutely-positioned aspect-ratio box. */
.wp-block-embed .nomon-iframe-placeholder {
  position: absolute;
  inset: 0;
}

/* ── Admin preview ── */

/* Rendered inside wp-admin rather than over the page, so both panels drop the
   fixed positioning but keep every other style. */
.nomon-banner--preview,
.nomon-pm--preview {
  position: static;
  display: block;
  padding: 0;
  pointer-events: auto;
}

.nomon-pm--preview {
  margin-top: 1.5rem;
}

.nomon-banner--preview .nomon-overlay {
  display: none;
}

.nomon-banner--preview .nomon-cm,
.nomon-pm--preview .nomon-pm__inner {
  max-height: none;
}

/* ── Responsive ── */

@media (max-width: 640px) {
  .nomon-cm__body {
    padding: 24px 20px;
  }

  .nomon-cm__footer {
    padding: 12px 20px;
  }

  .nomon-cm__btns,
  .nomon-pm__footer {
    flex-direction: column-reverse;
    gap: 0.6rem;
  }

  .nomon-cm__btn-group {
    grid-auto-flow: row;
    gap: 0.6rem;
  }

  .nomon-pm__btn-group {
    flex-direction: column-reverse;
    gap: 0.6rem;
  }

  .nomon-cm__btn-group + .nomon-cm__btn-group {
    margin-right: 0;
  }

  .nomon-btn {
    width: 100%;
  }

  .nomon-cookie-list thead {
    display: none;
  }

  .nomon-cookie-list tr {
    display: block;
    padding: 0.35em 0;
    border-bottom: 1px solid var(--nomon-separator);
  }

  .nomon-cookie-list td {
    display: flex;
    gap: 0.5em;
    padding: 0.15em 0;
    border: 0;
  }

  .nomon-cookie-list td::before {
    content: attr(data-label) ":";
    flex: 0 0 5.5rem;
    font-weight: 600;
    color: var(--nomon-heading);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nomon-banner *,
  .nomon-floating-btn,
  .nomon-floating-btn__text {
    transition: none !important;
  }
}