/* VC4 blue version: the FAQ page (blue/faqs.html) in the Home style, with the reference site's FAQ layout (its
   faqs.html): the question search in a centred calm hero, a sticky topic list on the left of the questions, and the
   questions as white cards with a plus that turns to a minus. The behaviour is in blue/blue-faq.js. Reference tokens
   written out in the VC4 palette (navy #02263F, teal #138E96, bright teal #3FC1C9, paper #F3F7FA, line #E3E7EE). */

/* ---------- Hero: centred copy and the search box on the calm background ---------- */
html[data-blue] .b-faq-hero { position: relative; overflow: hidden; padding: 56px 0 72px; text-align: center; }
html[data-blue] .b-faq-copy { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
html[data-blue] .b-faq-hero .oversize-label { display: block; color: #138E96 !important; }
html[data-blue] .b-faq-hero h1.b-h1 { margin-left: auto !important; margin-right: auto !important; }
html[data-blue] .b-faq-hero .section-sub { color: rgba(2, 38, 63, .8) !important; font-size: 16px !important; line-height: 1.7; max-width: 620px; margin: 0 auto; }
html[data-blue] .b-faq-hero .section-sub strong { color: #02263F; }
/* two soft teal glows drifting behind the copy (reference .fq-orb) */
html[data-blue] .fq-orb { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
html[data-blue] .fq-orb span { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; animation: bFqOrb 16s ease-in-out infinite; }
html[data-blue] .fq-orb span:nth-child(1) { width: 420px; height: 420px; left: -120px; top: 10%; background: radial-gradient(circle, rgba(63, 193, 201, .55), transparent 70%); }
html[data-blue] .fq-orb span:nth-child(2) { width: 360px; height: 360px; right: -100px; top: 30%; background: radial-gradient(circle, rgba(19, 142, 150, .4), transparent 70%); animation-delay: -6s; }
@keyframes bFqOrb { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -30px); } }
/* the search box (reference .qs) */
html[data-blue] .qs { position: relative; max-width: 640px; margin: 34px auto 0; text-align: left; }
html[data-blue] .qs input { width: 100%; height: 62px; box-sizing: border-box; border-radius: 999px; border: 1px solid #E3E7EE; background: #fff; padding: 0 120px 0 56px;
    font: 500 16px/1 'Lato', sans-serif; color: #02263F; box-shadow: 0 24px 50px -30px rgba(2, 38, 63, .4); transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none; }
html[data-blue] .qs input::-webkit-search-cancel-button { display: none; }
html[data-blue] .qs input::placeholder { color: rgba(2, 38, 63, .45); }
html[data-blue] .qs input:focus { outline: 0; border-color: #138E96; box-shadow: 0 0 0 4px rgba(19, 142, 150, .15), 0 24px 50px -30px rgba(2, 38, 63, .4); }
html[data-blue] .qs svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: #138E96; }
html[data-blue] .qs kbd { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace; color: rgba(2, 38, 63, .5);
    border: 1px solid #E3E7EE; border-radius: 6px; padding: 5px 7px; background: #F3F7FA; }
html[data-blue] .qs kbd[hidden] { display: none; }
html[data-blue] .qs .clr { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); border: 0; background: #F3F7FA; color: rgba(2, 38, 63, .75);
    border-radius: 999px; font: 700 13px/1 'Lato', sans-serif; padding: 9px 12px; cursor: pointer; }
html[data-blue] .qs .clr[hidden] { display: none; }
html[data-blue] .qtags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
html[data-blue] .qtags button { font: 600 13px/1 'Lato', sans-serif; color: rgba(2, 38, 63, .75); background: rgba(255, 255, 255, .7); border: 1px solid #E3E7EE; border-radius: 999px;
    padding: 9px 13px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
html[data-blue] .qtags button:hover { color: #02263F; border-color: #138E96; background: #fff; }
html[data-blue] .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
    html[data-blue] .qs input { height: 56px; padding: 0 84px 0 48px; font-size: 15px; }
    html[data-blue] .qs svg { left: 18px; }
    html[data-blue] .qs kbd { display: none; }
}

/* ---------- Questions: sticky topic list on the left (reference .fq / .tnav) ---------- */
html[data-blue] .faq-zone { padding-top: 56px !important; padding-bottom: 56px !important; background: #F3F7FA !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] .faq-zone, html[data-blue] body:has(.b-faq-hero) .blog-sky-zone { padding-top: 48px !important; padding-bottom: 48px !important; }
}
html[data-blue] .fq { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
html[data-blue] .tnav { position: sticky; top: 100px; display: grid; gap: 4px; }
html[data-blue] .tnav small { font: 900 10.5px/1 'Lato', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #138E96; margin-bottom: 10px; }
html[data-blue] .tnav a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font: 600 14.5px/1.2 'Lato', sans-serif;
    color: rgba(2, 38, 63, .7); text-decoration: none; transition: background .3s, color .3s, opacity .3s; }
html[data-blue] .tnav a b { font: 700 11px/1 'Lato', sans-serif; color: rgba(2, 38, 63, .45); }
html[data-blue] .tnav a:hover { background: #fff; color: #02263F; }
html[data-blue] .tnav a.on { background: #02263F; color: #fff; }
html[data-blue] .tnav a.on b { color: #ADDDF6; }
html[data-blue] .tnav a.off { opacity: .4; }
@media (max-width: 900px) {
    html[data-blue] .fq { grid-template-columns: minmax(0, 1fr); }
    html[data-blue] .tnav { top: 70px; z-index: 20; display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; margin: 0 -20px; padding: 10px 20px;
        background: rgba(243, 247, 250, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
    html[data-blue] .tnav::-webkit-scrollbar { display: none; }
    html[data-blue] .tnav small { display: none; }
    html[data-blue] .tnav a { flex: 0 0 auto; border: 1px solid #E3E7EE; background: #fff; border-radius: 999px; padding: 10px 14px; font-size: 13px; }
}
html[data-blue] .fcount { font: 700 12px/1 'Lato', sans-serif; letter-spacing: .04em; color: rgba(2, 38, 63, .55); margin-bottom: 18px; min-height: 1em; }

/* ---------- Groups and question cards (reference .fgrp / .acc) ---------- */
html[data-blue] .faq-group { margin: 0 !important; padding: 0 !important; border: 0 !important; }
html[data-blue] .faq-group + .faq-group { margin-top: clamp(40px, 5vw, 60px) !important; }
html[data-blue] .faq-group .blog-eyebrow { display: block; color: #138E96 !important; }
html[data-blue] h2.b-h2.b-fq-h { font-size: clamp(26px, 2.4vw, 34px) !important; margin: 10px 0 18px !important; }
html[data-blue] .faq-group .faq-item { border-radius: 18px !important; background: #fff !important; border: 1px solid #E3E7EE !important; margin: 0 0 10px !important; padding: 0 !important;
    box-shadow: none !important; transition: border-color .3s, box-shadow .4s; }
html[data-blue] .faq-group .faq-item[open] { border-color: rgba(19, 142, 150, .4) !important; box-shadow: 0 22px 44px -30px rgba(2, 38, 63, .35) !important; }
html[data-blue] .faq-group .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; list-style: none; padding: 20px 22px !important; cursor: pointer;
    font: 700 16.5px/1.35 'Lato', sans-serif !important; letter-spacing: -.012em; color: #02263F !important; border-radius: 18px; }
html[data-blue] .faq-group .faq-item summary::-webkit-details-marker { display: none; }
html[data-blue] .faq-group .faq-item summary::after, html[data-blue] .faq-group .faq-item summary::before { content: none !important; }
html[data-blue] .faq-group .faq-item summary:focus-visible { outline: 2px solid #138E96; outline-offset: 2px; }
/* the plus that turns into a minus (reference .pm), drawn on the page's own chevron icon */
html[data-blue] .faq-group .faq-item summary > i.ti { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #F3F7FA; font-size: 0 !important; color: transparent;
    transform: none !important; transition: background .3s, transform .5s cubic-bezier(.34, 1.56, .64, 1) !important; }
html[data-blue] .faq-group .faq-item summary > i.ti::before, html[data-blue] .faq-group .faq-item summary > i.ti::after { content: "" !important; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px;
    margin: -.9px 0 0 -6px; border-radius: 2px; background: #02263F; transition: transform .4s cubic-bezier(.16, 1, .3, 1), background .3s; }
html[data-blue] .faq-group .faq-item summary > i.ti::after { transform: rotate(90deg); }
html[data-blue] .faq-group .faq-item[open] summary > i.ti { background: #138E96; transform: rotate(180deg) !important; }
html[data-blue] .faq-group .faq-item[open] summary > i.ti::before, html[data-blue] .faq-group .faq-item[open] summary > i.ti::after { background: #fff; }
html[data-blue] .faq-group .faq-item[open] summary > i.ti::after { transform: rotate(0); }
html[data-blue] .faq-group .faq-answer { padding: 0 22px 22px !important; color: rgba(2, 38, 63, .75) !important; font-size: 15.5px !important; line-height: 1.65; max-width: 72ch; }
html[data-blue] .faq-group .faq-answer p { font-size: inherit !important; color: inherit !important; }
html[data-blue] .faq-group .faq-answer p + p { margin-top: 10px; }
html[data-blue] .faq-group .faq-answer a { color: #138E96 !important; font-weight: 700; }
html[data-blue] .faq-group .faq-answer :is(b, strong) { color: #02263F; }
html[data-blue] .faq-zone mark { background: rgba(63, 193, 201, .28); color: inherit; border-radius: 3px; padding: 0 1px; }
/* nothing matches (reference .fempty) */
html[data-blue] .faq-no-results { display: none; text-align: center; padding: 60px 20px; border: 1px dashed rgba(2, 38, 63, .2); border-radius: 22px; color: rgba(2, 38, 63, .75); font-size: 16px; }
html[data-blue] .faq-no-results.show { display: block; }

/* ---------- "Deeper answers": the Home section spacing (the blog card pictures are unchanged) ---------- */
html[data-blue] body:has(.b-faq-hero) .blog-sky-zone { padding-top: 56px !important; padding-bottom: 56px !important; }
html[data-blue] body:has(.b-faq-hero) .blog-sky-zone h2.b-h2 { margin-bottom: 28px !important; }