/* ══════════════════════════════════════════════════════════════
   A11yGo — Global Modern Design System & Accessibility Layer
   Loaded on every frontend page (via templates/header.php).
   ══════════════════════════════════════════════════════════════ */

:root {
    --brand-primary: #3157D5;
    --brand-primary-strong: #224bc2;
    --brand-dark: #0f172a;
    --brand-accent: #0F766E;
    --brand-ink: #111827;
    --brand-muted: #4B5563;
    --brand-line: #e5e9f2;
    --brand-bg: #f8fafc;
    --brand-radius: 14px;
    --brand-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    --brand-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.03em; }

/* ═══════ Responsive media & mobile safety (added 2026-08-20) ═══════ */
/* Bootstrap Reboot does not constrain plain <img>/<video>; without this a
   non-.img-fluid asset overflows a 360px viewport. Applies site-wide. */
img,
video {
    max-width: 100%;
    height: auto;
}
svg { max-width: 100%; }

/* Long unbreakable strings (URLs, keys, tokens) shouldn't force horizontal
   scroll on narrow screens. */
.text-break-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* Fluid fallback sizing for bare headings on small screens. Page-specific hero
   rules (e.g. .hero h1) have higher specificity and are left untouched. */
@media (max-width: 575.98px) {
    h1 { font-size: clamp(1.75rem, 7vw, 2.2rem); }
    h2 { font-size: clamp(1.4rem, 5.5vw, 1.8rem); }
    h3 { font-size: clamp(1.2rem, 4.5vw, 1.5rem); }
}


/* ═══════ Keyboard & Focus (Keyboard Navigation) ═══════ */
:focus-visible {
    outline: 3px solid rgba(49, 87, 213, 0.55) !important;
    outline-offset: 3px !important;
    border-radius: 6px;
    box-shadow: 0 0 0 4px rgba(49, 87, 213, 0.12) !important;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link (Keyboard Navigation) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: #0f172a;
    color: #fff;
    padding: 0.8rem 1.4rem;
    border-radius: 0 0 12px 0;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
}
.skip-link:focus {
    left: 0;
    color: #fff;
    background: #3157D5;
}

/* Screen-reader-only text (Assistive Tech Compatibility) */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Live region for screen readers (Assistive Tech Compatibility) */
.sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

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

/* ═══════ Buttons ═══════ */
.btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px) !important; }
.btn:active { transform: translateY(0) !important; }
.btn-lg { border-radius: 12px !important; }

/* ═══════ Cards (unified modern look) ═══════ */
.card,
.info-card,
.feature-card,
.problem-card,
.industry-card,
.usecase-card,
.step-card,
.pricing-card,
.quote-card,
.std-card,
.tax-card,
.region-card,
.faq-item,
.assessment-widget-card {
    border-radius: 16px !important;
    border-color: #e7ecf4 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover,
.info-card:hover,
.feature-card:hover,
.std-card:hover,
.tax-card:hover,
.region-card:hover,
.step-card:hover,
.pricing-card:hover,
.assessment-widget-card:hover,
.faq-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10) !important;
}

/* Section light tint */
.section-light { background: linear-gradient(180deg, #edf3ff 0%, #f7f9fd 100%) !important; }

/* CTA panels */
.cta-panel {
    border-radius: 22px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16) !important;
}

/* ═══════ Forms ═══════ */
.form-control,
.form-select,
.input-group-text {
    border-radius: 10px;
}
.form-control:focus,
.form-select:focus {
    border-color: rgba(49, 87, 213, 0.6);
    box-shadow: 0 0 0 0.25rem rgba(49, 87, 213, 0.12);
}

/* ═══════ Badges & Tags ═══════ */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: 0.02em; }

/* ═══════ Tables ═══════ */
.table { vertical-align: middle; }
.table thead th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #64748b;
    background: #f8fafc;
}

/* ═══════ Utilities ═══════ */
.gradient-text {
    background: linear-gradient(90deg, #60a5fa, #a78bfa, #fbbf24);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.section-pad { padding: 4.5rem 0; }
.rounded-2xl { border-radius: 1.25rem !important; }

/* ═══════ Scrollbar ═══════ */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #eef2f7; }
::-webkit-scrollbar-thumb { background: #c3ccda; border-radius: 10px; border: 2px solid #eef2f7; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ═══════ Navbar glass polish ═══════ */
.navbar {
    backdrop-filter: saturate(180%) blur(10px);
    background: rgba(255, 255, 255, 0.92) !important;
}
.navbar .dropdown-menu {
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

/* ═══════ Footer polish ═══════ */
.site-footer .footer-body { padding-top: 3.5rem; padding-bottom: 2rem; }
.site-footer .footer-heading { font-weight: 700; letter-spacing: 0.02em; }

/* ═══════ Flash / alert accessibility ═══════ */
.alert { border-radius: 12px; }