/* For pre/code tags */

code {
    background: none;
    border: none;
}

.hljs-tag,
.hljs-attr,
.hljs-literal,
.hljs-name {
    color: white !important;
}

.hljs-deletion,
.hljs-number,
.hljs-quote,
.hljs-selector-class,
.hljs-selector-id,
.hljs-string,
.hljs-template-tag,
.hljs-type {
    color: #DF7C20 !important;
}

.hljs-link,
.hljs-operator,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-symbol,
.hljs-template-variable,
.hljs-variable {
    color: #A780F9 !important;
}

.hljs-addition,
.hljs-built_in,
.hljs-bullet,
.hljs-code {
    color: #13B4B1 !important;
}

.hljs-comment {
    color: #BABABACC !important;
}

.hljs-punctuation {
    color: steelblue !important;
}

.hljs-string {
    color: #5ea8d0 !important;
}

.hljs {
    padding: 0 !important;
    background-color: transparent !important;
    color: white !important;
}

pre:has(.hljs) {
    background: black;
    border-radius: 10px;
    max-width: 720px;
    margin: 0 auto;
}


/* fix to link icon displaying on image with links */

a:has(figure) span.ee_no_wrap {
    display: none;
}


/* hiding h1 from blog index */

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


/* fixing header message */

.page_level_header {
    text-align: left;
}

/* new style for post template */

.post-template-default.single-post .content-area,
.page-template-default:not(.kb-article):has(#toc-wrap) {
    background-color: var(--bg-white);
}

.post-template-default.single-post #content h2,
.post-template-default.single-post #content h3,
.post-template-default.single-post #content h4,
.page-template-default:not(.kb-article):has(#toc-wrap) h2,
.page-template-default:not(.kb-article):has(#toc-wrap) h3,
.page-template-default:not(.kb-article):has(#toc-wrap) h4 {
    margin-top: 16px;
}

.post-template-default.single-post #content h1,
.post-template-default.single-post #content h2,
.post-template-default.single-post #content h3,
.post-template-default.single-post #content h4,
.post-template-default.single-post #content p,
.post-template-default.single-post #content li,
.page-template-default:not(.kb-article):has(#toc-wrap) main h1,
.page-template-default:not(.kb-article):has(#toc-wrap) main h2,
.page-template-default:not(.kb-article):has(#toc-wrap) main h3,
.page-template-default:not(.kb-article):has(#toc-wrap) main h4,
.page-template-default:not(.kb-article):has(#toc-wrap) main p,
.page-template-default :not(.kb-article):has(#toc-wrap) main li {
    color: var(--ee-black);
}


.post-template-default.single-post h1.entry-title,
.page-template-default:not(.kb-article):has(#toc-wrap) h1.entry-title {
    font-weight: 700;
}

.post-template-default.single-post .post-date,
.page-template-default:not(.kb-article):has(#toc-wrap) .post-date {
    font-size: 1rem;
    margin-bottom: 27px;
}

.post-template-default.single-post figure.wp-caption,
.page-template-default:not(.kb-article):has(#toc-wrap) figure.wp-caption,
.entry-content > img.wp-post-image {
    display: block;
    border: none;
    width: 720px;
    margin: 0 auto;
}

.entry-content > img.wp-post-image {
    margin-bottom: 30px;
}

.post-template-default.single-post figure.wp-caption img,
.page-template-default:not(.kb-article):has(#toc-wrap) figure.wp-caption img {
    border: solid 2px var(--bg-light-gray-2);
}

.post-template-default.single-post .wp-caption .wp-caption-text,
.page-template-default:not(.kb-article):has(#toc-wrap) .wp-caption .wp-caption-text {
    background: transparent;
}

/* author card */

.post-template-default.single-post .author_about_short {
    border-top: solid 2px var(--bg-light-gray);
    border-bottom: solid 2px var(--bg-light-gray);
    background: none;
    grid-row-gap: 0;
    grid-column-gap: 2rem;
    padding: 2rem 4rem;
    align-items: center;
}


.post-template-default.single-post .author_about_short .author_about_image img {
    width: 100%;
}

.post-template-default.single-post .portrait-border,
.post-template-default.single-post .social-icon-about {
    margin: 0 !important;
}

.post-template-default.single-post .social-icon-about {
    margin: 1rem 0 !important;
    justify-content: start;
    padding: 0;
}

.post-template-default.single-post .author-profile-link {
    font-size: 1rem;
}

.post-template-default.single-post .author-profile-link span {
    display: none;
}



.post-template-default.single-post main#main {
    overflow: hidden;
}

.page-template-default:not(.kb-article):has(#toc-wrap) .entry-header {
    max-width: unset !important;
}

/* Summary */
.entry-content .ee-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    box-shadow: inset 0 0 0 2px var(--ee-blue);
    gap: 8px;
    margin-bottom: 2rem;
}

.entry-content .ee-summary div:has(h2) {
    background-color: var(--ee-blue);
    align-content: center;
    flex-grow: 1;
}

.entry-content .ee-summary h2 {
    color: white !important;
    text-align: center;
}

.entry-content .ee-summary h2, .entry-content .ee-summary p {
    padding: 8px 16px;
    margin: 0 !important;
}

/* Full width and left aligned: the old 70% centered column squeezed phone
   lines to ~30 characters. The article column already caps at 720px, so the
   line length stays readable on desktop without a max-width here. */
.entry-content .ee-summary .ee-summary-content {
    flex: 1 1 100%;
    padding: 12px 8px 16px;
}

.entry-content .ee-summary .ee-summary-content p {
    text-align: left;
}

.entry-content .ee-summary:has(div.ee-summary-content:empty),
body:has(div.ee-summary-content:empty) #toc-root > li:first-child  {
    display: none;
}



.entry-footer p:has(.edit-link) {
    margin-bottom: 2rem;
}

@media screen and (min-width: 1200px) {
    .post-template-default.single-post #content h2,
    .post-template-default.single-post #content h3,
    .post-template-default.single-post #content h4 {
        margin-top: 32px;
    }

    #main {
        width: unset !important;
    }

    .page-template-default:not(.kb-article):has(#toc-wrap) .entry-header {
        margin: 0 !important;
    }

    .page-template-default:not(.kb-article):has(#toc-wrap) .entry-header .entry-title {
        margin-left: auto;
        margin-right: auto;
        max-width: 720px;
    }

    #main:has(#toc-wrap) article.post,
    #main:has(#toc-wrap):not(.kb-toc-enable) article.page,
    .page-template-default:not(.kb-article):has(#toc-wrap) .entry-header {
        padding-left: 240px;
    }

    #main:has(#toc-wrap) .post-navigation {
        padding-left: 240px;
        max-width: unset !important;
    }

    #main:has(#toc-wrap) .post-navigation .post-nav-box {
        margin: 0 auto;
        max-width: 720px;
    }

    .post-template-default.single-post .post-date {
        margin-bottom: 20px;
    }

    .post-template-default.single-post .ee_figure,
    .page-template-default:not(.kb-article):has(#toc-wrap) .ee_figure {
        max-width: 720px;
        margin: 0 auto;
    }

    .post-template-default.single-post .author_about_short {
        grid-template-columns: auto 1fr;
        grid-column-gap: 2rem;
        padding: 2rem 4rem;
        align-items: center;
    }

    .post-template-default.single-post #toc-wrap ul#toc-root,
    .page-template-default:not(.kb-article):has(#toc-wrap) #toc-wrap ul#toc-root {
        margin: 0 !important;
    }

    /* twitter iframe */
    .post-template-default.single-post .twitter-tweet {
        justify-content: center !important;
        width: 550px !important;
    }
}

@media screen and (max-width: 680px) {
    .post-template-default.single-post .entry-content,
    .navigation.post-navigation,
    .page-template-default:not(.kb-article):has(#toc-wrap) .entry-content {
        padding: 0 1rem !important;
    }

    .post-template-default.single-post .author_about_short,
    .page-template-default:not(.kb-article):has(#toc-wrap) .author_about_short {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        padding: 1rem !important;
    }

    .post-template-default.single-post h2, .page-template-default:not(.kb-article):has(#toc-wrap) h2 { font-size: 1.5rem; }

    .post-template-default.single-post h2,
    .post-template-default.single-post h3,
    .post-template-default.single-post h4,
    .page-template-default:not(.kb-article):has(#toc-wrap) h2,
    .page-template-default:not(.kb-article):has(#toc-wrap) h3,
    .page-template-default:not(.kb-article):has(#toc-wrap) h4 {
        margin-top: 31px;
    }

    .post-template-default.single-post h1,
    .page-template-default:not(.kb-article):has(#toc-wrap) h1 {
        font-size: 2rem;
    }
    
    .author_role_wrap span {
        font-size: .8rem;
    }
    .author_about_bio {
        font-size: 1rem;
    }
}


/* About-the-author blurb (E-E-A-T) */

.author-bio {
    max-width: 720px;
    margin: 3rem auto 0;
    padding: 2rem 0;
    border-top: solid 2px var(--bg-light-gray);
    border-bottom: solid 2px var(--bg-light-gray);
}

.author-bio-title {
    margin: 0 0 0.5rem;
    font-family: 'Lato', sans-serif;
    font-size: 1.8rem;
    line-height: 1.3em;
    color: #000;
}

.author-bio p {
    font-size: 1.4rem;
    margin: 0;
}

/* With a headshot (team members, matched from /about/ in authors.js): the
   photo beside the text, round like the team photos on /about/. */
.author-bio--photo {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* The build wraps the photo in <picture> (responsiveImages in
   eleventy.config.js), which is then the flex item, so it must not shrink. */
.author-bio--photo > picture {
    flex: none;
    display: block;
}

.author-bio-photo {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.author-bio-text {
    min-width: 0;
}

/* Role and pronouns under the heading, as the author pages showed them. */
.author-bio .author-bio-role {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ee-dark-gray);
}

/* Certifications and the profile links, under the bio (Phase 3, 2026-10-20).
   The same size as the bio text, the heading in bold; the links sit in a row
   that wraps. */
.author-bio .author-bio-subtitle {
    margin: 1rem 0 0.25rem;
    font-family: 'Lato', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
}

.author-bio-credentials {
    margin: 0;
    padding-left: 1.25em;
    font-size: 1.4rem;
}

.author-bio-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 1.4rem;
}

@media screen and (max-width: 680px) {
    .author-bio {
        margin: 2rem 1rem 0;
    }

    .author-bio-title {
        font-size: 1.5rem;
    }

    .author-bio p,
    .author-bio .author-bio-subtitle,
    .author-bio-credentials,
    .author-bio-links {
        font-size: 1rem;
    }

    .author-bio .author-bio-role {
        font-size: 0.9rem;
    }

    .author-bio--photo {
        gap: 16px;
    }

    .author-bio-photo {
        width: 72px;
        height: 72px;
    }
}


/* Hero (featured) image above the post body.
   The theme's original rules for this live under .post-template-default
   .single-post, a body class the Eleventy build does not emit, so the
   published appearance is reproduced here scoped to .post-hero instead. */

.entry-content figure.post-hero {
    width: 720px;
    max-width: 100%;
    margin: 0 auto 1.5em;
    border: none;
}

.entry-content figure.post-hero img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border: solid 2px var(--bg-light-gray-2);
}

.entry-content figure.post-hero .wp-caption-text {
    background: transparent;
}

/* Post meta line ("Published <date> by <author> in <categories>").

   .entry-meta had no rule anywhere, so it inherited body's `font-size: 1.8rem`
   (style.css:238). That declaration was written for `html { font-size: 62.5% }`
   — 1rem = 10px, so 1.8rem = 18px — but that html rule is commented out at
   style.css:148, leaving html at the 16px default and the meta line at 28.8px.

   The title and body text both shrink responsively, so the mismatch only
   becomes obvious on mobile, where the meta line rendered LARGER than the h1:
   at 390px it was 28.8px against a 24px title and 12.8px body text.

   Sizing it explicitly here rather than reviving the 62.5% rule: that rule
   would rescale every rem value in the entire theme at once. */
.entry-meta {
    font-size: 1rem;
    line-height: 1.5;
}

@media screen and (max-width: 680px) {
    .entry-meta {
        font-size: 0.875rem;
    }
}

/* ---- Article title ------------------------------------------------------
   Lato Bold, like the h1 on /blog/ and every other page. From 2026-08-24 it
   was PT Serif, so a post would read as a paper and match the archive cards;
   Thomas asked for the sans serif on 2026-10-16, and the archive card titles
   followed on 2026-10-17.

   Scoped to article.post.type-post, NOT to .entry-title. There are no body
   classes on this site, so the .post-template-default.single-post selectors
   further up this file have never matched anything. .entry-title alone would
   also catch /search/ and other article.page templates, whose h1 is a UI
   label with its own size. */
article.post.type-post > .entry-header .entry-title {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 4.2vw, 42px);
    /* 1.35 is a floor, not a preference. It was measured with PT Serif, whose ascenders and descenders at
       display size overflow a tighter line box, and axe reads the overflowing
       ink as the heading being partially obscured -- it returns
       elmPartiallyObscured with contrastRatio 0 and pa11y fails the page.
       Measured on /how-to-dj-with-assistive-technology/: 1.18, 1.25 and 1.30
       all trip it; 1.35 and `normal` are clean. Do not tighten this. */
    line-height: 1.35;
    letter-spacing: -0.014em;
    text-wrap: balance;
}

/* "August 12, 2025 by Equal Entry", in sentence case (2026-10-19; it was
   13px capitals). Gray and a little smaller than body text, so the byline
   still does not compete with the title. */
article.post.type-post > .entry-header .entry-meta {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: var(--ee-dark-gray);
}

/* Post reading measure, size and spacing.

   Follows WCAG 1.4.8 (Visual Presentation): about 80 characters per line at
   most, line spacing of 1.5, and paragraph spacing 1.5 times the line spacing.
   The W3C Understanding page measures that last one from the top of a
   paragraph's last line to the top of the next paragraph's first line, which
   must be at least 250% of a single-spaced line. A 1.5em margin on 1.5 line
   spacing gives 300%.

   Until 2026-10-17 the margin was 2.25em (375%), from reading "1.5 times the
   line spacing" as the gap alone. Thomas found posts too airy between
   paragraphs and above headings next to a book layout he liked, so the gaps
   were measured against it, baseline to baseline in multiples of the text
   size: paragraph to paragraph 3.75 here against 2.9 there, paragraph to h2
   5.3 against 3.4. They are now 3.0 and about 3.6, the paragraph gap matching
   the rest of the site (style.css .entry-content p).

   --ee-post-text is the body size: 18px up to about 1280px wide, growing to
   21px by about 1920px, so posts stay comfortable on large monitors read from
   further away. --ee-post-measure is 32 times that, which keeps lines near 70
   characters of Lato at any size (Lato averages about 0.41em per character);
   text blocks are capped to it while figures, video, audio and the Summary box
   keep the full 720px column. Everything is centered with margin: 0 auto, so
   headings, paragraphs and lists share one left edge.

   Headings borrow from the W3C WAI site: bold, with clearly more space above
   than between paragraphs and a rule under each h2, so sections read as
   sections. The font is Lato throughout, as everywhere but code.

   On phones style.css (680px breakpoint) set post text to .8rem, a leftover
   of the theme's old 62.5% root size that rendered body text at 12.8px; the
   rules below override it at every width. */
article.post {
    --ee-post-text: clamp(1.125rem, 0.75rem + 0.47vw, 1.3125rem);
    --ee-post-measure: calc(var(--ee-post-text) * 32);
}

article.post .entry-content p:not(.ee_caption),
article.post .entry-content h2,
article.post .entry-content h3,
article.post .entry-content h4,
article.post .entry-content h5,
article.post .entry-content h6,
article.post .entry-content ul,
article.post .entry-content ol,
article.post .entry-content blockquote {
    max-width: var(--ee-post-measure);
    margin-left: auto;
    margin-right: auto;
}

article.post .entry-content p:not(.ee_caption),
article.post .entry-content ul,
article.post .entry-content ol,
article.post .entry-content table,
article.post .entry-content .ee-table-scroll,
article.post .entry-content .ee-summary p {
    font-size: var(--ee-post-text);
}

article.post .entry-content p:not(.ee_caption),
article.post .entry-content ul,
article.post .entry-content ol {
    line-height: 1.5;
    margin-bottom: 1.5em;
}

/* Headings get a little more space above than a paragraph break: 1.75 times
   the text size against the paragraph's 1.5, so a heading always sits
   further from the paragraph above it than paragraphs sit from each other.
   Set in text units, not the heading's own em, because style.css shrinks
   post h2s to 1.5rem on phones and an em margin shrank with it. */
article.post .entry-content h2 {
    margin-top: calc(var(--ee-post-text) * 1.75);
    padding-bottom: 0.25em;
    font-size: calc(var(--ee-post-text) * 1.5);
    font-weight: 700;
    line-height: 1.3;
    border-bottom: 1px solid var(--ee-gray);
}

article.post .entry-content h3 {
    margin-top: calc(var(--ee-post-text) * 1.75);
    font-size: calc(var(--ee-post-text) * 1.25);
    font-weight: 700;
    line-height: 1.3;
}

/* Boxes that span the column keep their own full width: the Summary box,
   captions, and table cells. */
article.post .entry-content .ee-summary h2,
article.post .entry-content .ee-summary p,
article.post .entry-content figure p,
article.post .entry-content table p {
    max-width: none;
}

/* Summary box: a compact label bar and tighter padding. The heading was
   centered and, through the section heading rule above, as large as an h2.
   The font size needs !important to beat style.css, which forces every
   .entry-content h2 to 1.5rem !important below 680px. */
article.post .entry-content .ee-summary h2 {
    padding: 0.5rem 1rem;
    font-size: 1.25rem !important;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    border-bottom: 0;
}

article.post .entry-content .ee-summary .ee-summary-content {
    padding: 0.5rem 1rem 1rem;
}

/* The summary text is set a step below the body text (about 18px against
   21px on a large screen), so the box reads as an aside to the article
   rather than its first paragraph. It never drops below 16px. */
article.post .entry-content .ee-summary .ee-summary-content p {
    padding: 0;
    font-size: max(1rem, calc(var(--ee-post-text) * 0.875));
    line-height: 1.5;
}