/* ===== SCROLL SNAP FUNCTIONALITY FOR TAILORBIRD PATTERNS ===== */

/* Enable smooth scrolling on landing pages */
html {
    scroll-behavior: smooth;
}

body.landing-page {
    scroll-snap-type: y proximity;
    overflow-y: auto;
}

/* Scroll snap alignment for sections */
.landing-section {
    scroll-snap-align: start;
}

/* Only hero sections should be full viewport height */
.landing-section.section-hero,
.landing-section.tailorbirds-hero {
    min-height: 100vh;
}

.scroll-snap {
    scroll-snap-align: start;
}

/* Hide any scroll indicators/dots */
.scroll-indicator,
.scroll-dots {
    display: none !important;
}

/* ===== SCROLL ANIMATIONS ===== */

/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Scale In Animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide In From Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In From Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile: Ensure hero section is immediately visible (no JS wait) */
/* CRITICAL: NO body.landing-page dependency - works instantly */
@media (max-width: 767px) {
    .landing-section.section-hero *:not(.wp-block-cover__background):not(.wp-block-cover__gradient-background),
    .landing-section.tailorbirds-hero *:not(.wp-block-cover__background):not(.wp-block-cover__gradient-background),
    .section-hero *:not(.wp-block-cover__background):not(.wp-block-cover__gradient-background),
    .tailorbirds-hero *:not(.wp-block-cover__background):not(.wp-block-cover__gradient-background) {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Desktop: Non-blocking animations - elements start visible, animate when in view */
/* CRITICAL: NO body.landing-page dependency - immediate visibility */
@media (min-width: 768px) {
    /* All elements start fully visible - no opacity:0 or hidden state */
    .landing-section h1,
    .landing-section h2,
    .landing-section h3,
    .landing-section p,
    .landing-section .wp-block-button,
    .landing-section .feature-card,
    .landing-section .service-card,
    .landing-section .testimonial-card,
    .landing-section .pricing-card {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    /* Optional: Add subtle animation enhancement when JS adds .in-view class */
    /* This is progressive enhancement - works fine without JS */
    .landing-section.in-view h1,
    .landing-section.in-view h2,
    .landing-section.in-view h3,
    .landing-section.in-view p,
    .landing-section.in-view .wp-block-button,
    .landing-section.in-view .feature-card,
    .landing-section.in-view .service-card,
    .landing-section.in-view .testimonial-card,
    .landing-section.in-view .pricing-card {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ===== MOBILE-FIRST RULES FOR NEW TAILORBIRDS PATTERNS ===== */

/* Cap icon image size site-wide within landing sections */
.landing-section img[src*="icon-"],
.landing-section .feature-card img,
.landing-section .service-card img,
.landing-section figure.aligncenter img[style*="width:56px"],
.landing-section figure.aligncenter img[style*="width:64px"] {
    max-width: 80px;
    max-height: 80px;
    height: auto;
    width: auto;
}

/* Mobile: reduce section padding and scale fonts */
@media (max-width: 767px) {
    .landing-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .landing-section img[src*="icon-"] {
        max-width: 56px !important;
        max-height: 56px !important;
    }

    /* Scale down oversized headings on mobile */
    .landing-section h1 {
        font-size: 1.875rem !important;
        line-height: 1.2 !important;
    }
    .landing-section h2 {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }
    .landing-section h3 {
        font-size: 1.25rem !important;
    }

    /* Tighten column gaps on mobile */
    .landing-section .wp-block-columns {
        gap: 20px !important;
    }

    /* Zigzag rows: no bottom margin stacking awkwardness */
    .landing-section.section-zigzag .wp-block-columns {
        margin-bottom: 40px !important;
    }

    /* Ensure all images stay within container */
    .landing-section img {
        max-width: 100%;
        height: auto;
    }

    /* Feature/service cards: tighter padding */
    .landing-section .feature-card,
    .landing-section .service-card,
    .landing-section .wp-block-group[style*="border-radius"] {
        padding: 1.5rem !important;
    }
}

/* Desktop: slight font cap for oversized headings across new patterns */
@media (min-width: 768px) {
    .landing-section h2[style*="font-size:2.5rem"] {
        font-size: 2.25rem !important;
    }
    .landing-section h2[style*="font-size:3rem"] {
        font-size: 2.5rem !important;
    }
}

/* ===== FIXES: Circle avatars, icon containers, image padding ===== */

/* Force aspect-ratio on circular avatars (testimonials, bios) */
.landing-section .wp-block-group[style*="border-radius:50%"][style*="min-height"],
.landing-section .wp-block-group[style*="border-radius:999"] {
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Testimonial avatar circles — force 60x60 */
.landing-section .wp-block-group[style*="border-radius:50%"][style*="min-height:60px"] {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
}

/* Icon wrapper circles (div with border-radius:50% containing an icon) */
.landing-section figure[style*="border-radius:50%"],
.landing-section figure[style*="border-radius:999"],
.landing-section .wp-block-image figure[style*="border-radius:50%"] {
    aspect-ratio: 1 / 1;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Circular images (team portraits, bios) */
.landing-section img[style*="border-radius:50%"],
.landing-section img[style*="border-radius:999"],
.landing-section figure.is-style-rounded img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Image grid padding — add spacing between adjacent images in columns */
.landing-section .wp-block-columns .wp-block-column > figure.wp-block-image:not(:last-child),
.landing-section .wp-block-columns .wp-block-column > .wp-block-image:not(:last-child) {
    margin-bottom: 16px;
}

/* Ensure images don't touch in dense grids */
.landing-section .wp-block-columns[style*="blockGap"] {
    gap: 20px;
}

/* Portfolio/gallery grids: consistent gap */
.landing-section .section-features .wp-block-columns,
.landing-section .section-services .wp-block-columns,
.landing-section [class*="portfolio"] .wp-block-columns,
.landing-section [class*="gallery"] .wp-block-columns {
    gap: 20px;
}

/* Images with no explicit border-radius: light padding protection */
.landing-section .wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* CTA buttons default to center when no explicit justification class is present */
.landing-section .wp-block-buttons:not(.is-content-justification-left):not(.is-content-justification-right) {
    justify-content: center;
}

/* Prevent wp-block-column with border-radius:50% from breaking (star-arrangement fix) */
.landing-section .wp-block-column[style*="border-radius:50%"] {
    border-radius: 12px !important; /* fallback: use rounded rect instead of impossible circle column */
    aspect-ratio: auto;
}

/* ===== SHOWCASE FIXES: Column gaps, card spacing, edge margins ===== */

/* Ensure horizontal gap between image column and text column in 50/50 layouts */
.landing-section .wp-block-columns {
    column-gap: 32px;
    row-gap: 24px;
}

/* Explicit gap for card grids (features, services) */
.landing-section.section-features .wp-block-columns,
.landing-section.section-services .wp-block-columns,
.landing-section.section-values .wp-block-columns {
    column-gap: 24px;
    row-gap: 24px;
}

/* Zigzag patterns: clear gap between image and text */
.landing-section.section-zigzag .wp-block-columns {
    column-gap: 48px;
    row-gap: 32px;
}

/* Edge padding safety: every landing-section has inner padding */
.landing-section {
    padding-left: max(20px, 3%) !important;
    padding-right: max(20px, 3%) !important;
}

/* Feature/service card spacing — guarantee breathing room */
.landing-section .wp-block-column > .wp-block-group[style*="background-color"],
.landing-section .feature-card,
.landing-section .service-card {
    margin: 4px;
}

/* Social media icon paragraphs (circles) — force fixed 40x40 */
.landing-section .wp-block-group p[style*="border-radius:50%"][style*="min-height:40px"] {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    aspect-ratio: 1 / 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 4px !important;
}

/* Video embed: center on page */
.landing-section .wp-block-embed,
.landing-section .wp-block-embed.is-type-video,
.landing-section .wp-block-embed-youtube {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 900px;
}
.landing-section .wp-block-embed__wrapper {
    margin: 0 auto;
    max-width: 100%;
}

/* ===== BUTTON CENTERING FIX (post-save attribute loss workaround) ===== */
/* Force flex + center for all buttons in landing-sections unless explicit left/right */
.landing-section .wp-block-buttons:not(.is-content-justification-left):not(.is-content-justification-right):not(.is-content-justification-space-between) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px;
}
/* Preserve explicit alignment when present */
.landing-section .wp-block-buttons.is-content-justification-left { justify-content: flex-start !important; }
.landing-section .wp-block-buttons.is-content-justification-right { justify-content: flex-end !important; }

/* ===== IMAGE OVERFLOW FIX (width="X" HTML attr was not being overridden) ===== */
/* Force all images in landing-sections to fit their column container */
.landing-section img:not([src*="icon-"]):not(.wp-block-cover__image-background) {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    box-sizing: border-box;
}

/* Preserve icon sizing */
.landing-section img[src*="icon-"] {
    max-width: 80px !important;
    width: auto !important;
    height: auto !important;
}

/* wp-block-image figures should never exceed column width */
.landing-section figure.wp-block-image,
.landing-section .wp-block-image {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Ensure columns have breathing room */
.landing-section .wp-block-column {
    padding: 0 12px;
    box-sizing: border-box;
    min-width: 0; /* allow flex shrink below content width */
}

/* First/last columns: no outer padding */
.landing-section .wp-block-columns > .wp-block-column:first-child {
    padding-left: 0;
}
.landing-section .wp-block-columns > .wp-block-column:last-child {
    padding-right: 0;
}

/* Feature cards spacing guarantee */
.landing-section .wp-block-column > .wp-block-group {
    margin-bottom: 12px;
}