/* Custom Styles for Freelancer Theme */

/* Color Variables - Global */
:root {
    /* Primary Colors */
    --color-primary: #fcd307;           /* Yellow/Orange - Primary brand color */
    --color-primary-dark: #d4b106;      /* Darker yellow/orange for hover states */
    --color-primary-light: #fde047;     /* Lighter yellow/orange for backgrounds */
    
    /* Background Colors */
    --color-background: #ffffff;        /* Main background color */
    --color-background-secondary: #f9fafb; /* Secondary background */
    --color-background-tertiary: #f3f4f6;  /* Tertiary background */
    
    /* Card Colors */
    --color-card: #ffffff;              /* Card background color */
    --color-card-hover: #f9fafb;        /* Card hover state */
    --color-card-border: #e5e7eb;       /* Card border color */
    
    /* Text Colors */
    --color-text: #1f2937;              /* Primary text color */
    --color-text-secondary: #6b7280;    /* Secondary text color */
    --color-text-tertiary: #9ca3af;     /* Tertiary text color */
    --color-text-muted: #d1d5db;        /* Muted text color */
    
    /* Border Colors */
    --color-border: #e5e7eb;            /* Primary border color */
    --color-border-secondary: #d1d5db;  /* Secondary border color */
    --color-border-tertiary: #f3f4f6;   /* Tertiary border color */
    
    /* Status Colors */
    --color-success: #10b981;           /* Success/Green color */
    --color-warning: #f59e0b;           /* Warning/Orange color */
    --color-error: #ef4444;             /* Error/Red color */
    --color-info: #fcd307;              /* Info/Yellow color */
    
    /* Link Colors */
    --color-link: var(--color-primary); /* Link color */
    --color-link-hover: var(--color-primary-dark); /* Link hover color */
    --color-link-visited: #7c3aed;      /* Visited link color */
    
    /* Button Colors */
    --color-button-primary: var(--color-primary);
    --color-button-primary-hover: var(--color-primary-dark);
    --color-button-secondary: #6b7280;
    --color-button-secondary-hover: #4b5563;
    --color-button-text: #000000; /* Black text on yellow background */
    
    /* Form Colors */
    --color-input-background: #ffffff;
    --color-input-border: var(--color-border);
    --color-input-border-focus: var(--color-primary);
    --color-input-text: var(--color-text);
    --color-input-placeholder: var(--color-text-tertiary);
    
    /* Shadow Colors */
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-light: rgba(0, 0, 0, 0.05);
    --color-shadow-dark: rgba(0, 0, 0, 0.2);
    
    /* Overlay Colors */
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-overlay-light: rgba(0, 0, 0, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    
    /* Code Colors */
    --color-code-background: #f3f4f6;
    --color-code-text: #1f2937;
    --color-code-border: #e5e7eb;
    
    /* Quote Colors */
    --color-quote-background: var(--color-card);
    --color-quote-border: var(--color-primary);
    --color-quote-text: var(--color-text-secondary);
    
    /* Comment Colors */
    --color-comment-background: rgba(252, 211, 7, 0.05);
    --color-comment-border: var(--color-primary);
    
    /* Separator Colors */
    --color-separator: var(--color-border);
    --color-separator-dots: var(--color-text-tertiary);
    
    /* Layout Variables */
    --page-content-max-width: 72rem; /* 1152px ~ Tailwind max-w-6xl */
    --services-header-max-width: 72rem; /* Align with page content by default */
}

/* Dark Mode Color Overrides */
@media (prefers-color-scheme: dark) {
    :root {
        /* Background Colors - Dark */
        --color-background: #111827;
        --color-background-secondary: #1f2937;
        --color-background-tertiary: #374151;
        
        /* Card Colors - Dark */
        --color-card: #1f2937;
        --color-card-hover: #374151;
        --color-card-border: #374151;
        
        /* Text Colors - Dark */
        --color-text: #f9fafb;
        --color-text-secondary: #d1d5db;
        --color-text-tertiary: #9ca3af;
        --color-text-muted: #6b7280;
        
        /* Border Colors - Dark */
        --color-border: #374151;
        --color-border-secondary: #4b5563;
        --color-border-tertiary: #6b7280;
        
        /* Form Colors - Dark */
        --color-input-background: #374151;
        --color-input-border: #4b5563;
        --color-input-text: #f9fafb;
        --color-input-placeholder: #9ca3af;
        
        /* Code Colors - Dark */
        --color-code-background: #374151;
        --color-code-text: #f9fafb;
        --color-code-border: #4b5563;
        
        /* Separator Colors - Dark */
        --color-separator: #4b5563;
        --color-separator-dots: #9ca3af;
    }
}

/* Custom utility classes */
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);.site-header {
        background-color: var(--color-surface) !important;
    }
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Page Content Container max-width control */
.page-content-container {
    max-width: var(--page-content-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Services Header Container max-width control */
.services-header-container {
    max-width: var(--services-header-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Override template inline full-width rule specifically for header container */
body:not(.has-global-sidebar) .container.services-header-container,
.service-archive-content .container.services-header-container {
    max-width: var(--services-header-max-width) !important;
}

/* Header Background */

/* Text Color Override */
.text-gray-300 {
    color: var(--color-text-secondary) !important;
}



/* Custom button styles */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-black font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

/* Custom card styles */
.card {
    @apply bg-white rounded-lg shadow-md p-6 border border-gray-200;
}

.card-hover {
    @apply transition-transform duration-200 hover:transform hover:scale-105;
}

/* Custom form styles */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

/* Custom navigation styles */
.nav-link {
    @apply text-gray-600 hover:text-blue-600 transition-colors duration-200;
}

.nav-link-active {
    @apply text-blue-600 font-medium;
}

/* Custom section styles */
.section-padding {
    @apply py-16 px-4;
}

.container-custom {
    @apply max-w-7xl mx-auto;
}

/* Custom typography */
.heading-1 {
    @apply text-4xl md:text-5xl font-bold text-gray-900;
}

.heading-2 {
    @apply text-3xl md:text-4xl font-semibold text-gray-900;
}

.heading-3 {
    @apply text-2xl md:text-3xl font-semibold text-gray-900;
}

/* Custom spacing utilities */
.section-gap {
    @apply space-y-8 md:space-y-12;
}

/* Line clamp utilities */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom responsive utilities */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
}


/* WordPress Pagination Styles */
.wp-pagenavi {
    @apply flex items-center justify-center space-x-2;
}

.wp-pagenavi a,
.wp-pagenavi span {
    @apply px-3 py-2 text-sm font-medium rounded-lg transition-colors duration-200;
}

.wp-pagenavi a {
    @apply bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white;
}

.wp-pagenavi span.current {
    @apply bg-yellow-500 text-black;
}

.wp-pagenavi span.pages {
    @apply text-gray-400;
}

/* WordPress Navigation Links */
.navigation .nav-links {
    @apply flex items-center justify-between;
}

.navigation .nav-previous,
.navigation .nav-next {
    @apply flex items-center space-x-2 px-4 py-2 bg-gray-700 text-gray-300 rounded-lg hover:bg-gray-600 hover:text-white transition-colors duration-200;
}

.navigation .nav-previous {
    @apply mr-auto;
}

.navigation .nav-next {
    @apply ml-auto;
}

/* Blog Content Prose Styles */
.entry-content.prose {
    color: #d1d5db !important; /* text-gray-300 */
}

.entry-content.prose h1,
.entry-content.prose h2,
.entry-content.prose h3,
.entry-content.prose h4,
.entry-content.prose h5,
.entry-content.prose h6 {
    color: #ffffff !important; /* text-white - keep white for dark backgrounds */
    font-weight: 700 !important; /* font-bold */
    margin-bottom: 1rem !important; /* mb-4 */
}

.entry-content.prose h1 {
    font-size: 1.875rem !important; /* text-3xl */
    line-height: 2.25rem !important;
}

.entry-content.prose h2 {
    font-size: 1.5rem !important; /* text-2xl */
    line-height: 2rem !important;
}

.entry-content.prose h3 {
    font-size: 1.25rem !important; /* text-xl */
    line-height: 1.75rem !important;
}

.entry-content.prose h4 {
    font-size: 1.125rem !important; /* text-lg */
    line-height: 1.75rem !important;
}

.entry-content.prose h5 {
    font-size: 1rem !important; /* text-base */
    line-height: 1.5rem !important;
}

.entry-content.prose h6 {
    font-size: 0.875rem !important; /* text-sm */
    line-height: 1.25rem !important;
}

.entry-content.prose p {
    margin-bottom: 1.5rem !important; /* mb-6 */
    line-height: 1.75 !important; /* leading-relaxed */
    color: #d1d5db !important; /* text-gray-300 */
}

.entry-content.prose ul,
.entry-content.prose ol {
    margin-bottom: 1.5rem !important; /* mb-6 */
    padding-left: 1.5rem !important; /* pl-6 */
}

.entry-content.prose ul {
    list-style-type: disc !important; /* list-disc */
}

.entry-content.prose ol {
    list-style-type: decimal !important; /* list-decimal */
}

.entry-content.prose li {
    margin-bottom: 0.5rem !important; /* mb-2 */
    color: #d1d5db !important; /* text-gray-300 */
}

.entry-content.prose blockquote {
    border-left: 4px solid #fcd307 !important; /* border-yellow-500 */
    padding-left: 1rem !important; /* pl-4 */
    padding-top: 0.5rem !important; /* py-2 */
    padding-bottom: 0.5rem !important;
    margin-bottom: 1.5rem !important; /* mb-6 */
    background-color: #374151 !important; /* bg-gray-700 */
    border-top-right-radius: 0.5rem !important; /* rounded-r-lg */
    border-bottom-right-radius: 0.5rem !important;
}

.entry-content.prose blockquote p {
    margin-bottom: 0 !important; /* mb-0 */
    font-style: italic !important; /* italic */
}

.entry-content.prose code {
    background-color: #374151 !important; /* bg-gray-700 */
    color: #fde047 !important; /* text-yellow-400 */
    padding: 0.25rem 0.5rem !important; /* px-2 py-1 */
    border-radius: 0.25rem !important; /* rounded */
    font-size: 0.875rem !important; /* text-sm */
}

.entry-content.prose pre {
    background-color: #374151 !important; /* bg-gray-700 */
    padding: 1rem !important; /* p-4 */
    border-radius: 0.5rem !important; /* rounded-lg */
    margin-bottom: 1.5rem !important; /* mb-6 */
    overflow-x: auto !important; /* overflow-x-auto */
}

.entry-content.prose pre code {
    background-color: transparent !important; /* bg-transparent */
    padding: 0 !important; /* p-0 */
}

.entry-content.prose a {
    color: #fde047 !important; /* text-yellow-400 */
    text-decoration: underline !important; /* underline */
}

.entry-content.prose a:hover {
    color: #fcd307 !important; /* hover:text-yellow-500 */
}

.entry-content.prose img {
    border-radius: 0.5rem !important; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-lg */
    margin-bottom: 1.5rem !important; /* mb-6 */
}

.entry-content.prose table {
    width: 100% !important; /* w-full */
    margin-bottom: 1.5rem !important; /* mb-6 */
    border-collapse: collapse !important; /* border-collapse */
}

.entry-content.prose th,
.entry-content.prose td {
    border: 1px solid #4b5563 !important; /* border-gray-600 */
    padding: 0.5rem 1rem !important; /* px-4 py-2 */
    text-align: left !important; /* text-left */
}

.entry-content.prose th {
    background-color: #374151 !important; /* bg-gray-700 */
    font-weight: 700 !important; /* font-bold */
}

.entry-content.prose hr {
    border-color: #4b5563 !important; /* border-gray-600 */
    margin: 2rem 0 !important; /* my-8 */
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #fcd307;
        --color-text: #000000;
        --color-background: #ffffff;
        --color-border: #000000;
    }
}

/* Print Colors */
@media print {
    :root {
        --color-background: #ffffff;
        --color-text: #000000;
        --color-primary: #fcd307;
        --color-border: #000000;
        --color-card: #ffffff;
    }
}

/* Tailwind CSS Blue Color Overrides - Replace with Yellow/Orange */
.text-blue-400,
.hover\:text-blue-400:hover,
.hover\:text-blue-300:hover {
    color: #fde047 !important; /* yellow-400 */
}

.text-blue-500,
.hover\:text-blue-500:hover {
    color: #fcd307 !important; /* yellow-500 */
}

.text-blue-600,
.hover\:text-blue-600:hover {
    color: #fcd307 !important; /* yellow-500 */
}

.text-blue-700,
.hover\:text-blue-700:hover {
    color: #d4b106 !important; /* yellow-600 */
}

.bg-blue-400,
.hover\:bg-blue-400:hover {
    background-color: #fde047 !important; /* yellow-400 */
}

.bg-blue-500,
.hover\:bg-blue-500:hover {
    background-color: #fcd307 !important; /* yellow-500 */
}

.bg-blue-600,
.hover\:bg-blue-600:hover {
    background-color: #fcd307 !important; /* yellow-500 */
}

.bg-blue-700,
.hover\:bg-blue-700:hover {
    background-color: #d4b106 !important; /* yellow-600 */
}

/* Black text on yellow backgrounds - comprehensive override */
.bg-blue-600.text-white,
.bg-blue-600 .text-white,
.hover\:bg-blue-600:hover.text-white,
.hover\:bg-blue-600:hover .text-white,
.bg-blue-700.text-white,
.bg-blue-700 .text-white,
.hover\:bg-blue-700:hover.text-white,
.hover\:bg-blue-700:hover .text-white,
.bg-blue-500.text-white,
.bg-blue-500 .text-white,
.hover\:bg-blue-500:hover.text-white,
.hover\:bg-blue-500:hover .text-white,
.bg-yellow-500.text-white,
.bg-yellow-500 .text-white,
.bg-yellow-600.text-white,
.bg-yellow-600 .text-white {
    color: #000000 !important; /* black text on yellow background */
}

/* Also handle when text-white is on same element or parent */
.bg-blue-600 + .text-white,
.bg-blue-700 + .text-white,
.bg-blue-500 + .text-white {
    color: #000000 !important;
}

.border-blue-300,
.hover\:border-blue-300:hover {
    border-color: #fde047 !important; /* yellow-400 */
}

.border-blue-500,
.hover\:border-blue-500:hover {
    border-color: #fcd307 !important; /* yellow-500 */
}

.focus\:ring-blue-500:focus {
    --tw-ring-color: #fcd307 !important; /* yellow-500 */
}

.focus\:ring-blue-400:focus {
    --tw-ring-color: #fde047 !important; /* yellow-400 */
}

/* Gradient overrides */
.bg-gradient-to-r.from-blue-400,
.bg-gradient-to-r.from-blue-500,
.bg-gradient-to-r.from-blue-600 {
    background-image: linear-gradient(to right, #fcd307, var(--tw-gradient-to)) !important;
}

.bg-gradient-to-r.from-blue-400.to-purple-400,
.bg-gradient-to-r.from-blue-400.to-purple-600,
.bg-gradient-to-r.from-blue-500.to-purple-600,
.bg-gradient-to-r.from-blue-600.to-purple-600 {
    background-image: linear-gradient(to right, #fcd307, #9333ea) !important;
}

.bg-gradient-to-r.from-blue-600.to-purple-600 {
    background-image: linear-gradient(to right, #fcd307, #9333ea) !important;
}

.group-hover\:from-blue-600.group:hover,
.group-hover\:to-purple-700.group:hover {
    background-image: linear-gradient(to right, #d4b106, #7e22ce) !important;
}

/* Override text-white when used with yellow backgrounds - more specific selectors */
button.bg-blue-600.text-white,
button.bg-blue-700.text-white,
button.bg-blue-500.text-white,
a.bg-blue-600.text-white,
a.bg-blue-700.text-white,
a.bg-blue-500.text-white,
.bg-blue-600 button.text-white,
.bg-blue-700 button.text-white,
.bg-blue-500 button.text-white,
.bg-blue-600 a.text-white,
.bg-blue-700 a.text-white,
.bg-blue-500 a.text-white {
    color: #000000 !important; /* black text on yellow background */
}

/* Handle hover states */
button.bg-blue-600.hover\:bg-blue-700:hover.text-white,
button.bg-blue-600.hover\:bg-blue-700:hover .text-white,
a.bg-blue-600.hover\:bg-blue-700:hover.text-white,
a.bg-blue-600.hover\:bg-blue-700:hover .text-white {
    color: #000000 !important;
}