/* UK Peptides FAQ — restyled 2026-08-21 to match the Journal3 theme.
     Inherits Poppins from the theme (no font-family override).
     Palette mapped to the site: #2b3788 logo blue, #266fd3 accent. */
  .faq-page * { box-sizing: border-box; }
  .faq-page {
    --ukp-deep: #2b3788;
    --ukp-blue: #266fd3;
    --ukp-grad: linear-gradient(135deg, #266fd3 0%, #2b3788 100%);
    --ukp-text: #272c32;
    --ukp-muted: #6d757f;
    --ukp-border: #e2e5e9;
    --ukp-light: #f7f7f8;
    --ukp-note: #edf3f8;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px 20px;
    color: var(--ukp-text);
    line-height: 1.7;
    font-size: 15px;
  }
  .faq-header { text-align: center; margin-bottom: 28px; }
  .faq-header p { color: var(--ukp-muted); font-size: 15px; margin: 0; }
  .faq-search-wrap { max-width: 560px; margin: 0 auto 24px; position: relative; }
  .faq-search-wrap svg {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--ukp-muted); pointer-events: none;
  }
  .faq-search {
    width: 100%; padding: 14px 16px 14px 44px;
    border: 1px solid var(--ukp-border); border-radius: 6px;
    font-size: 15px; color: var(--ukp-text); background: #fff;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s; outline: none;
  }
  .faq-search:focus {
    border-color: var(--ukp-blue);
    box-shadow: 0 0 0 3px rgba(38,111,211,.14);
  }
  .faq-search::placeholder { color: var(--ukp-muted); }
  .faq-no-results { display:none; text-align:center; padding:48px 20px; color:var(--ukp-muted); font-size:15px; }
  .faq-category-filters { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:36px; }
  .faq-filter-btn {
    padding: 7px 16px; border: 1px solid var(--ukp-border); border-radius: 4px;
    background:#fff; color: var(--ukp-text); font-size:13px; font-weight:500;
    font-family: inherit; cursor:pointer; transition: all .2s; white-space:nowrap;
  }
  .faq-filter-btn:hover { border-color: var(--ukp-blue); color: var(--ukp-blue); }
  .faq-filter-btn.active { background: var(--ukp-deep); color:#fff; border-color: var(--ukp-deep); }
  .faq-section { margin-bottom: 36px; }
  .faq-section-title {
    font-size: 18px; font-weight: 600; color: var(--ukp-deep);
    margin: 0 0 16px; padding-bottom: 10px;
    border-bottom: 2px solid var(--ukp-deep);
    display:flex; align-items:center; gap:10px;
  }
  .faq-section-icon {
    width:28px; height:28px; border-radius:4px; background: var(--ukp-grad);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .faq-section-icon svg { width:15px; height:15px; color:#fff; }
  .faq-item {
    background:#fff; border:1px solid var(--ukp-border); border-radius:6px;
    margin-bottom:8px; overflow:hidden; transition: box-shadow .2s, border-color .2s;
  }
  .faq-item:hover { border-color:#c9d4e2; box-shadow: 0 2px 8px rgba(43,55,136,.07); }
  .faq-item.open { border-color: var(--ukp-blue); }
  .faq-item.faq-hidden { display:none; }
  .faq-question {
    width:100%; background:none; border:none; padding:17px 48px 17px 20px;
    text-align:left; font-size:15px; font-weight:600; color:var(--ukp-text);
    cursor:pointer; position:relative; line-height:1.5; font-family:inherit;
  }
  .faq-question:hover { color: var(--ukp-blue); }
  .faq-question::after {
    content:''; position:absolute; right:20px; top:50%;
    width:8px; height:8px;
    border-right:2px solid var(--ukp-muted); border-bottom:2px solid var(--ukp-muted);
    transform-origin:center; transition: transform .25s;
    transform: translateY(-60%) rotate(45deg);
  }
  .faq-item.open .faq-question::after {
    transform: translateY(-40%) rotate(-135deg);
    border-color: var(--ukp-blue);
  }
  .faq-item.open .faq-question { color: var(--ukp-deep); }
  .faq-answer { max-height:0; overflow:hidden; transition: max-height .3s ease, padding .3s ease; }
  .faq-item.open .faq-answer { max-height:3000px; }
  .faq-answer-inner { padding:0 20px 20px; color:#4b535c; font-size:14.5px; line-height:1.75; }
  .faq-answer-inner p { margin:0 0 12px; }
  .faq-answer-inner p:last-child { margin-bottom:0; }
  .faq-answer-inner ul, .faq-answer-inner ol { margin:8px 0 12px; padding-left:20px; }
  .faq-answer-inner li { margin-bottom:6px; }
  .faq-answer-inner strong { color: var(--ukp-text); }
  .faq-answer-inner a { color: var(--ukp-blue); }
  .faq-note {
    background: var(--ukp-note); border-left:3px solid var(--ukp-blue);
    padding:12px 16px; border-radius:0 4px 4px 0; margin:12px 0;
    font-size:13.5px; color:#4b535c;
  }
  .faq-note strong { color: var(--ukp-deep); }
  .faq-footer {
    text-align:center; padding:32px 20px; margin-top:20px;
    border-top:1px solid var(--ukp-border); color:var(--ukp-muted);
    font-size:14px; line-height:1.7;
  }
  .faq-footer a { color: var(--ukp-blue); text-decoration:none; font-weight:600; }
  .faq-footer a:hover { text-decoration:underline; }
  @media (max-width:640px) {
    .faq-page { padding:0 12px 12px; }
    .faq-question { font-size:14px; padding:14px 40px 14px 16px; }
    .faq-answer-inner { padding:0 16px 16px; font-size:14px; }
    .faq-filter-btn { font-size:12px; padding:6px 12px; }
    .faq-section-title { font-size:16px; }
  }