/*
 * Styles for stacking the hero columns on the About page. This targets the WP
 * columns block inside the hero of the About page and forces the columns to
 * stack vertically. Font sizes are increased for readability and the
 * introduction paragraph aligns with the main text.
 */

/* Ensure this only applies when our body class is present */
.two-about-align-columns .wp-block-columns {
    flex-wrap: nowrap;
    flex-direction: column !important;
}

.two-about-align-columns .wp-block-columns > .wp-block-column {
    width: 100% !important;
    margin-bottom: 1rem;
}

/* Headline: bigger and bolder */
.two-about-align-columns h1,
.two-about-align-columns .wp-block-heading {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.2;
    font-weight: 700;
    margin-top: 0;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Introduction paragraph inside hero: align left with content below */
.two-about-align-columns .wp-block-columns p {
    margin-left: 0;
    font-size: 1.2rem;
    line-height: 1.7;
    color: #e5e5e5;
    max-width: 650px;
}

/* Increase body paragraphs below hero on About page */
.two-about-align-columns .entry-content p {
    font-size: 1.1rem;
    line-height: 1.7;
}