/* ==========================================================================
   ILLY ELEKTROTECHNIK - MAIN STYLES
   ========================================================================== */

/* --- 1. VARIABLEN & RESET --- */
:root {
    --brand-red: #e30613; /* Dein iLLY Rot */
    --brand-dark: #1a1a1a;
    --brand-white: #ffffff;
}

/* --- 2. NAVIGATION & HEADER --- */
#main-nav {
    transition: all 0.3s ease;
}

.nav-link-active {
    color: var(--brand-red);
}

/* --- 3. KOMPONENTEN (Buttons, Karten) --- */
.brand-button {
    @apply px-8 py-4 font-black uppercase italic transition shadow-lg; /* Wenn du Tailwind nutzt */
}

/* --- 4. UNTERSEITEN STYLES --- */
.service-header {
    background-color: var(--brand-dark);
    padding: 80px 0;
}

/* --- 5. FOOTER --- */
footer {
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Dropdown Animation */
.group:hover .group-hover\:visible {
    visibility: visible;
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

/* Optional: Pfeil-Rotation bei Hover */
.group:hover .fa-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}
/* --- ÜBER UNS KACHELN (REBOOT) --- */
.illy-tile-red {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 90px;
    height: 90px;
    background-color: #e30613; /* Dein Rot */
    z-index: 40; /* Höher als das Foto */
    box-shadow: 4px 4px 15px rgba(0,0,0,0.2);
}

.illy-tile-dark {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 110px;
    height: 110px;
    background-color: #1a1a1a; /* Dein Schwarz */
    z-index: 40; /* Höher als das Foto */
    box-shadow: -4px -4px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.illy-photo-container {
    position: relative;
    z-index: 10;
    border: 12px solid #ffffff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* --- 6. MOBILE / RESPONSIVE FIXES --- */

/* Mobile menu drawer transition */
#mobile-drawer {
    transition: transform 0.3s ease-in-out;
}

/* Prevent horizontal overflow on small devices */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Ensure containers don't overflow */
.container {
    max-width: 100%;
    box-sizing: border-box;
}

/* All images must be responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure the mobile menu sits above everything */
#mobile-menu {
    z-index: 200;
}

/* Smooth dropdown animation for mobile sub-menus */
.mobile-dropdown {
    transition: max-height 0.2s ease;
}

/* Mobile text scaling for hero sections */
@media (max-width: 639px) {
    /* Tighter padding on mobile */
    section {
        overflow: hidden;
    }

    /* Hero heading scaling */
    h1 {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* FAQ summary text wrapping */
    details summary {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }

    /* Steps number overlay - smaller on mobile */
    .text-8xl {
        font-size: 3rem;
    }

    /* Contact form container responsive */
    .rounded-\[2rem\] {
        border-radius: 1rem;
    }

    /* Fix large gaps on mobile (only non-responsive ones) */
    .gap-16:not([class*="sm:gap"]):not([class*="md:gap"]):not([class*="lg:gap"]) {
        gap: 2rem;
    }

    .gap-12:not([class*="sm:gap"]):not([class*="md:gap"]):not([class*="lg:gap"]) {
        gap: 1.5rem;
    }

    /* Fix min-width forcing overflow */
    [class*="min-w-"] {
        min-width: 0 !important;
    }

    /* Fix fixed-height map on mobile */
    .h-\[450px\] {
        height: 250px;
    }

    /* Table cells smaller on mobile */
    table th,
    table td {
        padding: 0.5rem;
        font-size: 0.7rem;
    }

    /* Ensure outlined text stays readable on small screens */
    [style*="text-stroke"] {
        -webkit-text-stroke-width: 0.5px !important;
    }

    /* Reduce service card padding (only cards in grids) */
    .grid > .p-10 {
        padding: 1.5rem;
    }

    /* Steps section - reduce decorative number */
    .grid .text-8xl {
        font-size: 3rem;
    }

    /* Location bar - compact on mobile */
    .flex-wrap.justify-center.gap-6 {
        gap: 0.5rem 1rem;
    }
}

/* Fix for service grid on medium screens */
@media (max-width: 767px) {
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    /* Reduce 3-column grid gap */
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Tablet adjustments */
@media (min-width: 640px) and (max-width: 1023px) {
    .text-6xl {
        font-size: 3rem;
    }

    .gap-16 {
        gap: 2rem;
    }
}