/* ============================================
   FAQ Plugin — Starbucks Palette (Light + Dark)
   ============================================ */

/* Topic H2 on global page */
.nh-faq--global .nh-faq-topic-heading{
  margin:1.25rem 0 .5rem;
  line-height:1.25;
  color:var(--ui-text, #2C2A29);
}

/* H3 heading + real button inside (global FAQ pages) */
.nh-faq .nh-faq-q-h3{ margin:.5rem 0 .25rem; }
.nh-faq .nh-faq-h3btn{
  all:unset;
  display:flex; align-items:center; justify-content:space-between;
  width:100%; cursor:pointer; font:inherit; font-size:.95rem; font-weight:500; line-height:1.3;
  padding:.25rem 0; color:var(--ui-text, #2C2A29);
}
.nh-faq .nh-faq-h3btn:focus-visible{
  outline:2px solid var(--nh-green, #00704A); outline-offset:2px;
}

/* Caret indicator */
.nh-faq .nh-faq-h3btn::after{
  content:"▾"; margin-left:.5rem; transition:transform .2s ease; transform:rotate(0deg);
}
.nh-faq .nh-faq-h3btn[aria-expanded="true"]::after{ transform:rotate(180deg); }

/* Index (jump links) */
.nh-faq-index{
  display:flex; flex-wrap:wrap; gap:.5rem .75rem;
  margin:1rem 0 1.25rem;
}
.nh-faq-index a{
  display:inline-block; text-decoration:none;
  font-size:.9rem; padding:6px 10px; border-radius:999px;
  border:1px solid var(--ui-border, #C3E8C6);
  background:var(--ui-bg-content, #fff);
  color:var(--nh-forest, #1E3932);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .02s ease;
}
.nh-faq-index a:hover{
  background:var(--nh-cream, #F1E6D6);
  border-color:var(--nh-green, #00704A);
  color:var(--nh-forest, #1E3932);
  transform:translateY(-1px);
}

/* Cards grid */
.nh-faq-grid{ display:grid; gap:24px; padding-bottom:24px; }
@media (min-width:900px){ .nh-faq-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* Card */
.nh-faq-topic-card{
  border:1px solid var(--ui-border, #C3E8C6);
  border-radius:12px;
  background:var(--ui-bg-content, #fff);
  padding:16px 20px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  color:var(--ui-text, #2C2A29);
}
.nh-faq-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nh-faq-topic-heading{ margin:0 0 .25rem; font-size:1rem; font-weight:700; line-height:1.25; color:var(--ui-text, #2C2A29); }

/* Per-topic tools */
.nh-faq-toolbar{ display:flex; gap:.5rem; }
.nh-faq-tool{
  all:unset; cursor:pointer;
  font-size:.85rem; padding:4px 8px; border-radius:6px;
  border:1px solid var(--ui-border, #C3E8C6);
  background:var(--ui-bg-content, #fff);
  color:var(--nh-green, #00704A);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .02s ease;
}
.nh-faq-tool:hover{
  background:var(--nh-cream, #F1E6D6);
  border-color:var(--nh-green, #00704A);
  color:var(--nh-forest, #1E3932);
  transform:translateY(-1px);
}
.nh-faq-tool:focus-visible{ outline:2px solid var(--nh-green, #00704A); outline-offset:2px; }

/* =========================
   Scoped FAQ tab on product
   ========================= */
.woocommerce-Tabs-panel--nh_faq .nh-faq{ margin-top:.5rem; }
.woocommerce-Tabs-panel--nh_faq .nh-faq-item{
  padding:.5rem 0; border-bottom:1px solid var(--ui-border, #C3E8C6);
}
.woocommerce-Tabs-panel--nh_faq .nh-faq-item:first-child{
  border-top:1px solid var(--ui-border, #C3E8C6);
}

/* Question line (product FAQ) */
.woocommerce-Tabs-panel--nh_faq .nh-faq-h3btn{
  all:unset;
  display:flex; align-items:center; justify-content:space-between;
  width:100%; cursor:pointer; font-size:.95rem; font-weight:600; padding:.65rem 0;
  color:var(--ui-text, #2C2A29);
}
.woocommerce-Tabs-panel--nh_faq .nh-faq-h3btn:focus-visible{
  outline:2px solid var(--nh-green, #00704A); outline-offset:2px;
}
.woocommerce-Tabs-panel--nh_faq .nh-faq-h3btn::after{
  content:"▾"; transition:transform .2s ease;
}
.woocommerce-Tabs-panel--nh_faq .nh-faq-h3btn[aria-expanded="true"]::after{
  transform:rotate(180deg);
}

/* Answer */
.woocommerce-Tabs-panel--nh_faq .nh-faq-a{
  padding:0 0 .75rem 0; color:inherit;
}
.woocommerce-Tabs-panel--nh_faq .nh-faq-a > *:last-child{ margin-bottom:0; }

/* ============================================
   DARK MODE — Starbucks palette
   ============================================ */
body.dark-mode .nh-faq--global .nh-faq-topic-heading{ color:var(--dm-text, #EAE9E5); }

body.dark-mode .nh-faq .nh-faq-h3btn{
  color:var(--dm-text, #EAE9E5);
}
body.dark-mode .nh-faq .nh-faq-h3btn:focus-visible{
  outline:2px solid var(--dm-primary, #36B47A);
}

body.dark-mode .nh-faq-index a{
  border-color:var(--dm-border, #446B58);
  background:var(--dm-surface, #2E2E2A);
  color:var(--dm-primary, #36B47A);
}
body.dark-mode .nh-faq-index a:hover{
  background: color-mix(in srgb, var(--dm-surface) 70%, var(--dm-forest) 30%);
  border-color: var(--dm-primary, #36B47A);
  color:#fff;
  transform:translateY(-1px);
}

/* Cards */
body.dark-mode .nh-faq-topic-card{
  border:1px solid var(--dm-border, #446B58);
  background:var(--dm-surface, #2E2E2A);
  color:var(--dm-text, #EAE9E5);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
body.dark-mode .nh-faq-topic-heading{ color:var(--dm-text, #EAE9E5); }

/* Tools */
body.dark-mode .nh-faq-tool{
  border-color:var(--dm-border, #446B58);
  background:var(--dm-surface, #2E2E2A);
  color:var(--dm-primary, #36B47A);
}
body.dark-mode .nh-faq-tool:hover{
  background: color-mix(in srgb, var(--dm-surface) 70%, var(--dm-forest) 30%);
  border-color: var(--dm-primary, #36B47A);
  color:#fff;
  transform:translateY(-1px);
}
body.dark-mode .nh-faq-tool:focus-visible{
  outline:2px solid var(--dm-primary, #36B47A); outline-offset:2px;
}

/* Scoped product tab */
body.dark-mode .woocommerce-Tabs-panel--nh_faq .nh-faq-item{
  border-bottom:1px solid var(--dm-border, #446B58);
}
body.dark-mode .woocommerce-Tabs-panel--nh_faq .nh-faq-item:first-child{
  border-top:1px solid var(--dm-border, #446B58);
}
body.dark-mode .woocommerce-Tabs-panel--nh_faq .nh-faq-h3btn{
  color:var(--dm-text, #EAE9E5);
}
body.dark-mode .woocommerce-Tabs-panel--nh_faq .nh-faq-h3btn:focus-visible{
  outline:2px solid var(--dm-primary, #36B47A);
}
body.dark-mode .woocommerce-Tabs-panel--nh_faq .nh-faq-a{ color:var(--dm-text, #EAE9E5); }