/* css/styles.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Global Reset & Typography */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* slate-50 */
    color: #0f172a;            /* slate-900 */
}

.tx-font-base {
    font-family: 'Calibri Light', Calibri, 'Segoe UI', Arial, sans-serif;
}

.tx-page-title {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.tx-section-kicker {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 600;
    color: #000000;
    letter-spacing: 0.01em;
}

.tx-box-heading {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 600;
    color: #000000;
}

.tx-section-title {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 600;
    color: #000000;
}

.tx-subsection-title {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 600;
    color: #000000;
}

.tx-body {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #4D4D4D;
}

.tx-prose strong,
.tx-strong {
    font-weight: 600;
    color: #000000;
}

/* Content Typography Hierarchy (sitewide, scoped to main content) */
main .fade-in {
    font-family: 'Calibri Light', Calibri, 'Segoe UI', Arial, sans-serif;
}

main .fade-in h1 {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

main .fade-in h2 {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

main .fade-in h3,
main .fade-in h4 {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    line-height: 1.35;
}

/* Card/box heading normalization: make label-like headings read as real headings */
main .fade-in h3.text-sm.font-semibold.uppercase,
main .fade-in h3.text-sm.font-semibold.text-\[\#808080\].uppercase,
main .fade-in h3.text-sm.font-semibold.text-\[\#808080\].uppercase.tracking-wider,
main .fade-in h3.text-sm.font-semibold.text-slate-700.uppercase {
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: none !important;
    letter-spacing: 0;
    color: #000000 !important;
    line-height: 1.35;
}

main .fade-in h3.text-lg.font-semibold,
main .fade-in h3.text-xl.font-semibold {
    font-weight: 600;
    color: #000000;
}

/* Readability and emphasis */
main .fade-in p,
main .fade-in li {
    line-height: 1.65;
}

main .fade-in p strong,
main .fade-in li strong,
main .fade-in strong {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    color: #000000;
}

/* Active navigation hover safeguards (shared templates) */
.active-nav:hover,
.active-nav:hover * {
    color: #ffffff !important;
}

.active-nav:hover .company {
    color: #94a3b8 !important;
}

/* Technical enablement page theme overrides */
.technical-theme {
    color: #4D4D4D;
}

.technical-theme .text-slate-900 {
    color: #000000 !important;
}

.technical-theme .text-slate-600 {
    color: #4D4D4D !important;
}

.technical-theme .text-slate-500,
.technical-theme .text-slate-400 {
    color: #808080 !important;
}

.technical-theme .text-slate-300 {
    color: #B3B3B3 !important;
}

.technical-theme .border-slate-200,
.technical-theme .border-slate-100 {
    border-color: #B3B3B3 !important;
}

.technical-theme .bg-slate-50,
.technical-theme .bg-blue-50 {
    background-color: #F2F2F2 !important;
}

.technical-theme .text-blue-700,
.technical-theme .text-blue-600,
.technical-theme .text-blue-500,
.technical-theme .text-blue-400,
.technical-theme .text-blue-100 {
    color: #000000 !important;
}

.technical-theme .border-blue-500 {
    border-color: #808080 !important;
}

.technical-theme .bg-blue-600 {
    background-color: #000000 !important;
}

.technical-theme .hover\:bg-blue-500:hover {
    background-color: #4D4D4D !important;
}

.tx-search-result mark {
    background-color: #E5E7EB;
    color: #000000;
    border-radius: 0.2rem;
    padding: 0 0.1rem;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
    transform: translateY(10px);
}

@keyframes fadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar (Webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }