/* Custom styles for Ellen's Hair Affair — supplementary to Tailwind */

/* Smooth focus outlines for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #ff5c35;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Selection color */
::selection {
    background: #ffd1c4;
    color: #24282e;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f6f6f7;
}
::-webkit-scrollbar-thumb {
    background: #cdd0d4;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a9adb5;
}

/* Navbar height */
.nav {
    height: 72px;
}

/* Hamburger animation */
.hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}
.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
    width: 24px;
}

/* Active nav link */
.nav-link.active {
    color: #ff5c35 !important;
}

/* Prevent layout shift on select */
.form-input {
    background-color: #fff;
}

/* Print styles */
@media print {
    .nav, .mobile-menu, .mobile-overlay, .hamburger {
        display: none !important;
    }
    body {
        color: #000;
        background: #fff;
    }
    .hero-img-wrap, .map-wrap {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}