/*
 * Links to the answers and comparisons (inc/compound-links.php):
 * the home section (.cp-qlinks--home), "Questions about this compound" on the
 * product page (.cp-qlinks--pdp) and the certificate answers on /coa/
 * (.cp-qlinks--coa). Loaded non-blocking on those three views only.
 *
 * Built from the v4 tokens (v4.css loads on every page) with the main theme's
 * as fallbacks, so each block reads as part of the page it sits on.
 */

/* ---- Link rows, shared ---------------------------------------------------- */
.cp-qlinks__list,.cp-qlinks ul.cp-qlinks__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cp-qlinks__row{
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;
  min-height:56px;padding:14px 18px;border:1px solid var(--v4-line-strong,#d5dde0);border-radius:var(--v4-r-pc,14px);
  background:var(--v4-white,#fff);color:var(--v4-deep-navy,#001E33);text-decoration:none;
  transition:border-color .15s,box-shadow .15s}
/* Page content styles colour and indent links and lists; these rows set their own. */
.cp-qlinks a.cp-qlinks__row{color:var(--v4-deep-navy,#001E33);text-decoration:none}
.cp-qlinks ul.cp-qlinks__list>li{margin:0;padding:0}
.cp-qlinks__row:hover{border-color:var(--v4-cyan,#06A4E7);box-shadow:var(--v4-shadow-card,0 4px 12px -4px rgba(12,109,137,.18))}
.cp-qlinks__row:focus-visible{outline:2px solid var(--v4-cyan,#06A4E7);outline-offset:2px}
.cp-qlinks__kind{grid-column:1;margin:0 0 3px;font:600 11px/1.3 var(--v4-font-body,var(--body));letter-spacing:.07em;text-transform:uppercase;color:var(--v4-blue,#0567B3)}
.cp-qlinks__t{grid-column:1;font:600 15.5px/1.45 var(--v4-font-body,var(--body));text-wrap:pretty}
.cp-qlinks__row svg{grid-column:2;grid-row:1 / span 2;flex:none;color:var(--v4-blue,#0567B3);transition:transform .15s}
.cp-qlinks__row:hover svg{transform:translateX(3px)}
.cp-qlinks__h{margin:0;font:600 20px/1.3 var(--v4-font-heading,var(--display));color:var(--v4-deep-navy,#001E33)}
.cp-qlinks__sub{margin:6px 0 16px;font:400 15px/1.5 var(--v4-font-body,var(--body));color:var(--v4-muted,#5C6A6E)}
.cp-qlinks__cols{display:grid;gap:36px}
@media(min-width:900px){.cp-qlinks__cols{grid-template-columns:1fr 1fr;gap:40px}}
@media(prefers-reduced-motion:reduce){.cp-qlinks__row,.cp-qlinks__row svg{transition:none}}

/* ---- Home: in front of the FAQ, laid out like it -------------------------- */
.v4-qa{display:flex;flex-direction:column;align-items:center;gap:32px;padding:32px var(--v4-gutter-m,15px);background:var(--v4-light-grey,#F2F6F8)}
.v4-qa__head{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:768px;text-align:center}
.v4-qa__title{margin:0;padding:0;color:var(--v4-text,#000)}
.v4-qa__sub{margin:0;max-width:560px;font:var(--v4-body,400 16px/1.6 sans-serif)}
.cp-qlinks--home .cp-qlinks__cols{width:100%;max-width:1100px}
.cp-qlinks--home .cp-qlinks__col{display:flex;flex-direction:column}
.cp-qlinks--home .cp-qlinks__list{flex:1 1 auto;align-content:start}
.cp-qlinks--home .cp-qlinks__all{align-self:flex-start;margin-top:18px}
@media(min-width:1100px){.v4-qa{padding:64px var(--v4-gutter,48px)}}
@media(max-width:899px){.cp-qlinks--home .cp-qlinks__all{align-self:stretch}}

/* ---- Product page: after the product's own FAQ ---------------------------- */
.cp-qlinks--pdp .pdp-faq-h{font-family:var(--v4-font-heading,var(--display));font-weight:700;color:var(--v4-deep-navy,#001E33);letter-spacing:-.015em}
.cp-qlinks--pdp .pdp-faq-h .mono{color:var(--v4-teal,#0054A6)}
.cp-qlinks--pdp ul.cp-qlinks__list,.cp-qlinks--pdp .cp-qlinks__more{max-width:820px;margin-left:auto;margin-right:auto}
.cp-qlinks__more{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;font-size:14px}
.cp-qlinks__more a{color:var(--v4-teal,#0054A6);text-decoration:underline;text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}

/* ---- /coa/: a section like "How each batch is tested" --------------------- */
.coa-answers{margin-top:48px;padding-top:36px;border-top:1px solid var(--line,#e2e8ea)}
.coa-answers h2{font-family:var(--display);font-weight:500;color:var(--teal);font-size:24px;margin:0 0 8px;letter-spacing:-.02em}
.coa-answers .coa-note{margin:0 0 22px}
.coa-answers .coa-note a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.coa-answers .cp-qlinks__h{margin-bottom:14px;font-size:17px}
.coa-answers .cp-qlinks__t{font-size:15px}
.coa-updated{margin:-14px 0 26px;font-size:13px;color:var(--muted,#5C6A6E)}
.coa-updated time{font-weight:600;color:var(--ink,#1C2326)}