/*
 * ULH — WooCommerce notice chrome, shared by every ULH page that prints one.
 *
 * Extracted from assets/css/ulh-woocommerce.css, which is enqueued ONLY on the
 * cart/checkout screens (is_commerce_request()). /donate/ is not one of those:
 * it is an ordinary redesign page that nonetheless calls wc_print_notices() to
 * show a rejected donation amount, so its errors used to paint in stock
 * WooCommerce chrome — grey bar, purple rule, ::before glyph — because
 * woocommerce-general.css IS loaded there while every ULH notice rule was
 * scoped `body.ulh-commerce`.
 *
 * Scoped `body.ulh-app-template` instead, which BOTH page templates carry
 * (templates/page-ulh-app.php, and page-ulh-commerce.php which adds
 * `ulh-commerce` alongside it), so cart and checkout are unchanged and every
 * other redesign page is now covered too.
 *
 * (0,2,0) beats woocommerce-general.css's single-class `.woocommerce-error`
 * (0,1,0) whatever the enqueue order; the Woo handles are declared as
 * dependencies in ULH_Learning_Redesign::enqueue_notice_styles() anyway, so
 * source order stays honest as well.
 *
 * Tokens are namespaced --ulh-notice-* rather than reusing the --ulh-* set
 * ulh-woocommerce.css declares on `body.ulh-commerce`: on a commerce page both
 * blocks land on the same element, and distinct names mean neither file can
 * quietly redefine the other's values. Mirrors assets/build/tailwind.config.js.
 */

body.ulh-app-template {
  --ulh-notice-primary: #a03f28;
  --ulh-notice-secondary: #516447;
  --ulh-notice-ochre: #f8bb73;
  --ulh-notice-card: #ffffff;
  --ulh-notice-on-surface: #1c1c19;
  --ulh-notice-error: #ba1a1a;
  --ulh-notice-error-bg: #ffdad6;
  --ulh-notice-error-text: #93000a;
  --ulh-notice-ok-bg: #d0e6c2;
  --ulh-notice-radius: 0.75rem;
  --ulh-notice-shadow: 0 1px 2px rgba(86, 66, 61, 0.04),
    0 12px 32px -4px rgba(86, 66, 61, 0.08);
}

body.ulh-app-template .woocommerce-info,
body.ulh-app-template .woocommerce-message,
body.ulh-app-template .woocommerce-error,
body.ulh-app-template .woocommerce-noreviews,
body.ulh-app-template ul.woocommerce-error {
  list-style: none;
  border: 0;
  border-left: 4px solid var(--ulh-notice-ochre);
  border-radius: var(--ulh-notice-radius);
  background: var(--ulh-notice-card);
  color: var(--ulh-notice-on-surface);
  box-shadow: var(--ulh-notice-shadow);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

body.ulh-app-template .woocommerce-info::before,
body.ulh-app-template .woocommerce-message::before,
body.ulh-app-template .woocommerce-error::before {
  content: none;
}

body.ulh-app-template .woocommerce-message {
  border-left-color: var(--ulh-notice-secondary);
  background: var(--ulh-notice-ok-bg);
}

body.ulh-app-template .woocommerce-error,
body.ulh-app-template ul.woocommerce-error {
  border-left-color: var(--ulh-notice-error);
  background: var(--ulh-notice-error-bg);
  color: var(--ulh-notice-error-text);
}

body.ulh-app-template .woocommerce-error li {
  margin: 0.25rem 0 0;
}

body.ulh-app-template .woocommerce-info a,
body.ulh-app-template .woocommerce-message a,
body.ulh-app-template .woocommerce-error a {
  color: var(--ulh-notice-primary);
  font-weight: 700;
  text-decoration: underline;
}

/* Woo puts the "Return to shop" / "Apply coupon" button inside the notice. */
body.ulh-app-template .woocommerce-info .button,
body.ulh-app-template .woocommerce-message .button {
  float: none;
  margin-left: 0.75rem;
}

/* The donation form's notice sits inside the amount card, immediately above the
   submit button, so the last margin would push the button away for nothing. */
body.ulh-app-template .ulh-wc-notices > :last-child {
  margin-bottom: 0;
}