/* Custom Styles for MK Solar & Installation */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    max-width: 100vw;
}

html {
    scroll-behavior: smooth;
}

.gradient-text {
    background: linear-gradient(135deg, #10B981 0%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — MK Solar & Installation
   Breakpoints (mobile-first, matching Tailwind CDN defaults):
     xs   < 480px   Very small phones (iPhone SE, Galaxy A-series)
     sm   ≥ 640px   Standard phones landscape / large phones
     md   ≥ 768px   Tablets portrait (iPad mini, Samsung Tab)
     lg   ≥ 1024px  Tablets landscape / small laptops
     xl   ≥ 1280px  Desktops / large laptops
     2xl  ≥ 1536px  Wide monitors
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Parallax — disable fixed attachment on touch/tablet (scroll jank) */
@media (max-width: 1023px) {
    .hero-parallax { background-attachment: scroll; }
}

/* ── 2. Navigation ──────────────────────────────────────────────────────*/
@media (max-width: 767px) {
    #navbar .h-20         { height: 3.75rem !important; }
    #navbar .glass-effect { padding-top: 0; padding-bottom: 0; }

    #mobile-menu {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        border-top: 1px solid #f3f4f6;
    }
    #mobile-menu a {
        padding: 0.8rem 1.25rem;
        display: block;
        border-bottom: 1px solid #f3f4f6;
        font-size: 0.95rem;
    }
    #mobile-menu a:last-child { border-bottom: none; }
}

/* xs — tighten navbar on very small screens */
@media (max-width: 479px) {
    #navbar .h-20       { height: 3.25rem !important; }
    #navbar .text-xl    { font-size: 1rem !important; }
    #navbar .text-xs    { font-size: 0.6rem !important; }
    /* Logo icon slightly smaller */
    #navbar .w-12.h-12  { width: 2.5rem !important; height: 2.5rem !important; }
}

/* ── 3. Hero Section ────────────────────────────────────────────────────*/
@media (max-width: 639px) {
    #home {
        min-height: 100svh;               /* svh accounts for mobile browser UI */
        padding-top: 4.5rem  !important;
        padding-bottom: 2.5rem !important;
    }
    #home h1 { font-size: 2rem !important; line-height: 1.2 !important; }

    /* CTA buttons — full-width stacked */
    #home .btn-primary,
    #home .btn-secondary {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.9rem 1.5rem !important;
        font-size: 0.95rem !important;
    }

    /* Stats bar */
    #home .grid.grid-cols-3               { gap: 0.5rem !important; }
    #home .grid.grid-cols-3 [data-target] { font-size: 1.2rem !important; }
    #home .grid.grid-cols-3 .text-xs      { font-size: 0.6rem !important; }
}

@media (max-width: 479px) {
    #home h1                              { font-size: 1.75rem !important; }
    #home .grid.grid-cols-3 [data-target] { font-size: 1rem !important; }
    #home .grid.grid-cols-3 .text-xs      { font-size: 0.55rem !important; }
    #home .grid.grid-cols-3               { gap: 0.3rem !important; }
}

/* ── 4. About Section ───────────────────────────────────────────────────*/
@media (max-width: 1023px) {
    #about .grid { gap: 2rem !important; }
}

@media (max-width: 767px) {
    #about h2                             { font-size: 1.75rem !important; }
    /* Image: shorten aspect ratio on mobile so it doesn't dominate */
    #about .aspect-\[4\/3\]              { aspect-ratio: 16/9 !important; max-height: 240px; }
    /* Stats grid */
    #about .grid.grid-cols-3             { gap: 0.5rem !important; }
    #about .grid.grid-cols-3 > div       { padding: 0.5rem !important; }
    #about .grid.grid-cols-3 [data-target]{ font-size: 1.4rem !important; }
    /* Hide floating badge card — already hidden sm:block, reinforce */
    #about .-bottom-4.-right-2,
    #about .-bottom-8.-right-8           { display: none !important; }
}

@media (max-width: 479px) {
    #about h2                             { font-size: 1.5rem !important; }
    #about .grid.grid-cols-3 [data-target]{ font-size: 1.1rem !important; }
    #about .grid.grid-cols-3 > div        { padding: 0.3rem !important; }
    #about .grid.grid-cols-3              { gap: 0.3rem !important; }
    #about .text-xs.text-gray-500         { font-size: 0.55rem !important; }
}

/* ── 5. Services Section ────────────────────────────────────────────────*/
@media (max-width: 767px) {
    #services h2              { font-size: 1.75rem !important; }
    #services .grid           { gap: 1rem !important; }
    #services .card-hover     { padding: 1.25rem !important; }
    /* Decorative circle blobs — not visible, hide cleanly */
    #services .absolute.top-0 { display: none !important; }
}

/* Tablet: force 2-column layout */
@media (min-width: 640px) and (max-width: 1023px) {
    #services .grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 479px) {
    #services h2              { font-size: 1.5rem !important; }
    #services .card-hover     { padding: 1rem !important; }
    #services .w-16.h-16      { width: 2.75rem !important; height: 2.75rem !important; }
    #services .w-8.h-8        { width: 1.25rem !important; height: 1.25rem !important; }
}

/* ── 6. Team Carousel ───────────────────────────────────────────────────*/
@media (max-width: 767px) {
    #team h2                  { font-size: 1.75rem !important; }
    #team .team-carousel      { padding-left: 2rem  !important; padding-right: 2rem  !important; }
    #team .team-item          { width: 85% !important; flex-shrink: 0 !important; }
    #team .team-track         { gap: 1rem !important; }
    /* Hide arrow buttons on mobile — swipe/drag is the UX */
    #team .team-prev,
    #team .team-next          { display: none !important; }
}

/* Tablet: show slightly narrower cards + show arrows */
@media (min-width: 768px) and (max-width: 1023px) {
    #team .team-item          { width: 230px !important; }
}

@media (max-width: 479px) {
    #team h2                  { font-size: 1.5rem !important; }
    #team .team-item          { width: 88% !important; }
    #team .team-carousel      { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

/* ── 7. Projects Grid (index.php Featured Projects) ─────────────────────*/
@media (max-width: 639px) {
    #projects h2              { font-size: 1.75rem !important; }
    #projects .grid           { gap: 0.75rem !important; }
    #projects img             { height: 180px !important; object-fit: cover !important; }
    #projects .rounded-2xl    { border-radius: 0.75rem !important; }
}

@media (max-width: 479px) {
    #projects h2              { font-size: 1.5rem !important; }
    #projects img             { height: 160px !important; }
    #projects .grid           { gap: 0.5rem !important; }
}

/* ── 8. Stats / Why-Choose-Us strip (between projects & contact) ─────────*/
@media (max-width: 639px) {
    /* 4-column strip → 2×2 grid on mobile */
    section.py-8.sm\:py-12.lg\:py-16 .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
    section.py-8 .text-3xl  { font-size: 1.5rem  !important; }
    section.py-8 .text-4xl  { font-size: 1.75rem !important; }
}

/* ── 9. Contact Section ─────────────────────────────────────────────────*/
@media (max-width: 1023px) {
    #contact .grid  { gap: 2rem !important; }
}

@media (max-width: 767px) {
    #contact h2     { font-size: 1.75rem !important; }
    /* Map height */
    #contact .h-48,
    #contact .h-56,
    #contact .h-64  { height: 200px !important; }
    /* Form card */
    #contact form   { padding: 1.25rem !important; }
    /* Inner form grid */
    #contact .grid.grid-cols-1.sm\:grid-cols-2 { gap: 0.75rem !important; }
    /* Icon circles */
    #contact .w-12.h-12,
    #contact .w-10.h-10 { width: 2.25rem !important; height: 2.25rem !important; }
}

@media (max-width: 479px) {
    #contact h2     { font-size: 1.5rem  !important; }
    #contact form   { padding: 1rem !important; }
    #contact .h-48,
    #contact .h-56,
    #contact .h-64  { height: 170px !important; }
}

/* ── 10. Footer ─────────────────────────────────────────────────────────*/
/* Tablet: 2-column grid */
@media (max-width: 1023px) {
    footer .grid.lg\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 2.5rem !important; }
    footer .py-16                { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
    footer .gap-12               { gap: 2.5rem !important; }
}

/* Mobile: single column, centred */
@media (max-width: 639px) {
    footer .grid                 { grid-template-columns: 1fr !important; gap: 1.75rem !important; text-align: center !important; }
    footer .flex.space-x-4      { justify-content: center !important; }
    footer .py-16                { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    footer .gap-12               { gap: 1.75rem !important; }
    /* Bottom legal bar */
    footer .flex.space-x-6      { flex-wrap: wrap; justify-content: center !important; gap: 0.5rem !important; }
}

@media (max-width: 479px) {
    footer .grid                 { gap: 1.25rem !important; }
    footer h4                    { font-size: 0.95rem !important; margin-bottom: 0.75rem !important; }
    footer .text-gray-400        { font-size: 0.82rem !important; }
    footer .text-sm              { font-size: 0.78rem !important; }
    footer .w-10.h-10            { width: 2.25rem !important; height: 2.25rem !important; }
}

/* ── 11. Floating action buttons ────────────────────────────────────────*/
@media (max-width: 479px) {
    /* WhatsApp — slightly smaller, tuck into corner */
    a[href*="wa.me"] {
        width:  3.25rem !important;
        height: 3.25rem !important;
        bottom: 5rem    !important;
        right:  0.75rem !important;
    }
    a[href*="wa.me"] svg { width: 1.75rem !important; height: 1.75rem !important; }

    /* Back-to-top */
    #back-to-top {
        width:  2.75rem !important;
        height: 2.75rem !important;
        bottom: 1rem    !important;
        right:  0.75rem !important;
    }
}

/* ── 12. Lightbox ───────────────────────────────────────────────────────*/
@media (max-width: 767px) {
    #lightbox-img               { max-height: 75vh; }
    #lightbox-close             { top: 0.5rem !important; right: 0.5rem !important; font-size: 1.2rem; }
    #lightbox-prev              { left: 0.25rem  !important; font-size: 1.5rem; }
    #lightbox-next              { right: 0.25rem !important; font-size: 1.5rem; }
}

/* ── 13. projects.php pagination ─────────────────────────────────────────*/
@media (max-width: 479px) {
    .pagination-wrap { gap: 4px !important; }
    .pagination-wrap a,
    .pagination-wrap span {
        min-width: 34px !important;
        height:    34px !important;
        font-size: 0.72rem !important;
        padding: 0 0.3rem !important;
    }
}

/* ── 14. Touch-device hover removal ─────────────────────────────────────
   Hover states "stick" on tap on touch screens — remove transform lifts.  */
@media (hover: none) {
    .card-hover:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .btn-primary:hover,
    .btn-secondary:hover { transform: none !important; }
    .input-field:focus   { transform: none !important; }
}

/* ── 15. iOS safe-area insets (notch / home-indicator padding) ───────────*/
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body        { padding-bottom: env(safe-area-inset-bottom); }
    #back-to-top { bottom: calc(2rem + env(safe-area-inset-bottom)); }
    a[href*="wa.me"] { bottom: calc(6rem + env(safe-area-inset-bottom)); }
}



.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
    .card-hover:hover {
        transform: translateY(-12px);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
}

.btn-primary {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.5);
}

.btn-secondary {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.5);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: linear-gradient(90deg, #10B981, #F59E0B);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.counter-animation {
    font-variant-numeric: tabular-nums;
}

.team-card-overlay {
    background: linear-gradient(to top, rgba(16, 185, 129, 0.95) 0%, rgba(16, 185, 129, 0.7) 50%, transparent 100%);
}

.project-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
}

/* Hide overlay text on project cards while preserving the visual overlay */
.project-overlay > * {
    display: none !important;
}

/* Allow clicks to reach the image when overlay is hidden; enable pointer events when visible */
.project-overlay {
    pointer-events: none; /* never block clicks so images remain clickable */
}

.input-field {
    transition: all 0.3s ease;
}

.input-field:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -10px rgba(16, 185, 129, 0.3);
}

.scroll-indicator {
    animation: bounce 2s infinite;
}

@keyframes bounce {
 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.4; }
}

.animate-pulse-slow {
    animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Team carousel marquee styles */
.team-carousel {
    /* CSS variable controls the speed; JS may set --marquee-duration dynamically */
    --marquee-duration: 28s;
    cursor: grab;
    overflow: hidden;
}

.team-carousel:active {
    cursor: grabbing;
}

.team-track {
    display: flex;
    align-items: stretch;
    gap: 1.5rem; /* matches Tailwind gap-6 */
    /* ensure content doesn't wrap and can be translated horizontally */
    white-space: nowrap;
    will-change: transform;
}

.team-item {
    /* ensure items remain inline-flex children and keep their sizing rules */
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Pause animation on hover (user can read details) */
.team-carousel:hover .team-track,
.team-carousel:focus-within .team-track {
    /* animation-play-state: paused; */
}

/* Improve touch pause behavior */
.team-carousel.touching .team-track {
    /* animation-play-state: paused; */
}

/* Lightbox / Modal for project images */
#lightbox {
    z-index: 60;
}
#lightbox .lightbox-inner {
    max-width: 95vw;
    max-height: 95vh;
}
#lightbox-img {
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 0.5rem;
}
#lightbox-close,
#lightbox-prev,
#lightbox-next {
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
}
#lightbox-close:hover,
#lightbox-prev:hover,
#lightbox-next:hover {
    background: rgba(0,0,0,0.6);
}

/* Toast for form feedback */
#form-toast { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 60; }
#form-toast .hidden { display: none !important; }
#form-toast-inner { min-width: 220px; }
#form-toast.show { display: block !important; animation: toast-in 300ms ease; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Sections: relative positioning for z-index stacking only.
   NO overflow-x:hidden here — that would silently set overflow-y:auto
   on every section (CSS spec §overflow), turning each into an independent
   scroll container and breaking normal page scroll behaviour.
   Horizontal overflow is already prevented by body { overflow-x: hidden }. */
section {
    position: relative;
    z-index: 1;
}

/* Team carousel wrapper must sit above neighbouring sections */
#team .relative {
    position: relative;
    z-index: 2;
}

/* Carousel track: no wrapping, GPU-composited translate */
.team-track {
    flex-wrap: nowrap !important;
    will-change: transform;
}

/* ── Team carousel: CSS infinite scroll ─────────────────────────────────────
   The PHP template outputs each member card TWICE (set-1 + set-2).
   The animation slides from 0 → -50%, which is always exactly one full set,
   guaranteeing a seamless loop with zero blank gap and no JS measurement. */

@keyframes teamScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Active marquee state — added by JS when cards overflow the container */
.team-track.is-scrolling {
    animation: teamScroll var(--team-duration, 30s) linear infinite;
    width: max-content;
    cursor: grab;
}
.team-track.is-scrolling:active {
    cursor: grabbing;
}
/* Pause on hover/focus so users can read a card */
.team-carousel:hover  .team-track.is-scrolling,
.team-carousel:focus-within .team-track.is-scrolling {
    animation-play-state: paused;
}

/* Static mode — cards centred when few enough to fit in viewport */
.team-track.is-static {
    justify-content: center;
    flex-wrap: wrap !important;
    animation: none;
}

/* Image responsive fix */
img {
    max-width: 100%;
    height: auto;
}

/* ── Bug fixes ──────────────────────────────────────────────────────────────── */

/* Prevent white-space:nowrap on .team-track from propagating into card text */
.team-item {
    white-space: normal;
}

/* Ensure the back-to-top arrow and WhatsApp button never overlap each other */
#back-to-top {
    bottom: 2rem;  /* 32px — Tailwind bottom-8 */
    right: 2rem;
}