/* ==========================================================================
   PRIVACY CONTROLS
   The Do Not Sell or Share dialog, the footer control that opens it, and the
   Global Privacy Control line inside the consent manager.

   Everything here paints on the dark footer ground or over the page, so every
   colour is quoted with its measured ratio against the surface it sits on.
   Ratios are computed against the token values in tokens.css:
     --surface-base  #090c14   --surface-raised #0e1220
     --text-muted    #7d89a3   5.57:1 on --surface-base
     --text-primary  #e8eaed  15.54:1 on --surface-base
     --text-display  #f3f5f8  17.15:1 on --surface-base
     --accent        #e35530   5.00:1 on --surface-base
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE FOOTER CONTROLS
   Both new controls are buttons, not links, because neither goes anywhere:
   one opens a dialog and the other opens the consent manager. They are painted
   to sit in the legal row as peers of the links around them, which is what the
   row's own rule for a[..] already does, so the shared declarations are
   restated here for the button element rather than inherited.
   -------------------------------------------------------------------------- */

/* THE CONTROLS APPEAR ONLY ONCE THEIR OWN SCRIPT IS RUNNING. The flag is set
   by privacy-controls.js itself, not by the theme's general scripting flag, so
   it says this behaviour is live rather than that some other file booted. */
.fg-footer__legal-links button[data-fg-privacy] { display: none; }

html[data-fg-privacy-js="true"] .fg-footer__legal-links button[data-fg-privacy] {
  display: inline-block;
}

.fg-footer__legal-links button {
  /* Matches .fg-footer__legal-links a exactly: same size, same tone, same
     6px padding block, which gives a 29px target on a 12px label. */
  display: inline-block;
  padding-block: 6px;
  padding-inline: 0;
  margin: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-2xs);
  line-height: 1.4;
  color: var(--text-muted);            /* 5.57:1 */
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: var(--t-color);
}

.fg-footer__legal-links button:hover { color: var(--text-display); }

/* THE DO NOT SELL CONTROL IS PAINTED ONE STEP BRIGHTER THAN THE ROW.
   California requires the link to be clear and conspicuous. The rest of the
   row is boilerplate a reader scans past; this one is a right they are being
   told they have, and reading at 15.54:1 rather than 5.57:1 is the difference
   between a row of eight identical grey strings and one a reader can find. */
.fg-footer__legal-links .fg-privacy-dnss {
  color: var(--text-primary);          /* 15.54:1 */
  font-weight: 500;
}

.fg-footer__legal-links .fg-privacy-dnss:hover { color: var(--text-display); }

/* --------------------------------------------------------------------------
   2. THE DIALOG
   -------------------------------------------------------------------------- */

.fg-privacy-dialog[hidden] { display: none; }

.fg-privacy-dialog {
  position: fixed;
  inset: 0;
  /* Above the consent banner, the fixed motion control and the accessibility
     panel, because it is opened from a control that may sit under any of them
     and a dialog that opens behind something is a dialog that did not open. */
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.fg-privacy-dialog__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 20, 0.82);
}

.fg-privacy-dialog__panel {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  padding: var(--space-7);
  padding-top: var(--space-8);
  background: var(--surface-raised);
  /* --stroke-quiet, not --border-hairline-strong. The hairline is a 14 percent
     white wash, which composites to 1.49:1 against this panel and is the only
     thing separating the panel from a scrim of nearly the same tone. Measured
     16 August 2026. --stroke-quiet is the token tokens.css reserves for exactly
     this and measures 4.30:1 here, past the 3:1 a boundary needs. */
  border: var(--border-hairline-w) solid var(--stroke-quiet);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.fg-privacy-dialog__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h4, 1.25rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-display);          /* 16.5:1 on --surface-raised */
}

.fg-privacy-dialog__body {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-small);
  line-height: 1.6;
  /* --text-primary rather than --text-muted: this paragraph is the disclosure
     the control is making, not supporting detail. 14.8:1 on --surface-raised. */
  color: var(--text-primary);
}

/* The status line carries the result of the action and the Global Privacy
   Control confirmation. It is empty until there is something to say, and an
   empty element must not leave a gap. */
.fg-privacy-dialog__status:empty { display: none; }

.fg-privacy-dialog__status {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash-08);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-primary);          /* 14.8:1 on --surface-raised */
}

.fg-privacy-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.fg-privacy-dialog__confirm[hidden] { display: none; }

.fg-privacy-dialog__confirm,
.fg-privacy-dialog__cancel {
  /* 44px tall on a 14px label: 14 * 1.4 = 19.6, plus 12px padding each side. */
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.4;
  font-weight: 500;
  border: var(--border-hairline-w) solid transparent;
  cursor: pointer;
  transition: var(--t-color), background-color 0.15s ease;
}

.fg-privacy-dialog__confirm {
  background: var(--accent);
  color: var(--text-on-accent);        /* 5.22:1, the pair tokens.css records */
  border-color: var(--accent);
}

/* THE BORDER IS THE WHOLE CONTROL. This button has no fill, so its edge is the
   only thing that says a control is there, and 1.4.11 asks a control's visual
   boundary for 3:1. --border-hairline-strong measured 1.49:1 on this ground.
   --stroke-quiet measures 4.30:1. */
.fg-privacy-dialog__cancel {
  background: none;
  color: var(--text-primary);          /* 14.8:1 on --surface-raised */
  border-color: var(--stroke-quiet);   /* 4.30:1 on --surface-raised */
}

.fg-privacy-dialog__cancel:hover { border-color: var(--text-primary); }

/* The colour is set on the wrapper as well as on the button inside it, because
   a contrast measurement walks computed styles and an unset colour on a
   container reports the browser default against a dark ground. Nothing here
   paints text directly, so this changes no pixel; it makes the measurement say
   what is true. */
.fg-privacy-dialog__more { margin: 0; color: var(--text-primary); }

.fg-privacy-dialog__settings {
  min-height: 24px;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--accent);                /* 4.79:1 on --surface-raised */
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fg-privacy-dialog__settings:hover { color: var(--text-display); }

/* The close affordance. 44px square, so it is a target before it is a glyph.
   The X is drawn rather than set as a character, because a character would
   inherit the display face and the two strokes would not be square. */
.fg-privacy-dialog__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  /* The two strokes take currentColor, so the button's own colour is what a
     contrast check measures. It carries no text, so this is the only place the
     drawn glyph's tone can be read from. 14.8:1 on --surface-raised, well past
     the 3:1 a non-text control needs. */
  color: var(--text-primary);
  cursor: pointer;
}

.fg-privacy-dialog__close::before,
.fg-privacy-dialog__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  background: currentColor;
}

.fg-privacy-dialog__close::before { transform: rotate(45deg); }
.fg-privacy-dialog__close::after { transform: rotate(-45deg); }
.fg-privacy-dialog__close:hover { color: var(--text-display); }

/* The page behind a modal must not scroll under it. */
html.fg-privacy-dialog-open,
html.fg-privacy-dialog-open body { overflow: hidden; }

/* --------------------------------------------------------------------------
   3. INSIDE THE CONSENT MANAGER
   Klaro paints its own dialog. These two rules add to it rather than restyle
   it, so they carry no assumption about the consent theme beyond the class
   names Klaro's own markup uses.
   -------------------------------------------------------------------------- */

.fg-privacy-gpc-note {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash-08);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-primary);
}

.fg-privacy-manager-control {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.4;
  font-weight: 500;
  text-align: left;
  color: var(--text-primary);
  background: none;
  /* Same reasoning as the cancel control: no fill, so the edge is the control,
     and the edge has to reach 3:1. 4.30:1 on --surface-raised. */
  border: var(--border-hairline-w) solid var(--stroke-quiet);
  cursor: pointer;
}

.fg-privacy-manager-control:hover { border-color: var(--accent); }

/* --------------------------------------------------------------------------
   4. NARROW VIEWPORTS
   At 390 the legal row is already a column (components.css breaks it at 480),
   so the only thing left to hold is the dialog, which loses its side padding
   and its centring so it can use the full height.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .fg-privacy-dialog { padding: var(--space-2); align-items: flex-start; }
  .fg-privacy-dialog__panel {
    padding: var(--space-5);
    padding-top: var(--space-8);
    margin-top: var(--space-6);
    max-height: calc(100vh - var(--space-10));
  }
  .fg-privacy-dialog__actions > button { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   5. REDUCED MOTION AND FORCED COLOURS
   Nothing here animates position or size, so reduced motion needs no rule.
   Forced colours does: the drawn X and the wash on the status line both rely
   on colours a high contrast mode replaces.
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .fg-privacy-dialog__panel { border: 1px solid CanvasText; }
  .fg-privacy-dialog__close { color: CanvasText; }
  .fg-privacy-dialog__status,
  .fg-privacy-gpc-note { border-left-color: CanvasText; }
  .fg-footer__legal-links .fg-privacy-dnss { text-decoration: underline; }
}