/*
Theme Name: HeyLead
Theme URI: https://heylead.com
Author: HeyLead
Description: Premium Digital Growth Partner - HeyLead Homepage Theme
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heylead
*/

/* -------------------------------------------------------
   Custom component styles (from Stitch design)
------------------------------------------------------- */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-nav {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.perspective-card {
    transform: perspective(1000px) rotateY(-5deg);
    transition: transform 0.4s ease;
}

.perspective-card:hover {
    transform: perspective(1000px) rotateY(0deg);
}

details summary::-webkit-details-marker {
    display: none;
}

details[open] summary .expand-icon {
    transform: rotate(180deg);
}

.faq-card {
    transition: all 0.3s ease;
}

.faq-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.10);
}

.testimonial-carousel {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.testimonial-carousel::-webkit-scrollbar {
    display: none;
}

/* -------------------------------------------------------
   Responsive Design — Mobile & Tablet Optimization
------------------------------------------------------- */

/* ── Global resets ── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; min-width: 320px; }
img, video, iframe { max-width: 100%; height: auto; }

/* ── iOS: prevent auto-zoom on input focus (< 16px triggers zoom) ── */
@media screen and (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ── Touch targets on coarse-pointer devices ── */
@media (pointer: coarse) {
    .fa-svc-opt,
    .hp-svc-opt {
        min-height: 44px;
    }
    nav a,
    nav button {
        min-height: 44px;
    }
}

/* ==========================================================
   BREAKPOINT: Small Mobile (max-width: 479px)
   ========================================================== */
@media (max-width: 479px) {
    /* Tighter horizontal padding on all sections */
    main section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    main section .max-w-7xl,
    main section .max-w-6xl,
    main section .max-w-5xl {
        padding-left: 0;
        padding-right: 0;
    }
    /* Footer */
    footer { padding-left: 1rem !important; padding-right: 1rem !important; }
    footer > div { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ==========================================================
   BREAKPOINT: Mobile (max-width: 639px)
   ========================================================== */
@media (max-width: 639px) {

    /* ── Hero URL bar: stack input above button ── */
    #hl-url-wrap {
        flex-wrap: wrap;
        padding: 0.75rem;
        gap: 0.5rem;
        border-radius: 1rem;
    }
    #hl-url-wrap #hl-url-input {
        width: 100%;
        flex-basis: 100%;
    }
    #hl-url-wrap #hl-url-btn {
        width: 100%;
        justify-content: center;
    }

    /* Service-page URL wraps (same pattern: .hl-url-wrap containing .hl-press-btn) */
    .hl-url-wrap:has(> .hl-press-btn) {
        flex-wrap: wrap;
        padding: 0.75rem !important;
        gap: 0.5rem;
        border-radius: 1rem !important;
    }
    .hl-url-wrap:has(> .hl-press-btn) .hl-url-input {
        width: 100%;
        flex-basis: 100%;
    }
    .hl-url-wrap:has(> .hl-press-btn) .hl-press-btn {
        width: 100%;
        justify-content: center;
    }

    /* CTA banner pill URL (round input inside blue CTA) */
    .hl-url-wrap.rounded-full {
        border-radius: 1rem !important;
        flex-wrap: wrap;
        padding: 0.75rem !important;
        gap: 0.5rem;
    }
    .hl-url-wrap.rounded-full .hl-press-btn {
        width: 100% !important;
        height: auto !important;
        border-radius: 0.75rem !important;
        padding: 0.75rem !important;
        justify-content: center;
    }

    /* ── Hero stat cards: single column on small screens ── */
    section > div > .grid.grid-cols-1.lg\:grid-cols-2 > .relative.grid {
        grid-template-columns: 1fr !important;
    }
    section > div > .grid.grid-cols-1.lg\:grid-cols-2 > .relative.grid > div:last-child {
        padding-top: 0 !important;
    }

    /* ── WhatsApp widget: smaller on mobile ── */
    #hl-wa-widget {
        width: 60px !important;
        height: 60px !important;
        bottom: 16px !important;
        right: 16px !important;
    }
    #hl-wa-widget svg {
        width: 30px !important;
        height: 30px !important;
    }

    /* ── How-it-works step badge ── */
    .absolute.-top-6.-right-4,
    div[class*="absolute"][class*="-top-6"][class*="-right-4"] {
        width: 3.5rem !important;
        height: 3.5rem !important;
        right: -0.25rem !important;
        top: -0.75rem !important;
    }
    .absolute.-top-6.-right-4 span,
    div[class*="absolute"][class*="-top-6"][class*="-right-4"] span {
        font-size: 1.25rem !important;
    }

    /* ── Case studies stats: text sizing ── */
    #hl-cs-grid .grid-cols-2 div:first-child > div:first-child,
    #hl-cs-grid .grid-cols-2 div:last-child > div:first-child {
        font-size: 1.25rem;
    }
}

/* ==========================================================
   BREAKPOINT: Tablet portrait & below (max-width: 767px)
   ========================================================== */
@media (max-width: 767px) {

    /* ── Logo carousel: hide stars rating, let logos fill width ── */
    .hl-stars-block {
        display: none !important;
    }

    /* ── Goal tabs bar: scrollable on mobile ── */
    #hl-tab-bar {
        max-width: calc(100vw - 2rem);
        justify-content: flex-start;
    }
    .hl-tab-btn {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
        font-size: 13px !important;
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
    }

    /* ── Footer bottom bar: wrap links ── */
    footer .border-t .flex.gap-8 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem !important;
    }

    /* ── Testimonial card grid → single column ── */
    .testimonial-carousel {
        scroll-snap-type: x mandatory;
    }

    /* ── Audit form card padding ── */
    .fa-form-field,
    .hp-form-field {
        padding: 0.625rem 0.75rem;
    }
}

/* ==========================================================
   BREAKPOINT: Tablet landscape (768px – 1023px)
   ========================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Goal tabs: ensure pill repositions */
    .hl-tab-btn {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Case studies grid: 2 columns max */
    #hl-cs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

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

/* Desktop (1024px+): all responsive rules above are max-width
   scoped, so desktop design is preserved automatically. */