/* Focused Accessibility Audit — /services/focus-audit/
   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 -------------------------------------------------------- */

/* Solid, no hero photo. Two reasons, both verified rather than assumed:

   1. The sibling service pages set hero art via class="lazyload" +
      data-bg="...". No lazyload script exists anywhere in this codebase, so
      that attribute never applies. Those banners actually render
      `background: inherit` behind `color: white !important`, which is the
      source of the 2 thresholded contrast errors on
      /services/accessibility-auditing/ in .pa11yci. Copying the pattern would
      have imported the bug.

   2. Setting the photo for real does not fix it either. axe reports a
      color-contrast error for any text over a background image and does not
      fall back to the color underneath, so a photo here fails the pa11y gate
      even with a solid background-color and a 0.92-alpha brand gradient over
      it. Tested both; both failed with the same 2 errors.

   White on --ee-blue is 10.9:1 and pa11y passes with no threshold. If the
   photo is wanted later, it needs either a solid scrim panel behind the text
   or a documented .pa11yci threshold. Do not add one silently. */
.focus-audit-banner {
    background-color: var(--ee-blue);
}

.focus-audit-intro p,
.focus-audit-fit p,
.focus-audit-scope li,
.focus-audit-cta p {
    font-family: Nunito Sans, sans-serif;
    color: var(--ee-black);
}

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

.focus-audit-intro {
    padding: 72px 20px 0;
}

/* ---- Comparison table --------------------------------------------------- */

.focus-audit-compare {
    padding: 72px 20px 0;
}

.focus-audit-table-scroll {
    overflow-x: auto;
}

.focus-audit-table-scroll:focus {
    outline: none;
    box-shadow: var(--focus-border);
}

.focus-audit-compare table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-family: Nunito Sans, sans-serif;
    color: var(--ee-black);
}

.focus-audit-compare caption {
    text-align: left;
    font-family: Nunito Sans, sans-serif;
    color: var(--ee-dark-gray);
    font-size: 0.9rem;
    padding-bottom: 12px;
}

.focus-audit-compare th,
.focus-audit-compare td {
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ee-gray);
    vertical-align: top;
}

.focus-audit-compare thead th {
    color: white;
    background-color: var(--ee-blue);
    font-weight: 700;
}

.focus-audit-compare tbody th {
    color: var(--ee-blue);
    font-weight: 700;
    width: 30%;
}

.focus-audit-compare tbody tr:nth-child(even) {
    background-color: var(--bg-light-gray);
}

/* ---- Good fit ----------------------------------------------------------- */

.focus-audit-fit {
    padding: 72px 20px 0;
}

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

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

/* ---- Scope limits ------------------------------------------------------- */

.focus-audit-scope {
    padding: 72px 20px 0;
}

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

.focus-audit-scope li strong {
    color: var(--ee-blue);
}

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

.focus-audit-cta {
    padding: 72px 20px 96px;
    text-align: center;
}

.focus-audit-cta .round-btn-container {
    margin-top: 32px;
}

/* style.css:3926 pins .whole_page_text_wrap to a 640px column from 768px up.
   The comparison table and the fit grid both need 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) {
    .focus-audit-compare,
    .focus-audit-fit {
        width: 900px;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

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