/*
Theme Name: Reese Transport
Theme URI: https://reesetransport.com
Author: Reese Transport LLC
Author URI: https://reesetransport.com
Description: Custom WordPress theme for Reese Transport LLC - Premier NEMT & Airport Shuttle service in Middle Tennessee. Features a modern design with Tailwind CSS, smart quote wizard, and testimonials system.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reese-transport
Tags: one-column, custom-menu, featured-images, translation-ready, custom-logo

Reese Transport Theme - Built for Non-Emergency Medical Transport & Airport Shuttle Services
*/

/* 
 * Brand Color Palette:
 * - Amber: #d1c219
 * - Dark Khaki: #483f27
 * - Onyx: #171614
 * - Dark Coffee: #3a2618
 * - Pacific Blue: #7fb7be
 * - White: #ffffff
 */

/* Custom CSS additions beyond Tailwind */
:root {
    --color-amber: #d1c219;
    --color-dark-khaki: #483f27;
    --color-onyx: #171614;
    --color-dark-coffee: #3a2618;
    --color-pacific-blue: #7fb7be;
    --color-white: #ffffff;
    --color-gold: #f5a819;
}

/* Gold color utilities for NEMT */
.bg-gold {
    background-color: #f5a819;
}
.text-gold {
    color: #DC143C;
}
.border-gold {
    border-color: #DC143C;
}
.from-gold {
    --tw-gradient-from: #DC143C var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(220 20 60 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-gold\/80 {
    --tw-gradient-to: rgb(220 20 60 / 0.8) var(--tw-gradient-to-position);
}
.hover\:from-gold\/90:hover {
    --tw-gradient-from: rgb(220 20 60 / 0.9) var(--tw-gradient-from-position);
}
.hover\:to-gold\/70:hover {
    --tw-gradient-to: rgb(220 20 60 / 0.7) var(--tw-gradient-to-position);
}
.shadow-gold\/25 {
    --tw-shadow-color: rgb(220 20 60 / 0.25);
    --tw-shadow: var(--tw-shadow-colored);
}

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

/* Glassmorphism effect for navigation */
.glassmorphism {
    background: rgba(23, 22, 20, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ============================================
   BUTTON HOVER ANIMATIONS (Requirement 5.3)
   Scale effect on hover for all interactive buttons
   ============================================ */

/* Button hover animation - scale-105 */
.btn-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.btn-hover:hover {
    transform: scale(1.05);
}

.btn-hover:active {
    transform: scale(0.98);
}

/* CTA button specific hover with glow */
a.btn-hover:hover,
button.btn-hover:hover {
    transform: scale(1.05);
}

/* ============================================
   INPUT FOCUS GLOW (Requirement 5.3)
   Amber glow effect on input focus
   ============================================ */

/* Custom focus states with amber glow */
.focus-amber:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(209, 194, 25, 0.4), 0 0 20px rgba(209, 194, 25, 0.15);
    border-color: var(--color-amber) !important;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Pacific blue focus for NEMT-related inputs */
.focus-pacific-blue:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(127, 183, 190, 0.4), 0 0 20px rgba(127, 183, 190, 0.15);
    border-color: var(--color-pacific-blue) !important;
}

/* ============================================
   FADE-IN ANIMATIONS (Requirement 5.3)
   Hero elements and section animations
   ============================================ */

/* Fade-in animation for hero elements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

/* Fade-in from left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-left {
    animation: fadeInLeft 0.6s ease-out forwards;
    opacity: 0;
}

/* Fade-in from right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-right {
    animation: fadeInRight 0.6s ease-out forwards;
    opacity: 0;
}

/* Simple fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}

/* Scale-in animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in {
    animation: scaleIn 0.4s ease-out forwards;
    opacity: 0;
}

/* ============================================
   MICRO-INTERACTIONS
   Subtle animations for enhanced UX
   ============================================ */

/* Icon hover scale effect */
.icon-hover {
    transition: transform 0.2s ease-in-out;
}

.icon-hover:hover {
    transform: scale(1.1);
}

/* Card hover lift effect */
.card-hover {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

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

/* Link underline animation */
.link-underline {
    position: relative;
}

.link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-amber);
    transition: width 0.3s ease-out;
}

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

/* Pulse animation for badges */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(209, 194, 25, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(209, 194, 25, 0);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Gradient text for brand */
.gradient-text {
    background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-white) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animated gradient background */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

/* Mobile menu transition */
.mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.mobile-menu.hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.mobile-menu.active {
    max-height: 500px;
    opacity: 1;
}

/* ============================================
   FORM ELEMENT TRANSITIONS
   Smooth transitions for form interactions
   ============================================ */

/* Input field transitions */
input,
select,
textarea {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* Radio/checkbox custom styling transitions */
input[type="radio"] + div,
input[type="checkbox"] + div {
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, transform 0.15s ease-in-out;
}

input[type="radio"]:checked + div,
input[type="checkbox"]:checked + div {
    transform: scale(1.02);
}

/* Tab button transitions */
.quote-tab {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.15s ease-in-out;
}

.quote-tab:hover:not(.active) {
    transform: translateY(-2px);
}

/* ============================================
   LOADING STATES
   Animations for loading indicators
   ============================================ */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Skeleton loading animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}


/* Navigation scroll state styling */
/* Requirements: 5.2 - Sticky navigation bar with glassmorphism effect */
.site-header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.scrolled .glassmorphism {
    background: rgba(23, 22, 20, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Enhanced glassmorphism on scroll */
.site-header.scrolled {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Mobile menu improvements */
#mobile-menu:not(.hidden) {
    display: block;
    max-height: 500px;
    opacity: 1;
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
    overflow: hidden;
}

/* Skip link accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-amber);
    color: var(--color-onyx);
    padding: 8px 16px;
    z-index: 100;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   DATE AND TIME PICKER ENHANCEMENTS
   Improved styling for better UX
   ============================================ */

/* Date and time input styling */
input[type="date"],
input[type="time"] {
    position: relative;
    cursor: pointer;
}

/* Remove default calendar/clock icon on webkit browsers */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}

/* Style the date/time text */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
    padding-left: 0;
}

/* Placeholder-like styling when empty */
input[type="date"]:not(:focus):invalid,
input[type="time"]:not(:focus):invalid {
    color: rgb(107, 114, 128); /* gray-500 */
}

/* Firefox date/time picker styling */
input[type="date"]::-moz-calendar-picker-indicator,
input[type="time"]::-moz-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0;
}

/* Hover effect for date/time containers */
.date-time-container {
    transition: border-color 0.2s ease-in-out;
}

.date-time-container:hover {
    border-color: rgb(107, 114, 128) !important; /* gray-500 */
}

/* Focus state for date/time inputs */
input[type="date"]:focus,
input[type="time"]:focus {
    outline: none;
}

/* Dark mode color scheme for pickers */
input[type="date"],
input[type="time"] {
    color-scheme: dark;
}