/* jdtheme26 — home page FAQ block (2026-09-28).
   Operator: 「把Share Best News區塊刪除，換成用 … 展開的UI模組做常見問題」 + file note 「英文副標題FAQ用Gaegu字體，顏色用e3f0e6」.
   Row .jd-home-faq = woodmart_title (h2 常見問題 + subtitle FAQ) + WoodMart's accordion element (the FAQs demo's module), one centred column.
   Each question is an <h3> (functions.php turns the accordion's title <span> into a heading for accordions that print the FAQ schema). */
.jd-home-faq {
  padding-block: 20px 60px;
}
.jd-home-faq .jd-home-faq__title { margin-bottom: 24px; }

/* Title block (operator 2026-09-28, 2nd pass: 「英文副標題顏色改成 d6ecdf 並且改在中文下排，中文標題的左右用這個圖示」):
   WoodMart prints the subtitle BEFORE the heading → the wrapper becomes a column and the subtitle is ordered last (DOM untouched).
   A pink watercolour paw (assets/img/jd-paw-pink.webp, the operator's jd_icon_feet.webp at 144px) sits on both sides of 常見問題;
   the right one is mirrored and both lean outwards a little. Decorative only (CSS background, nothing for screen readers). */
.jd-home-faq .jd-home-faq__title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jd-home-faq .jd-home-faq__title .liner-continer { order: 1; }
.jd-home-faq .jd-home-faq__title .title-subtitle { order: 2; margin: 6px 0 0; }

.jd-home-faq .jd-home-faq__title h2.title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}
.jd-home-faq .jd-home-faq__title h2.title::before,
.jd-home-faq .jd-home-faq__title h2.title::after {
  content: "";
  flex: none;
  width: 24px;                        /* operator 2026-09-28 「狗腳印icon請改成寬高都是24px」 (was 34 × 29; 28 × 24 on phones) */
  height: 24px;                       /* the picture is 144 × 120 → drawn 24 × 20 inside the 24 × 24 box (contain) */
  background: url("../img/jd-paw-pink.webp") center / contain no-repeat;
}
.jd-home-faq .jd-home-faq__title h2.title::before { transform: rotate(-14deg); }
.jd-home-faq .jd-home-faq__title h2.title::after  { transform: scaleX(-1) rotate(-14deg); }

/* subtitle "FAQ": Gaegu (loaded on the front page for the category grid), #d6ecdf (was #e3f0e6) — operator-given, not a palette token */
.jd-home-faq .jd-home-faq__title .title-subtitle {
  font-family: "Gaegu", var(--jd-font-display, sans-serif);
  font-weight: 400;
  font-size: 20px;                 /* operator 2026-09-29: English sub-titles of the home page 20px (was 30px) */
  line-height: 1.1;
  letter-spacing: .14em;
  color: #d6ecdf;
  text-transform: none;
}

/* the question heading keeps the accordion's own look */
.jd-home-faq .wd-accordion-title-text h3.jd-faq-q {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.jd-home-faq .wd-accordion-content p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .jd-home-faq { padding-block: 10px 40px; }
  .jd-home-faq .jd-home-faq__title h2.title { gap: 10px; }
}

/* links inside the answers (2026-09-28: internal links of the FAQ copy): ink text with a soft underline — the theme's teal link colour is too light for body text */
.jd-home-faq .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-home-faq .wd-accordion-content a:hover,
.jd-home-faq .wd-accordion-content a:focus-visible { text-decoration-color: var(--jd-ink-900, #3b2a1f); }

/* ---- Card layout (operator 2026-09-28: 「首頁faq排版和框線幫我改成如示意圖」) ----
   Two columns of rounded, outlined cards; a short bar in front of every question; a plus sign on the right (WoodMart's own "plus" opener).
   ONE accordion element (one FAQPage schema) laid out as a grid: questions run left → right, row by row (1 2 / 3 4 / 5 6).
   A card that is opened grows by itself; its neighbour keeps its own height (align-items: start). One column from 768px down. */
.jd-home-faq .wd-accordion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px 28px;
}
.jd-home-faq .wd-accordion > .wd-accordion-item {
  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;
}
/* WoodMart's own separator lines between items are not used inside the cards */
.jd-home-faq .wd-accordion > .wd-accordion-item,
.jd-home-faq .wd-accordion .wd-accordion-title,
.jd-home-faq .wd-accordion .wd-accordion-content { border-block: 0; }
/* every card has all four sides (WoodMart's "border off" option removes the first item's top line and the last item's bottom line) */
body .jd-home-faq .wd-accordion.wd-accordion > .wd-accordion-item,
body .jd-home-faq .wd-accordion.wd-accordion > .wd-accordion-item:first-child,
body .jd-home-faq .wd-accordion.wd-accordion > .wd-accordion-item:last-child {
  border: 1px solid var(--jd-cream-200, #eadfcc);
}
body .jd-home-faq .wd-accordion.wd-accordion > .wd-accordion-item:hover,
body .jd-home-faq .wd-accordion.wd-accordion > .wd-accordion-item:has(.wd-accordion-title.wd-active) {
  border-color: #ffe29c;                 /* operator 2026-09-29 (was cream-300); the pointer-over state uses the same colour, so an open card does not change when pointed at */
  box-shadow: 0 4px 14px rgba(59, 42, 31, .06);
}
.jd-home-faq .wd-accordion .wd-accordion-title {
  padding: 16px 20px;
  gap: 12px;
}
.jd-home-faq .wd-accordion .wd-accordion-title-text {
  position: relative;
  padding-inline-start: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--jd-ink-900, #3b2a1f);
}
.jd-home-faq .wd-accordion .wd-accordion-title-text::before {   /* the short bar */
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .25em;
  bottom: .25em;
  width: 2px;
  border-radius: 2px;
  background-color: #f7c5c8;             /* operator 2026-09-29 (was ink-700) */
}
/* the question keeps the ink colour when its card is open or hovered (the theme turns it teal) */
.jd-home-faq .wd-accordion .wd-accordion-title:hover .wd-accordion-title-text,
.jd-home-faq .wd-accordion .wd-accordion-title.wd-active .wd-accordion-title-text { color: var(--jd-ink-900, #3b2a1f); }
.jd-home-faq .wd-accordion .wd-accordion-opener { color: var(--jd-ink-900, #3b2a1f); }
.jd-home-faq .wd-accordion .wd-accordion-content {
  padding: 0 20px 18px 36px;
}
.jd-home-faq .wd-accordion .wd-accordion-content:not(.wd-active) { padding-block: 0; }

@media (max-width: 768px) {
  .jd-home-faq .wd-accordion { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .jd-home-faq .wd-accordion .wd-accordion-title { padding: 14px 16px; }
  .jd-home-faq .wd-accordion .wd-accordion-content { padding: 0 16px 16px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .jd-home-faq .wd-accordion > .wd-accordion-item { transition: none; }
}

/* operator 2026-09-29 「首頁中文標題改24px」: the FAQ heading too (WoodMart's title element was 26px) */
body .jd-home-faq .jd-home-faq__title h2.title { font-size: 24px; }