/* 
 * Serdar Spot - Font Optimization CSS
 * SEO & Accessibility Font Size Standards
 */

/* Base Font Settings - Google SEO Compliant */
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 400;
    color: #333;
}

/* Minimum Font Sizes for SEO & Accessibility */
* {
    box-sizing: border-box;
}

/* Override Tailwind CSS small sizes */
.text-xs { font-size: 14px !important; } /* Minimum 14px for small text */
.text-sm { font-size: 16px !important; } /* Standard body text */
.text-base { font-size: 16px !important; } /* Standard body text */
.text-lg { font-size: 18px !important; } /* Slightly larger */
.text-xl { font-size: 20px !important; } /* Large text */
.text-2xl { font-size: 24px !important; } /* Headings */
.text-3xl { font-size: 30px !important; } /* Major headings */
.text-4xl { font-size: 36px !important; } /* Hero text */
.text-5xl { font-size: 48px !important; } /* Large hero */
.text-6xl { font-size: 60px !important; } /* Extra large */

/* Mobile-First Responsive Typography */
@media screen and (max-width: 768px) {
    html { font-size: 16px !important; }
    body { font-size: 16px !important; }
    
    .text-xs { font-size: 14px !important; }
    .text-sm { font-size: 16px !important; }
    .text-base { font-size: 16px !important; }
    .text-lg { font-size: 18px !important; }
    .text-xl { font-size: 20px !important; }
    .text-2xl { font-size: 22px !important; }
    .text-3xl { font-size: 28px !important; }
    .text-4xl { font-size: 32px !important; }
    .text-5xl { font-size: 40px !important; }
    .text-6xl { font-size: 48px !important; }
}

@media screen and (max-width: 480px) {
    .text-4xl { font-size: 28px !important; }
    .text-5xl { font-size: 36px !important; }
    .text-6xl { font-size: 42px !important; }
}

/* Specific Element Font Sizes */

/* Headings */
h1 { 
    font-size: clamp(28px, 4vw, 48px) !important; 
    line-height: 1.2 !important; 
    font-weight: 700;
}

h2 { 
    font-size: clamp(24px, 3.5vw, 36px) !important; 
    line-height: 1.3 !important; 
    font-weight: 600;
}

h3 { 
    font-size: clamp(20px, 3vw, 28px) !important; 
    line-height: 1.4 !important; 
    font-weight: 600;
}

h4 { 
    font-size: clamp(18px, 2.5vw, 24px) !important; 
    line-height: 1.4 !important; 
    font-weight: 500;
}

h5 { 
    font-size: clamp(16px, 2vw, 20px) !important; 
    line-height: 1.5 !important; 
    font-weight: 500;
}

h6 { 
    font-size: 16px !important; 
    line-height: 1.5 !important; 
    font-weight: 500;
}

/* Paragraphs and Body Text */
p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem;
}

/* Navigation */
nav a, .nav-link {
    font-size: 16px !important;
    line-height: 1.4 !important;
}

/* Buttons */
button, .btn, input[type="submit"], input[type="button"] {
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding: 12px 24px !important;
    min-height: 44px; /* Touch target size */
    min-width: 44px;
}

.btn-sm {
    font-size: 16px !important;
    padding: 10px 20px !important;
    min-height: 40px;
}

.btn-lg {
    font-size: 18px !important;
    padding: 16px 32px !important;
    min-height: 48px;
}

/* Form Elements */
input, textarea, select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    line-height: 1.4 !important;
    padding: 12px 16px !important;
    min-height: 44px;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"] {
    font-size: 16px !important;
}

/* Cards and Components */
.card-title, .product-title {
    font-size: clamp(18px, 2.5vw, 22px) !important;
    line-height: 1.3 !important;
    font-weight: 600;
}

.card-text, .product-description {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Price Text */
.price, .price-text {
    font-size: clamp(18px, 3vw, 24px) !important;
    line-height: 1.3 !important;
    font-weight: 700;
}

/* Small Supporting Text */
.small-text, .meta-text, .caption {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Footer */
footer {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

footer h3, footer h4 {
    font-size: 18px !important;
    line-height: 1.4 !important;
}

footer p, footer li, footer a {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Table Text */
table {
    font-size: 16px !important;
}

th {
    font-size: 16px !important;
    font-weight: 600;
}

td {
    font-size: 16px !important;
}

/* Breadcrumb */
.breadcrumb, .breadcrumb a {
    font-size: 16px !important;
    line-height: 1.4 !important;
}

/* Alerts and Messages */
.alert, .message, .notification {
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 16px !important;
}

/* Modal Content */
.modal-header h4, .modal-title {
    font-size: clamp(20px, 3vw, 24px) !important;
    line-height: 1.3 !important;
}

.modal-body {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Accessibility Enhancements */

/* Focus States for Better Visibility */
button:focus, a:focus, input:focus, textarea:focus, select:focus {
    outline: 3px solid #dc2626 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1) !important;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    * {
        color: #000 !important;
        background: #fff !important;
    }
    
    a {
        color: #0000ff !important;
        text-decoration: underline !important;
    }
    
    button {
        border: 2px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
    }
}

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

/* Large Text Support */
@media (prefers-font-size: large) {
    html {
        font-size: 18px !important;
    }
    
    body {
        font-size: 18px !important;
    }
    
    .text-sm { font-size: 18px !important; }
    .text-base { font-size: 18px !important; }
    .text-lg { font-size: 20px !important; }
}

/* Dark Mode Font Optimizations */
@media (prefers-color-scheme: dark) {
    body {
        color: #e0e0e0;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: #fff;
    }
}

/* Print Styles */
@media print {
    html, body {
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }
    
    h1 { font-size: 18pt !important; }
    h2 { font-size: 16pt !important; }
    h3 { font-size: 14pt !important; }
    h4 { font-size: 12pt !important; }
    
    p, li, td {
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }
}