/**
 * Hero Element Styles
 *
 * Centered hero section with headline and text content (no image)

 *
 * @package CustomVCElements
 * @since 1.0.0
 */

/* 
   HERO - Main Container
   */

.cvc-hero {
    position: relative;
    width: 100%;
    padding: var(--oku-spacing-xxl) 0;
    overflow: visible !important;
    min-height: 400px; /* Ensure enough space for patterns */
    display: flex;
    align-items: center; /* Vertically center the container */
}

/* 
   PATTERNS - Background Decorative Elements
   */

.cvc-hero__pattern {
    position: absolute !important;
    pointer-events: none;
    opacity: 1.0;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    z-index: 1; /* Under content */
}

.cvc-hero__pattern--left {
    top: 0 !important;
    left: 0 !important;
    width: var(--oku-pattern-hero-no-image-left-width) !important;
    height: var(--oku-pattern-hero-no-image-left-height) !important;
    background-image: var(--oku-pattern-hero-no-image-left) !important;
    background-position: left top !important;
}

.cvc-hero__pattern--right {
    top: 0 !important;
    right: 0 !important;
    width: var(--oku-pattern-hero-no-image-right-width) !important;
    height: var(--oku-pattern-hero-no-image-right-height) !important;
    background-image: var(--oku-pattern-hero-no-image-right) !important;
    background-position: right top !important;
}

/* 
   CONTAINER - Centered Content
   */

.cvc-hero__container {
    max-width: var(--oku-container-width);
    margin: 0 auto;
    padding: 0 var(--oku-spacing-xl);
    position: relative;
    z-index: 2; /* Above patterns */
}

.cvc-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center !important;
    gap: var(--oku-spacing-lg);
    max-width: 960px; /* Limit content width for better readability */
    margin: 0 auto;
}

/* 
   TYPOGRAPHY
   */

.cvc-hero__headline {
    color: var(--oku-color-black);
    line-height: 1.3;
    margin: 0;
    text-align: center !important;
    width: 100%;
}

.cvc-hero__headline.font-714446 {
    font-weight: 300;
}

.cvc-hero__text {
    color: var(--oku-color-black);
    line-height: 1.6;
    margin: 0;
    text-align: center !important;
    width: 100%;
}

/* TinyMCE paragraph formatting support */
.cvc-hero__text p {
    margin: 0 0 var(--oku-spacing-sm) 0;
}

.cvc-hero__text p:last-child {
    margin-bottom: 0;
}

.cvc-hero__text.text-lead {
    font-size: var(--oku-font-size-lg);
}

/* 
   BUTTON - Uses global Okuvision button system
   */

.cvc-hero__button {
    margin-top: var(--oku-spacing-md);
}

/* 
   RESPONSIVE - Tablet
   */

@media (max-width: 959px) {
    .cvc-hero {
        padding: var(--oku-spacing-xl) 0;
    }
    
    .cvc-hero__container {
        padding: 0 var(--oku-spacing-lg);
    }
    
    .cvc-hero__content {
        gap: var(--oku-spacing-md);
        max-width: 100%;
    }
}

/* 
   RESPONSIVE - Mobile
   */

@media (max-width: 569px) {
    .cvc-hero {
        padding: var(--oku-spacing-lg) 0;
    }
    
    .cvc-hero__container {
        padding: 0 var(--oku-spacing-md);
    }
    
    .cvc-hero__content {
        gap: var(--oku-spacing-sm);
    }
    
    .cvc-hero__headline {
        font-size: calc(var(--oku-font-size-xl) * 0.9);
    }
    
    .cvc-hero__button {
        margin-top: var(--oku-spacing-sm);
    }
}

/* 
   COLOR SCHEMES
   */

/* Color schemes are handled by global button classes */
/* .cvc-hero--orange and .cvc-hero--violet modifiers are available but not actively styled */

/* 
   UNCODE THEME INTEGRATION - Dark Background Support
   */

/* When placed in Uncode's dark section (.style-dark parent) */
.style-dark .cvc-hero__headline {
    color: var(--oku-color-orange);
}

.style-dark .cvc-hero__text {
    color: var(--oku-color-white);
}

/* Buttons maintain their default styling (already handled by global .oku-button) */

/* 
   ACCESSIBILITY
   */

/* Focus styles are inherited from global button system */
.cvc-hero [role="region"]:focus {
    outline: none; /* Remove outline from section, focus should be on interactive elements */
}