/*
 * Wellworx Workplace Solutions - Occupational Physio Custom Styles
 * Supplements Tailwind CSS utility classes
 */

:root {
    --color-primary: #8B7355;
    --color-secondary: #7A644A;
    --color-accent: #8B7355;
    --color-text: #3A3A3A;
    --color-text-light: #6A6A6A;
    --color-background: #FEFCF9;
    --transition-default: 0.3s ease;
}

html { scroll-behavior: smooth; }

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

*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

p { line-height: 1.7; }

a:not([class]) {
    color: var(--color-primary);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size var(--transition-default);
}
a:not([class]):hover { background-size: 100% 2px; }

button, [type="submit"], .btn { transition: all var(--transition-default); }
button:hover, [type="submit"]:hover { box-shadow: 0 4px 12px rgba(222, 208, 190, 0.4); }

input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(222, 208, 190, 0.3); }
::placeholder { color: #9ca3af; opacity: 1; }

#mobile-menu { transition: all 0.3s ease-in-out; }
#mobile-menu.hidden { max-height: 0; opacity: 0; overflow: hidden; }
#mobile-menu:not(.hidden) { max-height: 400px; opacity: 1; }

/* Service card hover */
.service-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    header, footer, #mobile-menu-btn { display: none !important; }
    body { color: #000; background: #fff; }
}