/* ===================================
   HERO SECTION BLOCK STYLES
   =================================== */

.wp-block-acf-atax-hero-section {
    z-index: 5;
    position: relative;
}   

/* WordPress Block Wrapper - Layer 1 (handles WordPress integration) */
.wp-block-acf-atax-hero-section .hero-section {
    width: 100%;
    max-width: 100vw;
}

/* Main Section Container - Layer 2 (handles design constraints) */
.hero-section {
    background-color: var(--white);
    width: 100%;
    position: relative;
    padding: 0px 20px 0px 20px; /* Desktop: top 80px, sides 20px, bottom 0px */
}

/* Content Container - Layer 3 (handles width constraints) */
.hero-container {
    max-width: 1200px; /* Desktop container width */
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 80px; 
    padding: 0;
    justify-content: space-between;
}

.hero-business-box.hero-business-box-overlap {
    max-width: 460px;
}

/* Hero Column Layout */
.hero-content-left {
    flex: 1;
    padding-top: 64px;
}

.hero-image-right {
    width: 561px; /* Fixed width instead of CSS variable */
    height: 602px; /* Fixed height instead of CSS variable */
    flex-shrink: 0;
}

/* Mobile/Tablet Image - Hidden on Desktop */
.hero-image-mobile {
    display: none;
    margin-bottom: 30px;
}

.hero-image-mobile .hero-collage-image {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.hero-image-mobile .hero-collage-image img {
    width: 100%;
    height: auto;
    border-radius: 160px 0 160px 0;
    object-fit: cover;
}

/* Hero Typography */
.hero-h1 {
    font-size: 48px; /* Desktop default - main title */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 42px;
    color: var(--primary-color, #354477);
    margin-top: 0;
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word; /* Prevent long words from overflowing */
    hyphens: auto; /* Enable automatic hyphenation */
}

.hero-body-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 30px;
    color: var(--primary-color, #354477);
    margin-top: 0;
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word; /* Prevent long words from overflowing */
}

.hero-body-text p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 16px 0;
    color: var(--primary-color, #354477);
    font-family: 'Montserrat', sans-serif;
}

.hero-body-text p:last-child {
    margin-bottom: 0;
}

.hero-body-text * {
    font-family: 'Montserrat', sans-serif !important;
}

/* City Name Styling */
.city-name {
    color: var(--accent-color, #10A1DC);
    position: relative;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
}


/* Business Info Box */
.hero-business-box {
    border: 1px solid var(--accent-color, #10A1DC);
    border-radius: 0px 0px 120px 0px;
    background: var(--white, #ffffff);
    position: relative;
    padding: 30px;
    margin-top: 30px;
}

/* Overlap functionality - keeps business box overlapping next section */
.hero-business-box-overlap {
    margin-bottom: -80px;
}

/* Business Box Content */
.hero-service-area {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color, #354477);
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    margin-top: 0;
}

.hero-hours {
    font-size: 16px;
    color: var(--primary-color, #354477);
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
    margin-top: 0;
}

.hero-hours .open-today {
    color: var(--accent-color, #10A1DC);
    font-weight: 600;
}

/* Business Hours Status Indicators */
.open-status {
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.open-status.open {
    background-color: #d4edda;
    color: #155724;
}

.open-status.closed {
    background-color: #f8d7da;
    color: #721c24;
}

/* Language Pills */
.hero-language-pills {
    line-height: 1;
    font-size: 0;
    margin-bottom: 25px;
    margin-top: 0;
}

.hero-language-pill {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    line-height: 1;
    vertical-align: top;
}

/* First pill - accent color (blue) */
.hero-language-pill-first {
    background: var(--accent-color, #10A1DC);
    color: var(--white, #ffffff);
    margin-right: 10px;
}

/* All other pills - light gray */
.hero-language-pill-other {
    background: var(--light-gray, #f4f4f4);
    color: var(--primary-color, #354477);
    margin-right: 10px;
}

/* Remove margin from last pill (regardless of class) */
.hero-language-pills .hero-language-pill:last-child {
    margin-right: 0;
}

/* Contact Information */
.hero-address {
    font-size: 16px;
    color: var(--primary-color, #354477);
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: flex-start;
    margin-top: 0;
    margin-bottom: 10px;
}

.hero-address-content {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.hero-address-line-1,
.hero-address-line-2 {
    display: block;
    line-height: 1.4;
}

.hero-address-line-2 {
    margin-top: 2px;
}

.hero-phone {
    font-size: 16px;
    color: var(--primary-color, #354477);
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    margin-top: 0;
}

.hero-phone {
    margin-bottom: 25px;
}

.hero-icon-inline {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    filter: brightness(0.4);
}

/* Walk-in Text */
.hero-walkin-text {
    font-size: 16px;
    color: var(--primary-color, #354477);
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-top: 0;
}

/* CTA Button */
.hero-cta-button {
    border-radius: 12px;
    font-size: 16px;
    display: inline-block;
}

.hero-cta-button .wp-block-button__link {
    padding: 15px 30px;
    background: var(--yellow-color, #FFC845);
    color: var(--primary-color, #354477);
    text-decoration: none;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 200, 69, 0.3);
}

.hero-cta-button .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 200, 69, 0.4);
}

.hero-icon {
    font-size: 18px;
    color: var(--white, #ffffff);
}

.hero-collage-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* ===================================
   HERO SECTION RESPONSIVE DESIGN - GOLDEN STANDARD
   =================================== */

/* ===================================
   LAPTOP BREAKPOINT (1151px-1600px)
   ===================================
   NO font size changes - same fonts as desktop
   NO layout changes - same layout as desktop
   Only spacing adjustments (gaps, padding)
   =================================== */
@media (max-width: 1600px) {
    .hero-container {
        /* Reduce gaps only - maintain same layout */
        gap: 60px; /* Reduced from 80px */
    }
    
    .hero-content-left {
        /* Adjust max-width for reduced gap */
        max-width: calc(1200px - 561px - 60px - 40px);
    }
}

/* ===================================
   TABLET BREAKPOINT (768px-1150px)
   ===================================
   Columns stack (flex-direction: column)
   Reduced gaps and spacing
   NO font size changes - same fonts as desktop
   Layout transformation happens here
   =================================== */
@media (max-width: 1150px) {
    .hero-section {
        /* Maintain main container spacing control */
        padding: 60px 20px 0px 20px; /* Reduced top padding */
    }
    
    .hero-container {
        /* Stack columns on tablet */
        flex-direction: column;
        gap: 40px; /* Reduced gap between stacked elements */
    }
    
    .hero-content-left {
        /* Full width when stacked */
        max-width: 100%;
        order: 1; /* Content first on tablet */
    }
    
    .hero-image-right {
        /* Adjust image for tablet layout */
        width: 100%;
        max-width: 561px; /* Fixed width instead of CSS variable */
        height: auto;
        aspect-ratio: 561/602;
        order: 2; /* Image second on tablet */
    }
    
    /* Adjust business box overlap for tablet */
    .hero-business-box-overlap {
        margin-bottom: 0px; /* Reduced overlap on tablet */
    }
}

/* ===================================
   MOBILE BREAKPOINT (0px-767px)
   ===================================
   Stacked layout maintained
   Reduced padding and spacing
   Main titles only: 48px → 36px for mobile readability
   =================================== */

/* Tablet - Columns stack, mobile layout begins */
@media (max-width: 1150px) {
    .hero-section {
        padding: 60px 20px 30px 20px; /* Tablet padding */
    }
    
    .hero-container {
        flex-direction: column; /* Stack columns on tablet */
        gap: 40px;
        align-items: center;
    }
    
    .hero-content-left {
        width: 100%;
        max-width: 100%;
        padding-top: 0; /* Remove top padding on tablet */
        order: 1; /* Title first */
    }
    
    .hero-image-mobile {
        display: block; /* Show mobile image on tablet */
        order: 2; /* Image second */
    }
    
    .hero-image-right {
        display: none; /* Hide desktop image on tablet */
    }
    
    .hero-body-text {
        order: 3; /* Paragraph third */
    }
    
    .hero-business-box {
        order: 4; /* Business box fourth */
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .hero-section {
        /* Mobile main container spacing control */
        padding: 32px 16px 30px 16px; /* Reduced sides, added bottom */
    }
    
    .hero-container {
        /* Maintain stacked layout */
        flex-direction: column;
        gap: 32px; /* Further reduced gap on mobile */
        align-items: center;
    }
    
    .hero-content-left {
        width: 100%;
        max-width: 100%;
        padding-top: 0; /* Remove top padding on mobile */
        order: 1; /* Title first */
    }
    
    .hero-image-mobile {
        display: block; /* Show mobile image on mobile */
        order: 2; /* Image second */
    }
    
    .hero-image-right {
        display: none; /* Hide desktop image on mobile */
    }
    
    .hero-body-text {
        order: 3; /* Paragraph third */
    }
    
    .hero-business-box {
        order: 4; /* Business box fourth */
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Main title exception - 48px → 36px for mobile readability */
    .hero-h1 {
        font-size: 36px; /* Mobile title scaling */
    }
    
    /* Adjust business box for mobile */
    .hero-business-box {
        padding: 20px; /* Reduced padding on mobile */
    }
    
    .hero-business-box-overlap {
        margin-bottom: 0px; /* Reduced overlap on mobile */
    }
    
    /* Adjust language pills for mobile */
    .hero-language-pills {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }
    
    .hero-language-pill {
        width: 100%;
        text-align: center;
        margin-right: 0; /* Remove margin on mobile since we use gap */
    }
    
    /* Adjust CTA button for mobile */
    .hero-cta-button .wp-block-button__link {
        padding: 12px 24px; /* Slightly reduced padding on mobile */
    }
}