/* =========================================================
   GLOBAL READABILITY OVERRIDES
   Applies across the whole PESO-IMS website
========================================================= */

:root {
    --readable-text: #1f2937;
    --readable-muted: #5f6b7a;
    --readable-light: #7b8798;

    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 13px;
    --font-base: 14px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 22px;

    --line-tight: 1.35;
    --line-normal: 1.5;
    --line-relaxed: 1.65;
}

/* =========================================================
   BASE TEXT
========================================================= */

html {
    font-size: 16px;
}

body {
    color: var(--readable-text);
    font-size: var(--font-base);
    line-height: var(--line-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font-size: inherit;
}

/* =========================================================
   HEADINGS
========================================================= */

h1 {
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.2;
}

h2 {
    font-size: 20px;
    line-height: 1.3;
}

h3 {
    font-size: 16px;
    line-height: 1.35;
}

h4 {
    font-size: 14px;
    line-height: 1.4;
}

h5,
h6 {
    font-size: 13px;
    line-height: 1.4;
}

/* =========================================================
   PARAGRAPHS / GENERAL TEXT
========================================================= */

p,
li,
td,
th,
label,
span,
a,
button,
input,
select,
textarea {
    line-height: var(--line-normal);
}

p {
    font-size: var(--font-base);
}

small {
    font-size: var(--font-xs);
    line-height: 1.4;
}

/* =========================================================
   COMMON MUTED TEXT
========================================================= */

.page-header p,
.card-subtitle,
.welcome-subtext,
.location-text,
.company-location,
.list-subtext,
.field-label,
.meta-label,
.d-label,
.job-meta,
.recent-job-meta,
.employer-detail strong,
.info-block h4,
.pagination,
.page-summary span {
    color: var(--readable-muted) !important;
}

/* =========================================================
   LABELS
========================================================= */

.meta-label,
.field-label,
.d-label,
.info-block h4,
.employer-detail strong,
.job-table th,
.employer-table th,
.referral-history-table th {
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .02em;
}

/* =========================================================
   NORMAL VALUES
========================================================= */

.meta-val,
.field-value,
.d-val,
.employer-detail span,
.contact-item,
.contact-info span,
.company-meta span,
.job-table td,
.employer-table td,
.referral-history-table td {
    font-size: 13px !important;
    line-height: var(--line-normal);
}

/* =========================================================
   CARD TITLES
========================================================= */

.card-header h3,
.card-header-flex h3,
.card-heading h3,
.summary-section h3,
.section-heading h2,
.review-header h2 {
    font-size: 15px !important;
    font-weight: 700;
}

/* =========================================================
   PROFILE / COMPANY TITLES
========================================================= */

.overview-info h2,
.employer-company h4,
.company-meta strong,
.job-position strong,
.job-company strong {
    font-size: 14px !important;
}

.overview-info h2 {
    font-size: 20px !important;
}

/* =========================================================
   BADGES
========================================================= */

.badge,
.badge-type,
.status-badge,
.role-tag,
.recent-job-status,
.job-count {
    font-size: 11px !important;
    line-height: 1.2;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn-view,
.btn-table,
.btn-action,
.btn-job-applicants,
.btn-edit-sm,
.reset-filter-btn,
.page-num,
.review-actions button,
.modal-cancel,
.modal-save {
    font-size: 12px !important;
    line-height: 1.2;
}

/* =========================================================
   INPUTS / SEARCH / FILTERS
========================================================= */

input,
select,
textarea {
    color: var(--readable-text);
    font-size: 14px !important;
}

input::placeholder,
textarea::placeholder {
    color: #8a94a3;
}

.search-box input,
.dashboard-search-box input,
.select-wrapper select {
    font-size: 13px !important;
}

/* =========================================================
   TABLES
========================================================= */

table {
    font-size: 13px;
}

th {
    font-size: 12px !important;
}

td {
    font-size: 13px !important;
}

.job-table td,
.employer-table td {
    line-height: 1.5;
}

/* =========================================================
   NAVBAR
========================================================= */

.navbar,
.navbar a,
.nav-link,
.nav-center a,
.nav-right a,
.profile-dropdown,
.notification-dropdown {
    font-size: 13px;
}

/* =========================================================
   MODALS
========================================================= */

.modal-content,
.edit-modal {
    font-size: 13px;
}

.modal-header h2,
.review-header h2 {
    font-size: 18px !important;
}

.modal-header p,
.review-header p {
    font-size: 12px !important;
}

/* =========================================================
   RECENT JOB POSTINGS
========================================================= */

.recent-job-title-row h4 {
    font-size: 14px !important;
}

.recent-job-meta {
    font-size: 12px !important;
}

.recent-job-status {
    font-size: 10px !important;
}

.btn-job-applicants {
    font-size: 12px !important;
}

/* =========================================================
   MOBILE READABILITY
========================================================= */

@media (max-width: 800px) {
    body {
        font-size: 14px;
        line-height: 1.55;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 19px;
    }

    h3 {
        font-size: 15px;
    }

    p {
        font-size: 13px;
    }

    .page-header p,
    .card-subtitle,
    .welcome-subtext {
        font-size: 12px !important;
    }

    .meta-label,
    .field-label,
    .d-label,
    .job-table td::before,
    .employer-table td::before {
        font-size: 10px !important;
    }

    .meta-val,
    .field-value,
    .d-val,
    .job-table td,
    .employer-table td,
    .contact-info span,
    .company-meta span {
        font-size: 12px !important;
    }

    .btn-view,
    .btn-table,
    .btn-action,
    .btn-job-applicants,
    .reset-filter-btn,
    .review-actions button {
        font-size: 12px !important;
    }

    input,
    select,
    textarea {
        font-size: 14px !important;
    }
}