/* Accessibility Review — /services/accessibility-review/
   Loaded via the PAGE_CSS set in src/_data/eleventyComputed.js.

   Deliberately does not reuse ee-accessibility-auditing.css. There is no
   mechanism for sharing page CSS between pages (base.njk enqueues exactly one
   pages/ee-<pageKey>.css), and copying 472 lines to inherit four selectors
   would be worse than the ~130 here. Colors and type come from the :root
   tokens in style.css so both pages stay visually consistent. */

/* ---- Hero banner -------------------------------------------------------- */

/* This page set the hero background directly instead of copying the sibling
   pages' inert `class="lazyload" data-bg="..."` markup. As of 2026-08-22 the
   siblings were fixed the same way and the solid --ee-blue moved onto the base
   .ee-banner rule in components/ee-banner.css, so nothing is needed here.
   See that file for why a hero photo cannot go back without a scrim panel. */

.accessibility-review-intro p,
.accessibility-review-fit p,
.accessibility-review-scope li,
.accessibility-review-full p,
.accessibility-review-cta p {
    font-family: 'Lato', sans-serif;
    color: var(--ee-black);
}

.accessibility-review-intro h2,
.accessibility-review-fit h2,
.accessibility-review-scope h2,
.accessibility-review-full h2,
.accessibility-review-cta h2 {
    color: var(--ee-blue);
    margin-bottom: 0.8em;
    line-height: 1.2;
}

.accessibility-review-intro {
    padding: 72px 20px 0;
}

/* ---- Inset figures ------------------------------------------------------ */

/* Plain <img> on purpose: the responsiveImages transform in eleventy.config.js
   adds the WebP <source>s, width/height, loading and decoding. Never hand-write
   <picture> or srcset here.

   font-size is stated in px because body resolves to 28.8px sitewide, so an em
   or a bare inherit gives the caption the same size as a heading. */
.ee-review-figure {
    margin: 40px 0 0;
}

.ee-review-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.ee-review-figure figcaption {
    margin-top: 12px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ee-dark-gray);
}

/* ---- What a review can include ------------------------------------------ */

.accessibility-review-fit {
    padding: 72px 20px 0;
}

.accessibility-review-fit ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 32px;
}

.accessibility-review-fit h3 {
    color: var(--highlight-blue);
    margin-bottom: 8px;
}

/* ---- When a review fits -------------------------------------------------- */

.accessibility-review-scope {
    padding: 72px 20px 0;
}

.accessibility-review-scope ul {
    padding-left: 1.2em;
    display: grid;
    gap: 16px;
}

.accessibility-review-scope li strong {
    color: var(--ee-blue);
}

/* ---- Conformance handoff ------------------------------------------------- */

.accessibility-review-full {
    padding: 72px 20px 0;
}

/* ---- CTA ---------------------------------------------------------------- */

.accessibility-review-cta {
    padding: 72px 20px 96px;
    text-align: center;
}

.accessibility-review-cta .round-btn-container {
    margin-top: 32px;
}

/* style.css:3926 pins .whole_page_text_wrap to a 640px column from 768px up.
   The two-column include grid needs more room, but only once there is room to
   give: widening starts at 1024px so the 768-1023px range keeps the site's
   standard column. This file loads after style.css, so equal specificity
   resolves in its favor. */
@media only screen and (min-width: 1024px) {
    .accessibility-review-fit {
        width: 900px;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

    .accessibility-review-fit ul {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}