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

.entry-content .ee-summary .ee-summary-content {
    flex-grow: 2;
    max-width: 70%;
    margin: 16px auto;
}

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