/* Shell for the public content pages: topics, courses, about, industries,
 * corporate training, FAQ and contact.
 *
 * ONE stylesheet for all of them rather than an inline <style> per template.
 * Eight pages sharing one hashed, immutable file means a reader who lands on
 * the service-excellence page and then opens the CSEO course pays for these
 * rules once. The same reasoning that moved the shell out of base_learn.html.
 *
 * Everything here is layout and rhythm. Colour tokens come from base.css and
 * are not redefined: a second definition of --brand is how two pages end up
 * almost the same blue.
 */

/* ── Section rules ───────────────────────────────────────────────────────
 * The grey line between two sections spans the CONTENT column, not the
 * viewport: it starts under the logo and ends under Sign out, matching the
 * header.
 *
 * It used to sit on .pg-section itself, which is full-bleed, so on a 1280px
 * window the rule ran the whole 1280 while everything it divided ran 104-1176.
 * The section looked wider than the page it was on.
 *
 * Done with a ::before rather than a border on .learn-shell, because a border
 * there would land on the shell's PADDING edge (80-1200) and overshoot the
 * content by the 1.5rem gutter on each side. Insetting the pseudo-element by
 * that same gutter is what makes the line agree with the header, and it stays
 * agreed if the gutter ever changes -- both read 1.5rem.
 */
.pg-section > .learn-shell,
.pg-hero > .learn-shell { position: relative; }
.pg-section + .pg-section { border-top: 0; padding-top: 0; }
.pg-section + .pg-section > .learn-shell { padding-top: 2.4rem; }
.pg-section + .pg-section > .learn-shell::before,
.pg-hero > .learn-shell::after {
    content: '';
    position: absolute;
    left: 1.5rem; right: 1.5rem;
    border-top: 1px solid var(--line);
}
.pg-section + .pg-section > .learn-shell::before { top: 0; }
.pg-hero > .learn-shell::after { bottom: 0; }

/* ── Page head ───────────────────────────────────────────────────────── */
.pg-hero { padding: 3rem 0 0; }
.pg-hero > .learn-shell { padding-bottom: 2.2rem; }
.pg-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--brand); margin-bottom: .9rem;
}
.pg-hero h1 {
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    line-height: 1.15; letter-spacing: -.02em; color: var(--ink);
}
/* The lede is the paragraph Google most often quotes and the one an answer
   engine lifts, so it is sized to be read rather than skimmed past.

   NO max-width. See the note on .pg-prose below: a 62ch cap stopped this
   paragraph 390px short of the rule beneath it, which is the single thing that
   made these pages look unbalanced. */
.pg-lede {
    margin-top: 1rem;
    font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft);
    text-wrap: pretty;
}

/* ── Prose ───────────────────────────────────────────────────────────── */
.pg-section { padding: 2.4rem 0; }
/* NO max-width, deliberately, and this has been settled twice.
 *
 * A 68ch cap resolves to about 680px inside the 1072px content column, so
 * every paragraph stopped ~390px short of the section rule above it and ran
 * several lines longer than it needed to: a narrow column pasted into a wide
 * page, with a permanent empty gutter down the right of every content page.
 * The same defect was found and fixed on the home page's FAQ answers on
 * 2026-08-18 (.faq-item p, which carries the same pair of declarations) and
 * was reintroduced here by a later pass that capped the parent instead.
 *
 * `text-wrap: pretty`, NEVER `balance`: balance shortens every line to equalise
 * them, which reintroduces the same right-hand gap by another route. Pretty
 * keeps lines full and only prevents a stranded last word.
 *
 * The ONE exception on the site is .cert-hero p on the home page, which is a
 * centred hero: symmetric on both sides, so not this defect. Leave it alone.
 */
.pg-prose { text-wrap: pretty; }
.pg-prose h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
    line-height: 1.25; color: var(--ink); margin-bottom: .9rem;
}
.pg-prose h3 { font-size: 1.08rem; color: var(--ink); margin: 1.4rem 0 .5rem; }
.pg-prose p { margin-bottom: 1rem; line-height: 1.7; color: var(--ink-soft); }
.pg-prose p:last-child { margin-bottom: 0; }
.pg-prose a { color: var(--brand); }
.pg-prose ul { margin: 0 0 1rem 1.1rem; }
.pg-prose li { margin-bottom: .5rem; line-height: 1.65; color: var(--ink-soft); }

/* ── Ordered steps ───────────────────────────────────────────────────
 * The guide whose answer is a sequence (how to improve customer service).
 *
 * list-style:none and padding:0 are load-bearing rather than cosmetic. A
 * default <ol> indents its content by ~2.5rem, which would put every step
 * heading and every step paragraph on a different left edge from the H1 and
 * from every other heading on the site: exactly the defect the layout audit
 * exists to catch, introduced deliberately by a marker nobody needs to see
 * twice.
 *
 * The number is a counter in ::before, rendered as a block ABOVE the heading,
 * so it reads as a step label and costs the heading no horizontal position.
 * The <ol> carries role="list" in the template because Safari drops list
 * semantics from a list with no markers, and the order is the meaning here.
 */
.pg-steps { list-style: none; margin: 0; padding: 0; counter-reset: pg-step; }
.pg-steps > li { counter-increment: pg-step; }
.pg-steps > li + li { margin-top: 2.4rem; }
.pg-steps > li::before {
    content: "Step " counter(pg-step);
    display: block; margin-bottom: .5rem;
    font-size: .76rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--brand);
}

/* Inline "read more about this" row under a section. */
.pg-jumps { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.pg-jump {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .85rem; border: 1px solid var(--line);
    border-radius: 999px; background: var(--surface);
    font-size: .88rem; font-weight: 600; color: var(--brand);
    text-decoration: none;
}
.pg-jump:hover { border-color: var(--brand); background: var(--surface-alt); }

/* ── Cards ───────────────────────────────────────────────────────────── */
.pg-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pg-card {
    display: flex; flex-direction: column; gap: .55rem;
    padding: 1.3rem; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface);
    text-decoration: none; color: inherit;
}
a.pg-card:hover { border-color: var(--brand); box-shadow: 0 6px 24px rgba(23,48,122,.09); }
.pg-card h2, .pg-card h3 { font-size: 1.06rem; color: var(--ink); line-height: 1.3; }
.pg-card p { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }
/* ── Badges ──────────────────────────────────────────────────────────────
   The foot of a card, as a row of small pills rather than a line of
   icon-and-text fragments.

   The old .pg-card-meta was a sentence in disguise: "-> Requirements" and
   "book Syllabus" side by side in muted 13px, each a bare link with a glyph in
   front of it. At a glance it read as one run of grey text, and the two things
   you could actually DO from the card were the least visible part of it.

   Two kinds, and the difference matters:

     .pg-chip   a FACT about the thing -- 21 modules, about 14 hours, CSEO.
                Not a link, no hover, no border. It states.
     .pg-badge  an ACTION -- Requirements, Syllabus. A link, bordered, and it
                responds to the pointer. It goes somewhere.

   Named .pg-chip, NOT .pg-fact: .pg-fact was already taken further down this
   file by the <dl> on the syllabus page, and because that rule is declared
   after this one it won -- the pills came out 46px tall with a square left
   edge and no radius, which looks like a broken badge rather than like a
   name collision.

   Keeping the two visually distinct is the whole point. A row where a fact and
   a link look identical teaches a reader to click the facts. */
.pg-badges {
    margin-top: auto; padding-top: .8rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.pg-chip, .pg-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .26rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; line-height: 1.35;
    white-space: nowrap;
}
.pg-chip {
    background: var(--surface-alt);
    color: var(--ink-muted);
}
.pg-badge {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--brand);
    text-decoration: none;
}
.pg-badge:hover, .pg-badge:focus-visible {
    border-color: var(--brand);
    background: var(--surface-alt);
}
/* The level tag. Takes the certification's own tier colour where the page has
   one to give it, and falls back to the neutral fact pill where it does not,
   so it never depends on a variable that may not be set. */
.pg-chip-tier {
    background: var(--paper, var(--surface-alt));
    color: var(--tier-ink, var(--ink-muted));
    box-shadow: inset 0 0 0 1px var(--metal, transparent);
}

/* The "Who:" line on a card. Quieter and one size down from the positioning
   above it: on a card the positioning is the claim and this is the qualifier,
   and at the same weight the two competed and the card read as three equal
   paragraphs. */
.pg-who { font-size: .86rem; color: var(--ink-muted); }
.pg-who strong { color: var(--ink-soft); font-weight: 700; }

.pg-card-meta {
    margin-top: auto; padding-top: .5rem;
    font-size: .82rem; color: var(--ink-muted);
    display: flex; flex-wrap: wrap; gap: .9rem;
}
.pg-card-meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* ── Syllabus ────────────────────────────────────────────────────────── */
.pg-modules { display: grid; gap: .7rem; counter-reset: mod; }
.pg-module {
    display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem;
    padding: 1rem 1.1rem; border: 1px solid var(--line);
    border-radius: 12px; background: var(--surface);
}
.pg-module-no {
    display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: var(--surface-alt); color: var(--brand);
    font-weight: 700; font-size: .92rem;
}
.pg-module h3 { font-size: 1rem; color: var(--ink); margin-bottom: .3rem; }
.pg-module p { font-size: .91rem; line-height: 1.6; color: var(--ink-soft); }
.pg-module-time { font-size: .8rem; color: var(--ink-muted); margin-top: .35rem; }

/* ── Facts strip ─────────────────────────────────────────────────────── */
.pg-facts {
    display: grid; gap: 1rem; margin-top: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pg-fact {
    padding: .9rem 1rem; border-left: 3px solid var(--brand);
    background: var(--surface-alt); border-radius: 0 10px 10px 0;
}
.pg-fact dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.pg-fact dd { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-top: .2rem; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
/* <details>, not a JS accordion. The answers are in the DOM whether or not
   the summary is open, which is what both a crawler and a reader with
   JavaScript disabled need, and it costs no script at all. */
.pg-faq { display: grid; gap: .6rem; }
.pg-faq details {
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); padding: .2rem .2rem;
}
.pg-faq summary {
    cursor: pointer; list-style: none; padding: .85rem 1rem;
    font-weight: 600; color: var(--ink); line-height: 1.45;
    display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
    content: "\002B"; color: var(--ink-muted); font-weight: 400;
    font-size: 1.2rem; line-height: 1; flex-shrink: 0;
}
.pg-faq details[open] summary::after { content: "\2212"; }
.pg-faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 10px; }
.pg-faq details > p {
    padding: 0 1rem 1rem; line-height: 1.7; color: var(--ink-soft); margin: 0;
    text-wrap: pretty;
}

/* ── Call to action ──────────────────────────────────────────────────── */
.pg-cta {
    margin-top: 2rem; padding: 1.6rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-alt);
}
.pg-cta h2 { font-size: 1.2rem; color: var(--ink); margin-bottom: .5rem; }
.pg-cta p {
    color: var(--ink-soft); line-height: 1.65; margin-bottom: 1rem;
    text-wrap: pretty;
}
/* a.pg-btn, not .pg-btn.
   Every one of these buttons is an <a> inside .pg-prose, and `.pg-prose a`
   above sets color:var(--brand) at specificity (0,1,1) -- one higher than a
   bare .pg-btn. The primary button was therefore rendering brand navy text on
   a brand navy background: a solid block with an invisible label, on the main
   call to action of the corporate page and the course pages. Qualifying the
   selector with the element name matches that specificity, and since this rule
   comes later in the file it wins the tie.
   Do not drop the `a`. */
a.pg-btn, .pg-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.3rem; border-radius: 10px;
    background: var(--brand); color: #fff; font-weight: 600;
    text-decoration: none;
}
a.pg-btn:hover, .pg-btn:hover { background: var(--brand-dark); }
a.pg-btn-ghost, .pg-btn-ghost {
    background: transparent; color: var(--brand); border: 1px solid var(--line);
}
a.pg-btn-ghost:hover, .pg-btn-ghost:hover {
    background: var(--surface); border-color: var(--brand);
}
.pg-btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ── Definition list for contact ─────────────────────────────────────── */
.pg-contact { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pg-contact div { padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pg-contact h2 { font-size: 1rem; color: var(--ink); margin-bottom: .4rem; }
.pg-contact p { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }
.pg-contact a { color: var(--brand); }

@media (max-width: 640px) {
    /* The hero's and the divided section's bottom/top space lives on the inner
       shell now, because that is where the rule is drawn. Setting it on the
       outer element here as well would double it. */
    .pg-hero { padding: 2.2rem 0 0; }
    .pg-hero > .learn-shell { padding-bottom: 1.7rem; }
    .pg-section { padding: 1.9rem 0; }
    .pg-section + .pg-section > .learn-shell { padding-top: 1.9rem; }
    .pg-module { grid-template-columns: 1fr; gap: .5rem; }
    .pg-module-no { width: 2.2rem; height: 2.2rem; font-size: .85rem; }
}

/* Visually hidden but announced. Used for the "Module 3:" prefix on syllabus
   headings: the number is drawn in the circle beside the title, which is
   aria-hidden because it is decoration there, so without this a screen reader
   hears twenty-one headings with no ordinal at all.
   clip-path rather than display:none, which removes it from the a11y tree
   too, and no width:0, which stops some readers announcing it. */
.learn-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}