/* Unified hero banner -- Home, Services, Contact Us, Articles (blog index/category/
   search). Rendered by inc/page-hero.php's taxsrv_render_page_hero(), hooked to
   Kadence's kadence_hero_header action. Canonical values are Home's own pre-existing
   ones (see docs/current-state.md) -- Services/Contact/Articles previously each had
   their own drifted font-weight/letter-spacing/line-height/color, now converged here. */

.ts-page-hero {
    background-color: #0D2545;
    width: 100%;
}

.ts-page-hero-inner {
    display: flex;
    align-items: flex-start; /* not center: a shorter text column (e.g. Contact Us,
       which has no buttons) would otherwise vertically center against a taller photo
       column and visibly sit lower than the same text on a no-photo page like Services */
    justify-content: space-between;
    gap: 48px;
    max-width: 1290px;
    margin: 0 auto;
    padding: 52px 36px;
}

.ts-page-hero-content {
    max-width: 720px;
}

.ts-page-hero-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #C6A75A;
    margin: 0 0 12px;
}

.ts-page-hero-heading {
    font-size: clamp(1.75rem, 4vw + 1rem, 2.625rem); /* tops out at 42px, canonical desktop size */
    font-weight: 600; /* made explicit -- was previously left to Kadence's unstated theme default on 3 of the 4 pages */
    line-height: 1.15;
    color: #FFFFFF;
    margin: 0 0 16px;
}

.ts-page-hero-heading em {
    font-style: italic;
    color: #C6A75A;
}

.ts-page-hero-sub {
    font-size: 15px;
    line-height: 1.68;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.ts-page-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.ts-page-hero-btn {
    display: inline-block;
    font-size: 13px;
    border-radius: 4px;
    padding: 12px 22px;
    text-decoration: none;
}

.ts-page-hero-btn--primary {
    background-color: #C6A75A;
    color: #0D2545;
    font-weight: 700;
}

.ts-page-hero-btn--outline {
    background-color: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.ts-page-hero-photo {
    flex: 0 0 auto;
    text-align: center;
}

.ts-page-hero-photo img {
    width: 200px !important;
    max-width: 200px !important;
    height: auto;
}

.ts-page-hero-photo-name {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin: 4px 0 2px;
}

.ts-page-hero-photo-credentials {
    color: #C6A75A;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-align: center;
    margin: 0;
}

@media (max-width: 767px) {
    .ts-page-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 36px 20px;
    }

    .ts-page-hero-inner--with-photo .ts-page-hero-photo {
        align-self: center;
    }

    /* "View services" -> "Services": only fit side by side with "Book a free
       consultation" down to ~390px wide; below that they wrap onto separate lines.
       Real text stays as the accessible name -- data-mobile-label swaps the visible
       label via ::after, driven by inc/page-hero.php's optional button arg, so any
       future page adding a second hero button can opt into the same trick. */
    .ts-page-hero-btn {
        padding: 12px 18px !important;
    }

    .ts-page-hero-btn[data-mobile-label] {
        font-size: 0 !important;
    }

    .ts-page-hero-btn[data-mobile-label]::after {
        content: attr(data-mobile-label);
        font-size: 13px !important;
    }
}