/*
 * Bear Hair Dev Consulting — Homepage-Specific Overrides
 *
 * PURPOSE: Styles that ONLY apply to the homepage (front page).
 * Global styles (header, footer, typography, colors) are in bhd-global.css.
 */


/* ================================================================
   1. HERO SECTION (first main section)
   ================================================================ */

.wp-block-post-content > .wp-block-group:first-child {
    background: var(--bhd-deep) !important;
    position: relative !important;
    padding-top: 140px !important;
    padding-bottom: 100px !important;
    text-align: center !important;
}

/* Subtle radial glow */
.wp-block-post-content > .wp-block-group:first-child::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(ellipse at 50% 40%, rgba(232, 145, 58, 0.04) 0%, transparent 60%) !important;
    pointer-events: none !important;
}

/* Hero eyebrow text - "WEB AGENCY OWNERS..." */
.wp-block-post-content > .wp-block-group:first-child p.has-background-color,
.wp-block-post-content > .wp-block-group:first-child p.has-small-caps-font-size,
.wp-block-post-content > .wp-block-group:first-child .is-style-eyebrow {
    color: var(--bhd-accent) !important;
    font-family: var(--bhd-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
}

/* Hero subtitle */
.wp-block-post-content > .wp-block-group:first-child p.has-heading-3-font-size {
    color: var(--bhd-light) !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    border-left: none !important;
    padding-left: 0 !important;
}


/* ================================================================
   2. TYPOGRAPHY — Homepage-specific
   ================================================================ */

/* Larger body text (has-heading-3-font-size used for questions etc.) */
main p.has-heading-3-font-size {
    font-family: var(--bhd-font-display) !important;
    font-size: clamp(18px, 2.5vw, 22px) !important;
    color: var(--bhd-light) !important;
    line-height: 1.5 !important;
}

/* The big statement "It's not your people. It's your systems." */
main p.has-heading-2-font-size {
    font-family: var(--bhd-font-display) !important;
    font-size: clamp(24px, 3vw, 32px) !important;
    color: var(--bhd-white) !important;
    line-height: 1.3 !important;
}

/* Eyebrow / small caps text (e.g., "WEB AGENCY OWNERS...") */
main .is-style-eyebrow,
main p:has(+ h1),
main p:first-child:not(.has-heading-3-font-size):not(.has-heading-2-font-size):not(.has-body-font-size) {
    font-family: var(--bhd-font-body) !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
}


/* ================================================================
   3. COMPARISON COLUMNS ("Chaotic Scrambling" / "Smooth Scaling")
   ================================================================ */

main .has-white-skies-background-color .wp-block-columns {
    gap: 24px !important;
}

main .has-white-skies-background-color .wp-block-column.has-background {
    background: var(--bhd-card-bg) !important;
    border: 1px solid var(--bhd-border) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

main .has-white-skies-background-color .wp-block-column.has-background:hover {
    border-color: var(--bhd-border-hover) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* "Chaotic Scrambling" heading - red tint */
main .has-white-skies-background-color .wp-block-column:first-child h3.wp-block-heading {
    color: var(--bhd-red-light) !important;
}

/* "Smooth Scaling" heading - green tint */
main .has-white-skies-background-color .wp-block-column:last-child h3.wp-block-heading {
    color: var(--bhd-green-light) !important;
}

main .has-white-skies-background-color .wp-block-column p {
    color: var(--bhd-light) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* ================================================================
   4. "DOES ANY OF THIS SOUND FAMILIAR?" CARD
   ================================================================ */

main .has-gray-50-background-color.has-background {
    background: var(--bhd-card-bg) !important;
    border: 1px solid rgba(107, 163, 190, 0.15) !important;
    border-radius: 16px !important;
    padding: 40px !important;
}

main .has-gray-50-background-color h3.wp-block-heading {
    color: var(--bhd-accent-bright) !important;
    font-size: 22px !important;
}

main .has-gray-50-background-color p.has-body-font-size {
    color: var(--bhd-light) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* ================================================================
   5. QUESTIONS SECTION ("you've been wondering")
   ================================================================ */

main p.has-text-align-left.has-heading-3-font-size {
    font-family: var(--bhd-font-display) !important;
    color: var(--bhd-light) !important;
    padding-left: 20px !important;
    border-left: 3px solid var(--bhd-accent) !important;
}


/* ================================================================
   6. HOW IT WORKS STEPS
   ================================================================ */

main .is-layout-flex.wp-block-group-is-layout-flex > .wp-block-group.is-layout-constrained {
    background: var(--bhd-card-bg) !important;
    border: 1px solid var(--bhd-border) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

main .is-layout-flex.wp-block-group-is-layout-flex > .wp-block-group.is-layout-constrained:hover {
    border-color: var(--bhd-border-hover) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* "STEP ONE", "STEP TWO", "STEP THREE" labels */
main .is-layout-flex .wp-block-group p:has(strong) {
    color: var(--bhd-accent) !important;
    font-family: var(--bhd-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
}

main .is-layout-flex .wp-block-group p strong {
    color: var(--bhd-accent) !important;
}


/* ================================================================
   7. PRICING CARDS
   ================================================================ */

main .has-white-skies-background-color .wp-block-group[style*="background-color:#ffffff8f"],
main .has-white-skies-background-color .wp-block-group[style*="background-color: #ffffff8f"] {
    background: var(--bhd-card-bg) !important;
    border: 1px solid var(--bhd-border) !important;
    border-radius: 16px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

main .has-white-skies-background-color .wp-block-group[style*="background-color:#ffffff8f"]:hover,
main .has-white-skies-background-color .wp-block-group[style*="background-color: #ffffff8f"]:hover {
    border-color: var(--bhd-border-hover) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Pricing tier labels */
main .has-heading-4-font-size {
    font-family: var(--bhd-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--bhd-accent) !important;
}

/* Pricing amounts */
main p.has-heading-3-font-size:has(strong) {
    font-family: var(--bhd-font-display) !important;
    font-size: clamp(28px, 4vw, 36px) !important;
    color: var(--bhd-white) !important;
}

main p.has-heading-3-font-size strong {
    color: var(--bhd-white) !important;
    font-weight: 400 !important;
}

/* Pricing feature checkmarks */
main .wp-block-list li {
    color: var(--bhd-light) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

main .wp-block-list li strong {
    color: var(--bhd-white) !important;
}

main .has-white-skies-background-color p[style*="margin-top"] {
    color: var(--bhd-light) !important;
}


/* ================================================================
   8. FINAL CTA CARD ("INTERESTED?")
   ================================================================ */

main .has-forest-green-background-color.has-white-color {
    background: var(--bhd-card-bg) !important;
    border: 1px solid rgba(232, 145, 58, 0.2) !important;
    border-radius: 20px !important;
    padding: 48px 40px !important;
}

main .has-forest-green-background-color.has-white-color .has-heading-4-font-size {
    color: var(--bhd-accent) !important;
}

main .has-forest-green-background-color.has-white-color h2 {
    color: var(--bhd-white) !important;
}

main .has-forest-green-background-color.has-white-color .has-heading-3-font-size {
    color: var(--bhd-light) !important;
}

main .has-forest-green-background-color.has-white-color em {
    color: var(--bhd-accent-bright) !important;
}


/* ================================================================
   9. SECTION SPACING & LAYOUT
   ================================================================ */

/* All homepage sections: match source spacing (80px top / 100px bottom) */
.wp-block-post-content > .wp-block-group:nth-child(n+2) {
    padding-top: 80px !important;
    padding-bottom: 100px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Constrain inner content width to match source */
.wp-block-post-content > .wp-block-group > .wp-block-group,
.wp-block-post-content > .wp-block-group > .wp-block-columns,
.wp-block-post-content > .wp-block-group > h2,
.wp-block-post-content > .wp-block-group > p,
.wp-block-post-content > .wp-block-group > .wp-block-buttons {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hero content constrain */
.wp-block-post-content > .wp-block-group:first-child {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.wp-block-post-content > .wp-block-group:first-child > .wp-block-group,
.wp-block-post-content > .wp-block-group:first-child > h1,
.wp-block-post-content > .wp-block-group:first-child > p,
.wp-block-post-content > .wp-block-group:first-child > .wp-block-buttons {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ================================================================
   10. SCROLL ANIMATIONS
   ================================================================ */

@keyframes bhdFadeUp {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- Hero staggered fade-up on page load --- */
.wp-block-post-content > .wp-block-group:first-child > .wp-block-group,
.wp-block-post-content > .wp-block-group:first-child > h1,
.wp-block-post-content > .wp-block-group:first-child > p,
.wp-block-post-content > .wp-block-group:first-child > .wp-block-buttons {
    opacity: 0;
    animation: bhdFadeUp 0.6s ease forwards !important;
}
/* Eyebrow */
.wp-block-post-content > .wp-block-group:first-child > .wp-block-group { animation-delay: 0s !important; }
/* H1 */
.wp-block-post-content > .wp-block-group:first-child > h1 { animation-delay: 0.2s !important; }
/* Subtitle */
.wp-block-post-content > .wp-block-group:first-child > p { animation-delay: 0.4s !important; }
/* Button */
.wp-block-post-content > .wp-block-group:first-child > .wp-block-buttons { animation-delay: 0.6s !important; }

/* --- Scroll-triggered sections start invisible, JS handles reveal --- */
.wp-block-post-content > .wp-block-group:nth-child(n+2) {
    opacity: 0;
    transform: translateY(16px);
}
.wp-block-post-content > .wp-block-group:nth-child(n+2).bhd-visible {
    animation: bhdFadeUp 0.6s ease forwards !important;
}


/* ================================================================
   11. SUBTLE SECTION GRADIENT ACCENTS
   ================================================================ */

.wp-block-post-content > .wp-block-group:nth-child(2),
.wp-block-post-content > .wp-block-group:nth-child(4) {
    background: linear-gradient(transparent 0%, rgba(232, 145, 58, 0.03) 50%, transparent 100%) !important;
}

/* Section dividers — none */
.wp-block-post-content > .wp-block-group + .wp-block-group {
    border-top: none !important;
}