/* ==========================================================
   PLUGIN STYLES — "The Field"
   African Reaper – Arrow Spine Selector  (block: african-reaper/spine-selector)
   African Reaper – Arrow Weight Calculator (block: african-reaper/arrow-weight)

   Both plugins scope their whole palette as CSS custom properties
   on their root element (.ar-spine-selector / .arw-wrap), so we
   re-skin them by overriding those variables — no fighting with
   their internal selectors, and plugin logic is untouched.

   Selectors are prefixed with .plugin-region for specificity, so
   these overrides win regardless of stylesheet load order.
   ========================================================== */

/* ------------------------------------------------------------------
   Spine Selector — variable overrides
------------------------------------------------------------------ */
.plugin-region .ar-spine-selector {
  --ar-bg:          var(--char-2);
  --ar-bg-card:     var(--char-3);
  --ar-bg-input:    var(--char);
  --ar-border:      var(--line-dk);
  --ar-border-glow: var(--amber);
  --ar-gold:        var(--amber);
  --ar-gold-light:  #ECBC77;
  --ar-text:        var(--t-strong);
  --ar-text-muted:  var(--t-mute);
  --ar-text-dim:    #5A6066;
  --ar-radius:      0px;
  --ar-radius-lg:   0px;
  --ar-font-display: var(--f-display);
  --ar-font-body:    var(--f-body);
  --ar-font-cond:    var(--f-body);

  border-color: var(--line-dk);
  max-width: none;
}

/* ------------------------------------------------------------------
   Weight + FOC Calculator — variable overrides
------------------------------------------------------------------ */
.plugin-region .arw-wrap {
  --arw-bg:           var(--char-2);
  --arw-bg-card:      var(--char-3);
  --arw-bg-input:     var(--char);
  --arw-border:       var(--line-dk);
  --arw-gold:         var(--amber);
  --arw-gold-light:   #ECBC77;
  --arw-text:         var(--t-strong);
  --arw-text-muted:   var(--t-mute);
  --arw-text-dim:     #5A6066;
  --arw-green:        #4caf7d;
  --arw-amber:        var(--amber);
  --arw-red:          var(--red-bright);
  --arw-radius:       0px;
  --arw-radius-lg:    0px;
  --arw-font-display: var(--f-display);
  --arw-font-body:    var(--f-body);
  --arw-font-cond:    var(--f-body);

  max-width: none;
  margin: 0;
}

/* ------------------------------------------------------------------
   Typography detail — the plugins' display font (Bebas Neue) is
   all-caps by design; Archivo needs weight + tracking to match.
------------------------------------------------------------------ */
.plugin-region .ar-spine-selector h1,
.plugin-region .ar-spine-selector h2,
.plugin-region .ar-spine-selector h3,
.plugin-region .arw-wrap h1,
.plugin-region .arw-wrap h2,
.plugin-region .arw-wrap h3,
.plugin-region .arw-title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Buttons inside the plugins — align with .btn--primary */
.plugin-region .ar-btn-calculate,
.plugin-region .arw-wrap button[class*="calc"],
.plugin-region .arw-wrap .arw-btn {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
}

/* Shop CTA buttons inside plugin results — brand red instead of gold */
.plugin-region .ar-btn-shop {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.plugin-region .ar-btn-shop:hover {
  background: var(--red-bright);
  border-color: var(--red-bright);
}