/* The six service pages (/services/<service>/), standardized 2026-10-20.

   Loaded by base.njk where <main> carries ee-service-page (mainClass in
   src/_data/eleventyComputed.js). Each page opens with the gray header band
   (ee-blog-index.css) and ends with "Book a free consultation"; this file
   gives them one reading column, one set of text sizes and one link style.
   The pages' own stylesheets (pages/ee-<service>.css) still style what is
   unique to each. Sizes are in px because body resolves to 28.8px sitewide. */

/* Components that keep their own width and type: cards, grids, columns, the
   process accordion, testimonials, related posts, video and figures. The
   rules below never reach inside them. */

/* Everything lines up with the logo (Thomas, 2026-10-26). Each section
   spans the window, and its content sits on the header's side inset
   (--ee-header-inset, ee-nav.css), the edge the logo, the band title and the
   footer use, at every width. Sections that were boxed (the process steps,
   the manual audit) become full-width bands. */
#main.ee-service-page > :not(.archive-page, #primary),
#main.ee-service-page > #primary > :not(.archive-page) {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--ee-header-inset);
}

/* Wrappers inside a section start at its edge too. Cards keep their own
   padding, so their text sits inside the card; their edge is what lines up. */
#main.ee-service-page > :not(.archive-page, #primary) > *,
#main.ee-service-page > #primary > :not(.archive-page) > * {
    margin-left: 0;
    margin-right: auto;
}

#main.ee-service-page :is(.iaap-section, .desktop, .topics-content,
    .xr-gray-bg.meetup > div, .ee-blog-container,
    .list-container, .expand-all-container, .manual-audit-columns,
    .book-consultation, .logos, .row-cards, .round-btn-container) {
    margin-left: 0;
    padding-left: 0;
}

/* One reading column: plain headings, paragraphs and lists stop at 720px,
   about 75 characters a line (WCAG 1.4.8), the width posts use. They start at
   the section's edge, not centered in the window. Lists of cards (a list
   whose items have their own h3) keep their width. */
#main.ee-service-page :is(h2, p, ol, ul:not(:has(h3))):not(:is(
    .category-masthead, .testimonials-wrap, .ee-blog-container, .q-card,
    .w-card, .row-cards, .demo-card, .topic-card, .engagement-card,
    .legal-intro, .manual-audit-columns, .list-container, .video-container,
    .meetup-card, .training-icon-container, .book-consultation, figure, li,
    [id="testim_popup"]) *) {
    max-width: 720px;
    margin-left: 0;
    margin-right: auto;
}

/* Headings and paragraphs carry no side padding of their own: ADA's and
   Legal's had 20px, which set their text in from the edge. */
#main.ee-service-page :is(h2, p):not(:is(
    .category-masthead, .testimonials-wrap, .ee-blog-container, .q-card,
    .w-card, .row-cards, .demo-card, .topic-card, .engagement-card,
    .meetup-card, .training-icon-container, figure, li,
    [id="testim_popup"]) *) {
    padding-inline: 0;
}

/* One body size: 18px for paragraphs and list items. Several were 28.8px
   (the sitewide body size leaking into lists), 20px or 16px. */
#main.ee-service-page :is(p, li):not(:is(
    .category-masthead, .testimonials-wrap, .ee-blog-container, .blog-posts,
    .round-btn-container, [id="testim_popup"]) *) {
    font-size: 18px;
}

/* One lead size for text that is emphasized on purpose (Thomas,
   2026-10-20): XR's blue lead line, Training's quote cards and the
   introduction to its demos. */
#main.ee-service-page .xr-white-bg .text-highlight,
#main.ee-service-page .q-card p,
#main.ee-service-page .demos > p {
    font-size: 22px;
    line-height: 1.45;
}

/* Text links in brand blue, as everywhere else on the site. XR's links were
   the browser's default bright blue. Card links and buttons keep theirs, and
   so do links on the dark blue bands (Auditing's "Audit types", XR's blue
   sections), where brand blue would vanish into the background. */
#main.ee-service-page a:not(.round-btn):not(:is(
    .category-masthead, .testimonials-wrap, .ee-blog-container, .blog-posts,
    .row-cards, .meetup-card, .list-container, .audit-types, .xr-blue-bg,
    [id="testim_popup"]) *) {
    color: var(--ee-blue);
}

/* No centered text (Thomas, 2026-10-26). Headings, paragraphs, lists,
   captions and card text are left-aligned, and rows of cards, logos, icons
   and buttons start at the left; the calls to action that end a section
   ("Start with a conversation", "Audit types", the closing "Book a free
   consultation") included. A button's own label stays centered on it.
   Testimonials are the exception (Thomas, 2026-10-26): the cards look and
   sit exactly as on /our-work/, a centered grid with the portrait, name,
   role and logo centered in each card (components/ee-testimonial.css). */
#main.ee-service-page :not(.archive-page *, .round-btn, button, .testimonial *) {
    text-align: left;
}

#main.ee-service-page :is(.audit-types ul, .row-cards,
    .training-icon-container, .training-icon, .logos, .round-btn-container,
    .contact-btn-wrap, .topic-row, .book-consultation, .xr-gray-bg.meetup > div,
    .engagement-images-container) {
    justify-content: flex-start;
    justify-items: start;
}

/* Pieces the rules above cannot reach, each centered by a rule of its own. */
#main.ee-service-page :is(.our-process ol.list, .audit-types .round-btn-container,
    .demo-card h3, .contact-btn-wrap .round-btn-container, .w-card > p,
    .w-card > h3) {
    margin-left: 0;
    margin-right: auto;
}

/* Auditing's process steps were a rounded gray box; full width now, so the
   corners would sit against the window's edge. */
#main.ee-service-page .our-process {
    border-radius: 0;
}

/* The audit types are a row of labels, not an indented list. */
#main.ee-service-page .audit-types ul {
    padding-left: 0;
}

/* XR's headset photo straddles the top of its blue band; it hangs from the
   section's edge instead of the middle of the window. */
#main.ee-service-page .vr-img {
    left: var(--ee-header-inset);
    transform: none;
    max-width: 600px;
}

/* White cards on a gray band (Training's "Types of training", Legal's prior
   engagements) had 120 to 150px of padding at each side, which centered
   their text inside a card that now starts at the edge. */
@media (min-width: 701px) {
    #main.ee-service-page :is(.training-types .w-card, .legal-prior-engagements .engagement-card) {
        padding-inline: 48px;
    }
}

/* Training's three delivery icons (Online, In Person, Recorded Multimedia):
   label under its icon, both at the left. */
#main.ee-service-page .training-icon {
    align-items: flex-start;
}

#main.ee-service-page .training-icon p {
    margin-inline: 0;
}