/* KamatiMtandao shared typography and wordmark treatment. */
:root {
    --km-ui-font: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --km-brand-navy: #071b35;
    --km-brand-gold: #c9a55a;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

body,
body.admin-body,
button,
input,
select,
textarea,
optgroup {
    font-family: var(--km-ui-font);
}

body {
    font-synthesis: none;
    letter-spacing: -.006em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: -.025em;
    text-wrap: balance;
}

p,
li,
label,
small,
td,
th {
    letter-spacing: -.003em;
}

button,
.btn,
.nav-menu a,
.sidebar-menu a,
.footer-links a {
    letter-spacing: -.01em;
}

input,
select,
textarea {
    font-size: 1rem;
    line-height: 1.45;
}

table {
    font-variant-numeric: tabular-nums;
}

/* The text wordmark always keeps Kamati navy and Mtandao gold. */
.brand-kamati {
    color: var(--km-brand-navy) !important;
}

.brand-mtandao {
    color: var(--km-brand-gold) !important;
}

.logo a,
.mobile-drawer-brand,
.footer-logo,
.admin-brand-name,
.login-brand h1,
.brand-preview-wordmark {
    font-family: var(--km-ui-font) !important;
    font-weight: 800 !important;
    letter-spacing: -.045em !important;
    text-shadow: none;
}

.logo .brand-kamati,
.mobile-drawer-brand .brand-kamati {
    color: var(--km-brand-navy) !important;
}

.logo .brand-mtandao,
.mobile-drawer-brand .brand-mtandao {
    color: var(--km-brand-gold) !important;
}

/* Dark surfaces receive a light wordmark plate to preserve brand colors. */
.site-footer .footer-logo,
.sidebar-logo .admin-brand-name,
.login-brand h1 {
    width: max-content;
    max-width: 100%;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 10px;
    padding: 9px 12px;
    box-shadow: 0 8px 24px rgba(3, 17, 34, .14);
    line-height: 1;
}

.site-footer .footer-logo .brand-kamati,
.sidebar-logo .admin-brand-name .brand-kamati,
.login-brand h1 .brand-kamati {
    color: var(--km-brand-navy) !important;
}

.site-footer .footer-logo .brand-mtandao,
.sidebar-logo .admin-brand-name .brand-mtandao,
.login-brand h1 .brand-mtandao {
    color: var(--km-brand-gold) !important;
}

.sidebar-logo .admin-brand-name {
    display: inline-flex;
    align-items: baseline;
    margin-bottom: 8px;
}

.sidebar-logo .admin-brand small {
    font-family: var(--km-ui-font) !important;
    letter-spacing: .04em;
}

.login-brand h1 {
    margin: 0 0 14px;
    font-size: clamp(1.8rem, 4vw, 2.25rem);
}

.admin-body .page-identity h1,
.admin-body .module-heading h1,
.admin-body .panel-head h2,
.admin-body .section-title {
    font-family: var(--km-ui-font);
    font-weight: 750;
}

.admin-body .table,
.admin-body .form-control,
.admin-body .form-select,
.admin-body .btn,
.admin-body .alert {
    font-family: var(--km-ui-font);
}

.admin-body .table td,
.admin-body .table th {
    color: #243247;
}

@media (max-width: 520px) {
    .site-footer .footer-logo,
    .sidebar-logo .admin-brand-name,
    .login-brand h1 {
        padding: 8px 10px;
    }
}