/*
Theme Name: Bergingsbedrijf Van der Laan
Theme URI: https://example.com
Author: Van der Laan
Author URI: https://example.com
Description: Volledig bewerkbaar thema voor Bergingsbedrijf Van der Laan. Dark red brand thema met Tailwind CSS. Pas alle teksten, telefoonnummers, adres en diensten aan via Weergave > Aanpassen (Customizer) en de "Diensten" post type.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vdl
Tags: business, one-column, custom-menu, custom-logo, featured-images
*/

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Custom animations */
@keyframes pulse-soft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.animate-pulse-soft {
    animation: pulse-soft 2s infinite ease-in-out;
}

/* Ensure body uses full height */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Nav menu (wp_nav_menu output) - desktop */
#header-main nav li {
    margin: 0;
    margin-left: 2rem; /* space-x-8: 32px gap between items */
}
#header-main nav li:first-child {
    margin-left: 0;
}
#header-main nav li a {
    color: #374151;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 0.25rem;
    transition: color 0.2s ease;
}
#header-main nav li a::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    left: 0;
    width: 0;
    height: 0.125rem;
    background-color: #851b1b;
    transition: width 0.3s ease;
}
#header-main nav li a:hover,
#header-main nav li a:focus {
    color: #851b1b;
    outline: none;
}
#header-main nav li a:hover::after,
#header-main nav li a.current-menu-item::after {
    width: 100%;
}
#header-main nav li.current-menu-item a {
    color: #851b1b;
}

/* Nav menu - mobile */
#mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#mobile-menu nav li {
    display: block;
    margin: 0;
    padding: 0;
}
#mobile-menu nav li + li {
    margin-top: 0.75rem; /* space-y-3 */
}
#mobile-menu nav li a {
    display: block;
    color: #374151;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0;
    text-decoration: none;
    transition: color 0.2s ease;
}
#mobile-menu nav li a:hover {
    color: #851b1b;
}

/* Footer diensten menu (wp_nav_menu) - 1:1 met bron */
#footer-main nav li {
    margin: 0;
}
#footer-main nav li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #9ca3af;
    transition: color 0.3s ease;
    text-decoration: none;
}
#footer-main nav li a i {
    flex-shrink: 0;
}
#footer-main nav li a:hover {
    color: #efa3a3;
}