/*
 * ULH — cookie / privacy consent banner chrome.
 *
 * Dresses the banner printed by the third-party plugin
 * "gdpr-compliance-cookie-consent" (STM) in the ULH design tokens. That plugin
 * is NEVER edited — it is updated from the vendor and any edit there is lost —
 * and none of its consent logic is touched here: this file is presentation
 * only. The accept click handler (assets/js/scripts.js → jQuery fadeOut +
 * admin-ajax stm_gdpr_cookie_accept) and the stm_gdpr_return_false filter that
 * ULH_Learning_Redesign::protect_wc_cookies() hooks both keep working exactly
 * as before.
 *
 * The markup we are dressing (STM_Cookie::stm_cookie_displayPopup(), printed on
 * wp_footer on every front-end view) is:
 *
 *   <div id="stm_gdpr_popup-main" class="stm_gdpr_popup-main"
 *        style="display:block;background-color:#131323;color:#fff;left:20px;bottom:20px">
 *     <div class="stm_gdpr_popup-content"> … <a>privacy policy</a></div>
 *     <div class="stm_gdpr_popup-links">
 *       <a id="stm_gdpr_popup_accept" class="stm_gdpr_popup-accept">Ok, I agree</a>
 *       <a class="stm_gdpr_popup-decline">No thanks</a>
 *     </div>
 *   </div>
 *
 * ULH_Learning_Redesign::render_consent_banner() re-runs that printer into a
 * buffer and rewrites it before it reaches the page: the vendor's outbound
 * calculator.io link goes, the Privacy Policy control is demoted to a plain
 * link inside the copy and re-pointed at ULH's own policy page, and the
 * `.stm_gdpr_popup-decline` control is added — the banner as shipped offers no
 * way to refuse at all. Decline needs no rule of its own: the shared
 * `.stm_gdpr_popup-links a` recipe below already gives it the same 44px pill
 * and `flex: 1 1 9rem` as Accept, so only the fill separates them.
 *
 * ── HOW THESE RULES WIN ────────────────────────────────────────────────────
 * Every selector below is anchored on the id, #stm_gdpr_popup-main, while the
 * vendor sheet (assets/css/styles.css) is written entirely in classes. One id
 * beats any number of classes, so each rule outranks its counterpart outright:
 *
 *   vendor .stm_gdpr_popup-main                                   (0,1,0)
 *     ours #stm_gdpr_popup-main                                   (1,0,0)  ✔
 *   vendor .stm_gdpr_popup-main .stm_gdpr_popup-links a           (0,2,1)
 *     ours #stm_gdpr_popup-main .stm_gdpr_popup-links a           (1,1,1)  ✔
 *   vendor .stm_gdpr_popup-main .stm_gdpr_popup-links a.stm_gdpr_popup-accept (0,3,1)
 *     ours #stm_gdpr_popup-main .stm_gdpr_popup-links a.stm_gdpr_popup-accept (1,2,1)  ✔
 *   vendor .stm_gdpr_popup-main .stm_gdpr_popup-links a:hover     (0,3,1)
 *     ours #stm_gdpr_popup-main .stm_gdpr_popup-links a:hover     (1,2,1)  ✔
 *   vendor .stm_gdpr_popup-content a                              (0,1,1)
 *     ours #stm_gdpr_popup-main .stm_gdpr_popup-content a         (1,1,1)  ✔
 *
 * The file is additionally enqueued with 'stm-gdpr-styles' as a dependency
 * (see ULH_Learning_Redesign::enqueue_consent_styles), so it also loads after
 * the vendor sheet — belt and braces, not the thing doing the work.
 *
 * Two vendor declarations cannot be beaten by a selector, and are handled
 * without !important instead:
 *   • float:left / float:right on the two buttons, forced to `none !important`
 *     in the vendor's <=420px media query. `.stm_gdpr_popup-links` is made a
 *     FLEX container below, and float has no effect on a flex item — the
 *     declaration stays, it simply stops mattering.
 *   • the vendor's clearfix `:after`, which as a flex item would become a
 *     100%-wide phantom row, is removed with `content:none`.
 *
 * The ONE !important in this file is `background-color` on the container. The
 * plugin prints the colour in the element's inline style attribute, and an
 * inline declaration outranks every selector in every stylesheet; !important is
 * the only lever CSS gives us short of editing the plugin. Nothing else needs
 * it: the inline `color:#fff` is merely INHERITED by the two child divs, and a
 * direct declaration on a child always beats a value inherited from its parent,
 * so the text colours below are plain rules.
 *
 * DO NOT add a `display` declaration to #stm_gdpr_popup-main. Accept dismisses
 * the banner with jQuery fadeOut(), which ends by writing `display:none` to the
 * inline style attribute; a `display:… !important` here would make the banner
 * impossible to dismiss, and a non-important one would be pointless. Flex is
 * therefore applied to the two inner divs only.
 */

#stm_gdpr_popup-main {
  /* Tokens mirrored from assets/build/tailwind.config.js. Declared on the
     banner itself rather than :root so nothing leaks into the rest of the page
     (the site-wide sheet has no body class to scope to). */
  --ulh-primary: #a03f28;
  --ulh-on-primary: #ffffff;
  --ulh-surface: #fcf9f4;
  --ulh-on-surface: #1c1c19;
  --ulh-on-surface-variant: #56423d;
  --ulh-outline-variant: #ddc0ba;
  --ulh-outline-strong: #8a726c;
  --ulh-card-low: #f6f3ee;
  /* shadow-ulh-editorial + the fine top hairline the commerce cards use. */
  --ulh-shadow: 0 1px 2px rgba(86, 66, 61, 0.04), 0 12px 32px -4px rgba(86, 66, 61, 0.08);

  box-sizing: border-box;
  /* Cream surface. Only !important in the file — see header. */
  background-color: var(--ulh-surface) !important;
  border: 1px solid var(--ulh-outline-variant);
  border-radius: 0.75rem; /* rounded-xl, vs the vendor's 5px */
  box-shadow: var(--ulh-shadow);
  padding: 1.25rem;

  /* Vendor: width:380px, dropped to `auto` under 420px. A fixed width plus a
     viewport-relative cap needs no breakpoint of its own and, with
     box-sizing:border-box, cannot overflow: at 375px the vendor's
     left/right:20px!important pair and this max-width give a 335px banner with
     even 20px gutters. */
  width: 23.5rem;
  max-width: calc(100vw - 2.5rem);
  /* Long consent copy on a short phone must never push the buttons off-screen:
     the banner scrolls internally instead. */
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;

  /* The vendor ships z-index:9999999, which would also sit on top of any future
     ULH modal or toast. The app shell tops out at z-50 (nav), with z-[45]/z-[46]
     beneath it, so 59 clears the whole stack: above all page content and the
     nav, still below anything deliberately raised later.

     59 and not 60, which was an exact TIE with `.ulh-sticky-cta`
     (assets/build/input.css) — the landing page's mobile "Start the Free
     Taster" bar, fixed to bottom:0, 80px tall, on the site's front page. This
     banner is printed on wp_footer, i.e. later in the DOM, so at an equal
     z-index it painted OVER that button: at 375x812 the banner occupies roughly
     y 488-792 and the bar y 732-812, a ~60px overlap directly on the control.
     The banner is a small corner card, never a full-screen scrim, but "covers
     no other focusable control" was not true of the one bottom-anchored control
     on the site — hence the explicit break. */
  z-index: 59;

  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  /* Position (fixed, left/bottom) is left entirely to the plugin and its
     settings screen. */
}

/* ------------------------------- the copy --------------------------------- */

/* (1,1,0) over the vendor's `.stm_gdpr_popup-content` (0,1,0). Setting the
   colour HERE rather than on the container is what avoids a second !important:
   the container's inline `color:#fff` only reaches this div by inheritance. */
#stm_gdpr_popup-main .stm_gdpr_popup-content {
  color: var(--ulh-on-surface);
  font-size: 0.875rem;
  line-height: 1.55;
  padding-bottom: 0;
}

/* Links in the consent copy: underlined, in the house rust, with the underline
   clear of the descenders. Beats `.stm_gdpr_popup-content a` (0,1,1), which
   paints them white and strips the underline — invisible on cream. */
#stm_gdpr_popup-main .stm_gdpr_popup-content a {
  color: var(--ulh-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

#stm_gdpr_popup-main .stm_gdpr_popup-content a:hover {
  color: var(--ulh-on-surface);
}

/* ------------------------------ the controls ------------------------------- */

/* Flex row. This is also what neutralises the vendor's floats (ignored on flex
   items) without touching its `float:none!important` mobile rule. */
#stm_gdpr_popup-main .stm_gdpr_popup-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1rem;
  color: var(--ulh-on-surface);
  font-size: 0.875rem;
}

/* The vendor's clearfix (`content:""; display:table; width:100%`) would be laid
   out as a third flex item and add a blank full-width row. (1,1,1) beats (0,2,1). */
#stm_gdpr_popup-main .stm_gdpr_popup-links::after {
  content: none;
}

/* Shared button shape — the house pill. Secondary/outline by default, so any
   control the plugin adds later (decline, settings) is dressed correctly and
   never competes with Accept. Matches the cart/checkout button base in
   ulh-woocommerce.css. */
#stm_gdpr_popup-main .stm_gdpr_popup-links a {
  /* Grow to share the row; wrap to their own line when two no longer fit. */
  flex: 1 1 9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto; /* vendor: 153px */
  min-height: 2.75rem; /* 44px minimum tap target */
  margin: 0; /* vendor: -5px on accept, 20px 0 5px on mobile */
  padding: 0.6875rem 1.25rem; /* vendor: 4px 0 */
  border: 1px solid var(--ulh-outline-strong);
  border-radius: 9999px; /* pill, vs the vendor's 3px */
  background-color: transparent;
  color: var(--ulh-on-surface);
  font-family: "Plus Jakarta Sans", "Be Vietnam Pro", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  text-transform: none; /* vendor: uppercase */
  transition: background-color 0.15s ease, opacity 0.15s ease,
    border-color 0.15s ease;
}

/* Secondary hover — the same quiet cream fill the house secondary buttons use.
   (1,2,1) beats the vendor's white-fill/purple-text hover at (0,3,1). */
#stm_gdpr_popup-main .stm_gdpr_popup-links a:hover {
  background-color: var(--ulh-card-low);
  border-color: var(--ulh-outline-strong);
  color: var(--ulh-on-surface);
}

/* PRIMARY — Accept. The one rust pill on the banner, same recipe as
   #place_order and "Proceed to checkout": rust fill, white label, pill, and the
   editorial shadow. (1,2,1) beats the vendor's purple `a.stm_gdpr_popup-accept`
   at (0,3,1). */
#stm_gdpr_popup-main .stm_gdpr_popup-links a.stm_gdpr_popup-accept {
  background-color: var(--ulh-primary);
  border-color: var(--ulh-primary);
  color: var(--ulh-on-primary);
  box-shadow: var(--ulh-shadow);
}

/* Hover keeps the fill and dims slightly — the house primary hover. Listed
   after the shared :hover above so both being (1,2,1) is fine; this one is also
   a class deeper, so it wins on specificity as well as order. */
#stm_gdpr_popup-main .stm_gdpr_popup-links a.stm_gdpr_popup-accept:hover {
  background-color: var(--ulh-primary);
  border-color: var(--ulh-primary);
  color: var(--ulh-on-primary);
  opacity: 0.9;
}

/* Keyboard focus. The banner's controls are anchors, which get no focus ring of
   their own once the vendor strips text-decoration, so the house ring
   (2px primary, 2px offset — the focus-visible:ring-2 ring-primary
   ring-offset-2 pattern used across the partials) is restored explicitly. The
   offset keeps the ring legible even on the rust fill. */
#stm_gdpr_popup-main .stm_gdpr_popup-links a:focus-visible,
#stm_gdpr_popup-main .stm_gdpr_popup-content a:focus-visible {
  outline: 2px solid var(--ulh-primary);
  outline-offset: 2px;
  border-radius: 9999px;
}

#stm_gdpr_popup-main .stm_gdpr_popup-content a:focus-visible {
  border-radius: 0.25rem;
}

/* -------------------------------- narrow ---------------------------------- */

/* Same 420px breakpoint the vendor uses, so the two rules change together.
   Below it the banner is edge-to-edge (minus 20px gutters) and each control
   takes a full row at the full 44px height. */
@media (max-width: 420px) {
  #stm_gdpr_popup-main {
    padding: 1.125rem;
  }
  #stm_gdpr_popup-main .stm_gdpr_popup-links a {
    flex: 1 1 100%;
  }
}