/* ==========================================================
   HOMIE DESIGN SYSTEM
   TYPOGRAPHY.CSS
   Version: 1.0
========================================================== */


/* ==========================================================
   BASE TYPOGRAPHY
========================================================== */

body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text);
}


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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h1 {
    font-size: var(--font-h1);
}

h2 {
    font-size: var(--font-h2);
}

h3 {
    font-size: var(--font-h3);
}

h4 {
    font-size: var(--font-h4);
}

h5 {
    font-size: var(--font-h5);
}

h6 {
    font-size: var(--font-h6);
}


/* ==========================================================
   PARAGRAPH
========================================================== */

p {
    margin: 0;
    color: var(--text-light);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
}


/* ==========================================================
   STRONG / EMPHASIS
========================================================== */

strong,
b {
    font-weight: var(--font-weight-bold);
}

em,
i {
    font-style: italic;
}

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


/* ==========================================================
   TEXT UTILITY CLASSES
========================================================== */

.text-xs {
    font-size: var(--font-size-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-md {
    font-size: var(--font-size-md);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-light {
    color: var(--text-light) !important;
}

.text-white {
    color: var(--text-white) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-navy {
    color: var(--navy) !important;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.font-light {
    font-weight: var(--font-weight-light);
}

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}


/* ==========================================================
   SECTION LABEL
========================================================== */

.section-label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--primary-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 1.8px;
    line-height: 1.4;
    text-transform: uppercase;
}


/* ==========================================================
   SECTION TITLE
========================================================== */

.section-title {
    margin: 0;
    color: var(--text);
    font-size: var(--font-h2);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.section-title span {
    color: var(--primary-dark);
}


/* ==========================================================
   SECTION DESCRIPTION
========================================================== */

.section-description {
    max-width: 720px;
    margin-top: 16px;
    color: var(--text-light);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
}


/* ==========================================================
   SECTION HEADING GROUP
========================================================== */

.section-heading {
    margin-bottom: 36px;
}

.section-heading--center {
    text-align: center;
}

.section-heading--center .section-description {
    margin-right: auto;
    margin-left: auto;
}


/* ==========================================================
   DISPLAY TYPOGRAPHY
========================================================== */

.display-1 {
    font-size: clamp(58px, 7vw, 112px);
    font-weight: var(--font-weight-bold);
    line-height: 0.95;
    letter-spacing: -4px;
}

.display-2 {
    font-size: clamp(46px, 5vw, 76px);
    font-weight: var(--font-weight-bold);
    line-height: 1.05;
    letter-spacing: -2px;
}

.display-3 {
    font-size: clamp(38px, 4vw, 58px);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
}


/* ==========================================================
   LEAD TEXT
========================================================== */

.lead {
    color: var(--text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: 1.75;
}


/* ==========================================================
   CAPTION
========================================================== */

.caption {
    color: var(--text-light);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}


/* ==========================================================
   LINK TYPOGRAPHY
========================================================== */

.link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary-dark);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition:
        color var(--transition-fast) ease,
        gap var(--transition-fast) ease;
}

.link:hover {
    gap: 10px;
    color: var(--primary);
}


/* ==========================================================
   LINE CLAMP
========================================================== */

.line-clamp-1,
.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.line-clamp-1 {
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    -webkit-line-clamp: 3;
}


/* ==========================================================
   WORD BREAK
========================================================== */

.break-word {
    overflow-wrap: break-word;
    word-break: break-word;
}


/* ==========================================================
   RESPONSIVE TYPOGRAPHY
========================================================== */

@media (max-width: 1199.98px) {

    :root {
        --font-h1: 56px;
        --font-h2: 42px;
        --font-h3: 31px;
    }
}


@media (max-width: 991.98px) {

    :root {
        --font-h1: 50px;
        --font-h2: 38px;
        --font-h3: 29px;
        --font-h4: 25px;
    }

    .section-title {
        font-size: 38px;
    }
}


@media (max-width: 767.98px) {

    :root {
        --font-h1: 44px;
        --font-h2: 34px;
        --font-h3: 27px;
        --font-h4: 23px;
        --font-h5: 20px;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .section-description {
        font-size: var(--font-size-sm);
    }
}


@media (max-width: 575.98px) {

    :root {
        --font-h1: 38px;
        --font-h2: 30px;
        --font-h3: 25px;
        --font-h4: 22px;
        --font-h5: 19px;
        --font-h6: 17px;
    }

    body {
        font-size: var(--font-size-sm);
    }

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

    .section-title {
        font-size: 30px;
    }

    .section-description {
        margin-top: 12px;
    }

    .lead {
        font-size: var(--font-size-md);
    }
}