/**
 * Hero Section Bootstrap Styles
 * 
 * Consolidated styles for hero sections using Bootstrap framework.
 */

/* Hero section styles */
.hero-section,
.hero-background {
    position: relative;
    overflow: hidden;
    padding: 4rem 0 0 0;
}

/* Background accents */
.hero-section::before,
.hero-section::after,
.hero-background::before,
.hero-background::after {
    content: '';
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.hero-section::before,
.hero-background::before {
    background-image: url('/wp-content/themes/wildapricot/assets/images/backgrounds/Swirl - Orange.svg');
    width: 300px;
    height: 300px;
    top: 0;
    right: 0;
    opacity: 0.5;
    transform: rotate(180deg);
}

.hero-section::after,
.hero-background::after {
    background-image: url('/wp-content/themes/wildapricot/assets/images/backgrounds/Swirl - Orange.svg');
    width: 250px;
    height: 250px;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    transform: rotate(45deg);
}

/* Hero card */
.hero-card,
.hero-content {
    padding: 2.5rem;
    position: relative;
    z-index: 2;
    margin-bottom: 2rem;
    border-radius: 2rem;
}

/* Hero content specific styles */
.hero-content {
    display: block !important; /* Override flex */
    flex-wrap: wrap !important; /* Override nowrap */
    overflow: hidden; /* Contain floated elements */
    margin: 0 auto 2rem auto !important;
    max-width: 1400px;
}

/* Vertical centering for content */
.hero-content .wp-block-columns {
    align-items: center !important;
}

/* Row alignment */
.hero-card .row {
    align-items: center;
}

/* Text styles */
.eyebrow {
    color: #411A50;
    display: block;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 105%;
    letter-spacing: -0.78px;
    margin-bottom: 0.5rem;
}

/* Content layout using Bootstrap grid */
.hero-content .row {
    justify-content: center;
}

.hero-content .col-content {
    width: 66.666667%;
    margin: 0 auto;
}

/* Eyebrow text */
.hero-eyebrow {
    color: #411A50;
    font-size: 26px !important;
    font-weight: 700;
    line-height: 105%;
    letter-spacing: -0.78px !important;
    margin-bottom: 8px !important;
    display: block;
}

/* Fix layout for hero content */
.hero-content h2 {
    color: #411A50;
    font-size: 60px;
    line-height: 105%;
    letter-spacing: -1.2px;
    margin-top: 0;
    margin-bottom: 1rem;
}

.hero-content p:not(.has-small-font-size) {
    color: #411A50;
    font-family: Roboto, sans-serif;
    font-size: 17.041px;
    font-style: normal;
    font-weight: 400;
    line-height: 161%;
    letter-spacing: 0.256px;
    margin-bottom: 1.5rem;
}

.hero-content .wp-block-buttons {
    margin-bottom: 1.5rem;
}

.hero-content .has-small-font-size {
    color: #666;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .hero-content .col-content {
        width: 100%;
    }
}

/* Button styles */
.hero-section .btn-primary,
.hero-content .wp-block-button__link {
    background-color: #411A50;
    border-color: #411A50;
    border-radius: 2rem;
    padding: 0.75rem 1.5rem;
}

.hero-section .btn-primary:hover {
    background-color: #5a2470;
    border-color: #5a2470;
}

.hero-content .wp-block-button__link {
    background-color: #411A50 !important;
    color: white !important;
    border-radius: 2rem !important;
    padding: 0.75rem 1.5rem !important;
    text-decoration: none !important;
}

/* Small text */
.small-text {
    color: #666;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Image positioning */
.hero-image,
.hero-content figure {
    position: relative;
    top: -20px;
}

.hero-image img,
.hero-content figure img {
    max-width: 100%;
    height: auto;
}

.hero-content figure {
    width: 45%;
    float: right;
    margin: 0;
    right: -20px;
}

/* Logo row styling */
.logo-row {
    margin-top: 0;
    text-align: center;
    padding: 2rem 0 4rem 0;
}

.logo-row h3 {
    color: #411A50;
    margin-bottom: 1.5rem;
}

.logo-row img {
    max-height: 60px;
    width: auto;
    margin: 0 1rem;
}

.logo-row .wp-block-columns {
    justify-content: center;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section,
    .hero-background {
        padding: 2rem 0 0 0;
    }
    
    .hero-card,
    .hero-content {
        padding: 1.5rem;
    }
    
    .hero-image,
    .hero-content figure {
        margin-top: 2rem;
        top: 0;
    }
    
    .hero-section::before,
    .hero-section::after,
    .hero-background::before,
    .hero-background::after {
        width: 150px;
        height: 150px;
    }
    
    .hero-content h2,
    .hero-content p,
    .hero-content .wp-block-buttons,
    .hero-content .has-small-font-size,
    .hero-content figure {
        width: 100%;
        max-width: 100%;
        float: none;
    }
    
    .hero-content figure {
        margin: 1.5rem 0 0 0;
        top: 0;
        right: 0;
    }
}

/* Fix for the nested hero-background issue */
.hero-background .hero-background {
    background: transparent !important;
    padding: 0;
}

.hero-background .hero-background::before,
.hero-background .hero-background::after {
    display: none;
}

/* Container styles */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Override WordPress default styles */
.wp-block-group__inner-container {
    max-width: none !important;
}

/* Stylized Text styles */
.hero-stylized-text {
    font-size: 80%;
    margin-top: .5rem;
}