/* custom/legal-documents + the acceptance dialog (inc/legal-documents.php). */

.legal-documents {
  /* Accent for text: the client's accent colour itself has no guaranteed
     contrast, so it is mixed towards black (light) / white (dark mode). */
  --legal-accent: light-dark(color-mix(in srgb, var(--color-accent) 60%, black), color-mix(in srgb, var(--color-accent) 60%, white));
  --legal-ok: var(--status-color-5, #4e9b5e);
  --legal-pending: var(--status-color-3, #d4ac3b);
}

.legal-documents__intro {
  color: var(--wp--preset--color--grey-600);
}

.legal-documents__notice {
  padding: 10px 14px;
  border-radius: 0.5rem;
  border: 1px solid var(--legal-ok);
  border-left-width: 4px;
  color: var(--color-text); /* Green text would be below 4.5:1. */
}

.legal-documents__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.legal-documents__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 24px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: var(--surface--card--bg);
  box-shadow: var(--surface--card--shadow--sm);
}

.legal-documents__title {
  margin: 0 0 4px;
  font-size: 1.0625rem;
}

.legal-documents__version,
.legal-documents__status {
  margin: 0;
  font-size: 0.875rem;
  color: var(--wp--preset--color--grey-600);
}

.legal-documents__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.legal-documents__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--legal-pending);
}

.legal-documents__item[data-status="accepted"] .legal-documents__dot {
  background: var(--legal-ok);
}

.legal-documents__accept {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.bdx-legal-accept__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.bdx-legal-accept__check input {
  margin-top: 4px;
  flex: 0 0 auto;
}

.legal-documents__text {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.legal-documents__text > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--legal-accent);
}

.legal-documents__text > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.legal-documents__text-body {
  margin-top: 16px;
  max-width: 100ch;
}

/* The stored privacy text starts with its own h1; keep it at section size. */
.legal-documents__text-body h1 {
  font-size: 1.375rem;
  line-height: 1.3;
  margin: 0 0 12px;
}

.legal-documents__text-body h2 {
  font-size: 1.125rem;
  margin: 24px 0 8px;
}

.legal-documents__text-body h3 {
  font-size: 1rem;
  margin: 20px 0 6px;
}

.legal-documents__text-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.legal-documents__text-body th,
.legal-documents__text-body td {
  border: 1px solid var(--color-border);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

@media (max-width: 640px) {
  .legal-documents__item {
    grid-template-columns: 1fr;
  }
}

/* Accessibility: the dialog's close button sits on the card, not on the
   dark overlay, so it uses the text colour instead of white. */
/* Same specificity as the modal block's token rule, loaded after it. */
.wp-block-custom-modal-content.modal--content.bdx-legal-dialog {
  --mc-btn-close-color: var(--mc-color);
}

.bdx-legal-dialog .modal--content__dialog .modal--content__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Accessibility: visible checkbox boundary (WCAG 1.4.11, min. 3:1) and a
   clear focus ring; the global input styles draw it light grey on the card. */
.bdx-legal-accept input[type="checkbox"]:not(.switch) {
  --active-inner: var(--color-body, #ffffff);
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid var(--color-text, #111111);
  border-radius: 4px;
  background: var(--color-body, #ffffff);
  box-shadow: none;
}

.bdx-legal-accept input[type="checkbox"]:not(.switch):checked {
  background: var(--color-text, #111111);
}

.bdx-legal-accept input[type="checkbox"]:not(.switch)::after {
  left: 7px;
  top: 3px;
  border-right: 2px solid var(--active-inner);
  border-bottom: 2px solid var(--active-inner);
}

.bdx-legal-accept input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-text, currentColor);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .bdx-legal-accept input[type="checkbox"] {
    appearance: auto;
  }
}

/* Confirmation after accepting in the dialog (top of the page). */
.bdx-legal-flash-wrap {
  max-width: var(--wp--style--global--content-size, 1200px);
  margin: 16px auto;
  padding-inline: 16px;
}

.bdx-legal-flash:focus {
  outline: 2px solid var(--color-text, currentColor);
  outline-offset: 2px;
}