/* jdtheme26 — FAQ page /faq/ (2026-09-28).
   Operator: new text (JUST_DOG_FAQ_FINAL_HTML.txt) + 「請前端agent幫我搭配目前風格配色設計更好的UI」.
   DESIGN — one readable column (max 880px), built from things the site already has:
     intro text, centred  →  section pills (the category-page pills, #fcf1ed) that jump to a section
     5 sections: pink paw + heading, then the questions as the home page's FAQ cards (rounded, outlined, bar before the question, plus sign)
     closing block on the cream watercolour band (the store block's three-part background) with a LINE-green button
   Markup: sections .jd-faq-intro / .jd-faq-sec / .jd-faq-cta-row in template-parts/jd/faq.php (questions: inc/jd-faq-data.php). */

.jd-faq-intro,
.jd-faq-sec {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--jd-space-s);      /* 850px of text inside the 880px column (the gutter the page builder's column used to add) */
}

/* ---- intro + section pills ---- */
.jd-faq-intro__text {
  max-width: 680px;                        /* operator 2026-09-28 (was 640px) */
  margin: 0 auto 26px;
  text-align: center;
  color: var(--jd-ink-700, #5c4a3c);
  text-wrap: pretty;
}
.jd-faq-nav {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jd-faq-nav::-webkit-scrollbar { display: none; }
body .jd-faq-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 2px 0;
  list-style: none;
}
body .jd-faq-nav li { margin: 0; padding: 0; }
body .jd-faq-nav li::before { content: none; }
body .jd-faq-nav a {
  display: block;
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #fcf1ed;
  color: var(--jd-ink-900, #3b2a1f);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) {
  body .jd-faq-nav a:hover { background-color: var(--jd-ink-900, #3b2a1f); color: #fff; }
}
body .jd-faq-nav a:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 2px; }

/* ---- sections ---- */
.jd-faq-sec {
  padding-top: 56px;
  scroll-margin-top: 90px;                 /* the sticky header bar (60px) + air, when a pill jumps here */
}
html:has(.jd-faq-nav) { scroll-behavior: smooth; }
.jd-faq-sec .jd-faq-sec__title { margin-bottom: 18px; }
@media (max-width: 767.98px) {
  .jd-faq-sec .jd-faq-sec__title { margin-bottom: 0; }   /* phones: the heading sits right on the cards (as it always showed) */
}
.jd-faq-sec .jd-faq-sec__title h2.title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--jd-ink-900, #3b2a1f);
}
.jd-faq-sec .jd-faq-sec__title h2.title::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: url("../img/jd-paw-pink.webp") center / contain no-repeat;
  transform: rotate(-14deg);
}

/* the cards (same look as the home page's FAQ block) */
.jd-faq-sec .wd-accordion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: var(--jd-element-mb);
}
body .jd-faq-sec .wd-accordion.wd-accordion > .wd-accordion-item,
body .jd-faq-sec .wd-accordion.wd-accordion > .wd-accordion-item:first-child,
body .jd-faq-sec .wd-accordion.wd-accordion > .wd-accordion-item:last-child {
  border: 1px solid var(--jd-cream-200, #eadfcc);
  border-radius: 14px;
  background-color: var(--jd-white, #fff);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.jd-faq-sec .wd-accordion .wd-accordion-title,
.jd-faq-sec .wd-accordion .wd-accordion-content { border-block: 0; }
body .jd-faq-sec .wd-accordion.wd-accordion > .wd-accordion-item:hover,
body .jd-faq-sec .wd-accordion.wd-accordion > .wd-accordion-item:has(.wd-accordion-title.wd-active) {
  border-color: var(--jd-cream-300, #978169);
  box-shadow: 0 4px 14px rgba(59, 42, 31, .06);
}
body .jd-faq-sec .wd-accordion.wd-accordion > .wd-accordion-item:has(.wd-accordion-title.wd-active) { background-color: var(--jd-cream-0, #fffdf8); }
.jd-faq-sec .wd-accordion .wd-accordion-title { padding: 17px 22px; gap: 12px; }
.jd-faq-sec .wd-accordion .wd-accordion-title-text {
  position: relative;
  padding-inline-start: 16px;
  font-family: var(--wd-text-font);
  font-size: 16px;                       /* 2026-10-03: what the page showed (WoodMart's WPBakery accordion CSS made the title text inherit 16px / 600; this rule's 15px never applied) */
  font-weight: 600;
  line-height: 1.5;
  color: var(--jd-ink-900, #3b2a1f);
}
.jd-faq-sec .wd-accordion .wd-accordion-title-text::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .25em;
  bottom: .25em;
  width: 2px;
  border-radius: 2px;
  background-color: var(--jd-ink-700, #5c4a3c);
}
.jd-faq-sec .wd-accordion-title-text h3.jd-faq-q {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.jd-faq-sec .wd-accordion .wd-accordion-title:hover .wd-accordion-title-text,
.jd-faq-sec .wd-accordion .wd-accordion-title.wd-active .wd-accordion-title-text { color: var(--jd-ink-900, #3b2a1f); }
.jd-faq-sec .wd-accordion .wd-accordion-opener { color: var(--jd-ink-900, #3b2a1f); }
.jd-faq-sec .wd-accordion .wd-accordion-content { padding: 0 22px 20px 38px; color: var(--jd-ink-700, #5c4a3c); }
.jd-faq-sec .wd-accordion .wd-accordion-content:not(.wd-active) { padding-block: 0; }
.jd-faq-sec .wd-accordion-content p { text-wrap: pretty; }
.jd-faq-sec .wd-accordion-content p:last-child { margin-bottom: 0; }

/* links in the intro, the answers and the closing text */
.jd-faq-intro__text a,
.jd-faq-sec .wd-accordion-content a {
  color: var(--jd-ink-900, #3b2a1f);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #f7c5c8;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
.jd-faq-intro__text a:hover,
.jd-faq-sec .wd-accordion-content a:hover,
.jd-faq-intro__text a:focus-visible,
.jd-faq-sec .wd-accordion-content a:focus-visible { text-decoration-color: var(--jd-ink-900, #3b2a1f); }

/* ---- closing block on the watercolour band ---- */
body .entry-content > .jd-faq-cta-row { position: relative; margin-top: 64px; }   /* body + .entry-content: beats WoodMart's block gap :is(.entry-content, ...) > * { margin-block: 0 ... } */
.jd-faq-cta-row .jd-faq-cta { position: static; }
.jd-faq-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  overflow: hidden;
}
.jd-faq-cta__bg img {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  min-height: 56px;
  object-fit: cover;
}
.jd-faq-cta__bg img:first-child { object-position: center top; }
.jd-faq-cta__bg img:last-child  { object-position: center bottom; }
.jd-faq-cta__bg span { flex: 1 1 auto; margin-block: -1px; background-color: #faf5e9; }
/* a short band: the two edge pictures may be taller than the block → they overlap instead of pushing the block open */
.jd-faq-cta__bg img { max-height: 50%; }

.jd-faq-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
  padding-block: clamp(72px, 7vw, 110px) clamp(68px, 6.5vw, 100px);
  text-align: center;
}
.jd-faq-cta .jd-faq-cta__title {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--jd-ink-900, #3b2a1f);
}
.jd-faq-cta__text { margin: 0 0 24px; color: var(--jd-ink-700, #5c4a3c); text-wrap: pretty; }
.jd-faq-cta .jd-faq-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 999px;
  background-color: #38b900;               /* the floating LINE button's green */
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(56, 185, 0, .22);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.jd-faq-cta__btn svg { width: 22px; height: 22px; flex: none; }
@media (hover: hover) {
  .jd-faq-cta .jd-faq-cta__btn:hover { background-color: #32a600; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(56, 185, 0, .28); }
}
.jd-faq-cta .jd-faq-cta__btn:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 3px; }

@media (max-width: 768px) {
  body .jd-faq-nav ul { flex-wrap: nowrap; justify-content: flex-start; width: max-content; min-width: 100%; }
  body .jd-faq-nav a { padding: 9px 16px; font-size: 14px; }
  .jd-faq-sec { padding-top: 44px; }
  .jd-faq-sec .wd-accordion .wd-accordion-title { padding: 15px 16px; }
  .jd-faq-sec .wd-accordion .wd-accordion-content { padding: 0 16px 18px 32px; }
  body .entry-content > .jd-faq-cta-row { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.jd-faq-nav) { scroll-behavior: auto; }
  body .jd-faq-nav a, .jd-faq-cta .jd-faq-cta__btn,
  body .jd-faq-sec .wd-accordion.wd-accordion > .wd-accordion-item { transition: none; }
}

/* ---- section tags: "scrolls sideways" cue like the category tags (assets/js/jd-scroll-cue.js wraps .jd-faq-nav in .jd-cue-view; the round
   button reuses .jd-subcats-cue - its look is repeated here because jd-subcats.css is not loaded on this page) (2026-09-30) ---- */
.jd-cue-view { --jd-cue-fade: 48px; position: relative; }
.jd-cue-view.has-more-end > .jd-faq-nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--jd-cue-fade)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--jd-cue-fade)), transparent); }
.jd-cue-view.has-more-start > .jd-faq-nav { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--jd-cue-fade)); mask-image: linear-gradient(to right, transparent, #000 var(--jd-cue-fade)); }
.jd-cue-view.has-more-start.has-more-end > .jd-faq-nav { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--jd-cue-fade), #000 calc(100% - var(--jd-cue-fade)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--jd-cue-fade), #000 calc(100% - var(--jd-cue-fade)), transparent); }
body .jd-cue-view .jd-subcats-cue {
  position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; min-height: 0; margin: 0; padding: 0;
  border: 1px solid rgba(59, 42, 31, .08); border-radius: 50%; background-color: #fff; color: var(--jd-ink-900, #3b2a1f);
  box-shadow: 0 2px 8px rgba(59, 42, 31, .16); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(-50%) scale(.85);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; -webkit-tap-highlight-color: transparent;
}
body .jd-cue-view .jd-subcats-cue--end { right: 0; }
body .jd-cue-view .jd-subcats-cue--start { left: 0; }
body .jd-cue-view .jd-subcats-cue svg { display: block; width: 12px; height: 12px; }
body .jd-cue-view .jd-subcats-cue--start svg { transform: scaleX(-1); }
.jd-cue-view.has-more-end > .jd-subcats-cue--end,
.jd-cue-view.has-more-start > .jd-subcats-cue--start { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); transition: opacity .25s ease, transform .25s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { body .jd-cue-view .jd-subcats-cue { transition: none; } }

/* ---- the closing band is the page's last block: it meets the footer (general rule in jd-footer.css); its lower watercolour edge picture is
   left out so the cream runs straight into the footer's pink curve (operator 2026-09-30: no white strip) ---- */
/* (the rule itself lives in jd-footer.css: a picture band that ends the page drops its lower edge picture) */