/*
    fake-headings.css

    Visual stand-ins for h2/h3/h4/h5 so we can swap real heading tags for <p>
    elements without changing how the page looks. Each .fake-h* class is a
    flattened copy of every rule that currently targets the corresponding
    bare tag inside the loaded stylesheets (base.css, article-title.css,
    article-opening.css). Responsive font-size is inherited from the
    --var-font-size-h* custom properties defined in _root.css.
*/


.fake-h1,
.fake-h2,
.fake-h3,
.fake-h4,
.fake-h5,
.fake-h6 {
    font-weight: 400;
    font-family: 'Poppins', Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.4;
}

.fake-h1 span,
.fake-h2 span,
.fake-h3 span,
.fake-h4 span,
.fake-h5 span,
.fake-h6 span {
    display: block;
}


@media (min-width: 992px) {
    .fake-h1 i,
    .fake-h2 i,
    .fake-h3 i,
    .fake-h4 i,
    .fake-h5 i,
    .fake-h6 i {
        display: block;
        content: "\A";
        white-space: pre;
    }

}


/* ---------- .fake-h1 ---------- */

.fake-h1 {
    -webkit-text-stroke: 4px currentColor;
    font-size: var(--var-font-size-h1);
    letter-spacing: -7px;
    text-align: center;
    color: #ccc;
}



/* ---------- .fake-h2 ---------- */

.fake-h2 {
    /* from base.css h2 stroke override (wins over the universal 2px) */
    -webkit-text-stroke: 0.75px currentColor;
    /* from base.css h2 colour + size + margin */
    color: var(--var-font-color-h2);
    font-size: var(--var-font-size-p, 10px);
    margin-bottom: var(--var-font-m-b-article-title, 1.5em);
    /* from article-title.css h2/.article-title block */
    text-transform: uppercase;
    letter-spacing: 0px;
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto;
    width: 91.6666666667%;
}



/* ---------- .fake-h3 ---------- */

.fake-h3 {
    /* universal h1..h6 block */
    line-height: 1.25; /* article-opening.css h3 overrides 1.4 -> 1.25 */
    -webkit-text-stroke: 2px currentColor;
    /* from base.css h3 */
    color: var(--var-font-color-h3);
    /* from article-opening.css h3 (font-size + margin) */
    font-size: var(--var-font-size-h3, 10px);
    margin-bottom: var(--var-font-m-b-article-opening-big, 1.5em);
}



@media (max-width: 767.98px) {
    .fake-h3 {
        letter-spacing: normal;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .fake-h3 {
        letter-spacing: -0.5px;
    }
}

@media (min-width: 1200px) {
    .fake-h3 {
        letter-spacing: -1px;
    }
}




/* ---------- .fake-h4 ---------- */

.fake-h4 {
    /* from base.css h4 stroke override */
    -webkit-text-stroke: 0.75px currentColor;
    /* from base.css h4 letter-spacing + colour + size */
    letter-spacing: -0.5px;
    color: var(--var-font-color-h4);
    font-size: var(--var-font-size-h4);
    /* from article-opening.css h4 margin */
    margin-bottom: var(--var-font-m-b-article-opening-small, 1.5em);
}



@media screen and (max-width: 575px) {
    .fake-h4 {
        letter-spacing: -1px;
    }
}


/* ---------- .fake-h5 ---------- */
/* Moved verbatim from the inline <style> block in index.html. */

.fake-h5 {
    font-size: var(--var-font-size-p);
    color: #767676;

    -webkit-text-stroke: 1px currentColor;
}

.top-margin-to-align-with-square-photo .fake-h5 {
    margin-bottom: 1.1rem;
}

/* below the Bootstrap lg breakpoint (992px): underline */
@media (max-width: 991.98px) {
    .fake-h5 {
        text-decoration: underline;
    }
}

/* below the Bootstrap md breakpoint (768px): halved bottom margin */
@media (max-width: 767.98px) {
    .fake-h5 {
        margin-bottom: 0.5rem;
    }
    .top-margin-to-align-with-square-photo .fake-h5 {
        margin-bottom: 0.55rem;
    }
    /* strip bottom margin/padding from whichever element wraps a fake-h5 */
    *:has(> .fake-h5) {
        margin-bottom: 0;
        padding-bottom: 0;
    }
}