/*
Theme Name: FAQ First
Version: 2.1.0
Requires at least: 6.6
Requires PHP: 8.2
Text Domain: faq-first
License: GPL-2.0-or-later
*/
:root {
    --canvas:#f7fbfa;
    --text:#142f2d;
    --teal:#087c72;
    --yellow:#f1c84b;
    --line:#b7cfca;
    --width:70rem;
}
* {
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
}
body {
    margin:0;
    background:var(--canvas);
    color:var(--text);
    font:1rem/1.65 system-ui,-apple-system,sans-serif;
}
a {
    color:#08645d;
    text-underline-offset:.2em;
}
a:focus-visible,summary:focus-visible,[tabindex="-1"]:focus {
    outline:3px solid var(--yellow);
    outline-offset:4px;
}
img {
    max-width:100%;
    height:auto;
}
.skip-link {
    position:fixed;
    top:-5rem;
    left:1rem;
    z-index:10;
    background:var(--text);
    color:white;
    padding:.8rem 1rem;
}
.skip-link:focus {
    top:1rem;
}
.answer-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:2rem;
    width:min(100% - 2rem,var(--width));
    margin:auto;
    padding:1rem 0;
    border-bottom:1px solid var(--line);
}
.answer-brand {
    display:flex;
    align-items:center;
    gap:.55rem;
    color:var(--text);
    font-weight:800;
    text-decoration:none;
}
.answer-brand span {
    display:grid;
    place-items:center;
    width:2rem;
    height:2rem;
    border-radius:50%;
    background:var(--yellow);
}
.menu {
    display:flex;
    flex-wrap:wrap;
    gap:1.2rem;
    list-style:none;
    margin:0;
    padding:0;
}
.answer-home,.resource-archive,.answer-page,.record-archive,.record-detail {
    width:min(100% - 2rem,var(--width));
    margin:auto;
    padding-block:clamp(2.5rem,6vw,6rem);
}
.answer-hero {
    max-width:55rem;
    margin-bottom:4rem;
}
.prompt-label,.resource-type,.answer-number {
    color:var(--teal);
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}
h1,h2,h3 {
    line-height:1.16;
}
h1 {
    margin:.25em 0;
    font-size:clamp(2.7rem,7vw,5.6rem);
}
.answer-summary {
    max-width:45rem;
    font-size:1.3rem;
}
.index-heading {
    display:flex;
    gap:1rem;
    align-items:baseline;
}
.index-heading>span {
    color:var(--teal);
    font-weight:800;
}
.question-index {
    padding:2rem;
    background:#e4f1ee;
    border-left:.5rem solid var(--teal);
}
.question-index ol {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 2rem;
    list-style:none;
    padding:0;
}
.question-index li {
    border-top:1px solid var(--line);
}
.question-index a {
    display:grid;
    grid-template-columns:2rem 1fr;
    gap:.5rem;
    padding:1rem 0;
    color:var(--text);
    font-weight:700;
    text-decoration:none;
}
.question-index a:hover {
    text-decoration:underline;
}
.short-answer,.answer-library,.recommendations,.resource-library {
    margin-block:5rem;
}
.short-answer {
    display:grid;
    grid-template-columns:12rem 1fr;
    gap:2rem;
}
.short-answer figure {
    grid-column:2;
    margin:0;
}
.short-answer img,.record-lead img {
    width:100%;
    max-height:34rem;
    object-fit:cover;
    border-radius:.5rem;
}
figcaption {
    font-size:.82rem;
    color:#49615e;
}
.answer-prose {
    max-width:45rem;
}
.answer-groups {
    max-width:52rem;
    margin-left:auto;
}
.answer-groups article {
    display:grid;
    grid-template-columns:3rem 1fr;
    gap:1rem;
    padding:2rem 0;
    border-top:1px solid var(--line);
    scroll-margin-top:2rem;
}
.answer-groups h3 {
    margin:0;
    font-size:1.4rem;
}
.back-link {
    font-size:.82rem;
}
.recommendations {
    padding:2rem;
    border:2px solid var(--text);
    border-radius:.75rem;
}
.section-note {
    max-width:45rem;
}
.record-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}
.recommended-record {
    display:grid;
    grid-template-columns:7rem 1fr;
    gap:1rem;
    padding:1.25rem;
    background:white;
    border:1px solid var(--line);
    border-radius:.5rem;
}
.record-image img {
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    border-radius:.3rem;
}
.checked {
    display:inline-block;
    padding:.2rem .5rem;
    color:#205c35;
    background:#e1f2e6;
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
}
.answer-media,.record-gallery {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
    gap:1rem;
    margin-block:3rem;
}
.answer-media figure,.record-gallery figure {
    margin:0;
}
.answer-media img,.record-gallery img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
}
.resource-list {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}
.resource-entry {
    padding:1.5rem;
    border-top:.25rem solid var(--teal);
    background:white;
}
.resource-entry h2 {
    margin:.2rem 0;
}
.resource-archive>header,.answer-page article>header,.record-archive>header,.record-detail article>header {
    max-width:52rem;
    margin-bottom:3rem;
}
.answer-page article {
    max-width:52rem;
    margin:auto;
}
.record-body {
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:3rem;
    margin-top:3rem;
}
.record-terms {
    padding:1rem;
    background:#e4f1ee;
    align-self:start;
}
.answer-footer {
    display:grid;
    grid-template-columns:2fr 1fr auto;
    gap:2rem;
    width:min(100% - 2rem,var(--width));
    margin:auto;
    padding:2rem 0;
    border-top:1px solid var(--line);
}
.nav-links {
    display:flex;
    justify-content:space-between;
    margin-top:2rem;
}
@media(max-width:46rem){
    .answer-header {
        display:block;
    }
    .answer-header nav {
        margin-top:1rem;
    }
    .question-index ol,.record-list,.resource-list,.short-answer,.record-body {
        grid-template-columns:1fr;
    }
    .short-answer figure {
        grid-column:1;
    }
    .recommended-record {
        grid-template-columns:1fr;
    }
    .answer-footer {
        grid-template-columns:1fr;
    }
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after {
        scroll-behavior:auto!important;
        animation:none!important;
        transition:none!important;
    }
}
@media(forced-colors:active){
    .recommended-record,.recommendations,.question-index {
        border-color:CanvasText;
    }
}