/**
 * Hero Animations - CSS replacement for LayerSlider
 * Replaces ~340KB of JS with ~3KB of CSS
 * 
 * Animation sequence:
 * - Text 1: 0s-9s (fade in, hold, fade out)
 * - Text 2: 9s-18s (fade in, hold, fade out)  
 * - Text 3: 18s-27s (fade in, hold, fade out)
 * - Loop infinitely
 */

/* ============================================
   HERO SECTION CONTAINER
   ============================================ */
.bg-header {
    overflow: visible;
    position: relative;
    min-height: 500px !important; /* Ensure hero background displays properly */
    padding-bottom: 240px; /* Space for form overflow at bottom */
}

.bg-header > .container {
    overflow: visible;
    position: relative; /* Positioning context for form and let's shop */
}

.bg-header > .container > .row {
    position: static; /* Pass-through to container */
}

.hero-slider-container {
    perspective: 1000px;
    position: relative;
    contain: layout;
    float: right;
    white-space: nowrap;
}

/* ============================================
   TEXT WRAPPER (bottom left, under Feefo)
   Positioned relative to .bg-header section
   ============================================ */
.hero-text-wrapper {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 1140px !important; /* Bootstrap container max-width */
    height: 110px !important;
    z-index: 10;
    padding: 0 15px; /* Bootstrap container padding */
}

/* ============================================
   TEXT OVERLAY (Dark background bar)
   ============================================ */
.hero-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(54, 54, 54, 0.6);
    z-index: 5;
}

/* ============================================
   ROTATING TEXT MESSAGES
   ============================================ */
.hero-text-group {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%) translateX(50px) rotateY(60deg);
    z-index: 10;
    opacity: 0;
    transform-origin: right 50% 0;
    transform-style: preserve-3d;
    max-width: 60%;
}

.hero-text-title {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(22px, 2vw, 32px); /* Min 22px, scales with viewport, max 32px */
    color: #ffffff;
    letter-spacing: 1.6px;
    margin: 0;
}

.hero-text-subtitle {
    font-family: 'Roboto Slab', serif;
    font-size: clamp(14px, 1.4vw, 22px); /* Min 14px, scales with viewport, max 22px */
    color: #878787;
    margin: 0;
}

/* Text group 1: 0s - 9s */
.hero-text-group-1 {
    animation: heroTextRotate 27s ease-in-out infinite;
    animation-delay: 0s;
}

/* Text group 2: 9s - 18s */
.hero-text-group-2 {
    animation: heroTextRotate 27s ease-in-out infinite;
    animation-delay: 9s;
}

/* Text group 3: 18s - 27s */
.hero-text-group-3 {
    animation: heroTextRotate 27s ease-in-out infinite;
    animation-delay: 18s;
}

/* Main text rotation keyframes - 9s visible per message */
@keyframes heroTextRotate {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(50px) rotateY(60deg);
    }
    /* Fade in (0-11% = 3s of 27s total) */
    11.1% {
        opacity: 1;
        transform: translateY(-50%) translateX(0) rotateY(0);
    }
    /* Hold visible (11%-26% = 4s) */
    25.9% {
        opacity: 1;
        transform: translateY(-50%) translateX(0) rotateY(0);
    }
    /* Fade out (26%-33% = 2s) */
    33.3% {
        opacity: 0;
        transform: translateY(-50%) translateX(-50px) rotateY(-60deg);
    }
    /* Stay hidden for remaining 2 cycles */
    100% {
        opacity: 0;
        transform: translateY(-50%) translateX(50px) rotateY(60deg);
    }
}

/* ============================================
   FORM SLIDE-IN FROM RIGHT
   ============================================ */
.hero-form-container {
    position: absolute;
    top: 30px;
    right: 0;
    width: 380px;
    max-width: 100%;
    opacity: 0;
    transform: translateX(100%);
    animation: formSlideIn 1s ease-out 1.3s forwards;
    z-index: 20;
}

@keyframes formSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   "LET'S SHOP" IMAGE SLIDE-IN
   ============================================ */
.hero-lets-shop-img {
    position: absolute;
    top: 60px;
    right: 395px; /* Position arrow tip to point at Start Online button */
    opacity: 0;
    transform: translateX(100%);
    animation: formSlideIn 1s ease-out 1.9s forwards;
    z-index: 21;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media only screen and (max-width: 992px) {
    .hero-text-overlay {
        top: 120px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 150px;
        bottom: auto;
    }
    
    .hero-text-group {
        top: 140px;
        left: 50%;
        transform: translateX(-50%) translateY(0) rotateY(0);
        bottom: auto;
        text-align: center;
        width: 90%;
    }
    
    .hero-text-title {
        font-size: 3.25em;
    }
    
    .hero-text-subtitle {
        font-size: 2.8em;
    }
    
    /* Simplified animation for mobile - no 3D rotation */
    .hero-text-group-1,
    .hero-text-group-2,
    .hero-text-group-3 {
        animation-name: heroTextRotateMobile;
    }
    
    @keyframes heroTextRotateMobile {
        0% {
            opacity: 0;
            transform: translateX(-50%) translateY(20px);
        }
        11.1% {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        25.9% {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        33.3% {
            opacity: 0;
            transform: translateX(-50%) translateY(-20px);
        }
        100% {
            opacity: 0;
            transform: translateX(-50%) translateY(20px);
        }
    }
    
    .hero-form-container {
        position: relative;
        width: 100%;
        top: auto;
        right: auto;
        transform: none;
        opacity: 1;
        animation: none;
    }
    
    /* Hide desktop-only elements */
    .hero-lets-shop-img,
    .ls-hide-phone {
        display: none !important;
    }
}

/* ============================================
   PROGRESSIVE WIDTH BREAKPOINTS FOR HERO
   Makes hero section wider on larger screens
   ============================================ */

/* 1400px+ screens: Widen to 1320px */
@media only screen and (min-width: 1400px) {
    .bg-header > .container {
    overflow: visible;
        max-width: 1320px !important;
    }
    .hero-text-wrapper {
        max-width: 1320px !important;
    }
}

/* 1600px+ screens: Widen to 1480px */
@media only screen and (min-width: 1600px) {
    .bg-header > .container {
    overflow: visible;
        max-width: 1480px !important;
    }
    .hero-text-wrapper {
        max-width: 1480px !important;
    }
}

/* 1920px+ screens: Widen to 1700px */
@media only screen and (min-width: 1920px) {
    .bg-header > .container {
    overflow: visible;
        max-width: 1700px !important;
    }
    .hero-text-wrapper {
        max-width: 1700px !important;
    }
    .bg-header {
    overflow: visible;
        min-height: 550px !important; /* Slightly taller hero */
    }
}

/* 2560px+ screens (1440p/QHD): Widen to 2000px */
@media only screen and (min-width: 2560px) {
    .bg-header > .container {
    overflow: visible;
        max-width: 2000px !important;
    }
    .hero-text-wrapper {
        max-width: 2000px !important;
    }
    .bg-header {
    overflow: visible;
        min-height: 600px !important;
    }
}

/* 3840px+ screens (4K): Widen to 2400px */
@media only screen and (min-width: 3840px) {
    .bg-header > .container {
    overflow: visible;
        max-width: 2400px !important;
    }
    .hero-text-wrapper {
        max-width: 2400px !important;
    }
    .bg-header {
    overflow: visible;
        min-height: 700px !important;
    }
}

/* 5120px+ screens (Ultrawide): Widen to 2800px */
@media only screen and (min-width: 5120px) {
    .bg-header > .container {
    overflow: visible;
        max-width: 2800px !important;
    }
    .hero-text-wrapper {
        max-width: 2800px !important;
    }
    .bg-header {
    overflow: visible;
        min-height: 800px !important;
    }
}

/* ============================================
   REDUCED MOTION ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-text-group,
    .hero-form-container,
    .hero-lets-shop-img {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .hero-text-group-2,
    .hero-text-group-3 {
        display: none;
    }
}

/* ============================================
   HERO BACKGROUND IMAGE - RESPONSIVE FIX
   Ensures GuyOnPhone.webp displays properly
   at all viewport sizes
   ============================================ */

/* Base: Override any conflicting styles */
section.bg-header {
    overflow: visible;
    background-image: url('/images/GuyOnPhone.webp') !important;
    background-position: right top !important;  /* Anchor to top to show full head */
    background-repeat: no-repeat !important;
    /* background-size: cover !important; */
}

/* Mobile (up to 575px): Center the background, show upper portion */
@media only screen and (max-width: 575px) {
    section.bg-header {
    overflow: visible;
        background-position: 65% top !important;
        min-height: auto !important;
    }
}

/* Small tablets (576px - 767px): Adjust position */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    section.bg-header {
    overflow: visible;
        background-position: 70% top !important;
    }
}

/* Tablets (768px - 991px): Move focus slightly right */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    section.bg-header {
    overflow: visible;
        background-position: 75% top !important;
    }
}

/* Desktop (992px - 1199px): Standard right-center */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    section.bg-header {
    overflow: visible;
        background-position: right top !important;
    }
}

/* Large desktop (1200px - 1399px): Keep person visible on right */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    section.bg-header {
    overflow: visible;
        background-position: right top !important;
    }
}

/* XL screens (1400px+): Person stays on right, more visible */
@media only screen and (min-width: 1400px) {
    section.bg-header {
    overflow: visible;
        background-position: 24% top !important;
    }
}

/* 1920px+ screens: Adjust for ultrawide - person more centered */
@media only screen and (min-width: 1920px) {
    section.bg-header {
    overflow: visible;
        background-position: 70% top !important;
    }
}

/* 2560px+ screens (QHD): Keep balanced */
@media only screen and (min-width: 2560px) {
    section.bg-header {
    overflow: visible;
        background-position: 65% top !important;
    }
}

/* 3840px+ screens (4K): More centered for ultrawide */
@media only screen and (min-width: 3840px) {
    section.bg-header {
    overflow: visible;
        background-position: 60% top !important;
    }
}

/* ============================================
   CLS Prevention - Added Jan 2026
   ============================================ */

/* Reserve space for hero section to prevent layout shift */
.bg-header .container.pt-md-3 {
    min-height: 450px;
}

@media (max-width: 991px) {
    .bg-header .container.pt-md-3 {
        min-height: auto;
    }
}

/* Ensure images with width/height maintain aspect ratio */
.bg-header img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}

/* Explicit aspect ratios for known images */
img[src*="feefo.com/api/logo"] {
    aspect-ratio: 316 / 80;
    min-height: 80px;
}


/* Hero form card - ensure consistent height in hero section only */
.bg-header .form-card {
    min-height: 480px;
    contain: layout style;
}

/* CLS Prevention - Glide Carousel */
.glide {
    min-height: 180px; /* Reserve space for carousel */
    contain: layout;
}

.glide__slides {
    min-height: 160px;
}

.glide__slide {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fix Feefo platinum aspect ratio (480x142) */

/* ============================================
   COMPREHENSIVE CLS PREVENTION - Jan 18, 2026
   Fix for 0.114 CLS score from Lighthouse
   ============================================ */

/* 
 * Problem: Bootstrap's img-fluid sets height:auto which
 * overrides HTML width/height attributes, causing layout
 * shift when images load.
 * 
 * Solution: Use aspect-ratio to reserve space while
 * keeping responsive behavior.
 */

/* National Coverage image (204x124) - causes 0.0017 shift */
.bg-light img.img-fluid[alt*="Workers Compensation Shop is a licensed"],
img.img-fluid[data-src*="national-coverage"],
img.img-fluid[src*="national-coverage"] {
    aspect-ratio: 204 / 124;
    height: auto !important;
    width: auto;
    max-width: 204px;
}

/* Header logo (194x44) */
.header-logo img,
img.img-fluid[alt*="Workers Compensation Shop Logo"] {
    aspect-ratio: 194 / 44;
}

/* Feefo customer ratings (316x80) - from external API */
img.img-fluid[alt*="Feefo customer ratings"],
img[src*="api.feefo.com/api/logo"] {
    aspect-ratio: 316 / 80 !important;
    width: 316px;
    max-width: 100%;
    height: auto;
}

/* Feefo platinum awards (480x142) */
img.img-fluid[src*="feefo-platinum"],
img[src*="feefo-platinum"],
img.img-fluid[data-src*="feefo-platinum"] {
    aspect-ratio: 480 / 142 !important;
    width: 378px;
    max-width: 100%;
    height: auto;
}

/* Let's shop image (274x62) */
.hero-lets-shop-img,
img[src*="lets_shop"] {
    aspect-ratio: 274 / 62;
}

/* Map image in dropdown (204x124) */
img[data-src*="workers-compensation-shop-map"],
img[src*="workers-compensation-shop-map"] {
    aspect-ratio: 204 / 124;
}

/* Generic: All images inside main with explicit dimensions */
main img.img-fluid[width][height] {
    max-width: 100%;
    height: auto;
}

/* Main element - stabilize with content-visibility */
main[role="main"] {
    content-visibility: auto;
    contain-intrinsic-size: auto 5000px; /* Estimated height */
}

/* First section after hero - prevent shift from above */
main > section:first-child {
    contain: layout style paint;
}

/* Carousel slide images - reserve space */
.glide__slide img {
    aspect-ratio: auto;
    height: auto;
    max-height: 120px;
}

/* Reserve space for fixed nav to prevent reflow */
body {
    /* Account for fixed header */
    scroll-padding-top: 120px;
}

/* Ensure header takes stable space */
.fixed-top {
    contain: layout;
}

/* Pre-load critical fonts to prevent FOIT/FOUT shift */
@font-face {
    font-family: 'Roboto';
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    font-display: swap;
}


/* ============================================
   CLS Prevention Fix - hero-text-wrapper
   Fixes 0.025 CLS from d-none/d-lg-block toggle
   Added: Jan 2026
   ============================================ */

/* Override Bootstrap d-none for hero-text-wrapper to use visibility instead */
/* This reserves space and prevents layout shift when media query toggles */
.hero-text-wrapper.d-none.d-lg-block {
    display: block !important;
    visibility: hidden;
}

@media (min-width: 992px) {
    .hero-text-wrapper.d-none.d-lg-block {
        visibility: visible;
    }
}

/* ============================================
   CLS Prevention Fix - Glide Carousel Images
   Ensures 240x160 aspect ratio is preserved
   Added: Jan 2026
   ============================================ */

/* All carrier logo images in glide carousel */
.glide__slide img.img-fluid {
    aspect-ratio: 240 / 160;
    width: 240px;
    max-width: 100%;