/*
 * Developer Toolkit theme for the Silktide Consent Manager.
 *
 * Loaded via a <link> placed AFTER silktide-consent-manager.css so the cascade is
 * decided by source order — every selector here deliberately ties the vendor's
 * specificity rather than beating it, which keeps the overrides readable and means
 * a vendor upgrade fails loudly (visually) instead of silently winning.
 *
 * Colours come from src/styles/dtk-tokens.css, which is loaded on both docs
 * (starlight-custom.css) and non-docs (non-docs.css) pages. Because that file
 * re-declares the tokens for .dtk-dark/.dark/[data-theme='dark'], dark mode is
 * inherited for free — with one exception, handled below.
 */

/* --------------------------------------------------------------------------
   Vendor custom properties → site tokens
   -------------------------------------------------------------------------- */
#stcm-wrapper {
  --fontFamily: var(--font-sans);
  --primaryColor: var(--accent-primary);
  --backgroundColor: var(--bg-surface);
  --textColor: var(--fg-1);
  --boxShadow: var(--shadow-3);
  --backdropBackgroundColor: var(--bg-overlay);
  --backdropBackgroundBlur: 4px;
  --iconColor: var(--accent-primary);
  --iconBackgroundColor: var(--fg-on-accent);

  /* scorecard-overlay.js sits at 99999; a consent prompt must outrank it. */
  z-index: 100000;
}

/*
 * Dark-mode exception: --bg-surface is a solid near-black in dark,
 * which is correct for cards layered over the page gradient but renders the banner
 * translucent with page text bleeding through. Use the opaque elevated surface.
 */
[data-theme='dark'] #stcm-wrapper,
.dtk-dark #stcm-wrapper,
.dark #stcm-wrapper {
  --backgroundColor: var(--bg-surface-2);
}

/* --------------------------------------------------------------------------
   Surfaces — match the site's card treatment (vendor: 12px, no border)
   -------------------------------------------------------------------------- */
#stcm-banner,
#stcm-modal {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
}

#stcm-modal h1 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Vendor sets :focus{border-radius:50%} on the banner, which distorts the card
   if it ever takes focus. Keep the card square-cornered-consistent. */
#stcm-banner:focus {
  border-radius: var(--radius-3);
}

/* --------------------------------------------------------------------------
   Buttons
   Vendor v2.0.1 hardcodes `stcm-button stcm-button-primary` on ALL FOUR buttons
   (.stcm-accept-all, .stcm-reject-all, .stcm-modal-save, .stcm-modal-reject-all).
   .stcm-button-secondary exists in the vendor CSS but is never applied by the JS,
   and there is no config option for it — so the hierarchy is imposed here.
   Accept all is the only solid button anywhere in the flow.
   -------------------------------------------------------------------------- */
#stcm-wrapper .stcm-button {
  border-radius: var(--radius-2);
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

/* PRIMARY — Accept all, and only Accept all */
#stcm-wrapper .stcm-accept-all {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--fg-on-accent);
}

#stcm-wrapper .stcm-accept-all:hover {
  background-color: var(--accent-primary-hov);
  border-color: var(--accent-primary-hov);
  color: var(--fg-on-accent);
  transform: translateY(-1px);
}

#stcm-wrapper .stcm-accept-all:active {
  transform: translateY(0);
}

/* SECONDARY — everything else. Also neutralises the vendor's
   .stcm-button-primary:hover colour inversion. */
#stcm-wrapper .stcm-reject-all,
#stcm-wrapper .stcm-modal-save,
#stcm-wrapper .stcm-modal-reject-all {
  background-color: transparent;
  border-color: var(--border-2);
  color: var(--fg-1);
  box-shadow: none;
}

#stcm-wrapper .stcm-reject-all:hover,
#stcm-wrapper .stcm-modal-save:hover,
#stcm-wrapper .stcm-modal-reject-all:hover {
  background-color: var(--bg-surface-2);
  border-color: var(--fg-1);
  color: var(--fg-1);
}

/* In dark mode --bg-surface-2 IS the card background, so a hover that sets it
   reads as no change. Lift to the soft violet wash instead. */
[data-theme='dark'] #stcm-wrapper .stcm-reject-all:hover,
[data-theme='dark'] #stcm-wrapper .stcm-modal-save:hover,
[data-theme='dark'] #stcm-wrapper .stcm-modal-reject-all:hover,
.dark #stcm-wrapper .stcm-reject-all:hover,
.dark #stcm-wrapper .stcm-modal-save:hover,
.dark #stcm-wrapper .stcm-modal-reject-all:hover {
  background-color: var(--bg-surface-2);
  border-color: var(--accent-primary);
}

/* Tertiary text button — already borderless in the vendor CSS; just align the
   type with the site's link styling. */
#stcm-banner .stcm-preferences-button {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Preference toggles
   Vendor paints the OFF track with --textColor (near-black) — far too heavy
   against the cream surface. --fg-2 keeps the white ON/OFF label readable in
   both themes while sitting back visually.
   -------------------------------------------------------------------------- */
#stcm-modal .stcm-toggle-track {
  background: var(--fg-2);
}

#stcm-modal .stcm-toggle:focus-within {
  box-shadow: 0 0 0 var(--focus-ring-w) var(--focus-ring);
}

/* --------------------------------------------------------------------------
   Focus — site focus-ring token instead of the vendor's two-tone ring
   -------------------------------------------------------------------------- */
#stcm-wrapper a:focus,
#stcm-wrapper #stcm-banner button:focus,
#stcm-wrapper #stcm-modal button:focus,
#stcm-wrapper #stcm-icon:focus {
  box-shadow: 0 0 0 var(--focus-ring-w) var(--focus-ring);
  border-radius: var(--radius-2);
}

/* --------------------------------------------------------------------------
   Third-party branding
   Removed so the prompt reads as part of the product. The manager is MIT
   licensed and carries no attribution-in-UI requirement; the copyright notice
   stays intact in the vendored source and in ./LICENSE.
   -------------------------------------------------------------------------- */
#stcm-banner a.stcm-logo,
#stcm-modal footer a.stcm-credit-link {
  display: none;
}

/*
 * Persistent floating cookie icon. Suppressed with !important because the
 * vendor toggles it via inline `style.display = 'flex'` at runtime, which no
 * amount of specificity can beat. Re-opening preferences is handled by the
 * "Cookie settings" link in the site footer instead.
 */
#stcm-icon {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
/*
 * Suppress the slide-in entrances. Deliberately NOT `!important`: the vendor's own
 * reduced-motion block swaps .stcm-nudge for an opacity pulse at a higher
 * specificity (#id.class), and that feedback should survive.
 *
 * Each position variant needs its resting transform restored by hand — the
 * centered layouts use translate(-50%, …) for *positioning*, not just for the
 * animation, so a blanket `transform: none` would fling them off-centre.
 */
@media (prefers-reduced-motion: reduce) {
  #stcm-banner,
  #stcm-modal {
    animation: none;
    opacity: 1;
  }

  #stcm-banner {
    transform: translateY(0);
  }

  #stcm-modal {
    transform: translate(0, 0);
  }

  #stcm-banner.stcm-pos-center {
    animation: none;
    transform: translate(-50%, -50%);
  }

  #stcm-banner.stcm-pos-bottom-center {
    animation: none;
    transform: translate(-50%, 0);
  }

  #stcm-wrapper .stcm-button {
    transition: none;
  }

  #stcm-wrapper .stcm-accept-all:hover {
    transform: none;
  }
}