/* for table of content css look for /wp-content/themes/EqualEntry/styles/ee_toc.css */

/* 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;
}


/* comment section */

#reply-title {
    color: var(--ee-blue) !important;
    margin-top: 0 !important;
}

#comments > #respond #reply-title {
    background-image: url('/wp-content/themes/EqualEntry/images/services/xr-services/knomo-ee-hat.png');
    background-repeat: no-repeat;
    font-size: 2rem;
    background-size: 40%;
    min-height: calc(50vw + 1rem);
    background-position-y: bottom;
    background-position-x: center;
}

.post-template-default.single-post #reply-title small {
    display: block;
}

.post-template-default.single-post #reply-respond {
    background: var(--bg-light-gray);
}

.post-template-default.single-post #comment,
.post-template-default.single-post #author,
.post-template-default.single-post #email {
    border: none;
    border-radius: 10px;
}

.post-template-default.single-post #comment {
    height: 130px;
}


#comments #respond {
    background: var(--bg-light-gray);
    padding: 20px;
    box-shadow: 0 100vw 0 100vw var(--bg-light-gray);
}

#comments #respond label {
    color: var(--ee-blue);
    font-size: 1rem;
    font-weight: 800;
    margin-top: 1rem;
}

#comments #respond p.form-submit {
    margin-top: 1rem;
}

#comments #respond .form-submit #submit {
    border-radius: 100px;
    color: white;
    padding: 0.7rem 1rem;
    min-width: 200px;
    margin: 8px;
    font-family: 'Lato', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    background: var(--highlight-blue);
    box-shadow: 0 0 0 4px var(--highlight-blue), 0 0 0 8px var(--highlight-blue);
    transition: box-shadow .3s;
}

#comments #respond .form-submit #submit:hover,
#comments #respond .form-submit #submit:focus {
    box-shadow: 0 0 0 4px white, 0 0 0 8px var(--highlight-blue);
    transition: box-shadow .3s;
}

.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;
}


/* comment section end */

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

@media screen and (min-width: 720px) {
    #comments > #respond #reply-title {
        min-height: 340px;
    }
}

@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;
    }   


    #comments > #respond #reply-title {
        font-size: 3rem;
        /* padding-right: 2rem; */
    }

    #reply-title {
        background-size: 100% !important;
    }

    #respond .wp-social-login-provider-list {
        padding: 0 !important;
    }

    #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;
    }

    .comments-area {
        max-width: unset !important;
    }

    #main:has(#toc-wrap) #comments {
        margin: 0 auto;
        /* padding-left: 240px; */
        max-width: 720px;
    }

    #main:has(#toc-wrap) #comments .comment-list,
    #main:has(#toc-wrap) #comments .comments-title {
        max-width: calc(720px + 240px);
        padding-left: 240px;
        margin-left: auto;
        margin-right: auto;
    }

    #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;
    }

    #respond {
        margin: 0 auto;
    }

    #comments > #respond {
        display: grid;
        grid-template-columns: 240px 720px;
        padding: 40px 80px !important;
        width: 1280px;
        gap: 80px;
    }

    #comments > #respond #reply-title {
        height: 470px !important;
        background-size: 50%;
    }

    .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;
    }

    #comments {
        padding: 0 !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;
    }
}

@media screen and (max-width: 420px) { 
    #comments > #respond #reply-title {
        font-size: 1.5rem;
    }
}


/* 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: PTSerif, sans-serif;
    font-size: 1.8rem;
    line-height: 1.3em;
    color: #000;
}

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

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

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

    .author-bio p {
        font-size: 1rem;
    }
}


/* 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 ------------------------------------------------------
   Set in the brand serif so a post reads as a paper rather than a UI screen,
   matching the archive cards it was reached from.

   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
   and should stay in Lato.

   Weight is 700 rather than Lato's 900: a serif at display size carries the
   same authority with less mass, and 900 is not one of the PT Serif weights
   loaded in fonts.css, so asking for it would synthesise a fake bold. */
article.post.type-post > .entry-header .entry-title {
    font-family: 'PT Serif', Georgia, serif;
    font-weight: 700;
    font-size: clamp(30px, 4.2vw, 42px);
    /* 1.35 is a floor, not a preference. PT Serif's 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;
}

/* The byline sits under a serif title now; caption-cased meta keeps it from
   competing with the title's baseline. */
article.post.type-post > .entry-header .entry-meta {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ee-dark-gray);
}