/* 
 * main.css
 * Global styles for the Garth website
 */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url("/css/components/dropdown-menu.css");

/* Base Styles */
body {
    font-family: var(--font-family-primary);
    background-color: var(--color-gray-50);
    color: var(--color-gray-900);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    font-weight: var(--font-weight-medium);
}

a {
    text-decoration: none;
    color: var(--color-primary);
    transition: color var(--transition-normal) ease;
}

a:hover {
    color: var(--color-purple-100);
}

img {
    max-width: 100%;
    height: auto;
}

/* Typography Utilities */
.garth-font {
    font-family: var(--font-family-display);
}

.font-light {
    font-weight: var(--font-weight-light);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

/* Text Color Utilities */
.text-white {
    color: var(--color-white);
}

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

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

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

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

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

.text-purple-600 {
    color: var(--color-primary);
}

/* Gradient Text */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ai-gradient-text {
    background: var(--gradient-ai);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Background Utilities */
.bg-white {
    background-color: var(--color-white);
}

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

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

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

.bg-purple-100 {
    background-color: var(--color-purple-100);
}

.gradient-bg {
    background: var(--gradient-primary);
}

/* Layout Utilities */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

/* Hero Pattern Background */
.hero-pattern {
    background-color: var(--color-gray-50);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%237444FF' fill-opacity='0.03'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Spacing Utilities */
.py-12 {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
}

.py-16 {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
}

.px-4 {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

.px-6 {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
}

.px-8 {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
}

.py-2 {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
}

.py-3 {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}

.mb-2 {
    margin-bottom: var(--spacing-2);
}

.mb-4 {
    margin-bottom: var(--spacing-4);
}

.mb-6 {
    margin-bottom: var(--spacing-6);
}

.mb-8 {
    margin-bottom: var(--spacing-8);
}

.mb-12 {
    margin-bottom: var(--spacing-12);
}

.mb-16 {
    margin-bottom: var(--spacing-16);
}

.mr-2 {
    margin-right: var(--spacing-2);
}

.mr-3 {
    margin-right: var(--spacing-3);
}

.ml-1 {
    margin-left: var(--spacing-1);
}

.ml-2 {
    margin-left: var(--spacing-2);
}

.mt-12 {
    margin-top: var(--spacing-12);
}

.mt-16 {
    margin-top: var(--spacing-16);
}

/* Navigation */
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-index-50);
}

/* Responsive Utilities */
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
    
    .sm\:flex-row {
        flex-direction: row;
    }
    
    .sm\:space-y-0 {
        margin-top: 0;
    }
    
    .sm\:space-x-4 > * + * {
        margin-left: var(--spacing-4);
    }
}

@media (min-width: 768px) {
    .md\:flex {
        display: flex;
    }
    
    .md\:hidden {
        display: none;
    }
    
    .md\:ml-6 {
        margin-left: var(--spacing-6);
    }
    
    .md\:space-x-8 > * + * {
        margin-left: var(--spacing-8);
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    
    .md\:flex-row {
        flex-direction: row;
    }
    
    .md\:mt-0 {
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }
    
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Animation Helpers */
.transition-all {
    transition: all var(--transition-normal) ease;
}

.transition-colors {
    transition: color var(--transition-normal) ease, background-color var(--transition-normal) ease;
}

/* Shadows */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

/* Border Utilities */
.rounded-lg {
    border-radius: var(--border-radius-lg);
}

.rounded-xl {
    border-radius: var(--border-radius-xl);
}

.rounded-md {
    border-radius: var(--border-radius-md);
}

.rounded-full {
    border-radius: var(--border-radius-full);
}

.border {
    border-width: 1px;
    border-style: solid;
}

.border-gray-100 {
    border-color: var(--color-gray-100);
}

.border-gray-800 {
    border-color: var(--color-gray-800);
}

.border-t {
    border-top-width: 1px;
    border-top-style: solid;
}

/* tailwind extended colors */
/* Amber Colors */
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-200 { background-color: #fde68a; }
.bg-amber-300 { background-color: #fcd34d; }
.bg-amber-400 { background-color: #fbbf24; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-amber-600 { background-color: #d97706; }
.bg-amber-700 { background-color: #b45309; }
.bg-amber-800 { background-color: #92400e; }
.bg-amber-900 { background-color: #78350f; }

.text-amber-50 { color: #fffbeb; }
.text-amber-100 { color: #fef3c7; }
.text-amber-200 { color: #fde68a; }
.text-amber-300 { color: #fcd34d; }
.text-amber-400 { color: #fbbf24; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-amber-900 { color: #78350f; }

/* Teal Colors */
.bg-teal-50 { background-color: #f0fdfa; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-teal-200 { background-color: #99f6e4; }
.bg-teal-300 { background-color: #5eead4; }
.bg-teal-400 { background-color: #2dd4bf; }
.bg-teal-500 { background-color: #14b8a6; }
.bg-teal-600 { background-color: #0d9488; }
.bg-teal-700 { background-color: #0f766e; }
.bg-teal-800 { background-color: #115e59; }
.bg-teal-900 { background-color: #134e4a; }

.text-teal-50 { color: #f0fdfa; }
.text-teal-100 { color: #ccfbf1; }
.text-teal-200 { color: #99f6e4; }
.text-teal-300 { color: #5eead4; }
.text-teal-400 { color: #2dd4bf; }
.text-teal-500 { color: #14b8a6; }
.text-teal-600 { color: #0d9488; }
.text-teal-700 { color: #0f766e; }
.text-teal-800 { color: #115e59; }
.text-teal-900 { color: #134e4a; }

/* Cyan Colors */
.bg-cyan-50 { background-color: #ecfeff; }
.bg-cyan-100 { background-color: #cffafe; }
.bg-cyan-200 { background-color: #a5f3fc; }
.bg-cyan-300 { background-color: #67e8f9; }
.bg-cyan-400 { background-color: #22d3ee; }
.bg-cyan-500 { background-color: #06b6d4; }
.bg-cyan-600 { background-color: #0891b2; }
.bg-cyan-700 { background-color: #0e7490; }
.bg-cyan-800 { background-color: #155e75; }
.bg-cyan-900 { background-color: #164e63; }

.text-cyan-50 { color: #ecfeff; }
.text-cyan-100 { color: #cffafe; }
.text-cyan-200 { color: #a5f3fc; }
.text-cyan-300 { color: #67e8f9; }
.text-cyan-400 { color: #22d3ee; }
.text-cyan-500 { color: #06b6d4; }
.text-cyan-600 { color: #0891b2; }
.text-cyan-700 { color: #0e7490; }
.text-cyan-800 { color: #155e75; }
.text-cyan-900 { color: #164e63; }

/* Violet Colors */
.bg-violet-50 { background-color: #f5f3ff; }
.bg-violet-100 { background-color: #ede9fe; }
.bg-violet-200 { background-color: #ddd6fe; }
.bg-violet-300 { background-color: #c4b5fd; }
.bg-violet-400 { background-color: #a78bfa; }
.bg-violet-500 { background-color: #8b5cf6; }
.bg-violet-600 { background-color: #7c3aed; }
.bg-violet-700 { background-color: #6d28d9; }
.bg-violet-800 { background-color: #5b21b6; }
.bg-violet-900 { background-color: #4c1d95; }

.text-violet-50 { color: #f5f3ff; }
.text-violet-100 { color: #ede9fe; }
.text-violet-200 { color: #ddd6fe; }
.text-violet-300 { color: #c4b5fd; }
.text-violet-400 { color: #a78bfa; }
.text-violet-500 { color: #8b5cf6; }
.text-violet-600 { color: #7c3aed; }
.text-violet-700 { color: #6d28d9; }
.text-violet-800 { color: #5b21b6; }
.text-violet-900 { color: #4c1d95; }

/* Indigo Colors */
.bg-indigo-50 { background-color: #eef2ff; }
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-indigo-200 { background-color: #c7d2fe; }
.bg-indigo-300 { background-color: #a5b4fc; }
.bg-indigo-400 { background-color: #818cf8; }
.bg-indigo-500 { background-color: #6366f1; }
.bg-indigo-600 { background-color: #4f46e5; }
.bg-indigo-700 { background-color: #4338ca; }
.bg-indigo-800 { background-color: #3730a3; }
.bg-indigo-900 { background-color: #312e81; }

.text-indigo-50 { color: #eef2ff; }
.text-indigo-100 { color: #e0e7ff; }
.text-indigo-200 { color: #c7d2fe; }
.text-indigo-300 { color: #a5b4fc; }
.text-indigo-400 { color: #818cf8; }
.text-indigo-500 { color: #6366f1; }
.text-indigo-600 { color: #4f46e5; }
.text-indigo-700 { color: #4338ca; }
.text-indigo-800 { color: #3730a3; }
.text-indigo-900 { color: #312e81; }

/* Lime Colors */
.bg-lime-50 { background-color: #f7fee7; }
.bg-lime-100 { background-color: #ecfccb; }
.bg-lime-200 { background-color: #d9f99d; }
.bg-lime-300 { background-color: #bef264; }
.bg-lime-400 { background-color: #a3e635; }
.bg-lime-500 { background-color: #84cc16; }
.bg-lime-600 { background-color: #65a30d; }
/* .bg-lime-700 { background-color: #4d7c0f; } */
.bg-lime-800 { background-color: #3f6212; }
.bg-lime-900 { background-color: #365314; }

.text-lime-50 { color: #f7fee7; }
.text-lime-100 { color: #ecfccb; }
.text-lime-200 { color: #d9f99d; }
.text-lime-300 { color: #bef264; }
.text-lime-400 { color: #a3e635; }
.text-lime-500 { color: #84cc16; }
.text-lime-600 { color: #65a30d; }
.text-lime-700 { color: #4d7c0f; }
.text-lime-800 { color: #3f6212; }
.text-lime-900 { color: #365314; }