/* ====================================
   CraftElevators — Typography Styles
   ==================================== */

/* --- Import Fonts (ensure loaded in your HTML too) --- */
/* (These lines are for reference; put the actual @import or <link> in your main HTML head)
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap");
*/

/* --- Headings --- */
h1, .h1 {
    font-family: var(--font-primary);
    font-size: var(--h1-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    line-height: var(--line-height-heading);
    letter-spacing: -0.015em;
    margin-bottom: 0.7em;
    margin-top: 0;
}

h2, .h2 {
    font-family: var(--font-primary);
    font-size: var(--h2-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: var(--line-height-heading);
    letter-spacing: -0.013em;
    margin-bottom: 0.7em;
    margin-top: 0;
}

h3, .h3 {
    font-family: var(--font-primary);
    font-size: var(--h3-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: var(--line-height-heading);
    margin-bottom: 0.65em;
    margin-top: 0;
}

h4, .h4 {
    font-family: var(--font-primary);
    font-size: 1.14rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin-bottom: 0.5em;
    margin-top: 0;
}

h5, .h5 {
    font-family: var(--font-primary);
    font-size: 1.01rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin-bottom: 0.45em;
    margin-top: 0;
}

h6, .h6 {
    font-family: var(--font-primary);
    font-size: 0.93rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    margin-bottom: 0.4em;
    margin-top: 0;
}

/* --- Body Text --- */
body, .body {
    font-family: var(--font-secondary);
    font-size: var(--body-size);
    color: var(--color-gray);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    background: #EFEBE7;
}

p {
    font-family: var(--font-secondary);
    font-size: var(--body-size);
    line-height: var(--line-height-body);
    color: var(--color-gray);
    margin-bottom: 1.1em;
    margin-top: 0;
}

/* --- Captions and Utility Text --- */
.caption, .small, small {
    font-family: var(--font-secondary);
    font-size: var(--caption-size);
    color: var(--color-gray);
    font-weight: var(--font-weight-light);
    opacity: 0.86;
}

/* --- Bold and Emphasis --- */
b, strong, .bold {
    font-weight: var(--font-weight-bold);
}

em, i, .italic {
    font-style: italic;
}

/* --- Lists --- */
ul, ol {
    font-family: var(--font-secondary);
    font-size: var(--body-size);
    color: var(--color-gray);
    margin-bottom: 1em;
    padding-left: 1.2em;
}

li {
    margin-bottom: 0.3em;
}

/* --- Links --- */
a, a:visited {
    font-family: var(--font-secondary);
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.16s;
}

    a:hover, a:focus {
        color: var(--color-accent);

    }

/* --- Blockquote --- */
blockquote {
    border-left: 4px solid var(--color-primary);
    margin: 1.1em 0;
    padding: 0.7em 1.5em;
    background: #f6f8fa;
    color: var(--color-charcoal);
    font-family: var(--font-secondary);
    font-size: 1.07rem;
    font-style: italic;
    opacity: 0.96;
}

/* --- Utility Classes --- */
.text-primary {
    color: var(--color-primary) !important;
}

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

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

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

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

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

.text-italic {
    font-style: italic !important;
}

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

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

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

/* --- Responsive Headings --- */
@media (max-width: 991.98px) {
    h1, .h1 {
        font-size: calc(var(--h1-size) * 0.83);
    }

    h2, .h2 {
        font-size: calc(var(--h2-size) * 0.86);
    }

    h3, .h3 {
        font-size: calc(var(--h3-size) * 0.92);
    }
}

@media (max-width: 575.98px) {
    h1, .h1 {
        font-size: calc(var(--h1-size) * 0.69);
    }

    h2, .h2 {
        font-size: calc(var(--h2-size) * 0.71);
    }

    h3, .h3 {
        font-size: calc(var(--h3-size) * 0.78);
    }
}

/* --- Accessibility: Focus for links --- */
a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.bg-secondary .b2,
.rts-section-gap.bg-secondary .b2,
.lead{
    color: #fff !important;
}