.page-header { padding: 32px 0; background: var(--gray-100) !important; border-bottom: 1px solid var(--gray-200); }
.page-header__inner { grid-column: 1 / -1; max-width: 1200px; margin: 0 auto; padding: 0 48px; text-align: left; }
.page-header.page-header--center .page-header__inner { text-align: center !important; }
.page-header.page-header--center .page-header__inner .breadcrumbs,
.page-header.page-header--center .page-header__inner .page-header__title,
.page-header.page-header--center .page-header__inner .page-header__sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.qa-filters { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; background: #fff; border: 2px solid var(--black); padding: 24px; margin-bottom: 24px; }
.qa-filters .form-group { grid-column: span 4; }
.qa-filters .actions { grid-column: span 12; display: flex; gap: 12px; align-items: center; }
.qa-section { padding: 100px 0; background: var(--white); }
.qa-container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.qa-header { text-align: center; margin-bottom: 60px; }
.qa-title { font-size: 48px; font-weight: 700; color: var(--black); margin-bottom: 16px; }
.qa-subtitle { font-size: 18px; color: var(--gray-600); margin-bottom: 32px; }
.qa-actions { display: flex; gap: 24px; justify-content: center; }
.qa-btn { padding: 12px 32px; font-weight: 600; font-size: 16px; text-decoration: none; border: 2px solid var(--black); transition: all 0.3s; cursor: pointer; text-align: center; }
.qa-btn, .qa-btn:hover, .qa-btn:focus, .qa-btn:active, .qa-btn:visited { text-decoration: none; }
.qa-btn-ask { background: var(--primary); color: var(--white); border-color: var(--primary); }
.qa-btn-ask:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }
.qa-btn-ask:visited { color: var(--white); }
.qa-btn-all { background: transparent; color: var(--black); }
.qa-btn-all:hover { background: var(--black); color: var(--white); }
.qa-list { display: flex; flex-direction: column; gap: 24px; }
.qa-item { background: var(--gray-100); border: 2px solid var(--black); padding: 32px; transition: all 0.3s; }
.qa-item:hover { transform: translateX(8px); box-shadow: 8px 8px 0 var(--black); }
.qa-item-link { text-decoration: none; color: inherit; display: block; }
.qa-item-link:hover, .qa-item-link:focus { text-decoration: none; }
.qa-item-link:hover *, .qa-item-link:focus * { text-decoration: none; }
.qa-item-link:visited .qa-question-title { color: var(--black); }
.qa-question-header { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.qa-status { padding: 8px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); }
.qa-status.solved { background: var(--primary); }
.qa-status.unsolved { background: var(--gray-500); }
.qa-question-content { flex: 1; }
.qa-question-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--black); text-decoration: none; display: block; }
.qa-item:hover .qa-question-title { color: var(--primary-dark); }
.qa-question-text { font-size: 15px; line-height: 1.6; color: var(--gray-700); margin-bottom: 16px; }
.qa-question-meta { display: flex; align-items: center; gap: 24px; font-size: 14px; color: var(--gray-600); }
.qa-asker { display: flex; align-items: center; gap: 8px; }
.qa-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 12px; font-weight: 700; }
.qa-category { padding: 4px 8px; background: var(--gray-200); font-size: 12px; color: var(--gray-700); border-radius: 4px; }
.qa-stats { display: flex; gap: 16px; align-items: center; }
.qa-question-meta * { text-decoration: none; }

/* Filters: ensure inputs/buttons match PHP look */
.qa-filters .form-label { font-weight: 600; }
.qa-filters .form-input { width: 100%; border: 2px solid var(--black); padding: 10px 12px; font-size: 16px; font-family: inherit; border-radius: 0; background: #fff; }
.qa-filters .form-input:focus { outline: none; border-color: var(--primary); }
.qa-filters .actions .btn { border-radius: 0; border: 2px solid var(--black); }
.qa-filters .actions .btn.btn-primary { background: var(--black); color: var(--white); }
.qa-filters .actions .btn.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.qa-filters .actions .btn.btn-secondary { background: transparent; color: var(--black); }
.qa-filters .actions .btn.btn-secondary:hover { background: var(--black); color: var(--white); }
.qa-stat { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--gray-600); }
.qa-stat strong { color: var(--black); font-weight: 700; }
.qa-form-wrap { max-width: 800px; margin: 32px auto; padding: 0 48px; background: var(--white); }
.qa-form { border: 2px solid var(--black); background: #fff; padding: 24px; display: grid; grid-template-columns: 1fr; gap: 16px; }
.qa-form .form-group { display: flex; flex-direction: column; gap: 6px; }
.qa-form .form-label { font-weight: 600; }
.qa-form .form-input { width: 100%; border: 2px solid var(--black); padding: 10px 12px; font-size: 16px; font-family: inherit; border-radius: 0; background: #fff; }
.qa-form .form-input:focus { outline: none; border-color: var(--primary); }
.qa-form input.form-input, .qa-form select.form-input { height: 48px; min-height: 48px; }
.qa-form select.form-input { padding-top: 12px; padding-bottom: 12px; line-height: 1.4; }
.qa-form textarea.form-input { min-height: 180px; resize: vertical; }
.qa-form .qa-btn { padding: 12px 32px; border: 2px solid var(--black); text-decoration: none; cursor: pointer; }
.qa-form .qa-btn.qa-btn-ask { background: var(--black); color: var(--white); border-color: var(--black); }
.qa-form .qa-btn.qa-btn-ask:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }
.qa-form .qa-btn.qa-btn-all { background: transparent; color: var(--black); }
.qa-form .qa-btn.qa-btn-all:hover { background: var(--black); color: var(--white); }
.qa-error { border: 2px solid #e74c3c; background: #fdecea; padding: 12px; margin-bottom: 12px; }
.qa-detail { max-width: 1000px; margin: 32px auto; padding: 0 48px; }
.qa-detail { background: var(--white); }
.qa-box { border: 2px solid var(--black); background: #fff; padding: 24px; margin-bottom: 24px; }
.answers { display: flex; flex-direction: column; gap: 16px; }
.answer { border: 2px solid var(--black); background: var(--gray-100); padding: 16px; }
.qa-best-answer { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: var(--primary); color: var(--white); font-size: 12px; font-weight: 700; border-radius: 4px; }
.qa-body { background: var(--white); padding: 32px 0 64px; }
.qa-status.solved  { background: #00B894; color:#fff; }
.qa-status.unsolved{ background: #636e72; color:#fff; }
.qa-status.closed  { background: #b2bec3; color:#2d3436; }
.qa-status.hidden  { background: #ffeaa7; color:#6c5ce7; }
.pagination-wrapper { margin-top: 32px; display: flex; justify-content: center; width: 100%; }
.pagination-wrapper nav { display: flex; justify-content: center; width: 100%; }
.pagination-wrapper .pagination { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.pagination-wrapper .page-item { display: inline-flex; }
.pagination-wrapper .page-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--black); background: #fff; color: var(--black); font-weight: 600; text-decoration: none; }
.pagination-wrapper .page-link:hover,
.pagination-wrapper .page-link:focus { background: var(--primary); color: #fff; border-color: var(--black); text-decoration: none; }
.pagination-wrapper .page-item.active .page-link { background: var(--primary); color: #fff; border-color: var(--black); }
.pagination-wrapper .page-item.disabled .page-link { background: var(--gray-100); color: var(--gray-500); border-color: var(--gray-200); cursor: not-allowed; }

/* ===== Smartphone layouts ===== */
@media (max-width: 767px) {
  /* Q&A index: filters layout */
  .qa-filters { grid-template-columns: repeat(12, 1fr); gap: 16px; }
  .qa-filters .form-group { grid-column: span 12; }
  .qa-filters .form-group:nth-of-type(1) { grid-column: 1 / -1; }
  /* 2nd row: カテゴリ / 並び替え */
  .qa-filters .form-group:nth-of-type(2) { grid-column: 1 / span 6; }
  .qa-filters .form-group:nth-of-type(3) { grid-column: 7 / -1; }
  /* Actions: 検索 → リセット を1行ずつ */
  .qa-filters .actions { display: grid !important; grid-template-columns: 1fr; row-gap: 8px; }
  .qa-filters .actions .btn { width: 100%; }

  /* Center the text of action buttons in header */
  .qa-actions .qa-btn { display: inline-flex; align-items: center; justify-content: center; }

  /* Q&A post: stack submit/back each on its own row */
  .qa-form > div:last-child { display: grid !important; grid-template-columns: 1fr !important; row-gap: 8px; }
  .qa-form > div:last-child .qa-btn { width: 100%; }

  /* Q&A detail: stack action buttons each on its own row */
  .qa-detail .qa-box > div:last-child { display: grid !important; grid-template-columns: 1fr !important; row-gap: 8px !important; }
  .qa-detail .qa-box > div:last-child .qa-btn { width: 100%; }
}