@import url('parameters.css');
@import url('fonts.css');

body {
    font-family: var(--font-family-base), sans-serif;
    font-size: var(--text-body-base) !important;
    font-weight: var(--font-weight-light) !important;
}

.text-serif {
    font-family: var(--font-family-serif), serif;
    font-weight: normal;
}

em, 
.text-serif-italic {
    font-family: var(--font-family-serif), serif;
    font-style: italic;
    font-weight: normal;
}

.text-handwritten {
    font-family: var(--font-family-handwritten), sans-serif;
}

u {
    text-decoration: underline;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

/* Colors */

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

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

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

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

/* Font weights*/

.fw-extra-light {
    font-weight: var(--font-weight-extra-light) !important;
}

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

.fw-regular {
    font-weight: var(--font-weight-regular) !important;
}

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

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

b,
strong,
.fw-bold {
    font-weight: var(--font-weight-bold) !important;
}

.fw-extra-bold {
    font-weight: var(--font-weight-extra-bold) !important;
}

/* Font sizes */ 

.text-micro {
    font-size: var(--text-body-micro) !important;
    line-heigth: var(--font-line-height-micro) !important;
}

.text-mini {
    font-size: var(--text-body-mini) !important;
    line-height: var(--font-line-height-mini) !important;
}

.text-extra-small {
    font-size: var(--text-body-extra-small) !important;
    line-height: var(--font-line-height-extra-small) !important;
}

.text-small {
    font-size: var(--text-body-small) !important;
    line-height: var(--font-line-height-small) !important;
}

 .text-body-base {
    font-size: var(--text-body-base) !important;
    line-height: var(--font-line-height-base) !important;
}  /* updated but not used */

.text-large {
    font-size: var(--text-body-large) !important;
    line-height: var(--font-line-height-large) !important;
}

.text-extra-large {
    font-size: var(--text-body-extra-large) !important;
    line-height: var(--font-line-height-extra-large) !important;
}

@media screen and (min-width: 992px) {
    .text-lg-micro {
        font-size: var(--text-body-micro) !important;
        line-heigth: var(--font-line-height-micro) !important;
    }

    .text-lg-small {
        font-size: var(--text-body-small) !important;
        line-height: var(--font-line-height-small) !important;
    }

    .text-lg-large {
        font-size: var(--text-body-large) !important;
        line-height: var(--font-line-height-large) !important;
    }
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-family-headings), sans-serif;
    letter-spacing: var(--letter-spacing-heading);
    margin: 0;
}

.display-huge {
    font-size: var(--text-heading-huge);
    line-height: var(--font-line-height-heading-huge);
    margin-bottom: var(--margin-heading-huge);
}

.display-1 {
    font-size: var(--text-heading-1);
    line-height: var(--font-line-height-heading-1);
    margin-bottom: var(--margin-heading-1);
}

.display-2 {
    font-size: var(--text-heading-2);
    line-height: var(--font-line-height-heading-2);
    margin-bottom: var(--margin-heading-2);
}

.display-3 {
    font-size: var(--text-heading-3);
    line-height: var(--font-line-height-heading-3);
    margin-bottom: var(--margin-heading-3);
}

.display-4 {
    font-size: var(--text-heading-4);
    line-height: var(--font-line-height-heading-4);
    margin-bottom: var(--margin-heading-4);
}

.display-5 {
    font-size: var(--text-heading-5);
    line-height: var(--font-line-height-heading-5);
    margin-bottom: var(--margin-heading-5);
}

.display-6 {
    font-size: var(--text-heading-6);
    line-height: var(--font-line-height-heading-6);
    margin-bottom: var(--margin-heading-6);
}

@media screen and (min-width: 992px) {
    .display-lg-1 { 
        font-size: var(--text-heading-1);
        line-height: var(--font-line-height-heading-1);
        margin-bottom: var(--margin-heading-1);
    }

    .display-lg-2 { /* features headings */
        font-size: var(--text-heading-2);
        line-height: var(--font-line-height-heading-2);
        margin-bottom: var(--margin-heading-2);
    }

    .display-lg-3 { /* check-in-cards headings */
        font-size: var(--text-heading-3);
        line-height: var(--font-line-height-heading-3);
        margin-bottom: var(--margin-heading-3);
    }

    .display-lg-4 { /* check-out-cards headings */
        font-size: var(--text-heading-4);
        line-height: var(--font-line-height-heading-4);
        margin-bottom: var(--margin-heading-4);
    }

    .display-lg-5 { /* pricing-card monthly-fees */
        font-size: var(--text-heading-5);
        line-height: var(--font-line-height-heading-5);
        margin-bottom: var(--margin-heading-5);
    }

    .display-lg-6 { /* features headings + pricing-cards headings */
        font-size: var(--text-heading-6);
        line-height: var(--font-line-height-heading-6);
        margin-bottom: var(--margin-heading-6);
    }
}

@media screen and (min-width: 1200px) {
    .display-xl-3 {
        font-size: var(--text-heading-3);
        line-height: var(--font-line-height-heading-3);
        margin-bottom: var(--margin-heading-3);
    }
}

/* Hyperlinks */

a {
    text-decoration: underline;
    text-underline-offset: auto;
    text-decoration-color: var(--color-zinc-400);
    color: var(--color-text-base) !important;
}

    a:hover, a.hover,
    a:focus, a.focus {
        text-decoration: underline;
        color: var(--color-text-inverse) !important;
        text-decoration-color: var(--color-text-inverse);
        background-color: var(--color-background-inverse);
    }

    a[target="_blank"]:not(a.no-blank)::after {
        font-family: var(--font-family-icons);
        content: "\e09f"; /* fa-thin fa-arrow-up-right */
        margin-left: var(--display-insets-3xs);
    }

    a[disabled] {
        pointer-events: none !important;    
    }

    .socials a {
        color: var(--color-text-muted) !important;
        padding: var(--display-insets-3xs);
        font-size: var(--text-body-extra-large);
    }
        .socials a:hover, .socials a.hover,
        .socials a:focus, .socials a.focus {
            color: var(--color-text-base) !important;
            background-color: transparent;
        }