/* ============================================
   FAQ Page
   ============================================ */

.btn--entry { background-color: #e53935; color: #fff; }
.btn--entry:hover { background-color: #c62828; }
.btn--entry-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7em 1.8em; font-size: var(--font-size-sm); font-weight: 700;
  background-color: #e53935; color: #fff; border-radius: var(--border-radius-sm);
  transition: background-color 0.2s;
}
.btn--entry-cta:hover { background-color: #c62828; }
.btn--outline-dark {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7em 1.8em; font-size: var(--font-size-sm); font-weight: 500;
  border: 1px solid var(--color-primary-dark); border-radius: var(--border-radius-sm);
  color: var(--color-primary-dark); background: transparent;
  transition: background-color 0.2s, color 0.2s;
}
.btn--outline-dark:hover { background-color: var(--color-primary-dark); color: #fff; }

/* Layout */
.faq-layout { padding: var(--space-xl) 0 var(--space-3xl); }

.faq-layout__grid {
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-xl); align-items: start;
}
@media (min-width: 1024px) {
  .faq-layout__grid { grid-template-columns: 1fr 240px; }
}

/* Header */
.faq-header { margin-bottom: var(--space-2xl); }

.faq-header__label {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: var(--font-size-xs); font-weight: 700;
  color: var(--color-accent-green); letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

.faq-header__title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700; line-height: 1.3; color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.faq-header__lead {
  font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.7;
}

/* ============================================
   Tabs
   ============================================ */

.faq-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.faq-tab {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm); font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.faq-tab:hover {
  border-color: var(--color-accent-green); color: var(--color-accent-green);
}

.faq-tab--active {
  background-color: var(--color-accent-green);
  border-color: var(--color-accent-green);
  color: #fff;
}

/* ============================================
   FAQ Items (Accordion)
   ============================================ */

.faq-list {
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: var(--space-2xl);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item[hidden] { display: none; }

/* Question */
.faq-item__q {
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-lg) 0;
  font-size: var(--font-size-base); font-weight: 700;
  color: var(--color-primary-dark); line-height: 1.6;
  cursor: pointer; list-style: none;
  transition: color 0.2s;
}

.faq-item__q:hover { color: var(--color-accent-green); }

.faq-item__q::-webkit-details-marker { display: none; }

/* Plus/minus indicator */
.faq-item__q::after {
  content: '+'; flex-shrink: 0; margin-left: auto;
  font-size: var(--font-size-xl); font-weight: 300;
  color: var(--color-accent-green); line-height: 1;
  transition: transform 0.2s;
}

.faq-item[open] .faq-item__q::after {
  content: '−';
}

/* Badge */
.faq-item__badge {
  flex-shrink: 0; padding: 2px 10px;
  border-radius: var(--border-radius-pill);
  font-size: 10px; font-weight: 700; white-space: nowrap;
  background: #e8f5e9; color: var(--color-accent-green);
}

.faq-item__badge--work { background: #e3f2fd; color: #1565c0; }
.faq-item__badge--env { background: #fff3e0; color: #e65100; }
.faq-item__badge--intern { background: #f3e5f5; color: #7b1fa2; }

/* Answer */
.faq-item__a {
  padding: 0 0 var(--space-xl) calc(10px + var(--space-md));
}

.faq-item__a p {
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
  line-height: 2; margin-bottom: var(--space-md);
}

.faq-item__a p:last-child { margin-bottom: 0; }

.faq-item__a a {
  color: var(--color-accent-green); font-weight: 500;
}

/* Featured item */
.faq-item--featured {
  background: linear-gradient(160deg, #f8fdf8, #f0f8f4);
  border-radius: var(--border-radius-md);
  padding: 0 var(--space-lg);
  margin-top: var(--space-lg);
  border: 1px solid #c8e6c9;
  border-bottom: 1px solid #c8e6c9;
}

.faq-item--featured .faq-item__q {
  font-size: var(--font-size-lg); color: var(--color-accent-green);
}

/* ============================================
   CTA
   ============================================ */

.faq-cta {
  padding: var(--space-2xl); background: var(--color-bg-light);
  border-radius: var(--border-radius-md); text-align: center;
}

.faq-cta__text {
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

.faq-cta__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md);
}

/* ============================================
   Sidebar
   ============================================ */

.faq-sidebar {
  display: none; flex-direction: column; gap: var(--space-lg);
}
@media (min-width: 1024px) {
  .faq-sidebar {
    display: flex; position: sticky;
    top: calc(var(--header-height) + var(--space-xl));
  }
}

.faq-sidebar__box {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: var(--space-lg); box-shadow: var(--shadow-card);
}

.faq-sidebar__heading {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: var(--font-size-sm); font-weight: 700;
  margin-bottom: var(--space-md); padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-accent-green);
}

.faq-sidebar__nav { list-style: none; display: flex; flex-direction: column; }
.faq-sidebar__nav li { border-bottom: 1px solid var(--color-border); }
.faq-sidebar__nav li:last-child { border-bottom: none; }
.faq-sidebar__link {
  display: block; padding: var(--space-sm) 0;
  font-size: var(--font-size-xs); color: var(--color-text-secondary);
  transition: color 0.2s; cursor: pointer;
}
.faq-sidebar__link:hover { color: var(--color-accent-green); }

.faq-sidebar__box--cta {
  background-color: var(--color-accent-green);
  border-color: var(--color-accent-green); text-align: center;
}
.faq-sidebar__cta-text { font-size: var(--font-size-sm); font-weight: 700; color: #fff; margin-bottom: var(--space-md); }
.faq-sidebar__cta-btn { width: 100%; justify-content: center; background: #fff; color: #e53935; font-weight: 700; }
.faq-sidebar__cta-btn:hover { background: #fce4ec; }