/* ============================================================
   Vinayak Jobs — Typography system (14px base)
   Load after vinayak-brand.css
   ============================================================ */

html.vj-brand {
    font-size: 14px;
}

.vj-brand {
    /* Type scale (rem @ 14px root) */
    --vj-fs-micro: 0.6875rem;       /* 11px — badges, table headers */
    --vj-fs-xs: 0.75rem;            /* 10.5px — captions */
    --vj-fs-sm: 0.857rem;           /* 12px — compact meta */
    --vj-fs-nav: 0.928571rem;       /* 13px — sidebar */
    --vj-fs-nav-parent: 1rem;       /* 14px — group headers */
    --vj-fs-body: 1rem;             /* 14px — body */
    --vj-fs-ui: 0.928571rem;        /* 13px — buttons */
    --vj-fs-table: 0.928571rem;     /* 13px — table cells */
    --vj-fs-label: 0.928571rem;     /* 13px — form labels */
    --vj-fs-input: 1rem;            /* 14px — inputs */
    --vj-fs-card-title: 1rem;       /* 14px — card headers */
    --vj-fs-section: 1.285714rem;   /* 18px — section headings */
    --vj-fs-section-lg: 1.428571rem;/* 20px — prominent sections */
    --vj-fs-page-title: 1.571429rem;/* 22px — page titles */
    --vj-fs-page-title-lg: 1.714286rem; /* 24px — large page titles */
    --vj-fs-kpi: 1.25rem;           /* 17.5px — KPI values */
    --vj-fs-display: 1.75rem;       /* 24.5px — marketing hero cap */

    --vj-lh-tight: 1.25;
    --vj-lh-ui: 1.4;
    --vj-lh-body: 1.5;
    --vj-lh-relaxed: 1.55;
}

/* Base body */
html.vj-brand,
.vj-brand body {
    font-size: var(--vj-fs-body);
    line-height: var(--vj-lh-body);
}

/* Heading hierarchy — avoid oversized bold */
.vj-brand h1 { font-size: var(--vj-fs-page-title); font-weight: 700; line-height: var(--vj-lh-tight); }
.vj-brand h2 { font-size: var(--vj-fs-section); font-weight: 700; line-height: var(--vj-lh-tight); }
.vj-brand h3 { font-size: 1rem; font-weight: 600; line-height: var(--vj-lh-tight); }
.vj-brand h4 { font-size: 0.9375rem; font-weight: 600; line-height: var(--vj-lh-tight); }
.vj-brand h5 { font-size: var(--vj-fs-ui); font-weight: 600; line-height: var(--vj-lh-ui); }
.vj-brand h6 { font-size: var(--vj-fs-label); font-weight: 600; line-height: var(--vj-lh-ui); }

/* App shell — page headers */
.vj-brand .vj-page-head h1,
.vj-brand .vj-page-title {
    font-size: var(--vj-fs-page-title) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: var(--vj-lh-tight);
}

.vj-brand .vj-page-sub {
    font-size: var(--vj-fs-ui) !important;
    line-height: var(--vj-lh-ui);
}

.vj-brand .vj-content h1:not(.vj-hero-title) {
    font-size: var(--vj-fs-page-title);
}

.vj-brand .vj-content h2 {
    font-size: var(--vj-fs-section);
}

/* Buttons */
.vj-brand .btn {
    font-size: var(--vj-fs-ui) !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.85rem !important;
    line-height: var(--vj-lh-ui);
}

.vj-brand .btn-sm {
    font-size: var(--vj-fs-sm) !important;
    padding: 0.25rem 0.65rem !important;
}

.vj-brand .btn-lg {
    font-size: var(--vj-fs-ui) !important;
    padding: 0.45rem 1rem !important;
}

.vj-brand .btn-pill {
    padding-inline: 1rem !important;
}

/* Forms */
.vj-brand .form-label {
    font-size: var(--vj-fs-label) !important;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.vj-brand .form-control,
.vj-brand .form-select,
.vj-brand textarea.form-control {
    font-size: var(--vj-fs-input) !important;
    padding: 0.4rem 0.65rem !important;
    line-height: var(--vj-lh-ui);
}

.vj-brand .form-text,
.vj-brand .text-muted,
.vj-brand small,
.vj-brand .small {
    font-size: var(--vj-fs-sm) !important;
}

.vj-brand .input-group-text {
    font-size: var(--vj-fs-input) !important;
    padding: 0.4rem 0.65rem !important;
}

/* Tables */
.vj-brand .table {
    font-size: var(--vj-fs-table) !important;
}

.vj-brand .table thead th {
    font-size: var(--vj-fs-micro) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.5rem 0.65rem !important;
}

.vj-brand .table > :not(caption) > * > * {
    padding: 0.5rem 0.65rem !important;
    vertical-align: middle;
}

/* Cards & KPIs */
.vj-brand .card-header {
    font-size: var(--vj-fs-card-title) !important;
    font-weight: 600;
    padding: 0.65rem 0.85rem !important;
}

.vj-brand .card-body {
    font-size: var(--vj-fs-body);
    padding: 0.85rem 1rem !important;
}

.vj-brand .card-title {
    font-size: var(--vj-fs-card-title) !important;
    font-weight: 600;
}

.vj-brand .vj-kpi .label {
    font-size: var(--vj-fs-micro) !important;
}

.vj-brand .vj-kpi .value {
    font-size: var(--vj-fs-kpi) !important;
    font-weight: 700 !important;
}

.vj-brand .vj-sidebar-search input {
    font-size: var(--vj-fs-input) !important;
}

.vj-brand .vj-sidebar .vj-nav-item {
    font-size: var(--vj-fs-nav) !important;
}

.vj-brand .display-1,
.vj-brand .display-2,
.vj-brand .display-3,
.vj-brand .display-4,
.vj-brand .display-5,
.vj-brand .display-6 {
    font-size: var(--vj-fs-page-title-lg) !important;
    font-weight: 700 !important;
}

.vj-brand .vj-kpi .trend {
    font-size: var(--vj-fs-sm) !important;
}

.vj-brand .vj-content .card .display-1,
.vj-brand .vj-content .card .display-2,
.vj-brand .vj-content .card .display-3,
.vj-brand .vj-content .card .display-4,
.vj-brand .vj-content .card .display-5,
.vj-brand .vj-content .card .display-6 {
    font-size: var(--vj-fs-kpi) !important;
    font-weight: 700 !important;
}

/* Badges */
.vj-brand .badge {
    font-size: var(--vj-fs-micro) !important;
    font-weight: 600;
    padding: 0.2em 0.5em;
}

/* Breadcrumbs & app bar */
.vj-brand .breadcrumb {
    font-size: var(--vj-fs-sm) !important;
}

.vj-brand .vj-appbar-title {
    font-size: var(--vj-fs-ui) !important;
    font-weight: 600;
}

.vj-brand .vj-appbar-breadcrumb .breadcrumb {
    font-size: var(--vj-fs-sm) !important;
}

.vj-brand .vj-appbar-user-name {
    font-size: var(--vj-fs-ui) !important;
}

/* Sidebar brand */
.vj-brand .vj-sidebar-brand {
    font-size: 0.9375rem !important;
    font-weight: 700;
}

.vj-brand .vj-user-name {
    font-size: var(--vj-fs-ui) !important;
}

.vj-brand .vj-user-role {
    font-size: var(--vj-fs-micro) !important;
}

/* Topbar / public nav */
.vj-brand .navbar .nav-link {
    font-size: var(--vj-fs-ui) !important;
    padding: 0.35rem 0.65rem !important;
}

.vj-brand .vj-topbar .vj-brand-mark,
.vj-brand .vj-topbar .vj-brand {
    font-size: 0.9375rem !important;
}

/* Alerts */
.vj-brand .alert {
    font-size: var(--vj-fs-ui) !important;
    padding: 0.55rem 0.85rem;
}

/* Dropdown */
.vj-brand .dropdown-menu {
    font-size: var(--vj-fs-ui) !important;
}

.vj-brand .dropdown-item {
    font-size: var(--vj-fs-ui) !important;
    padding: 0.35rem 0.75rem;
}

/* ============================================================
   Marketing / landing page — hero capped, readable scale
   ============================================================ */
.vj-brand .vj-hero-title,
.vj-brand .vj-hero-band h1,
.vj-brand .vj-landing-hero h1 {
    font-size: clamp(1.5rem, 2.4vw, var(--vj-fs-display)) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em;
}

.vj-brand .vj-hero-sub,
.vj-brand .vj-hero-lead,
.vj-brand .vj-landing-hero .lead {
    font-size: var(--vj-fs-input) !important;
    line-height: var(--vj-lh-relaxed) !important;
}

.vj-brand .vj-eyebrow,
.vj-brand .vj-hero-eyebrow,
.vj-brand .vj-trust-badge {
    font-size: var(--vj-fs-sm) !important;
}

.vj-brand .vj-hero-stat-value,
.vj-brand .vj-hero-card .value {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
}

.vj-brand .vj-hero-stat-label,
.vj-brand .vj-hero-card .label {
    font-size: var(--vj-fs-micro) !important;
}

.vj-brand .vj-section-title,
.vj-brand .vj-landing h2 {
    font-size: var(--vj-fs-section) !important;
    font-weight: 700 !important;
}

.vj-brand .vj-step-card h3 {
    font-size: var(--vj-fs-ui) !important;
    font-weight: 600 !important;
}

.vj-brand .vj-step-card p {
    font-size: var(--vj-fs-sm) !important;
}

.vj-brand .vj-cta-banner h2 {
    font-size: var(--vj-fs-section) !important;
}

.vj-brand .vj-cta-banner p {
    font-size: var(--vj-fs-ui) !important;
}

.vj-brand .vj-hero-card .vj-hero-stat strong,
.vj-brand .vj-hero-stat strong,
.vj-brand .vj-hero-card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.vj-brand .vj-hero-card .vj-hero-stat span,
.vj-brand .vj-hero-stat span {
    font-size: var(--vj-fs-micro) !important;
}

.vj-brand .vj-search-hero input,
.vj-brand .vj-search-hero .btn {
    font-size: var(--vj-fs-input) !important;
}

.vj-brand .vj-section-head h2,
.vj-brand .vj-jobs-section h2 {
    font-size: var(--vj-fs-section-lg) !important;
}

/* Search hero on landing */
.vj-brand .vj-search-hero input,
.vj-brand .vj-search input {
    font-size: var(--vj-fs-input) !important;
}

/* Footer */
.vj-brand .vj-footer {
    font-size: var(--vj-fs-sm) !important;
}

/* Responsive — keep 14px base on all breakpoints */
@media (min-width: 768px) {
    html.vj-brand {
        font-size: 14px;
    }
}

@media (max-width: 991.98px) {
    .vj-brand .vj-page-head h1,
    .vj-brand .vj-page-title {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 575.98px) {
    .vj-brand .vj-page-head {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .vj-brand h1,
    .vj-brand .vj-page-head h1 {
        font-size: 1.2rem !important;
    }

    .vj-brand .table {
        font-size: var(--vj-fs-sm) !important;
    }
}

/* Prevent overflow in dense UI */
.vj-brand .vj-nav-link__text,
.vj-brand .vj-nav-group__text,
.vj-brand .vj-sidebar-brand-text,
.vj-brand .vj-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
