/**
 * NAIC Typography — Inter, 16px base, Major Third scale (1.25).
 *
 * Loaded after Divi 5 global font variables (see core/typography.php).
 *
 * @package NAIC
 */

:root {
	/* Scale */
	--naic-type-ratio: 1.25;
	--naic-font-size-base: 16px;

	/* Major Third (typescale.com) — base 16px */
	--naic-font-size-caption: 0.64rem;   /* 10.24px */
	--naic-font-size-sm: 0.8rem;         /* 12.8px  */
	--naic-font-size-body: 1rem;         /* 16px    */
	--naic-font-size-lg: 1.125rem;       /* 18px — large/lead paragraph, not part of the strict ratio scale */
	--naic-font-size-h6: 1.25rem;        /* 20px    */
	--naic-font-size-h5: 1.563rem;       /* 25px    */
	--naic-font-size-h4: 1.953rem;       /* 31.25px */
	--naic-font-size-h3: 2.441rem;       /* 39.06px */
	--naic-font-size-h2: 3.052rem;       /* 48.83px */
	--naic-font-size-h1: 3.815rem;       /* 61.04px */

	/* Line height */
	--naic-line-height-heading: 1.2;
	--naic-line-height-body: 1.5;
	--naic-line-height-tight: 1.35;

	/* Font family & weight */
	--naic-font-family: 'Inter', sans-serif;
	--naic-font-weight-regular: 400;
	--naic-font-weight-medium: 500;
	--naic-font-weight-semibold: 600;
	--naic-font-weight-bold: 700;
	--naic-font-weight-heading: var(--naic-font-weight-semibold);
	--naic-font-weight-body: var(--naic-font-weight-regular);

	/* Elementor legacy (components still use these hooks) */
	--e-global-typography-text-font-family: var(--naic-font-family);
	--e-global-typography-text-font-size: var(--naic-font-size-body);
	--e-global-typography-text-line-height: var(--naic-line-height-body);
}

html {
	font-size: var(--naic-font-size-base);
}

body,
.et_pb_section,
.et_pb_row,
.et_pb_column,
.et_builder_inner_content {
	font-family: var(--naic-font-family);
	font-size: var(--naic-font-size-body);
	font-weight: var(--naic-font-weight-body);
	line-height: var(--naic-line-height-body);
	color: var(--naic-color-black, #000);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4,
.et_pb_module h5,
.et_pb_module h6,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3,
.et_pb_text h4,
.et_pb_text h5,
.et_pb_text h6 {
	font-family: var(--naic-font-family);
	font-weight: var(--naic-font-weight-heading);
	line-height: var(--naic-line-height-heading);
}

body h1,
.et_pb_module h1,
.et_pb_text h1 {
	font-size: var(--naic-font-size-h1);
	/* h1 is bold (700); h2-h6 stay at --naic-font-weight-heading (600, set
	   above) — overrides it here since this rule loads after the shared
	   block, same (0,0,2) specificity per selector. */
	font-weight: var(--naic-font-weight-bold);
}

body h2,
.et_pb_module h2,
.et_pb_text h2 {
	font-size: var(--naic-font-size-h2);
}

body h3,
.et_pb_module h3,
.et_pb_text h3 {
	font-size: var(--naic-font-size-h3);
}

body h4,
.et_pb_module h4,
.et_pb_text h4 {
	font-size: var(--naic-font-size-h4);
}

body h5,
.et_pb_module h5,
.et_pb_text h5 {
	font-size: var(--naic-font-size-h5);
}

body h6,
.et_pb_module h6,
.et_pb_text h6 {
	font-size: var(--naic-font-size-h6);
}

p,
.et_pb_module p,
.et_pb_text p {
	font-size: var(--naic-font-size-body);
	line-height: var(--naic-line-height-body);
}

/**
 * Utility classes — !important on every property, same as Bootstrap's own
 * utility classes. A flat class selector (0,1,0 specificity) routinely loses
 * to Divi's own per-module generated CSS (built from each module's Visual
 * Builder text settings, often more specific), so without !important these
 * get silently overridden depending on which module the class is used
 * inside — not acceptable for a utility class, whose whole job is to force
 * a specific look regardless of context.
 */
small,
.small,
.text-sm,
.naic-text-sm {
	font-family: var(--naic-font-family) !important;
	font-size: var(--naic-font-size-sm) !important;
	font-weight: var(--naic-font-weight-body) !important;
	line-height: var(--naic-line-height-tight) !important;
}

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

.text-caption,
.naic-text-caption {
	font-family: var(--naic-font-family) !important;
	font-size: var(--naic-font-size-caption) !important;
	font-weight: var(--naic-font-weight-body) !important;
	line-height: var(--naic-line-height-tight) !important;
}

/**
 * Heading-simulation helpers — put h1–h6 styling on any element (e.g. a
 * <div> or <span> inside a Divi module) without changing its semantic
 * level. Each rule is self-contained (font-family/weight/line-height/size
 * all declared together, not split across a shared selector-list rule plus
 * a per-size rule) so the full recipe for a given class is visible in one
 * place. !important on every property for the same reason as the utility
 * classes above — this file loading after bootstrap-css only wins ties on
 * EQUAL specificity, and Divi's own per-module generated CSS is routinely
 * more specific than a flat .h2 class. These rules also pick up the
 * responsive overrides below for free, since both read the same
 * --naic-font-size-h* variables.
 */
.h1 {
	font-family: var(--naic-font-family) !important;
	font-weight: var(--naic-font-weight-bold) !important;
	line-height: var(--naic-line-height-heading) !important;
	font-size: var(--naic-font-size-h1) !important;
}

.h2 {
	font-family: var(--naic-font-family) !important;
	font-weight: var(--naic-font-weight-heading) !important;
	line-height: var(--naic-line-height-heading) !important;
	font-size: var(--naic-font-size-h2) !important;
}

.h3 {
	font-family: var(--naic-font-family) !important;
	font-weight: var(--naic-font-weight-heading) !important;
	line-height: var(--naic-line-height-heading) !important;
	font-size: var(--naic-font-size-h3) !important;
}

.h4 {
	font-family: var(--naic-font-family) !important;
	font-weight: var(--naic-font-weight-heading) !important;
	line-height: var(--naic-line-height-heading) !important;
	font-size: var(--naic-font-size-h4) !important;
}

.h5 {
	font-family: var(--naic-font-family) !important;
	font-weight: var(--naic-font-weight-heading) !important;
	line-height: var(--naic-line-height-heading) !important;
	font-size: var(--naic-font-size-h5) !important;
}

.h6 {
	font-family: var(--naic-font-family) !important;
	font-weight: var(--naic-font-weight-heading) !important;
	line-height: var(--naic-line-height-heading) !important;
	font-size: var(--naic-font-size-h6) !important;
}

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

/**
 * Material Symbols Outlined — the design system's icon font. Licensed
 * Apache 2.0 (https://github.com/google/material-design-icons). Usage:
 * <span class="material-symbols-outlined" aria-hidden="true">search</span> —
 * the text content is the icon's name (ligature), not a decoration.
 *
 * FILL 0 = outlined (not filled), wght 300 = light — matches what was
 * requested. opsz 24 is Google's standard optical size for UI-sized icons.
 * Override per-instance with an inline style if a specific icon needs a
 * different weight/fill, e.g. style="font-variation-settings: 'wght' 400".
 */
.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

@media only screen and (max-width: 980px) {
	:root {
		--naic-font-size-h1: 3.052rem;
		--naic-font-size-h2: 2.441rem;
		--naic-font-size-h3: 1.953rem;
	}
}

@media only screen and (max-width: 767px) {
	:root {
		--naic-font-size-h1: 2.441rem;
		--naic-font-size-h2: 1.953rem;
		--naic-font-size-h3: 1.563rem;
		--naic-font-size-h4: 1.25rem;
	}
}

* .et-db a:not([class])  {
    color: var(--naic-color-black);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--naic-color-secondary);
}

* .et-db a:not([class]):hover {
    text-decoration-thickness: 4px;
    transition: 1s ease-in-out;
}

* .et-db a:not([class]):focus {
    box-shadow: 0 0 0 2px var(--naic-color-focus);
    text-decoration: unset;
}