/* ==========================================================================
   03-typography.css — Goodman Dermatology typography rules
   Sources: style.css, aqua.css, gd-components.css
   Status: NOT yet enqueued. See docs/audit/css-restructure-recipe.md.
   ========================================================================== */

/* Heading weight — Figma design uses Lora Regular (400) for all headlines */
h3, .h3 {
	font-weight: 400 !important;
}

.text-lead, 
.text-lead:not(ul):not(ol) > * {
	line-height: 1.50;
}

/* =======================================
   Figma Typography Overrides
   ======================================= */

h3.font-201532.h3,
.font-201532.h3 {
	font-size: 32px !important;
	line-height: 40px !important;
	font-weight: 400 !important;
	color: #252D30 !important;
	letter-spacing: 0 !important;
}

@media (max-width: 959px) {
	h3.font-201532.h3,
	.font-201532.h3 {
		font-size: 24px !important;
		line-height: 32px !important;
	}
}

/* ===================================
   UNCODE TYPOGRAPHY OVERRIDES (Figma Scale)
   =================================== */

/* Display 01 */
h1.h1, h2.h1, h3.h1, h4.h1, h5.h1, h6.h1, .h1 {
    font-family: 'Lora', serif !important;
    font-size: 80px !important;
    font-weight: 400 !important;
    line-height: 88px !important;
    letter-spacing: -2px !important;
}

/* Display 02 */
h1.h2, h2.h2, h3.h2, h4.h2, h5.h2, h6.h2, .h2 {
    font-family: 'Lora', serif !important;
    font-size: 64px !important;
    font-weight: 400 !important;
    line-height: 72px !important;
    letter-spacing: -1px !important;
}

/* Headline 01 */
h1.h3, h2.h3, h3.h3, h4.h3, h5.h3, h6.h3, .h3 {
    font-family: 'Lora', serif !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    line-height: 48px !important;
    letter-spacing: 0px !important;
}

/* Headline 02 */
h1.h4, h2.h4, h3.h4, h4.h4, h5.h4, h6.h4, .h4 {
    font-family: 'Lora', serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    letter-spacing: 0px !important;
}

/* Headline 03 */
h1.h5, h2.h5, h3.h5, h4.h5, h5.h5, h6.h5, .h5 {
    font-family: 'Lora', serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 32px !important;
    letter-spacing: 0px !important;
}

/* Headline 04 */
h1.h6, h2.h6, h3.h6, h4.h6, h5.h6, h6.h6, .h6 {
    font-family: 'Lora', serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    letter-spacing: 0px !important;
}

/* ===================================
   RESPONSIVE TYPOGRAPHY OVERRIDES
   =================================== */

@media (max-width: 959px) {
    h1.h1, h2.h1, h3.h1, h4.h1, h5.h1, h6.h1, .h1 {
        font-size: 44px !important;
        line-height: 52px !important;
        letter-spacing: -1px !important;
    }
    h1.h2, h2.h2, h3.h2, h4.h2, h5.h2, h6.h2, .h2 {
        font-size: 36px !important;
        line-height: 44px !important;
        letter-spacing: -0.5px !important;
    }
    h1.h3, h2.h3, h3.h3, h4.h3, h5.h3, h6.h3, .h3 {
        font-size: 28px !important;
        line-height: 36px !important;
    }
}

@media (max-width: 767px) {
    h1.h1, h2.h1, h3.h1, h4.h1, h5.h1, h6.h1, .h1 {
        font-size: 36px !important;
        line-height: 42px !important;
        letter-spacing: -0.5px !important;
    }
    h1.h2, h2.h2, h3.h2, h4.h2, h5.h2, h6.h2, .h2 {
        font-size: 32px !important;
        line-height: 38px !important;
        letter-spacing: -0.5px !important;
    }
    h1.h3, h2.h3, h3.h3, h4.h3, h5.h3, h6.h3, .h3 {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    h1.h4, h2.h4, h3.h4, h4.h4, h5.h4, h6.h4, .h4 {
        font-size: 22px !important;
        line-height: 30px !important;
    }
    h1.h5, h2.h5, h3.h5, h4.h5, h5.h5, h6.h5, .h5 {
        font-size: 18px !important;
        line-height: 26px !important;
    }
}

/* ===================================
   SINGLE-PROVIDER TYPOGRAPHY
   =================================== */

body.single-provider h1.h2 {
    margin: 0 0 16px !important;
    font-family: "Lora", serif !important;
    font-size: clamp(48px, 5.75vw, 72px) !important;
    line-height: clamp(56px, 6vw, 80px) !important;
    font-weight: 400 !important;
    letter-spacing: -1px !important;
    color: #ffffff !important;
}

body.single-provider .provider-cert h2 {
    margin: 0 0 24px !important;
    font-family: "Lora", serif !important;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
}

body.single-provider .provider-specialties strong {
    margin-bottom: 12px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
}

body.single-provider .provider-body h3,
body.single-provider .nextpatient-sidebar.provider h3 {
    margin: 0 0 24px !important;
    font-family: "Lora", serif !important;
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 400 !important;
    color: #252d30 !important;
}

body.single-provider .provider-body p,
body.single-provider .provider-body li,
body.single-provider .provider-body .wpb_wrapper {
    font-family: "DM Sans", sans-serif;
    color: #252d30;
}

/* Provider single page — name sizing (hero row override) */
body.single-provider #row-unique-1 h1.h2 {
    margin: 0 0 16px !important;
    font-family: "Lora", serif !important;
    font-size: clamp(48px, 5.75vw, 67px) !important;
    line-height: clamp(56px, 6vw, 77px) !important;
    font-weight: 400 !important;
    letter-spacing: -1px !important;
    color: #ffffff !important;
}
.gd-provider-subhead {
    margin-top: 8px !important;
}

@media (max-width: 959px) {
    .single-provider h1.h2 {
        font-size: 32px !important;
        line-height: 40px !important;
    }
}
@media (max-width: 599px) {
    .single-provider h1.h2 {
        font-size: 28px !important;
        line-height: 36px !important;
    }
}
