/* ---- hero -------------------------------------------------------------------------------------

   Layout follows bolddesk.com/faq: title, a wide centred search, then the categories as buttons
   under it, with the same categories repeated beside the answers further down. The palette is this
   site's own (navy on a blue tint) rather than the reference's indigo on peach.

   Replaces a full-bleed Unsplash cover with a dark overlay. That image was ~200KB of photograph
   carrying no information, and putting white text on it meant the search box had to fight the
   picture for contrast. */

.faq-hero {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 3.5rem 1.5rem 1.75rem;
    text-align: center;
    /* The list below sits on --wp--preset--color--tertiary (#f9fafe), which is nearly white. The
       gradient used to fade out to almost that same colour by the time it reached the bottom edge,
       so the only thing marking where the hero ended was the 1px border. Both stops now stay well
       off #f9fafe, so the band itself reads as a distinct region rather than the border doing all
       the work. */
    background: linear-gradient(180deg, #d7e4f5 0%, #e5eff9 100%);
    border-bottom: 1px solid #bdd0e6;
}

/* Scattered rings and plus marks, echoing the reference's confetti. Drawn as one background image
   rather than markup: it is decoration, and an empty <span> per shape would be noise in the DOM
   and four more nodes for the translation pipeline to walk. */
.faq-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='420'%3E%3Cg fill='none' stroke='%230f3a69' stroke-opacity='.16' stroke-width='2'%3E%3Ccircle cx='150' cy='96' r='11'/%3E%3Ccircle cx='1215' cy='78' r='9'/%3E%3Ccircle cx='1108' cy='322' r='13'/%3E%3Ccircle cx='330' cy='348' r='8'/%3E%3Ccircle cx='560' cy='44' r='7'/%3E%3Cpath d='M406 64v22M395 75h22'/%3E%3Cpath d='M980 128v18M971 137h18'/%3E%3Cpath d='M196 268v18M187 277h18'/%3E%3Cpath d='M1290 236v22M1279 247h22'/%3E%3Cpath d='M700 366v18M691 375h18'/%3E%3C/g%3E%3C/svg%3E");
}

.faq-hero__inner {
    position: relative;
    max-width: 46rem;
    margin: 0 auto;
}

.faq-hero__title {
    margin: 0;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: #0f3a69;
}

.faq-hero__lead {
    margin: 0.85rem 0 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: #455468;
}

/* ---- search ------------------------------------------------------------------------------------ */

.faq-hero .faq-search {
    max-width: 36rem;
    margin: 1.6rem auto 0;
}

/* The magnifier is a background image on the input rather than an icon element, so the markup stays
   a bare labelled <input> and screen readers get nothing extra to announce. */
.faq-hero .faq-search input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    height: 3.25rem;
    padding: 0 3rem 0 1.15rem;
    font: inherit;
    font-size: 1rem;
    color: #1f2937;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23455468' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6.25'/%3E%3Cpath d='M13.6 13.6 18 18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    border: 1px solid #cddaea;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 58, 105, 0.05);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
}

.faq-hero .faq-search input[type="search"]::placeholder {
    color: #7a879a;
}

.faq-hero .faq-search input[type="search"]:focus {
    outline: none;
    border-color: #0f3a69;
    box-shadow: 0 0 0 3px rgba(15, 58, 105, 0.14);
}

/* ---- category buttons -------------------------------------------------------------------------- */

.faq-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.faq-cat {
    display: inline-block;
    padding: 0.55rem 1.05rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: #0f3a69;
    text-decoration: none;
    background: #fff;
    border: 1px solid #cddaea;
    border-radius: 999px;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.faq-cat:hover,
.faq-cat:focus-visible {
    background: #eef3fa;
    border-color: #0f3a69;
}

.faq-cat:active {
    transform: translateY(1px);
}

@media (max-width: 600px) {
    .faq-hero {
        padding: 2.5rem 1.25rem 1.5rem;
    }

    .faq-cat {
        padding: 0.5rem 0.85rem;
        font-size: 0.88rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-cat {
        transition: none;
    }
}

/* FAQ list: every answer visible, each question its own card.

   This replaces faq-accordion.css, which clamped each answer to a two-line preview behind a
   toggle. Collapsing made the page shorter but not more useful: a visitor looking for one
   specific rule had to open entries one at a time to find it, and the browser's own
   find-in-page could not see the hidden text. The clamp also hid everything after the answer's
   first block, which meant four questions that the export had nested inside another entry's
   answer were invisible until you happened to open their parent. Those are now siblings and,
   like every other answer, simply readable.

   With nothing hidden, separation has to come from the layout instead of from a chevron, so
   each entry is a bordered card on the band's near-white tint: one question and its answer per
   card, with a clear gap to the next. Expanding everything also makes the page long, so the
   cards are grouped by subject under headings and the index below jumps between those groups.

   The markup's own font-size classes (has-medium-font-size on the questions, an inconsistently
   applied has-small-font-size on the answer paragraphs) were stripped out when this file was
   written, so nothing here needs !important to beat a preset. */

/* ---- the category nav ----------------------------------------------------------------------- */

/* One element, two layouts. Narrow, it is a panel above the list; wide, it becomes a white pane
   pinned in the left margin. It is the same <nav> in both cases rather than a panel plus a
   separate rail, so there is only one list of categories on the page -- nothing to keep in sync,
   and screen readers are not read the same seven links twice.

   It stays in the markup rather than being built in JS: it is the page's only category navigation,
   so it has to work whether or not faq-nav.js runs. That script only decorates it. */

.faq-index {
    box-sizing: border-box;
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.25rem 1.75rem 1.4rem;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #ffffff;
}

.faq-index__heading {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #455468;
}

.faq-index ul {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 2.5rem;
}

.faq-index li {
    margin: 0 0 0.15rem;
    /* Keep a link and its count on one line when the columns break. */
    break-inside: avoid;
}

.faq-index a {
    display: block;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    color: #0f3a69;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.faq-index a:hover,
.faq-index a:focus-visible {
    background: #f4f8fd;
}

/* The section you are currently reading, set by faq-nav.js. A filled pill rather than just heavier
   text: at this size a weight change alone is too small a difference to find at a glance. The gold
   inset is the same "you are here" cue the header mega-menu uses. */
.faq-index a.is-current {
    background: #eef3fa;
    color: #0f3a69;
    font-weight: 700;
    box-shadow: inset 2px 0 0 0 #d3aa2d;
}

.faq-index__count {
    color: #455468;
    font-size: 0.85rem;
}

.faq-index__count::before {
    content: "(";
}

.faq-index__count::after {
    content: ")";
}

@media (max-width: 600px) {
    .faq-index ul {
        columns: 1;
    }
}

/* Marked by faq-nav.js on entries whose group the search has filtered away. The pane stays put --
   it is permanent furniture now, and having it vanish mid-search was the behaviour being replaced
   -- but it should not offer a jump to a section that currently has nothing in it. */
.faq-index a.is-empty {
    opacity: 0.35;
    pointer-events: none;
}

/* ---- the nav as a left-hand pane -------------------------------------------------------------

   Below this width it stays the in-flow panel above the answers (the rules above). At this width
   and up, .faq-list becomes a real two-column grid: the index in column 1, and every other direct
   child -- the empty-search notice and each .faq-group -- in column 2.

   The index is given every row via `grid-row: 1 / -1`, spanning the full height of the answer
   column even though its own content is much shorter. That is what makes `position: sticky`
   track the whole page of answers rather than just the pane's own few lines: sticky's travel
   range is bounded by its own box, and the row span is what makes that box tall.

   This replaces an earlier version that pulled the pane out into the page's own outer margin with
   `position: absolute; left: calc(...)`. That could not be made to stick: sticky's `top` resolves
   against an element's normal flow position, and an absolutely positioned element is removed from
   flow and has none. Fixed positioning was tried before that and dropped for a different reason --
   it overlapped the hero at scroll-top and slid against the page as you scrolled, because it
   answered to the viewport rather than to where the categories actually are on the page. A
   spanning grid item is the one approach answerable to the content's own height instead. */
@media (min-width: 1200px) {
    .faq-list {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        column-gap: 2.5rem;
        /* Without this the grid content fills the section's full alignfull width -- edge to edge
           of the browser -- so the pane lands flush against the true viewport edge instead of the
           same band everything else on the page (the header's nav, the hero's own inner column)
           sits in.

           This used to be done by capping .faq-list itself with max-width + centering margins,
           which brought the grid content into line but also clipped the element's own tertiary-
           colour background to that same 1280px band -- the background is supposed to stay
           full-bleed (that's what alignfull means here), only the grid's *content* should be
           inset. Padding insets the content while leaving the box (and its background) at the
           section's full width, so the band now matches the header's 80rem/wide-size band without
           cutting the background off at the sides.

           The !important is needed to beat the inline `padding-left`/`padding-right` the page's
           own markup sets directly on this element (var(--wp--preset--spacing--30), the plain
           edge padding used below 1200px) -- inline styles otherwise win over any stylesheet rule
           regardless of specificity. var(--wp--preset--spacing--30) itself is hardcoded here as
           2rem rather than referenced, because it's a clamp() that has already hit its ceiling at
           every width this query applies to (>=1200px). */
        padding-left: max(2rem, calc((100% - var(--wp--style--global--wide-size)) / 2 + 2rem)) !important;
        padding-right: max(2rem, calc((100% - var(--wp--style--global--wide-size)) / 2 + 2rem)) !important;
    }

    .faq-index {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: start;
        position: sticky;
        top: 1.5rem;
        max-width: none;
        margin: 0;
        padding: 1.4rem 1.5rem 1.6rem;
    }

    .faq-search-empty,
    .faq-group {
        grid-column: 2;
        /* The generic WP layout rule (.is-layout-constrained > *) puts margin-left/margin-right:
           auto on every direct child of .faq-list with !important, which centers these two inside
           the grid's second column instead of leaving them flush against the pane. justify-self
           isn't touched by that rule, so it is the one thing here that can still win. */
        justify-self: start;
    }

    .faq-index ul {
        columns: 1;
    }

    .faq-index li {
        margin: 0;
    }

    .faq-index li + li {
        margin-top: 0.2rem;
    }

    /* Muted by default so the current section is the one thing in the pane that reads as active;
       at panel width every entry is navy, which would leave nothing to highlight against. */
    .faq-index a {
        display: block;
        padding: 0.55rem 0.75rem;
        font-size: 0.95rem;
        line-height: 1.35;
        font-weight: 600;
        color: #455468;
        text-decoration: none;
    }

    .faq-index a:hover {
        color: #0f3a69;
    }

    /* The pill from the base rules carries the current-section cue here too, so the thin bar
       an earlier version put in the pane's left padding would only have been noise on top of it. */
    .faq-index a.is-current {
        color: #0f3a69;
        font-weight: 700;
    }

    /* The count is noise once the entries are stacked one per line. */
    .faq-index__count {
        display: none;
    }
}

/* ---- groups -------------------------------------------------------------------------------- */

/* The band is a constrained layout, so without a max-width of its own each section would be
   held to core's 42rem content-size and squeeze the cards inside it narrower than the index
   above them. Matching the card width keeps one left edge down the whole page. */
.faq-group {
    max-width: 48rem;
    margin-inline: auto;
    scroll-margin-top: 6rem;
}

/* The page's own WordPress export gives every direct child of .faq-list after the first a 64px
   margin-block-start (.wp-container-core-group-is-layout-7276a2bb>*+*, in site-base.css) -- that
   is what actually separates each group from the next, and .faq-index absorbs its own copy via
   the margin:0 set on it elsewhere in this file. The first .faq-group gets it too, though, which
   was most of the gap under the hero: reducing the hero's own padding barely moved the visible
   whitespace before this was found, because a 64px margin nobody had written down was still there.
   Zeroed here for the lead group only, so every later group keeps exactly the same separation it
   always had. */
.faq-group:first-of-type {
    margin-block-start: 0;
}

.faq-group__heading {
    margin: 0 0 0.9rem;
    font-size: 1.35rem;
    color: #16233a;
}

.faq-group > .faq-entry {
    box-sizing: border-box;
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 58, 105, 0.04);
    /* Entries linked to from the service pages (#faq-canadian-representative,
       #epa-annual-reporting, …) must not land under the sticky header. */
    scroll-margin-top: 6rem;
}

.faq-group > .faq-entry + .faq-entry {
    margin-top: 1rem;
}

.faq-list .faq-item h3 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.35;
    color: #0f3a69;
}

.faq-list .faq-answer {
    margin-top: 0.7rem;
}

.faq-list .faq-answer p {
    margin: 0 0 0.85rem;
    color: #33455c;
    line-height: 1.6;
}

.faq-list .faq-answer p:last-child {
    margin-bottom: 0;
}

/* One entry's answer wraps its paragraphs in a group block; without this the wrapper keeps
   core's block spacing and the answer sits apart from its own question. */
.faq-list .faq-answer > .wp-block-group {
    margin: 0;
    padding: 0;
}

@media (max-width: 600px) {
    .faq-group > .faq-entry {
        padding: 1.25rem 1.1rem;
    }
}

/* Placed after the base rule above so it wins the cascade at equal specificity -- a copy of this
   sitting inside the earlier grid media query would lose to the 48rem rule that comes later in the
   file regardless of which one is wrapped in @media. The answer column gets the room the sticky
   pane's own fixed width and gap free up: wider than the 48rem the narrow layout uses, but capped
   well short of the page's 80rem wide-block ceiling so a line of text does not run the full width
   of a large monitor. */
@media (min-width: 1200px) {
    .faq-group,
    .faq-group > .faq-entry {
        max-width: 60rem;
        margin-inline: 0;
    }
}

/* ---- search -------------------------------------------------------------------------------- */

.faq-search {
    max-width: 30rem;
    margin: 0 auto 2rem;
}

.faq-search input[type="search"] {
    width: 100%;
    padding: 0.8rem 1.1rem;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    color: #16233a;
    background: #ffffff;
}

.faq-search input[type="search"]:focus {
    outline: none;
    border-color: #0f3a69;
    box-shadow: 0 0 0 3px rgba(15, 58, 105, 0.12);
}

/* Set by faq-search.js when no entry matches the current search term. */
.faq-search-empty {
    display: none;
    max-width: 40rem;
    margin: 0 auto 2rem;
    padding: 1.5rem;
    border: 1px dashed #dbe4f0;
    border-radius: 16px;
    text-align: center;
    color: #455468;
}

.faq-search-empty.is-visible {
    display: block;
}

/* ---- "still have questions" contact band ---------------------------------------------------

   Reuses the exact "request a quote" block the service pages already ship (svc-contact-block +
   contact-form-wrap, both from site-content.css/contact-form.css) rather than a FAQ-specific
   design, so a visitor who has already seen that block on e.g. /epa-registration finds the same
   layout and copy pattern here -- address/email/phone beside the form, both inside the site's own
   plain "background" band. Only the heading text differs. */

/* .faq-contact is a direct child of .entry-content (is-layout-constrained), which gives every
   child after the first a margin-block-start of var(--wp--preset--spacing--30) (site-base.css) --
   normally invisible against the page's own white background, but here it sits between two
   differently-tinted full-bleed bands (.faq-list's tint above, this band's own background below)
   and showed up as a stray pale gap between them. Zeroed the same way .faq-group:first-of-type
   was earlier for the hero/list seam. */
.faq-contact {
    margin-block-start: 0;
}

/* ---- back-to-top button ----------------------------------------------------------------- */

/* This page runs long (dozens of entries across the full category list), so the search box and
   category nav at the top can be a real scroll away by the time a visitor is done reading.
   Fixed to the viewport rather than the page, so it stays put regardless of scroll position;
   opacity/visibility rather than display, so it can transition in instead of popping in
   abruptly, and stays out of tab order while hidden (visibility: hidden removes a button from
   focus order the way display: none does, unlike opacity alone). faq-scroll-top.js toggles
   .is-visible once the visitor has scrolled far enough that the button is worth showing. */
.faq-scroll-top {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    background: #ffffff;
    color: #0f3a69;
    box-shadow: 0 4px 16px rgba(15, 58, 105, 0.16);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.faq-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.faq-scroll-top:hover,
.faq-scroll-top:focus-visible {
    border-color: #0f3a69;
    background: #0f3a69;
    color: #ffffff;
}

.faq-scroll-top:focus-visible {
    outline: 3px solid rgba(211, 170, 45, 0.6);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .faq-scroll-top {
        transition: opacity 0.15s ease, visibility 0.15s;
        transform: none;
    }
}