/* ============================================
   GMB Guru — Mobile-First Responsive Stylesheet
   100% Full Mobile Responsive
   ============================================ */

/* === BASE MOBILE RESETS === */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Safe area for notched phones (iPhone X+) */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* === TOUCH-FRIENDLY TARGETS (min 48px as per Google guidelines) === */
@media (max-width: 768px) {

    /* All interactive elements: minimum touch target */
    a, button, input, select, textarea, summary {
        min-height: 44px;
    }

    /* Mobile menu links — larger tap areas */
    #mobileMenu a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 12px 16px !important;
        font-size: 16px;
        border-bottom: 1px solid #f3f4f6;
    }

    #mobileMenu a:last-child {
        border-bottom: none;
    }

    /* === NAVIGATION === */
    nav {
        padding-top: env(safe-area-inset-top);
    }

    /* Hamburger button bigger touch area */
    nav button[onclick*="toggleMobileMenu"],
    nav button[onclick*="mobileMenu"] {
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
    }

    /* Mobile menu slide-down animation */
    #mobileMenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease-in-out;
        border-top: none !important;
    }

    #mobileMenu.open {
        max-height: 800px;
        border-top: 1px solid #e5e7eb !important;
    }

    /* Logo sizing on mobile */
    nav img[alt="GMB Guru"] {
        height: 32px;
        width: 32px;
    }

    nav .text-2xl {
        font-size: 1.25rem;
    }

    /* === HERO SECTIONS === */
    section h1 {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.2;
        word-break: break-word;
    }

    section h2 {
        font-size: 1.5rem !important; /* 24px */
        line-height: 1.3;
    }

    section h3 {
        font-size: 1.25rem !important;
    }

    /* Hero padding reduction */
    .gradient-google,
    [class*="bg-gradient"] {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Hero subtitle */
    section p.text-lg,
    section p.text-xl {
        font-size: 1rem !important;
        line-height: 1.6;
    }

    /* === CTA BUTTONS === */
    /* Make all CTA buttons full-width on mobile */
    .flex.flex-col.md\:flex-row a,
    .flex.flex-col.md\:flex-row button {
        width: 100%;
        text-align: center;
        padding: 16px 24px !important;
        font-size: 1.1rem;
        border-radius: 8px;
    }

    /* Standalone CTA buttons */
    a[href^="tel:"].bg-google-green,
    a[href^="tel:"].bg-white {
        display: block;
        width: 100%;
        padding: 16px !important;
        font-size: 1.125rem;
        text-align: center;
        border-radius: 12px;
    }

    /* === FORMS === */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 14px 16px !important;
        border-radius: 8px !important;
        width: 100% !important;
    }

    input:focus, select:focus, textarea:focus {
        outline: 2px solid #4285F4;
        outline-offset: 2px;
    }

    button[type="submit"] {
        padding: 16px !important;
        font-size: 1.1rem !important;
        border-radius: 8px !important;
        min-height: 52px;
    }

    /* Lead form card */
    .max-w-md {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* === GRID LAYOUTS === */
    /* Force single column on small phones */
    .grid.grid-cols-2 {
        gap: 1rem;
    }

    .grid.md\:grid-cols-3,
    .grid.md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Allow 2-col for stats on larger phones */
    @media (min-width: 375px) {
        .grid.grid-cols-2.md\:grid-cols-4 {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    /* === CARDS & CONTENT BOXES === */
    .bg-blue-50, .bg-green-50, .bg-yellow-50, .bg-red-50,
    .bg-gray-50, [class*="p-8"] {
        padding: 1rem !important;
    }

    /* Step items with number circles */
    .flex.gap-6 {
        gap: 1rem;
    }

    .flex.gap-6 > div:first-child,
    [class*="w-12"][class*="h-12"],
    [class*="w-14"][class*="h-14"] {
        min-width: 40px;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    /* === FAQ ACCORDIONS === */
    details summary {
        padding: 16px;
        font-size: 1rem;
        cursor: pointer;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    details p {
        padding: 0 16px 16px;
        font-size: 0.938rem;
        line-height: 1.7;
    }

    details {
        border-radius: 8px;
    }

    /* === FOOTER === */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        text-align: center;
    }

    footer ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem 1rem;
    }

    footer ul li {
        margin: 0;
    }

    /* Footer CTA */
    footer .bg-google-blue {
        padding: 2rem 1rem !important;
    }

    footer .bg-google-blue h3 {
        font-size: 1.5rem !important;
    }

    /* === BREADCRUMBS === */
    .bg-gray-50 .text-sm {
        font-size: 0.813rem;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* === STICKY CALL BAR === */
    .sticky-call {
        display: flex !important;
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        z-index: 50 !important;
    }

    .sticky-call span {
        font-size: 0.875rem;
    }

    .sticky-call a {
        padding: 10px 20px !important;
        font-size: 0.938rem;
        border-radius: 8px;
        min-height: auto;
        white-space: nowrap;
        animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
        50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
    }

    /* Bottom padding for sticky bar */
    body {
        padding-bottom: 72px !important;
    }

    /* === COOKIE BANNER === */
    #cookieBanner .bg-white {
        padding: 1rem !important;
        border-radius: 16px 16px 0 0;
    }

    #cookieBanner button {
        padding: 14px !important;
        font-size: 1rem;
        border-radius: 8px;
    }

    /* === TOP BAR === */
    .bg-dark-secondary {
        padding: 8px 12px;
    }

    .bg-dark-secondary a {
        font-size: 0.75rem;
    }

    /* === IMAGES === */
    img {
        max-width: 100%;
        height: auto;
    }

    /* === TABLES (if any) === */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* === AUDIT TOOL === */
    /* Progress bar */
    .bg-gray-200.rounded-full {
        height: 8px;
    }

    /* Score circle */
    svg[viewBox="0 0 200 200"] {
        max-width: 180px;
        margin: 0 auto;
    }

    /* Category scores */
    .grid.gap-3 {
        gap: 0.75rem;
    }

    /* === SERVICES GRID === */
    a.bg-white.p-8,
    a.bg-white.p-6,
    div.bg-white.p-8,
    div.bg-white.p-6 {
        padding: 1.25rem !important;
    }

    /* === GOOGLE RESOURCES SECTION === */
    .grid.md\:grid-cols-4.gap-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }

    .grid.md\:grid-cols-4.gap-4 a {
        padding: 0.75rem !important;
    }

    /* === TESTIMONIAL CARDS === */
    .bg-white.p-6.rounded-lg.shadow,
    .bg-white.p-8.rounded-lg.shadow {
        padding: 1rem !important;
    }

    /* === STEP-BY-STEP PROCESS ITEMS === */
    .border-l-4 {
        padding-left: 1rem;
        margin-left: 0;
    }

    /* === PREVENT OVERFLOW === */
    .max-w-4xl, .max-w-6xl, .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Long words / URLs */
    p, li, span, a, td, th {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
}

/* === SMALL PHONES (< 375px) === */
@media (max-width: 374px) {
    section h1 {
        font-size: 1.5rem !important;
    }

    section h2 {
        font-size: 1.25rem !important;
    }

    .text-3xl {
        font-size: 1.5rem !important;
    }

    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    nav .text-2xl, nav .text-xl {
        font-size: 1.125rem;
    }
}

/* === TABLET (769px - 1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
    .hidden.md\:flex {
        gap: 1rem;
    }

    .hidden.md\:flex a,
    .hidden.md\:flex button {
        font-size: 0.875rem;
    }

    /* Services dropdown wider */
    .relative.group .absolute {
        width: 280px;
    }
}

/* === LANDSCAPE PHONES === */
@media (max-width: 768px) and (orientation: landscape) {
    .gradient-google,
    [class*="bg-gradient"] {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    section h1 {
        font-size: 1.5rem !important;
    }

    /* Show sticky bar in landscape too */
    .sticky-call {
        padding: 8px 16px;
    }
}

/* === PRINT RESET === */
@media print {
    .sticky-call,
    #cookieBanner,
    nav,
    .bg-dark-secondary {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }
}

/* === DARK MODE SUPPORT (follows system preference) === */
@media (prefers-color-scheme: dark) {
    /* Just the cookie banner and overlays adapt */
    #cookieBanner .bg-white {
        background: #1f2937;
        color: #f9fafb;
    }

    #cookieBanner .border-gray-300 {
        border-color: #4b5563;
        color: #f9fafb;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === HIGH CONTRAST MODE === */
@media (forced-colors: active) {
    .sticky-call {
        border-top: 2px solid;
    }

    a, button {
        forced-color-adjust: none;
    }
}