/* Shared styles - Roots by Benda
   Include via: <link rel="stylesheet" href="/css/shared.css">
   Must be loaded AFTER Google Fonts */

/* ===== Dark theme fallbacks =====
   These ensure the dark theme works even if Tailwind config
   fails to load (e.g., local file:// testing).
   Tailwind classes override these when the config loads. */

:root {
    --brand-green: #3A7D44;
    --brand-green-light: #4CAF50;
    /* RGB triplets — Tailwind uses these for opacity modifiers (e.g. bg-dark-bg/50) */
    --dark-bg-rgb: 26 26 26;
    --dark-card-rgb: 36 36 36;
    --dark-border-rgb: 51 51 51;
    --text-primary-rgb: 242 244 248;
    --text-secondary-rgb: 168 168 168;
    --text-muted-rgb: 112 112 112;
    /* Derived colors — used by var(--dark-bg) references in CSS/JS */
    --dark-bg: rgb(var(--dark-bg-rgb));
    --dark-card: rgb(var(--dark-card-rgb));
    --dark-border: rgb(var(--dark-border-rgb));
    --text-primary: rgb(var(--text-primary-rgb));
    --text-secondary: rgb(var(--text-secondary-rgb));
    --text-muted: rgb(var(--text-muted-rgb));
}

/* ===== Light theme =====
   Applied when user explicitly selects light mode via toggle,
   or when system preference is light and user hasn't overridden. */
[data-theme="light"],
:root:not([data-theme="dark"]):not([data-theme="light"]) {
    /* Only apply light vars via prefers-color-scheme if no explicit choice */
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --dark-bg-rgb: 250 251 252;
        --dark-card-rgb: 255 255 255;
        --dark-border-rgb: 214 220 228;
        --text-primary-rgb: 17 24 39;
        --text-secondary-rgb: 55 65 81;
        --text-muted-rgb: 107 114 128;
    }
}

[data-theme="light"] {
    --dark-bg-rgb: 250 251 252;
    --dark-card-rgb: 255 255 255;
    --dark-border-rgb: 214 220 228;
    --text-primary-rgb: 17 24 39;
    --text-secondary-rgb: 55 65 81;
    --text-muted-rgb: 107 114 128;
}

/* Force dark when explicitly set (overrides system preference) */
[data-theme="dark"] {
    --dark-bg-rgb: 26 26 26;
    --dark-card-rgb: 36 36 36;
    --dark-border-rgb: 51 51 51;
    --text-primary-rgb: 242 244 248;
    --text-secondary-rgb: 168 168 168;
    --text-muted-rgb: 112 112 112;
}

body {
    /* !important overrides inline style="" on body tags across all 60 pages */
    background-color: var(--dark-bg) !important;
    color: var(--text-primary) !important;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    letter-spacing: -0.01em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Fallback classes for when Tailwind custom config isn't loaded */
.bg-dark-bg { background-color: var(--dark-bg); }
.bg-dark-card { background-color: var(--dark-card); }
.border-dark-border { border-color: var(--dark-border); }
.text-text-primary { color: var(--text-primary); }
.text-text-secondary { color: var(--text-secondary); }
.text-text-muted { color: var(--text-muted); }
.text-brand-green { color: var(--brand-green); }
.bg-brand-green { background-color: var(--brand-green); }
.hover\:bg-brand-green-light:hover { background-color: var(--brand-green-light); }
.hover\:text-brand-green:hover { color: var(--brand-green); }
.hover\:text-text-primary:hover { color: var(--text-primary); }
.hover\:border-brand-green:hover { border-color: var(--brand-green); }
.border-brand-green { border-color: var(--brand-green); }
.placeholder-text-muted::placeholder { color: var(--text-muted); }

.font-display { font-family: 'Playfair Display', Georgia, serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

.gradient-text {
    background: linear-gradient(135deg, #3A7D44 0%, #4CAF50 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tool card hover effect (used on tools.html and elsewhere) */
.tool-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(58, 125, 68, 0.2);
}

/* Status badges (used on claim-checker, decode, etc.) */
.status-permitted { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.status-restricted { color: #eab308; background: rgba(234, 179, 8, 0.1); }
.status-prohibited { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.status-drug { color: #f97316; background: rgba(249, 115, 22, 0.1); }
.status-special { color: #a855f7; background: rgba(168, 85, 247, 0.1); }

/* Deadline timeline status cards */
.status-active { background: #1e2a1e; border-left: 3px solid #22c55e; border-radius: 8px; }
.status-upcoming { background: #2a2518; border-left: 3px solid #eab308; border-radius: 8px; }
.status-future { background: #221e2a; border-left: 3px solid #a855f7; border-radius: 8px; }

/* Light mode: timeline cards */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .status-active { background: #f0fff4; }
    :root:not([data-theme="dark"]) .status-upcoming { background: #fffff0; }
    :root:not([data-theme="dark"]) .status-future { background: #faf5ff; }
}
[data-theme="light"] .status-active { background: #f0fff4; }
[data-theme="light"] .status-upcoming { background: #fffff0; }
[data-theme="light"] .status-future { background: #faf5ff; }

/* Light mode: gradient text needs darker green for contrast */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .gradient-text {
        background: linear-gradient(135deg, #2D6A35 0%, #3A7D44 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}
[data-theme="light"] .gradient-text {
    background: linear-gradient(135deg, #2D6A35 0%, #3A7D44 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Light mode: tool card hover shadow */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .tool-card:hover {
        box-shadow: 0 10px 40px rgba(58, 125, 68, 0.12);
    }
}
[data-theme="light"] .tool-card:hover {
    box-shadow: 0 10px 40px rgba(58, 125, 68, 0.12);
}

/* Light mode: glow effect */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .glow {
        box-shadow: 0 0 60px rgba(58, 125, 68, 0.15);
    }
}
[data-theme="light"] .glow {
    box-shadow: 0 0 60px rgba(58, 125, 68, 0.15);
}

/* ===== Light mode: richer accent colors =====
   Dark-mode uses 300/400-shade colors optimized for dark backgrounds.
   In light mode, we shift to 600/700 shades for better contrast. */

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --brand-green: #1a4420;
        --brand-green-light: #245829;
    }
}
[data-theme="light"] {
    --brand-green: #1a4420;
    --brand-green-light: #245829;
}

/* --- Light text colors (system preference) --- */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .text-green-400 { color: #166534 !important; }
    :root:not([data-theme="dark"]) .text-red-300 { color: #991b1b !important; }
    :root:not([data-theme="dark"]) .text-red-400 { color: #991b1b !important; }
    :root:not([data-theme="dark"]) .text-yellow-300 { color: #713f12 !important; }
    :root:not([data-theme="dark"]) .text-yellow-400 { color: #713f12 !important; }
    :root:not([data-theme="dark"]) .text-yellow-500 { color: #713f12 !important; }
    :root:not([data-theme="dark"]) .text-orange-300 { color: #7c2d12 !important; }
    :root:not([data-theme="dark"]) .text-orange-400 { color: #7c2d12 !important; }
    :root:not([data-theme="dark"]) .text-purple-300 { color: #581c87 !important; }
    :root:not([data-theme="dark"]) .text-purple-400 { color: #581c87 !important; }
    :root:not([data-theme="dark"]) .text-blue-300 { color: #1e3a8a !important; }
    :root:not([data-theme="dark"]) .text-blue-400 { color: #1e3a8a !important; }
    :root:not([data-theme="dark"]) .text-cyan-400 { color: #164e63 !important; }
    :root:not([data-theme="dark"]) .text-emerald-400 { color: #064e3b !important; }
}
/* --- Light text colors (explicit toggle) --- */
[data-theme="light"] .text-green-400 { color: #166534 !important; }
[data-theme="light"] .text-red-300 { color: #991b1b !important; }
[data-theme="light"] .text-red-400 { color: #991b1b !important; }
[data-theme="light"] .text-yellow-300 { color: #713f12 !important; }
[data-theme="light"] .text-yellow-400 { color: #713f12 !important; }
[data-theme="light"] .text-yellow-500 { color: #713f12 !important; }
[data-theme="light"] .text-orange-300 { color: #7c2d12 !important; }
[data-theme="light"] .text-orange-400 { color: #7c2d12 !important; }
[data-theme="light"] .text-purple-300 { color: #581c87 !important; }
[data-theme="light"] .text-purple-400 { color: #581c87 !important; }
[data-theme="light"] .text-blue-300 { color: #1e3a8a !important; }
[data-theme="light"] .text-blue-400 { color: #1e3a8a !important; }
[data-theme="light"] .text-cyan-400 { color: #164e63 !important; }
[data-theme="light"] .text-emerald-400 { color: #064e3b !important; }

/* --- Light background tints (system preference) --- */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .bg-green-500\/10 { background-color: rgba(20, 83, 45, 0.1) !important; }
    :root:not([data-theme="dark"]) .bg-green-500\/20 { background-color: rgba(20, 83, 45, 0.1) !important; }
    :root:not([data-theme="dark"]) .bg-red-500\/10 { background-color: rgba(127, 29, 29, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-red-500\/20 { background-color: rgba(127, 29, 29, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-red-900\/20 { background-color: rgba(127, 29, 29, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-yellow-500\/20 { background-color: rgba(113, 63, 18, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-yellow-900\/20 { background-color: rgba(113, 63, 18, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-orange-500\/20 { background-color: rgba(124, 45, 18, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-orange-900\/20 { background-color: rgba(124, 45, 18, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-purple-500\/20 { background-color: rgba(88, 28, 135, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-purple-900\/20 { background-color: rgba(88, 28, 135, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-blue-500\/20 { background-color: rgba(30, 58, 138, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-blue-900\/20 { background-color: rgba(30, 58, 138, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-cyan-900\/20 { background-color: rgba(22, 78, 99, 0.08) !important; }
    :root:not([data-theme="dark"]) .bg-emerald-900\/20 { background-color: rgba(6, 78, 59, 0.08) !important; }
}
/* --- Light background tints (explicit toggle) --- */
[data-theme="light"] .bg-green-500\/10 { background-color: rgba(20, 83, 45, 0.1) !important; }
[data-theme="light"] .bg-green-500\/20 { background-color: rgba(20, 83, 45, 0.1) !important; }
[data-theme="light"] .bg-red-500\/10 { background-color: rgba(127, 29, 29, 0.08) !important; }
[data-theme="light"] .bg-red-500\/20 { background-color: rgba(127, 29, 29, 0.08) !important; }
[data-theme="light"] .bg-red-900\/20 { background-color: rgba(127, 29, 29, 0.08) !important; }
[data-theme="light"] .bg-yellow-500\/20 { background-color: rgba(113, 63, 18, 0.08) !important; }
[data-theme="light"] .bg-yellow-900\/20 { background-color: rgba(113, 63, 18, 0.08) !important; }
[data-theme="light"] .bg-orange-500\/20 { background-color: rgba(124, 45, 18, 0.08) !important; }
[data-theme="light"] .bg-orange-900\/20 { background-color: rgba(124, 45, 18, 0.08) !important; }
[data-theme="light"] .bg-purple-500\/20 { background-color: rgba(88, 28, 135, 0.08) !important; }
[data-theme="light"] .bg-purple-900\/20 { background-color: rgba(88, 28, 135, 0.08) !important; }
[data-theme="light"] .bg-blue-500\/20 { background-color: rgba(30, 58, 138, 0.08) !important; }
[data-theme="light"] .bg-blue-900\/20 { background-color: rgba(30, 58, 138, 0.08) !important; }
[data-theme="light"] .bg-cyan-900\/20 { background-color: rgba(22, 78, 99, 0.08) !important; }
[data-theme="light"] .bg-emerald-900\/20 { background-color: rgba(6, 78, 59, 0.08) !important; }

/* --- Light border colors (system preference) --- */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .border-green-500 { border-color: rgba(20, 83, 45, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-green-500\/30 { border-color: rgba(20, 83, 45, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-red-500 { border-color: rgba(127, 29, 29, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-red-500\/30 { border-color: rgba(127, 29, 29, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-red-500\/50 { border-color: rgba(127, 29, 29, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-yellow-500 { border-color: rgba(113, 63, 18, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-yellow-500\/30 { border-color: rgba(113, 63, 18, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-orange-500 { border-color: rgba(124, 45, 18, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-orange-500\/30 { border-color: rgba(124, 45, 18, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-purple-500 { border-color: rgba(88, 28, 135, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-purple-500\/30 { border-color: rgba(88, 28, 135, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-blue-500 { border-color: rgba(30, 58, 138, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-blue-500\/30 { border-color: rgba(30, 58, 138, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-cyan-500 { border-color: rgba(22, 78, 99, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-cyan-500\/30 { border-color: rgba(22, 78, 99, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-emerald-500 { border-color: rgba(6, 78, 59, 0.4) !important; }
    :root:not([data-theme="dark"]) .border-emerald-500\/30 { border-color: rgba(6, 78, 59, 0.4) !important; }
}
/* --- Light border colors (explicit toggle) --- */
[data-theme="light"] .border-green-500 { border-color: rgba(20, 83, 45, 0.4) !important; }
[data-theme="light"] .border-green-500\/30 { border-color: rgba(20, 83, 45, 0.4) !important; }
[data-theme="light"] .border-red-500 { border-color: rgba(127, 29, 29, 0.4) !important; }
[data-theme="light"] .border-red-500\/30 { border-color: rgba(127, 29, 29, 0.4) !important; }
[data-theme="light"] .border-red-500\/50 { border-color: rgba(127, 29, 29, 0.4) !important; }
[data-theme="light"] .border-yellow-500 { border-color: rgba(113, 63, 18, 0.4) !important; }
[data-theme="light"] .border-yellow-500\/30 { border-color: rgba(113, 63, 18, 0.4) !important; }
[data-theme="light"] .border-orange-500 { border-color: rgba(124, 45, 18, 0.4) !important; }
[data-theme="light"] .border-orange-500\/30 { border-color: rgba(124, 45, 18, 0.4) !important; }
[data-theme="light"] .border-purple-500 { border-color: rgba(88, 28, 135, 0.4) !important; }
[data-theme="light"] .border-purple-500\/30 { border-color: rgba(88, 28, 135, 0.4) !important; }
[data-theme="light"] .border-blue-500 { border-color: rgba(30, 58, 138, 0.4) !important; }
[data-theme="light"] .border-blue-500\/30 { border-color: rgba(30, 58, 138, 0.4) !important; }
[data-theme="light"] .border-cyan-500 { border-color: rgba(22, 78, 99, 0.4) !important; }
[data-theme="light"] .border-cyan-500\/30 { border-color: rgba(22, 78, 99, 0.4) !important; }
[data-theme="light"] .border-emerald-500 { border-color: rgba(6, 78, 59, 0.4) !important; }
[data-theme="light"] .border-emerald-500\/30 { border-color: rgba(6, 78, 59, 0.4) !important; }

/* --- Light status badges (system preference) --- */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .status-permitted { color: #14532d !important; background: rgba(20, 83, 45, 0.12) !important; }
    :root:not([data-theme="dark"]) .status-restricted { color: #713f12 !important; background: rgba(113, 63, 18, 0.12) !important; }
    :root:not([data-theme="dark"]) .status-prohibited { color: #7f1d1d !important; background: rgba(127, 29, 29, 0.12) !important; }
    :root:not([data-theme="dark"]) .status-drug { color: #7c2d12 !important; background: rgba(124, 45, 18, 0.12) !important; }
    :root:not([data-theme="dark"]) .status-special { color: #581c87 !important; background: rgba(88, 28, 135, 0.12) !important; }
}
/* --- Light status badges (explicit toggle) --- */
[data-theme="light"] .status-permitted { color: #14532d !important; background: rgba(20, 83, 45, 0.12) !important; }
[data-theme="light"] .status-restricted { color: #713f12 !important; background: rgba(113, 63, 18, 0.12) !important; }
[data-theme="light"] .status-prohibited { color: #7f1d1d !important; background: rgba(127, 29, 29, 0.12) !important; }
[data-theme="light"] .status-drug { color: #7c2d12 !important; background: rgba(124, 45, 18, 0.12) !important; }
[data-theme="light"] .status-special { color: #581c87 !important; background: rgba(88, 28, 135, 0.12) !important; }

/* --- Light mode: tool-page specific classes --- */
@media (prefers-color-scheme: light) {
    /* Ingredient safety badges */
    :root:not([data-theme="dark"]) .badge-excellent { background: rgba(20, 83, 45, 0.12) !important; color: #14532d !important; }
    :root:not([data-theme="dark"]) .badge-good { background: rgba(20, 83, 45, 0.08) !important; color: #166534 !important; }
    :root:not([data-theme="dark"]) .badge-moderate { background: rgba(113, 63, 18, 0.12) !important; color: #713f12 !important; }
    :root:not([data-theme="dark"]) .badge-poor { background: rgba(127, 29, 29, 0.12) !important; color: #7f1d1d !important; }
    /* MoS result cards */
    :root:not([data-theme="dark"]) .mos-result-pass { background: rgba(20, 83, 45, 0.08) !important; border-color: rgba(20, 83, 45, 0.3) !important; }
    :root:not([data-theme="dark"]) .mos-result-fail { background: rgba(127, 29, 29, 0.08) !important; border-color: rgba(127, 29, 29, 0.3) !important; }
    /* Heavy metals pass/fail/warning */
    :root:not([data-theme="dark"]) .pass { color: #14532d !important; }
    :root:not([data-theme="dark"]) .fail { color: #7f1d1d !important; }
    :root:not([data-theme="dark"]) .warning:not(button) { color: #713f12 !important; }
    /* China market flags */
    :root:not([data-theme="dark"]) .flag-ok { color: #14532d !important; background: rgba(20, 83, 45, 0.1) !important; }
    :root:not([data-theme="dark"]) .flag-restricted { color: #713f12 !important; background: rgba(113, 63, 18, 0.1) !important; }
    :root:not([data-theme="dark"]) .flag-prohibited { color: #7f1d1d !important; background: rgba(127, 29, 29, 0.1) !important; }
    :root:not([data-theme="dark"]) .pathway-cbec { border-color: #14532d !important; background: rgba(20, 83, 45, 0.05) !important; }
    :root:not([data-theme="dark"]) .pathway-blocked { border-color: #7f1d1d !important; background: rgba(127, 29, 29, 0.05) !important; }
    /* PFAS tracker state cards */
    :root:not([data-theme="dark"]) .state-active { background: rgba(127, 29, 29, 0.1) !important; border-color: #7f1d1d !important; }
    :root:not([data-theme="dark"]) .state-2026 { background: rgba(124, 45, 18, 0.1) !important; border-color: #7c2d12 !important; }
    :root:not([data-theme="dark"]) .state-2027 { background: rgba(113, 63, 18, 0.1) !important; border-color: #713f12 !important; }
    /* Korea category */
    :root:not([data-theme="dark"]) .category-general { background: rgba(20, 83, 45, 0.1) !important; border-color: #14532d !important; }
}
[data-theme="light"] .badge-excellent { background: rgba(20, 83, 45, 0.12) !important; color: #14532d !important; }
[data-theme="light"] .badge-good { background: rgba(20, 83, 45, 0.08) !important; color: #166534 !important; }
[data-theme="light"] .badge-moderate { background: rgba(113, 63, 18, 0.12) !important; color: #713f12 !important; }
[data-theme="light"] .badge-poor { background: rgba(127, 29, 29, 0.12) !important; color: #7f1d1d !important; }
[data-theme="light"] .mos-result-pass { background: rgba(20, 83, 45, 0.08) !important; border-color: rgba(20, 83, 45, 0.3) !important; }
[data-theme="light"] .mos-result-fail { background: rgba(127, 29, 29, 0.08) !important; border-color: rgba(127, 29, 29, 0.3) !important; }
[data-theme="light"] .pass { color: #14532d !important; }
[data-theme="light"] .fail { color: #7f1d1d !important; }
[data-theme="light"] .warning:not(button) { color: #713f12 !important; }
[data-theme="light"] .flag-ok { color: #14532d !important; background: rgba(20, 83, 45, 0.1) !important; }
[data-theme="light"] .flag-restricted { color: #713f12 !important; background: rgba(113, 63, 18, 0.1) !important; }
[data-theme="light"] .flag-prohibited { color: #7f1d1d !important; background: rgba(127, 29, 29, 0.1) !important; }
[data-theme="light"] .pathway-cbec { border-color: #14532d !important; background: rgba(20, 83, 45, 0.05) !important; }
[data-theme="light"] .pathway-blocked { border-color: #7f1d1d !important; background: rgba(127, 29, 29, 0.05) !important; }
[data-theme="light"] .state-active { background: rgba(127, 29, 29, 0.1) !important; border-color: #7f1d1d !important; }
[data-theme="light"] .state-2026 { background: rgba(124, 45, 18, 0.1) !important; border-color: #7c2d12 !important; }
[data-theme="light"] .state-2027 { background: rgba(113, 63, 18, 0.1) !important; border-color: #713f12 !important; }
[data-theme="light"] .category-general { background: rgba(20, 83, 45, 0.1) !important; border-color: #14532d !important; }

/* Landing page glow effect */
.glow {
    box-shadow: 0 0 60px rgba(58, 125, 68, 0.3);
}

/* ===== CLS Prevention =====
   Reserve space for JS-injected components to prevent
   Cumulative Layout Shift (CLS). */

/* Footer placeholder — matches rendered footer height */
#site-footer {
    min-height: 108px;
}

/* Prevent flash of unstyled text — match system font metrics to Google Fonts */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* Skip to main content link (accessibility) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    background: #3A7D44;
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    border-radius: 0 0 8px 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}

/* ===== Mobile form fixes =====
   Prevent iOS Safari auto-zoom on input focus (triggered when font-size < 16px) */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Screen reader only utility (accessible but visually hidden) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}