/*
 * Service section stylesheet — loads on /services and every page beneath it
 * (fast_custom_theme_page_style_slugs() walks the ancestor chain, so this file
 * is enqueued for a child page before that page's own file).
 *
 * Everything here is a component a service page can reach for, not styling for
 * one particular page: a numbered procedure sequence, benefit cards, the paired
 * procedure panels, an icon checklist, and an FAQ list. Add a pages/<slug>.css
 * only for a genuine per-page override.
 *
 * Band utilities come first because the components change colour inside an
 * inverse band and it is easier to read them in that order.
 */

/*#region Bands*/
/*
 * Section grounds. A long service page is a stack of sections, and alternating
 * their grounds is what keeps it from reading as one undifferentiated column of
 * text — so the two non-white grounds are named once here rather than being
 * re-declared per page.
 *
 * .band-inverse also has to repair the two things that assume a light ground:
 * .section__head's eyebrow is --color-accent-dark, which is 2.30:1 on graphite
 * and unreadable, and any accent detail inside a component wants the light
 * accent instead. --color-accent-light is 7.60:1 there.
 */
.band-muted {
    background: var(--color-bg-muted);
}

.band-inverse {
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse);
}

.band-inverse .section__head .eyebrow {
    color: var(--color-accent-light);
}

/*
 * .eyebrow's accent colour is scoped per-container on purpose (see above),
 * so an eyebrow inside a .split (main.css) row — a service page pairing a
 * photo with a checklist — needs its own rule too.
 */
.split__body .eyebrow {
    color: var(--color-accent-dark);
}

/*#endregion*/


/*#region Process*/
/*
 * A numbered sequence of steps — "evaluation, placement, restoration", or the
 * diagnosis/treatment/restoration path for a failing implant.
 *
 *   <ol class="process">
 *       <li class="process__step">
 *           <h3 class="process__title">…</h3>
 *           <p>…</p>
 *       </li>
 *   </ol>
 *
 * It is a real <ol>, so the order is in the semantics and not only in the
 * numerals; the visible numerals are a CSS counter on ::before, i.e. decoration
 * layered on top of a list that already reads correctly with styles off.
 *
 * decimal-leading-zero because a bare "1" at 44px reads as a stray glyph, while
 * "01" reads as a step marker. Add .process--inverse on a dark band.
 */
.process {
    counter-reset: process;
    display: grid;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process__step {
    counter-increment: process;
    padding-top: 20px;
    border-top: 3px solid var(--color-accent);
}

.process__step::before {
    content: counter(process, decimal-leading-zero);
    display: block;
    margin-bottom: 0.15em;
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent-dark);
}

.process__title {
    margin-bottom: 0.4em;
    font-size: 1.35em;
}

.process__step p:last-child {
    margin-bottom: 0;
}

/* On graphite the base accent-dark numeral drops to 2.30:1. Large text needs
   3:1, and these are decorative besides, but the light accent is both legible
   (7.60:1) and the brighter mark the dark band wants. */
.process--inverse .process__step {
    border-top-color: var(--color-accent-light);
}

.process--inverse .process__step::before {
    color: var(--color-accent-light);
}

@media (min-width: 800px) {
    .process {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
}

/*#endregion*/


/*#region Benefit cards*/
/*
 * Icon, short term, one sentence. Sized by auto-fit so three or four read the
 * same, and the white card is what separates it from the muted band it is
 * designed to sit on — put it on white and the card disappears.
 */
.benefit-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefit-card {
    padding: 32px 28px;
    background: var(--color-bg);
    border-bottom: 3px solid var(--color-accent);
}

/* White on --color-accent-dark is 5.53:1 — comfortably past the 3:1 a
   non-text graphic needs, and it keeps the disc readable if it ever carries a
   character rather than an icon. */
.benefit-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--color-accent-dark);
    color: var(--color-white);
    font-size: 26px;
}

.benefit-card__title {
    margin-bottom: 0.4em;
    font-size: 1.3em;
}

.benefit-card p:last-child {
    margin-bottom: 0;
}

/*#endregion*/


/*#region Procedure panels*/
/*
 * Two adjunct procedures presented side by side rather than as two more
 * stacked sections — they are peers (both are "what we do first if the site
 * isn't ready"), and stacking them would have made four near-identical
 * heading-plus-list blocks in a row.
 *
 * align-items is left at stretch so the two panels share a height whatever
 * their copy lengths; the tinted ground would otherwise end at different
 * points and look accidental.
 */
.procedure-panels {
    display: grid;
    gap: 32px;
}

.procedure-panel {
    padding: 36px 32px;
    background: var(--color-bg-muted);
    border-top: 4px solid var(--color-accent);
}

.procedure-panel__title {
    margin-bottom: 0.5em;
    font-size: 1.5em;
}

@media (min-width: 900px) {
    .procedure-panels {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/*#endregion*/


/*#region Checklist*/
/*
 * A list whose marker is the theme's check icon. The icon is written into the
 * markup by [icon name="check"] with no label, so it is aria-hidden and the
 * list still reads as a plain list to a screen reader — the tick is emphasis,
 * not information.
 *
 * Two columns rather than a bullet indent: the text block keeps its own left
 * edge no matter how many lines it runs to, which a list-style marker cannot
 * do. The 0.2em nudge sits the icon on the first line's optical centre.
 */
.checklist {
    display: grid;
    gap: 14px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.checklist li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
}

.checklist .icon {
    margin-top: 0.2em;
    font-size: 1.15em;
    color: var(--color-accent-dark);
}

.band-inverse .checklist .icon {
    color: var(--color-accent-light);
}

/*#endregion*/


/*#region FAQ*/
/*
 * A collapsible accordion built on the real-<button> pattern from
 * html-landing-page-accessibility-rules.md §10: each trigger owns
 * aria-expanded + aria-controls, the panel is a role="region" with a native
 * `hidden` attribute (removes it from the tab order and the a11y tree with no
 * JS bookkeeping), and Enter/Space work for free because it's a <button>.
 * main.js only flips aria-expanded and `hidden` — see [data-accordion-trigger].
 *
 * The markup still matches the "Frequently Asked Questions" H2 + H3/paragraph
 * shape fast_schema_faq() (inc/schema.php) parses into FAQPage structured
 * data: the trigger's <button> lives inside the <h3> and the panel's <p>
 * follows in document order, so the schema query (which walks all
 * descendants, not just direct children) finds both regardless of hidden
 * state or nesting. Keep the question text as the button's accessible name —
 * don't move it out of the <h3>/<button>.
 */
.faq {
    display: grid;
    gap: 20px;
    margin-top: 32px;
}

.faq__item {
    padding-top: 20px;
    border-top: 1px solid var(--color-bg-muted-dark);
}

.faq__question {
    margin: 0;
    font-size: 1.2em;
}

.faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.faq__icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--color-accent-dark);
    transition: transform 0.2s ease;
}

.faq__trigger[aria-expanded="true"] .faq__icon {
    transform: rotate(180deg);
}

.faq__answer {
    margin-top: 12px;
}

.faq__answer p:last-child {
    margin-bottom: 0;
}

/*#endregion*/


/*#region Section close*/
/*
 * The paragraph that closes a section under a grid or a split row.
 * .wrapper-text caps the measure; this only re-centres it and lifts it clear.
 */
.section__close {
    margin: 40px auto 0;
    text-align: center;
}

/*#endregion*/