/*
 * About Hero Align v1.7
 * This stylesheet forces the first block of content on the About page (ID 186) to
 * use a columnar layout. It aims to stack the headline and introduction
 * vertically and align them to the left, regardless of how the theme’s hero
 * section is structured. These rules use high specificity and !important
 * declarations to override theme styles. If the hero is implemented as a
 * wp-block-columns element, the columns will now stack on top of each other.
 */

/* Stack columns (if present) in the first block of content */
body.page-id-186 .entry-content > *:first-child {
    /* Make sure the container uses flexbox for vertical stacking */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Ensure each column spans full width */
body.page-id-186 .entry-content > *:first-child > * {
    width: 100% !important;
    max-width: 100% !important;
}

/* Align the headline to the top‑left and add spacing below */
body.page-id-186 .entry-content > *:first-child h1,
body.page-id-186 .entry-content > *:first-child h2,
body.page-id-186 .entry-content > *:first-child h3 {
    align-self: flex-start !important;
    margin-bottom: 1rem !important;
    font-size: clamp(2rem, 5vw, 3rem) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

/* Remove left margin on the intro paragraph to align with body paragraphs */
body.page-id-186 .entry-content > *:first-child p {
    margin-left: 0 !important;
    padding-left: 0 !important;
    font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important;
    line-height: 1.6 !important;
}