/* jdtheme26 — THE THEME'S BUTTON: "soft rough-edged pill" (2026-09-28).
   Operator spec: sources/2026-09-28-button-component/operator-spec.txt — a pill whose BACKGROUND has a hand-drawn, slightly soft edge while the text
   and the icon stay sharp.

   HOW IT WORKS
     • ONE inline SVG filter for the whole site, id "rough-soft", printed once in the footer by functions.php (jdtheme26_button_filter_defs()).
       Its three numbers live THERE, as PHP constants at the top of that function:  baseFrequency (0.03)  ·  displacement scale (8)  ·  blur stdDeviation (1.6).
     • The button itself carries no filter. Its background is the ::before layer (inset 0, z-index -1, filter: url(#rough-soft)); the button is
       position: relative + isolation: isolate, so the layer stays behind its own text only. (The spec's extra <span> is this pseudo-element — no extra
       markup to remember.)
     • A browser that cannot apply the filter shows a plain pill of the same colour.

   HOW TO USE
     <a class="jd-btn" href="…">文字</a>                                   pink, medium — links that look like buttons
     <button type="button" class="jd-btn jd-btn--butter">文字</button>      real buttons for actions
     colour:  (none) = pink  ·  jd-btn--butter  ·  jd-btn--mint  ·  jd-btn--white  ·  jd-btn--cream  ·  jd-btn--cocoa
     size:    jd-btn--sm (40px)  ·  (none) = md (52px)  ·  jd-btn--lg (64px / 22px / 44px padding = the spec's size)
     icon:    put <span class="jd-btn__icon" aria-hidden="true"><svg …stroke="currentColor"…/></span> after the text
     icon only: class jd-btn--icon + an aria-label on the button
     In page content: shortcode  [jd_button text="Add to Cart" url="/cart/" color="pink" size="lg" icon="cart"]
   Live examples: /button-style-guide/ */

body .jd-btn {
  /* pink (default) — the spec's colours */
  --jd-btn-bg: #fbe3e3;
  --jd-btn-bg-hover: #f8d4d5;
  --jd-btn-bg-active: #f4c6c8;
  --jd-btn-fg: #9a5a5f;
  --jd-btn-icon: #3d2a2c;
  /* medium size */
  --jd-btn-h: 52px;
  --jd-btn-px: 32px;
  --jd-btn-fs: 16px;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  box-sizing: border-box;
  min-height: 0;
  height: var(--jd-btn-h);
  margin: 0;
  padding: 0 var(--jd-btn-px);
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  color: var(--jd-btn-fg);
  font-family: inherit;               /* the site's own stack (Baloo 2 + Noto Sans TC); the spec's Quicksand is not loaded on this site */
  font-size: var(--jd-btn-fs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, transform .2s ease;
}
body .jd-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background-color: var(--jd-btn-bg);
  filter: url(#rough-soft);          /* ONLY the background layer is filtered */
  transition: background-color .2s ease;
  pointer-events: none;
}
@media (hover: hover) {
  body .jd-btn:hover { color: var(--jd-btn-fg); background: none; box-shadow: none; }
  body .jd-btn:hover::before { background-color: var(--jd-btn-bg-hover); }
}
body .jd-btn:active::before { background-color: var(--jd-btn-bg-active); }
body .jd-btn:active { transform: translateY(1px); }
body .jd-btn:focus-visible {
  outline: 2px solid var(--jd-btn-fg);
  outline-offset: 4px;
}
body .jd-btn[disabled],
body .jd-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* icon on the right */
.jd-btn .jd-btn__icon {
  flex: none;
  display: inline-flex;
  color: var(--jd-btn-icon);
}
.jd-btn .jd-btn__icon svg {
  display: block;
  width: 1.25em;
  height: 1.25em;
}
@media (hover: hover) {
  .jd-btn .jd-btn__icon { transition: transform .2s ease; }
  .jd-btn:hover .jd-btn__icon { transform: translateX(3px); }
}

/* ---- sizes ---- */
body .jd-btn--sm { --jd-btn-h: 40px; --jd-btn-px: 22px; --jd-btn-fs: 14px; }
body .jd-btn--lg { --jd-btn-h: 64px; --jd-btn-px: 44px; --jd-btn-fs: 22px; }      /* the spec: 64px high, 44px side padding, 22px text */
body .jd-btn--icon { --jd-btn-px: 0px; width: var(--jd-btn-h); }                    /* icon only — needs an aria-label */
body .jd-btn--block { display: flex; width: 100%; }

/* ---- colours ---- */
body .jd-btn--butter {                 /* operator 2026-09-28: #fde794 */
  --jd-btn-bg: #fde794;
  --jd-btn-bg-hover: #fbdc74;
  --jd-btn-bg-active: #f7d05a;
  --jd-btn-fg: #3b2a1f;
  --jd-btn-icon: #3b2a1f;
}
body .jd-btn--mint {
  --jd-btn-bg: #d6ecdf;
  --jd-btn-bg-hover: #c4e3d1;
  --jd-btn-bg-active: #b2d9c2;
  --jd-btn-fg: #2f5f3c;
  --jd-btn-icon: #24492e;
}
body .jd-btn--white {
  --jd-btn-bg: #ffffff;
  --jd-btn-bg-hover: #fdf3ee;
  --jd-btn-bg-active: #fbe9e1;
  --jd-btn-fg: #3b2a1f;
  --jd-btn-icon: #3b2a1f;
}
body .jd-btn--cocoa {                  /* 2026-09-29: dark button for light warm backgrounds (home hero slide 2) — cream lettering on cocoa brown, 7.4:1 */
  --jd-btn-bg: #7a5240;
  --jd-btn-bg-hover: #68432f;
  --jd-btn-bg-active: #573625;
  --jd-btn-fg: #fffaf0;
  --jd-btn-icon: #fffaf0;
}
body .jd-btn--cream {                  /* operator 2026-09-29: #fbf8f1 (the 「MORE」 buttons of the home page's three cards) */
  --jd-btn-bg: #fbf8f1;
  --jd-btn-bg-hover: #ffffff;
  --jd-btn-bg-active: #f3eee2;
  --jd-btn-fg: #3b2a1f;
  --jd-btn-icon: #3b2a1f;
}

@media (max-width: 768px) {
  body .jd-btn--lg { --jd-btn-h: 56px; --jd-btn-px: 32px; --jd-btn-fs: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body .jd-btn, body .jd-btn::before, .jd-btn .jd-btn__icon { transition: none; }
  body .jd-btn:active { transform: none; }
}
@media print {
  body .jd-btn::before { filter: none; }
}

/* ---- style guide page (/button-style-guide/) ---- */
.jd-btn-guide { max-width: 880px; margin-inline: auto; }
.jd-btn-guide h2 { margin: 40px 0 6px; font-size: 20px; }
.jd-btn-guide p { margin: 0 0 16px; color: var(--jd-ink-700, #5c4a3c); }
.jd-btn-guide__row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; padding: 22px 0; }
.jd-btn-guide__row--cream { padding: 28px 24px; border-radius: 18px; background-color: #faf5e9; }
.jd-btn-guide code { padding: 2px 6px; border-radius: 6px; background-color: var(--jd-cream-50, #fbf6ec); font-size: 13px; letter-spacing: 0; }