/*
 Theme Name:   Astra Child
 Theme URI:    https://elixirelle.com
 Description:  Child theme for Astra - Elixirelle Perfume Store
 Author:       Elixirelle
 Template:     astra
 Version:      1.0.0
*/
/* Hero content container - vertical center, left aligned */
.hero-content-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-height: 90vh !important;
    padding: 40px 20px 40px 60px !important;
}

/* Heading style */
.hero-content-box h1,
.hero-content-box h2,
.hero-content-box h3,
.hero-content-box .wp-block-heading {
    text-align: left !important;
    font-size: 56px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    color: #1a1a1a !important;
    margin-bottom: 24px !important;
}

/* Button style - covers all common Spectra/Gutenberg button markups */
.hero-content-box .wp-block-button__link,
.hero-content-box .wp-block-button a,
.hero-content-box .wp-block-buttons a,
.hero-content-box a.uagb-buttons-repeater,
.hero-content-box .uagb-button__link,
.hero-content-box a[class*="button"],
.hero-content-box .wp-element-button {
    background-color: #0A1F44 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    padding: 14px 28px !important;
    border-radius: 2px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.hero-content-box .wp-block-button__link:hover,
.hero-content-box .wp-block-button a:hover,
.hero-content-box .wp-block-buttons a:hover,
.hero-content-box a.uagb-buttons-repeater:hover,
.hero-content-box .uagb-button__link:hover,
.hero-content-box a[class*="button"]:hover,
.hero-content-box .wp-element-button:hover {
    background-color: #14294f !important;
    color: #ffffff !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hero-content-box {
        min-height: 400px !important;
        padding: 20px !important;
        align-items: center !important;
        text-align: center !important;
    }
    .hero-content-box h1,
    .hero-content-box h2,
    .hero-content-box h3,
    .hero-content-box .wp-block-heading {
        font-size: 32px !important;
        text-align: center !important;
    }
}