/**
 * Main CSS file
 * Custom styles for JDG Website
 * Tailwind CSS is loaded via CDN in header.php
 */

/* Custom CSS Variables for JDG Brand Colors */
:root {
    --charcoal-slate: #2E2E2E;
    --antique-gold: #C6A25A;
    --electric-teal: #1DA7A0;
    --ivory-sand: #ffffff;
    --steel-gray: #7A7A7A;
}

/* Base Styles */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--ivory-sand);
    color: var(--steel-gray);
    font-family: 'Merriweather', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--charcoal-slate);
    font-weight: 600;
}

/* Better touch targets for mobile */
a, button {
    -webkit-tap-highlight-color: transparent;
}

/* Custom Utility Classes */
.btn-primary {
    background-color: var(--electric-teal);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: rgba(29, 167, 160, 0.9);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background-color: var(--charcoal-slate);
    color: var(--ivory-sand);
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-secondary:hover {
    background-color: rgba(46, 46, 46, 0.9);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.section-padding {
    padding: 3rem 1rem;
}

@media (min-width: 640px) {
    .section-padding {
        padding: 4rem 1.5rem;
    }
}

@media (min-width: 768px) {
    .section-padding {
        padding: 6rem 2rem;
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding: 6rem 4rem;
    }
}

.container-custom {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* Rolling gold animation for tagline */
.rolling-gold {
    background: linear-gradient(
        90deg,
        #7A7A7A 0%,
        #C6A25A 25%,
        #D4B570 50%,
        #C6A25A 75%,
        #7A7A7A 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rollGold 3s ease-in-out infinite;
}

@keyframes rollGold {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Tailwind-like utility classes for colors */
.bg-charcoal-slate {
    background-color: var(--charcoal-slate);
}

.text-charcoal-slate {
    color: var(--charcoal-slate);
}

.bg-antique-gold {
    background-color: var(--antique-gold);
}

.text-antique-gold {
    color: var(--antique-gold);
}

.bg-electric-teal {
    background-color: var(--electric-teal);
}

.text-electric-teal {
    color: var(--electric-teal);
}

.bg-ivory-sand {
    background-color: var(--ivory-sand);
}

.text-ivory-sand {
    color: var(--ivory-sand);
}

.bg-steel-gray {
    background-color: var(--steel-gray);
}

.text-steel-gray {
    color: var(--steel-gray);
}

/* Touch manipulation */
.touch-manipulation {
    touch-action: manipulation;
}

/* Responsive utilities */
@media (max-width: 639px) {
    .sm\:hidden {
        display: none;
    }
}

@media (min-width: 640px) {
    .sm\:block {
        display: block;
    }
}

@media (min-width: 768px) {
    .md\:hidden {
        display: none;
    }
    
    .md\:flex {
        display: flex;
    }
}