/**
 * @file
 * Styles for the AI disclosure output.
 */

/* Declared on both selectors: custom properties inherit downwards only,
 * and the card's border/padding live on the wrapper, an ancestor of
 * .ai-disclosure. Override both if you override either.
 */
.ai-disclosure-wrapper,
.ai-disclosure {
  --ai-disclosure-gap: 0.75em;
  --ai-disclosure-icon-height: 2em;
  --ai-disclosure-border-width: 1px;
  --ai-disclosure-border-color: rgb(128, 128, 128, 0.35);
  --ai-disclosure-border-radius: 4px;
  --ai-disclosure-padding: 1em 1.25em;
  --ai-disclosure-sentence-weight: 700;
  --ai-disclosure-secondary-size: 0.9em;
  --ai-disclosure-secondary-opacity: 0.75;
  --ai-disclosure-divider-gap: 0.75em;
}

/* On the img, not the picture: height on a picture does not reach the
 * image inside it. Height is in em, so the icon scales with the text.
 */
.ai-disclosure__icon {
  display: inline-block;
  width: auto;
  height: var(--ai-disclosure-icon-height, 2em);
  vertical-align: middle;
}

/* Two-column header, wraps on narrow viewports without a breakpoint. */
.ai-disclosure__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ai-disclosure-gap, 0.75em);
  align-items: flex-start;
}

.ai-disclosure__figure {
  flex: none;
}

.ai-disclosure__text > * {
  margin: 0;
}

.ai-disclosure__legal {
  margin-top: 0.25em;
}

.ai-disclosure__responsibility {
  margin-top: 0.25em;
}

.ai-disclosure__details {
  margin-top: 0.5em;
}

.ai-disclosure__summary {
  cursor: pointer;
}

.ai-disclosure__statement {
  margin-top: 0.5em;
}

/* The "card" style: a bordered box on the wrapper, absent with style "plain". */
.ai-disclosure-wrapper--card {
  padding: var(--ai-disclosure-padding, 1em 1.25em);
  border: var(--ai-disclosure-border-width, 1px) solid var(--ai-disclosure-border-color, rgb(128, 128, 128, 0.35));
  border-radius: var(--ai-disclosure-border-radius, 4px);
}

.ai-disclosure-wrapper--card .ai-disclosure__sentence {
  font-weight: var(--ai-disclosure-sentence-weight, 700);
}

.ai-disclosure-wrapper--card .ai-disclosure__legal {
  opacity: var(--ai-disclosure-secondary-opacity, 0.75);
  font-size: var(--ai-disclosure-secondary-size, 0.9em);
}

.ai-disclosure-wrapper--card .ai-disclosure__responsibility {
  opacity: var(--ai-disclosure-secondary-opacity, 0.75);
  font-size: var(--ai-disclosure-secondary-size, 0.9em);
}

.ai-disclosure-wrapper--card .ai-disclosure__details {
  margin-top: var(--ai-disclosure-divider-gap, 0.75em);
  padding-top: var(--ai-disclosure-divider-gap, 0.75em);
  border-top: var(--ai-disclosure-border-width, 1px) solid var(--ai-disclosure-border-color, rgb(128, 128, 128, 0.35));
}

.ai-disclosure-wrapper--card .ai-disclosure__statement {
  opacity: var(--ai-disclosure-secondary-opacity, 0.75);
  font-size: var(--ai-disclosure-secondary-size, 0.9em);
}

/* The undetermined verdict, marked without relying on color alone: a
 * dashed left border - shape, not just tint - scoped to "card" like the
 * rest of this file's border rules; "plain" leaves it to the theme.
 */
.ai-disclosure-wrapper--card .ai-disclosure--undetermined {
  padding-left: var(--ai-disclosure-gap, 0.75em);
  border-left: calc(var(--ai-disclosure-border-width, 1px) * 3) dashed var(--ai-disclosure-border-color, rgb(128, 128, 128, 0.35));
}

/* The Art. 50(4) ¶1 non-invasive form: a smaller footprint, never hidden -
 * no display:none, no aria-hidden, nothing removed from the tab order.
 * Full size returns on hover/focus, for whoever is looking for it.
 */
.ai-disclosure--unobtrusive {
  --ai-disclosure-icon-height: 1.25em;

  opacity: var(--ai-disclosure-secondary-opacity, 0.75);
  font-size: var(--ai-disclosure-secondary-size, 0.9em);
}

.ai-disclosure--unobtrusive:hover,
.ai-disclosure--unobtrusive:focus-within {
  opacity: 1;
}