/* ============================================
   COMPREHENSIVE RESPONSIVE DESIGN
   All Pages & All Breakpoints
   ============================================ */

/* ============================================
   TABLET BREAKPOINT (1024px - 768px)
   ============================================ */
@media (max-width: 1024px) {
    /* General */
    .container {
        padding: 0 1.5rem !important;
    }
    
    /* Typography */
    h1 { font-size: 2.8rem !important; }
    h2 { font-size: 2.2rem !important; }
    h3 { font-size: 1.5rem !important; }
    
    /* Grids - Adjust column counts */
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Spacing */
    [style*="gap: 4rem"] {
        gap: 2.5rem !important;
    }
    
    [style*="gap: 3rem"] {
        gap: 2rem !important;
    }
    
    [style*="padding: 8rem"] {
        padding: 5rem 0 !important;
    }
    
    [style*="padding: 6rem"] {
        padding: 4rem 0 !important;
    }
    
    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Hero and single layouts */
    .hero-title {
        font-size: 3.2rem !important;
    }
    .post-hero-grid,
    .project-hero-grid,
    .project-content-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Tablet-only 2-column archive grids (do not apply on phones) */
@media (min-width: 769px) and (max-width: 1024px) {
    .services-archive-grid,
    .portfolio-page-grid,
    .archive-posts-grid,
    .related-posts-grid {
        grid-template-columns: repeat(2,1fr) !important;
    }

    /* TABLET HERO — stack content and center */
    .hero-row   { grid-template-columns: 1fr !important; gap: 2.5rem !important; text-align: center; }
    .hero-content { text-align: center; }
    .hero-badge { justify-content: center; }
    .hero-title { font-size: 2.8rem !important; text-align: center; }
    .hero-sub   { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
    .hero-cta   { justify-content: center; }
    .hero-image-wrap { order: -1; max-width: 480px; margin: 0 auto; }
    .hero-stats { grid-template-columns: repeat(4, 1fr) !important; text-align: center; }
    .hero-stat-number { text-align: center; }
    .hero-stat-label  { text-align: center; }
}

/* ============================================
   MOBILE BREAKPOINT (768px - 480px)
   ============================================ */
@media (max-width: 768px) {
    /* General */
    body {
        font-size: 14px !important;
    }
    
    .container {
        padding: 0 1rem !important;
        max-width: 100% !important;
    }
    
    /* Typography */
    h1 { 
        font-size: 2rem !important; 
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    h2 { 
        font-size: 1.6rem !important; 
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    h3 { 
        font-size: 1.2rem !important; 
        line-height: 1.3 !important;
    }
    
    p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    /* All grids to single column */
    [style*="grid-template-columns: repeat"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Percentage-based grids */
    [style*="grid-template-columns: 55%"] {
        grid-template-columns: 1fr !important;
    }
    
    [style*="grid-template-columns: 60%"] {
        grid-template-columns: 1fr !important;
    }
    
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    [style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Gap reductions */
    [style*="gap: 5rem"] {
        gap: 1.5rem !important;
    }
    
    [style*="gap: 4rem"] {
        gap: 1.5rem !important;
    }
    
    [style*="gap: 3.5rem"] {
        gap: 1.5rem !important;
    }
    
    [style*="gap: 3rem"] {
        gap: 1.2rem !important;
    }
    
    [style*="gap: 2.5rem"] {
        gap: 1.2rem !important;
    }
    
    [style*="gap: 2rem"] {
        gap: 1rem !important;
    }
    
    /* Padding reductions */
    [style*="padding: 8rem"] {
        padding: 3rem 0 !important;
    }
    
    [style*="padding: 6rem"] {
        padding: 2.5rem 0 !important;
    }
    
    [style*="padding: 4rem"] {
        padding: 2rem 0 !important;
    }
    
    [style*="padding: 3rem"] {
        padding: 1.5rem 0 !important;
    }
    
    /* Margin reductions */
    [style*="margin-bottom: 6rem"] {
        margin-bottom: 2rem !important;
    }
    
    [style*="margin-bottom: 4rem"] {
        margin-bottom: 1.5rem !important;
    }
    
    [style*="margin-bottom: 3rem"] {
        margin-bottom: 1rem !important;
    }
    
    [style*="margin-top: 3rem"] {
        margin-top: 1rem !important;
    }
    
    /* Buttons */
    a[style*="padding: 16px 40px"] {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
        display: block !important;
        text-align: center !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Flex wrap for buttons */
    [style*="display: flex"][style*="gap: 1.5rem"] {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Images - Responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Forms */
    input, textarea, select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 1rem !important;
    }
    
    /* Sections */
    section {
        padding: 2rem 0 !important;
    }
    
    /* Cards */
    [style*="border-radius: 16px"] {
        border-radius: 12px !important;
    }
    
    [style*="padding: 2.5rem"] {
        padding: 1.5rem !important;
    }
    
    /* Display adjustments */
    [style*="display: none"] {
        display: none !important;
    }
    
    /* Min-height reductions */
    [style*="min-height: 100vh"] {
        min-height: auto !important;
    }
    
    [style*="min-height: 600px"] {
        min-height: 400px !important;
    }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (480px and below)
   ============================================ */
@media (max-width: 480px) {
    /* Typography */
    h1 { 
        font-size: 1.6rem !important; 
    }
    
    h2 { 
        font-size: 1.4rem !important; 
    }
    
    h3 { 
        font-size: 1rem !important; 
    }
    
    p {
        font-size: 0.9rem !important;
    }
    
    /* More aggressive padding/gap reductions */
    .container {
        padding: 0 0.75rem !important;
    }
    
    [style*="padding: 3rem"] {
        padding: 1rem 0 !important;
    }
    
    [style*="padding: 2rem"] {
        padding: 0.75rem 0 !important;
    }
    
    [style*="gap: 1.5rem"] {
        gap: 0.75rem !important;
    }
    
    [style*="gap: 1rem"] {
        gap: 0.5rem !important;
    }
    
    /* Buttons - Full width stack */
    a[style*="padding: 12px 24px"],
    a[style*="padding: 16px 40px"] {
        padding: 12px 16px !important;
        font-size: 0.85rem !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Cards smaller padding */
    [style*="padding: 2.5rem"] {
        padding: 1rem !important;
    }
    
    /* Font size reductions for badges, labels */
    [style*="font-size: 0.95rem"] {
        font-size: 0.85rem !important;
    }
    
    [style*="font-size: 1.3rem"] {
        font-size: 1.1rem !important;
    }
    
    [style*="font-size: 2.2rem"] {
        font-size: 1.8rem !important;
    }
    
    /* Hero sections */
    [style*="min-height: 100vh"] {
        min-height: auto !important;
        padding: 2rem 0 !important;
    }
    
    /* Hide large decorative elements on very small screens */
    [style*="opacity: 0.1"] {
        opacity: 0.05 !important;
    }
}

/* ============================================
   UTILITY CLASSES FOR COMMON PATTERNS
   ============================================ */

/* Fix overflow issues — but NEVER on header (would clip nav dropdowns) */
.container { width: 100%; }

/* Explicitly keep all header elements overflow:visible so dropdowns show */
.site-header,
.site-header .container,
.site-header .header-inner,
.site-header .desktop-nav,
.site-header .nav-menu,
.site-header .nav-menu li,
.site-header .nav-menu ul {
    overflow: visible !important;
}

/* Ensure flex items wrap on mobile */
@media (max-width: 768px) {
    [style*="display: flex"] {
        flex-wrap: wrap !important;
    }
}

/* ============================================
   ANIMATIONS - Disable on mobile for performance
   ============================================ */
@media (max-width: 768px) {
    * {
        animation-duration: 0.3s !important;
    }
}

/* ============================================
   ACCESSIBILITY - Better touch targets on mobile
   ============================================ */
@media (max-width: 768px) {
    a, button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px !important;
        min-height: 20px !important;
    }
}

/* ============================================
   SPECIFIC PAGE FIXES
   ============================================ */

/* Single Service Page */
@media (max-width: 768px) {
    /* Service hero form - full width */
    [style*="padding: 3rem 2.5rem"] {
        padding: 1.5rem 1rem !important;
    }
    
    /* Remove side-by-side layouts */
    [style*="display: grid"][style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Contact Page */
@media (max-width: 768px) {
    /* Hide desktop dropdowns on mobile */
    .nav-menu ul {
        display: none !important;
    }
    
    /* Contact form fields */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        width: 100% !important;
        padding: 10px !important;
        margin-bottom: 1rem !important;
    }
    
    /* Form submit button */
    button[type="submit"] {
        width: 100% !important;
        padding: 12px !important;
    }
}

/* About Page */
@media (max-width: 768px) {
    /* Stats grid on about page */
    [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Portfolio & Blog Cards */
@media (max-width: 768px) {
    /* Card images */
    [style*="height: 250px"] {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .mobile-menu-toggle,
    .site-nav {
        display: none !important;
    }
}

/* ============================================================
   HEADER — RESPONSIVE (previously embedded in header.php)
   ============================================================ */
.logo-wrap { max-width: 180px; width: auto; }

@media (max-width: 768px) {
    .header-inner { position: relative; }
    .desktop-nav  { display: none !important; }
    .mobile-menu-toggle { display: block !important; }

    .mobile-nav {
        display: none !important;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        border-bottom: 1px solid #e2e8f0;
        z-index: 99;
        box-shadow: 0 8px 20px rgba(0,0,0,.08);
    }
    .mobile-nav.active { display: block !important; }
    .mobile-nav .nav-menu { flex-direction: column; gap: 0; padding: 1rem 2rem; }
    .mobile-nav .nav-menu > li { padding: .75rem 0; border-bottom: 1px solid #e2e8f0; }
    .mobile-nav .nav-menu > li:last-child { border-bottom: none; }
    .mobile-nav .nav-menu > li > a { padding: .5rem 0; }
    .mobile-nav .nav-menu > li > a::after { display: none; }
    .header-cta { display: none; }

    /* FOOTER */
    .footer-grid { grid-template-columns: repeat(2,1fr) !important; }

    /* GENERAL GRIDS */
    .services-archive-grid,
    .portfolio-page-grid,
    .archive-posts-grid,
    .related-posts-grid,
    .search-result-grid,
    .archive-featured-grid { grid-template-columns: 1fr !important; }

    /* Force one-card-per-row for all main archives on phones */
    .post-type-archive-services .services-archive-grid,
    .post-type-archive-pf_project .portfolio-page-grid,
    .blog .archive-posts-grid,
    .home .archive-posts-grid,
    .archive .archive-posts-grid {
        grid-template-columns: 1fr !important;
    }

    .faq-grid,
    .skills-grid,
    .contact-grid,
    .about-split,
    .philosophy-grid,
    .single-service-hero-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }

    /* HERO */
    .hero-advanced { padding: 60px 0 !important; min-height: auto !important; }
    .hero-row   { grid-template-columns: 1fr !important; gap: 2rem !important; text-align: center; }
    .hero-content { text-align: center; }
    .hero-badge { justify-content: center; }
    .hero-title { font-size: 2.2rem !important; text-align: center; }
    .hero-sub   { font-size: 1rem !important; text-align: center; }
    .hero-cta   { justify-content: center; flex-wrap: wrap; }
    .hero-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 1.25rem !important; text-align: center; }
    .hero-stat-number { font-size: 1.6rem !important; text-align: center; }
    .hero-stat-label  { text-align: center; }
    .hero-image-wrap  { order: -1; }

    /* PAGE HEROES */
    .page-hero-center h1 { font-size: 2.5rem !important; }
    .section-header h2   { font-size: 2rem !important; }

    /* TIMELINE */
    .timeline-item { grid-template-columns: 1fr !important; text-align: left !important; }
    .timeline-right { text-align: left !important; padding-right: 0 !important; }
    .timeline-dot   { display: none; }

    /* STATS BAR */
    .stats-grid { grid-template-columns: repeat(2,1fr) !important; }

    /* CTA */
    .cta-block h2 { font-size: 2rem !important; }

    /* SECTIONS */
    .section-pad    { padding: 4rem 0 !important; }
    .section-pad-lg { padding: 4rem 0 !important; }

    /* 404 */
    .num-404 { font-size: 6rem !important; }

    /* SEARCH */
    .search-result-grid { grid-template-columns: 1fr !important; }

    /* COMMENT FORM */
    .comment-form-fields { grid-template-columns: 1fr !important; }

    /* SINGLE BLOG HERO */
    .post-hero {
        padding: 2.5rem 0 !important;
    }
    .post-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
    }
    .post-title {
        font-size: 2.2rem !important;
        text-align: left !important;
    }
    .post-meta {
        gap: 1rem !important;
    }

    /* SINGLE PROJECT */
    .project-hero {
        padding: 2.75rem 0 !important;
    }
    .project-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .project-entry-title {
        font-size: 2.2rem !important;
    }
    .project-content-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .project-content-side {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 480px) {
    .hero-title  { font-size: 1.8rem !important; }
    .hero-stats  { grid-template-columns: repeat(2, 1fr) !important; text-align: center; }
    .hero-stat-number { font-size: 1.4rem !important; }
    .hero-content { text-align: center !important; }
    .footer-grid { grid-template-columns: 1fr !important; }
    .hero-cta    { flex-direction: column; align-items: center; }
    .hero-cta .btn { width: 190px; height:60px; text-align: center; padding: 16px 20px; font-size: 1rem; }
    .stats-grid  { grid-template-columns: 1fr !important; }
    .pf-grid-2,
    .cf-grid-2   { grid-template-columns: 1fr !important; }
    .post-title  { font-size: 1.9rem !important; }
    .project-entry-title { font-size: 1.85rem !important; }

    .post-type-archive-services .services-archive-grid,
    .post-type-archive-pf_project .portfolio-page-grid,
    .blog .archive-posts-grid,
    .home .archive-posts-grid,
    .archive .archive-posts-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   SCROLL-TO-TOP BUTTON
   ============================================================ */
#scroll-to-top {
    position: fixed; bottom: 2rem; right: 2rem;
    width: 48px; height: 48px;
    background: var(--clr-primary, #1a73e8);
    color: #fff; border: none; border-radius: 50%;
    font-size: 1.25rem; cursor: pointer;
    opacity: 0; visibility: hidden;
    transition: all .3s ease;
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(26,115,232,.3);
}
#scroll-to-top.visible { opacity: 1; visibility: visible; }
#scroll-to-top:hover   { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(26,115,232,.4); }

/* ============================================================
   SEARCH AJAX DROPDOWN
   ============================================================ */
.search-ajax-results { background:#fff; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; max-height:400px; overflow-y:auto; }
.search-ajax-item    { display:block; padding:1rem; border-bottom:1px solid #e2e8f0; text-decoration:none; color:inherit; transition:background .2s; }
.search-ajax-item:hover { background:#f9fafb; }
.search-ajax-title   { display:block; font-weight:600; color:#0a1428; margin-bottom:.3rem; }
.search-ajax-excerpt { display:block; font-size:.85rem; color:#64748b; line-height:1.5; }
.search-ajax-date    { display:block; font-size:.75rem; color:#999; margin-top:.5rem; }
.search-loading, .search-no-match, .search-error { text-align:center; color:#64748b; padding:1rem; }
.search-error { color:#d32f2f; }

/* ============================================================
   FOOTER CONTACT LINK (used in footer.php)
   ============================================================ */
.footer-contact-link { color:#1a73e8; text-decoration:none; font-weight:600; font-size:.95rem; display:block; margin-bottom:1.5rem; }
.footer-contact-link:hover { color:#6bbfff; }

/* ============================================================
   MOBILE ANIMATION SPEED & DISTANCE FIXES
   All animated shapes and the hero image are toned down:
   - Shapes hidden on very small screens (too distracting)
   - floatSlow travel reduced from 30px → 8px
   - floatShape / floatShapeReverse travel reduced from 80px → 15px
   - rotateShape / rotateShapeReverse duration doubled (half speed)
   - pulseShape duration increased (slower pulse)
   - Entrance animations simplified (no bounce, shorter travel)
   ============================================================ */

@media (max-width: 768px) {

    /* -- Geometric background shapes: hide on mobile entirely --
       They overlap content on small screens and the animation
       looks frantic. The gradient background still looks great. */
    .hero-shape {
        display: none !important;
    }

    /* -- Hero image: much smaller float distance -- */
    .hero-image-inner {
        animation: floatSlowMobile 8s ease-in-out infinite !important;
    }

    /* -- Entrance animations: remove the heavy bounce cubic-bezier,
          shorten travel distance, keep the fade-in feel -- */
    .hero-content {
        animation: slideInLeftMobile 0.8s ease-out !important;
    }
    .hero-image-wrap {
        animation: slideInRightMobile 0.8s ease-out !important;
    }
    .single-service-title,
    .contact-form-wrap,
    .about-split {
        animation: slideInLeftMobile 0.8s ease-out !important;
    }
    .single-service-form-wrap,
    .contact-info-wrap,
    .about-image-placeholder {
        animation: slideInRightMobile 0.8s ease-out !important;
    }

    .contact-form-wrap .wpforms-container .wpforms-field-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .contact-form-wrap .wpforms-container .wpforms-one-half,
    .contact-form-wrap .wpforms-container .wpforms-one-third,
    .contact-form-wrap .wpforms-container .wpforms-two-thirds {
        width: 100% !important;
        margin-left: 0 !important;
    }
    .contact-form-wrap .wpforms-container .wpforms-field-name .wpforms-field-row {
        grid-template-columns: 1fr !important;
        gap: .75rem !important;
    }
    .single-service-form-wrap .wpforms-container .wpforms-field-name .wpforms-field-row {
        grid-template-columns: 1fr !important;
        gap: .75rem !important;
    }

    /* -- Status badge dot pulse: slightly slower on mobile -- */
    .hero-badge .dot,
    .status-badge .dot {
        animation: pulse 3s ease-in-out infinite !important;
    }
}

@media (max-width: 480px) {
    /* On very small phones, disable all non-essential animations
       to preserve performance and avoid motion sickness */
    .hero-image-inner {
        animation: floatSlowMobile 10s ease-in-out infinite !important;
    }
    .anim-in-up,
    .anim-slide-up {
        animation-duration: 0.5s !important;
    }
}

/* ============================================================
   MOBILE-SPECIFIC KEYFRAMES
   ============================================================ */

/* Hero image — gentle 8px bob instead of 30px */
@keyframes floatSlowMobile {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* Entrance animations — 20px travel, no bounce */
@keyframes slideInLeftMobile {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRightMobile {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}