/* ==========================================================================
   WPConsent banner — Allred brand
   Add to the child theme, or paste into Appearance > Customize > Additional CSS.

   WPConsent exposes its styling through CSS custom properties on
   #wpconsent-container. Anything set here overrides the admin colour pickers,
   so you can leave those at defaults or set them to match — this file wins.

   Colours reference the tokens from allred-brand.css with hard fallbacks, so
   the banner still renders correctly if that file fails to load.

   Contrast measured against the banner background #FAFBF8. WCAG 2.2 requires
   4.5:1 for text and 3:1 for UI component boundaries (SC 1.4.3, 1.4.11).
   ========================================================================== */

#wpconsent-container {

  /* ---- Surface -------------------------------------------------------- */
  --wpconsent-background:     var(--paper, #FAFBF8);   /* paper */
  --wpconsent-text:           var(--ink, #1F261E);   /* ink — 14.93:1 */
  --wpconsent-border:         var(--border-ui, #948F89);   /*  3.09:1 — clears SC 1.4.11.
                                             Sand (#E8E1DA) measures 1.25:1
                                             and is invisible as a boundary. */
  --wpconsent-outline-color:  rgba(31, 38, 30, 0.14);

  /* ---- Shape ---------------------------------------------------------- */
  --wpconsent-border-radius:  4px;       /* matches --radius in allred-brand.css */
  --wpconsent-padding:        22px 26px;
  --wpconsent-shadow:         0 6px 24px rgba(31, 38, 30, 0.16),
                              0 2px 6px rgba(31, 38, 30, 0.10);

  /* ---- Buttons -------------------------------------------------------- *
   * Accept and Reject are deliberately identical: same fill, same weight,
   * same size. Consent must be freely given, and regulators treat a
   * prominent Accept beside a de-emphasised Reject as a dark pattern.
   * Making the two consequential choices visually equal is both the
   * defensible position and the simpler design.
   *
   * Preferences is the third path, not a lesser one — outlined rather than
   * filled so it reads as a different kind of action, not a weaker version
   * of the same one.
   * --------------------------------------------------------------------- */

  --wpconsent-accept-bg:          var(--burgundy, #943835);   /* burgundy */
  --wpconsent-accept-color:       var(--paper, #FAFBF8);   /*  7.03:1 */

  --wpconsent-cancel-bg:          var(--burgundy, #943835);   /* identical to Accept */
  --wpconsent-cancel-color:       var(--paper, #FAFBF8);   /*  7.03:1 */

  --wpconsent-preferences-bg:     transparent;
  --wpconsent-preferences-color:  var(--burgundy-deep, #6E2926);   /* 10.07:1 on paper */

  /* ---- Type ----------------------------------------------------------- */
  --wpconsent-font-size:      15px;
  --wpconsent-title-size:     19px;
  --wpconsent-line-height:    1.55;

  /* ---- Close control -------------------------------------------------- */
  --wpconsent-close-color:    var(--ink-muted, #6E6C66);   /* 5.05:1. Default #454545 is
                                            off-palette cool grey. */
  --wpconsent-close-size:     14px;

  /* ---- Focus ---------------------------------------------------------- *
   * Default is #007cba, WordPress blue, which appears nowhere in this
   * system. Burgundy at 7.03:1 on paper is well clear of the 3:1 minimum.
   * --------------------------------------------------------------------- */
  --wpconsent-focus-outline-color:  var(--burgundy, #943835);
  --wpconsent-focus-outline-width:  3px;
  --wpconsent-focus-outline-offset: 2px;
}

/* The banner inherits Avenir rather than the theme's default stack. */
#wpconsent-container,
#wpconsent-container button,
#wpconsent-container a {
  font-family: "Avenir Next", Avenir, "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Give Preferences a visible boundary, since a transparent fill alone
   leaves it below the 3:1 UI-component threshold. */
#wpconsent-container .wpconsent-banner-settings,
#wpconsent-container [class*="preferences"] {
  border: 2px solid var(--burgundy-deep, #6E2926) !important;   /* 10.07:1 against paper */
}

/* --------------------------------------------------------------------------
   Floating re-open button. Per WPConsent's documentation these two are
   global and must sit on :root, not on #wpconsent-container.
   -------------------------------------------------------------------------- */

:root {
  --wpconsent-floating-button-bg:    var(--burgundy, #943835);
  --wpconsent-floating-button-color: var(--paper, #FAFBF8);   /* 7.03:1 */
}

/* --------------------------------------------------------------------------
   Reduced motion — matches the rule in allred-brand.css.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #wpconsent-container,
  #wpconsent-container * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}