/* Tampa Bay Driving School — Custom Styles */

/* Base resets and custom properties */
:root {
    --color-terracotta-50: #f9f2f0;
    --color-terracotta-100: #f3e5e1;
    --color-terracotta-200: #e8c4b8;
    --color-terracotta-300: #d4a08c;
    --color-terracotta-400: #c27a62;
    --color-terracotta-500: #b56245;
    --color-terracotta-600: #a84f38;
    --color-terracotta-700: #8c402e;
    --color-terracotta-800: #733527;
    --color-terracotta-900: #5e2d22;
    
    --color-sand-50: #faf8f5;
    --color-sand-100: #f5f0e8;
    --color-sand-200: #ebe0cc;
    
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
}

/* Selection color */
::selection {
    background-color: var(--color-terracotta-200);
    color: var(--color-terracotta-900);
}

/* Smooth focus visible */
*:focus-visible {
    outline: 2px solid var(--color-terracotta-600);
    outline-offset: 2px;
}

/* Custom utility for the thin decorative lines */
.deco-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--color-terracotta-200), transparent);
}

/* Ensure map iframe doesn't overflow */
.map-container iframe {
    width: 100%;
    height: 220px;
    display: block;
}

/* Print styles */
@media print {
    header, footer, #contact-form, .btn-primary { display: none; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    .service-card { border-width: 2px; }
    .nav-link::after { height: 2px; }
}

/* Very small screens */
@media (max-width: 360px) {
    .font-serif { font-size: 1.75rem; }
    .service-card { padding: 1.5rem; }
}

/* Large screens */
@media (min-width: 1920px) {
    .max-w-7xl { max-width: 80rem; }
}