/* Custom CSS for light text on homepage banner */

/*
 * Page hero (colored band with section title): theme uses large vertical padding.
 * Halve header padding and the matching .inner top padding so list/single pages
 * (Services, Blog, etc.) use less vertical space above and below the headline.
 *
 * Match hero block width to .inner (same as body column), so the accent bar
 * does not span edge-to-edge while the article sits in a centered column.
 */
#wrapper > .main > header {
    width: 68rem;
    max-width: calc(100% - 6rem);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    /* Horizontal inset matches .inner > .content so title lines up with body text */
    padding: 3rem 3rem 2rem 3rem;
}

/* Theme caps header copy at 42.5rem; use full width inside the column for fewer wraps */
#wrapper > .main > header > * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#wrapper > .main > header > :last-child {
    margin-bottom: 1rem;
}

#wrapper > .main > header.accent1 + .inner,
#wrapper > .main > header.accent2 + .inner {
    padding-top: 3rem;
}

@media screen and (max-width: 1280px) {
    #wrapper > .main > header {
        max-width: calc(100% - 4rem);
        padding: 2rem 2rem 1rem 2rem;
    }

    #wrapper > .main > header.accent1 + .inner,
    #wrapper > .main > header.accent2 + .inner {
        padding-top: 2rem;
    }
}

@media screen and (max-width: 736px) {
    #wrapper > .main > header {
        max-width: calc(100% - 3rem);
        padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    }

    #wrapper > .main > header.accent1 + .inner,
    #wrapper > .main > header.accent2 + .inner {
        padding-top: 1.5rem;
    }
}

/* Light text class for banner header */
.light-text h1,
.light-text h2,
.light-text h3,
.light-text h4,
.light-text h5,
.light-text h6,
.light-text p {
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-shadow: 0 0 2px rgba(0, 0, 0, 1),
                 0 0 8px rgba(0, 0, 0, 0.9),
                 0 2px 4px rgba(0, 0, 0, 0.8),
                 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Single-column layout for blog listing (/blog) */
.posts.posts-single-column {
    display: block !important;
}

.posts.posts-single-column > * {
    width: 100% !important;
    padding: 0.75rem 0 !important;
}

.posts.posts-single-column > article {
    margin-bottom: 0.75rem !important;
}

.posts.posts-single-column > *:first-child {
    padding-top: 0 !important;
}

.posts.posts-single-column > *:last-child {
    padding-bottom: 0 !important;
}


/* Larger, centered icon for tabs spotlight (Architecture tab) */
.spotlight > .icon.major {
    text-align: center;
    margin: 0 4rem;
}

.spotlight > .icon.major:before {
    width: 11rem;
    height: 11rem;
    line-height: 11rem;
    font-size: 3.75rem;
}

@media screen and (max-width: 980px) {
    .spotlight > .icon.major {
        margin: 0 0 3rem 0;
    }

    .spotlight > .icon.major:before {
        width: 9rem;
        height: 9rem;
        line-height: 9rem;
        font-size: 3.25rem;
    }
}

@media screen and (max-width: 736px) {
    .spotlight > .icon.major {
        margin: 0 0 2rem 0;
    }

    .spotlight > .icon.major:before {
        width: 7rem;
        height: 7rem;
        line-height: 7rem;
        font-size: 2.5rem;
    }
}

/* Increase mobile font size */
@media screen and (max-width: 736px) {
    html {
        font-size: 13pt !important;
    }
}

@media screen and (max-width: 360px) {
    html {
        font-size: 12pt !important;
    }
}

/* Improve testimonial readability - remove italics and increase font size */
.spotlight blockquote {
    font-style: normal !important;
    font-size: 1.1rem !important;
}

.spotlight blockquote p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
}

/* Stack testimonial image and text vertically on mobile for better readability */
@media screen and (max-width: 736px) {
    /* Make spotlight container stack vertically */
    .spotlight {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Make image take full width and center it */
    .spotlight > .image {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }
    
    /* Make blockquote take full width */
    .spotlight blockquote {
        flex: none !important;
        width: 100% !important;
        font-size: 1rem !important;
        margin: 0 !important;
    }
    
    .spotlight blockquote p {
        font-size: 1rem !important;
    }
}

@media screen and (max-width: 360px) {
    .spotlight blockquote {
        font-size: 0.95rem !important;
    }
    
    .spotlight blockquote p {
        font-size: 0.95rem !important;
    }
}

/* Services index: three overview cards under intro */
.service-overview-cards {
    margin-top: 2.5rem;
    align-items: stretch;
}

.service-overview-cards > .col-4 {
    display: flex;
}

.service-overview-cards .box.service-overview-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
    padding: 1.75rem 1.5rem;
    border-radius: 0.65rem;
    border-color: rgba(0, 0, 0, 0.08);
    background: #ffffff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.service-overview-cards .box.service-overview-card:hover {
    border-color: rgba(35, 177, 236, 0.4);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .service-overview-cards .box.service-overview-card:hover {
        transform: none;
    }
}

/*
 * Service overview cards: icon + title on row 1; body spans full card width on row 2
 * so copy uses the area under the icon (display:contents; one h3 + one p per overview).
 */
.service-overview-card-inner {
    display: grid;
    grid-template-columns: 3.35rem 1fr;
    column-gap: 1rem;
    row-gap: 0.65rem;
    align-items: start;
    flex: 1;
}

.service-overview-card-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
}

.service-overview-card-body {
    display: contents;
}

.service-overview-card-body h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: center;
    font-size: 1.05rem;
    line-height: 1.35;
}

.service-overview-card-body h3 a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.service-overview-card-body h3 a:hover {
    color: #23b1ec;
    border-bottom-color: rgba(35, 177, 236, 0.45);
}

.service-overview-card-body p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.62);
}

.service-overview-card-body p:last-child {
    margin-bottom: 0;
}

.service-overview-card-icon .icon.major {
    display: block;
    margin: 0;
}

.service-overview-card-icon .icon.major:before {
    width: 3.25rem;
    height: 3.25rem;
    line-height: 3.25rem;
    font-size: 1.3rem;
    margin: 0;
    box-shadow: inset 0 0 0 2px rgba(35, 177, 236, 0.85);
}

@media screen and (max-width: 736px) {
    .service-overview-card-inner {
        grid-template-columns: 3rem 1fr;
        column-gap: 0.85rem;
    }

    .service-overview-card-icon .icon.major:before {
        width: 3rem;
        height: 3rem;
        line-height: 3rem;
        font-size: 1.2rem;
    }
}