/* Roasted Root doodle button (Rev. October 2026)
   Brand tokens come from tokens.css, which points to theme.json.

   Works two ways:
   1. In the editor: Button block > Styles > Doodle (or Doodle Terracotta / Doodle Olive).
   2. In hand-written HTML: <a class="doodle-btn">.

   Button rule: every button before the cart is a doodle button.
   From the cart on (mini-cart, cart, checkout, order received,
   my-account), use the default solid button. Never mix the two in one view.
   Keep labels to about four words; the shape does not wrap. */

:is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link) {
  --h: 3.4em;
  --cap-l: calc(var(--h) * 0.569);
  --cap-r: calc(var(--h) * 0.526);
  --fill: var(--gold);
  --fill-hover: var(--gold-dark);
  --line: var(--espresso);
  --label: var(--espresso);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h);
  min-width: calc(var(--h) * 1.9);
  padding: 0 calc(var(--cap-l) * 0.85);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: var(--label);
  font: 800 15px/1 var(--font-archivo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--ease);
}
:is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link)::before,
:is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: var(--cap-l) 100%, calc(100% - var(--cap-l) - var(--cap-r) + 2px) 100%, var(--cap-r) 100%;
          mask-size: var(--cap-l) 100%, calc(100% - var(--cap-l) - var(--cap-r) + 2px) 100%, var(--cap-r) 100%;
  -webkit-mask-position: 0 0, calc(var(--cap-l) - 1px) 0, 100% 0;
          mask-position: 0 0, calc(var(--cap-l) - 1px) 0, 100% 0;
  transition: background-color var(--ease);
}
:is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link)::before {
  background-color: var(--fill);
  -webkit-mask-image: url("../images/doodle-button/doodle-fill-left.svg"), url("../images/doodle-button/doodle-fill-mid.svg"), url("../images/doodle-button/doodle-fill-right.svg");
          mask-image: url("../images/doodle-button/doodle-fill-left.svg"), url("../images/doodle-button/doodle-fill-mid.svg"), url("../images/doodle-button/doodle-fill-right.svg");
}
:is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link)::after {
  background-color: var(--line);
  -webkit-mask-image: url("../images/doodle-button/doodle-outline-left.svg"), url("../images/doodle-button/doodle-outline-mid.svg"), url("../images/doodle-button/doodle-outline-right.svg");
          mask-image: url("../images/doodle-button/doodle-outline-left.svg"), url("../images/doodle-button/doodle-outline-mid.svg"), url("../images/doodle-button/doodle-outline-right.svg");
}
:is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link):hover { transform: rotate(-1.2deg) translateY(-1px); background: none; color: var(--label); }
:is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link):hover::before { background-color: var(--fill-hover); }
:is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link):active { transform: translateY(1px); }
:is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link):focus-visible { outline: 2px dashed var(--terracotta-dark); outline-offset: 5px; border-radius: 999px; }

/* Color variants: each fill darkens to its own hover shade */
:is(.doodle-btn.is-terracotta, .wp-block-button.is-style-doodle-terracotta > .wp-block-button__link) { --fill: var(--terracotta); --fill-hover: var(--terracotta-dark); --label: var(--cream); }
:is(.doodle-btn.is-olive, .wp-block-button.is-style-doodle-olive > .wp-block-button__link) { --fill: var(--olive); --fill-hover: var(--olive-dark); --label: var(--cream); }

/* On dark backgrounds the outline flips to cream (any espresso or olive-dark section) */
:is(.doodle-btn.on-dark,
    :is(.has-espresso-background-color, .has-olive-dark-background-color, .has-olive-background-color, .rr-hero, .rr-callout) .doodle-btn,
    :is(.has-espresso-background-color, .has-olive-dark-background-color, .has-olive-background-color, .rr-hero, .rr-callout) .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link) { --line: var(--cream); }

/* Sizes (hand-written HTML only) */
.doodle-btn.is-sm { font-size: 13px; }
.doodle-btn.is-lg { font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  :is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link),
  :is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link):hover,
  :is(.doodle-btn, .wp-block-button[class*="is-style-doodle"] > .wp-block-button__link):active { transform: none; transition: none; }
}