/* =============================
 * TOKENS — TYPOGRAPHY
 * Define global font sizes using clamp() for a fluid effect.
 * Adjust line-height with ex values for consistent vertical spacing.
============================= */

:root {
	/* Body text */
	--global-font-size-body: clamp(1rem, 0.227vw + 0.955rem, 1.125rem);

	/* T-shirt scale (sm → xxxl) */
	--global-kb-font-size-sm:   clamp(0.85rem, 0.78rem + 0.2vw, 0.95rem);
	--global-kb-font-size-md:   clamp(1.15rem, 0.5vw + 1.05rem, 1.4rem);
	--global-kb-font-size-lg:   clamp(1.35rem, 0.75vw + 1.2rem, 1.7rem);
	--global-kb-font-size-xl:   clamp(1.7rem, 1.2vw + 1.4rem, 2.3rem);
	--global-kb-font-size-xxl:  clamp(2rem, 1.6vw + 1.7rem, 3rem);
	--global-kb-font-size-xxxl: clamp(2.5rem, 2vw + 2rem, 4rem);
}

/* =============================
 * TYPOGRAPHY — HEADINGS
 * Scoped to site content (.site) and the editor canvas
 * (.editor-styles-wrapper) so admin UI and plugin modals are unaffected.
 * :where() keeps specificity equal to a bare element selector.
============================= */

:where(.site, .editor-styles-wrapper) h1 {
	font-size: var(--global-kb-font-size-xxl);
	line-height: 2.1ex;
	font-weight: bold;
	letter-spacing: -.01em;
}

:where(.site, .editor-styles-wrapper) h2 {
	font-size: var(--global-kb-font-size-xl);
	line-height: 2ex;
	font-weight: bold;
	letter-spacing: -.01em;
}

:where(.site, .editor-styles-wrapper) h3 {
	font-size: var(--global-kb-font-size-lg);
	line-height: 2.2ex;
	font-weight: bold;
	letter-spacing: -.01em;
}

:where(.site, .editor-styles-wrapper) h4 {
	font-size: var(--global-kb-font-size-md);
	line-height: 2.2ex;
	font-weight: bold;
}

:where(.site, .editor-styles-wrapper) h5 {
	font-size: var(--global-font-size-body);
	line-height: 2.3ex;
	font-weight: bold;
}

:where(.site, .editor-styles-wrapper) h6 {
	font-size: var(--global-font-size-body);
	line-height: 2.3ex;
	font-weight: bold;
}

/* =============================
 * UTILITY CLASSES
 * Style the element itself AND a nested text element,
 * because in the editor Kadence often puts the class on a wrapper.
============================= */

.wpt-h1,
.wpt-h1 :is(p, h1, h2, h3, h4, h5, h6) {
	font-size: var(--global-kb-font-size-xxl) !important;
	line-height: 2.1ex !important;
	font-weight: bold !important;
	letter-spacing: -.01em !important;
}

.wpt-h2,
.wpt-h2 :is(p, h1, h2, h3, h4, h5, h6) {
	font-size: var(--global-kb-font-size-xl) !important;
	line-height: 2ex !important;
	font-weight: bold !important;
	letter-spacing: -.01em !important;
}

.wpt-h3,
.wpt-h3 :is(p, h1, h2, h3, h4, h5, h6) {
	font-size: var(--global-kb-font-size-lg) !important;
	line-height: 2.2ex !important;
	font-weight: bold !important;
	letter-spacing: -.01em !important;
}

.wpt-h4,
.wpt-h4 :is(p, h1, h2, h3, h4, h5, h6) {
	font-size: var(--global-kb-font-size-md) !important;
	line-height: 2.2ex !important;
	font-weight: bold !important;
}

.wpt-h5,
.wpt-h5 :is(p, h1, h2, h3, h4, h5, h6),
.wpt-h6,
.wpt-h6 :is(p, h1, h2, h3, h4, h5, h6) {
	font-size: var(--global-font-size-body) !important;
	line-height: 2.3ex !important;
	font-weight: bold !important;
}

.wpt-p,
.wpt-p :is(p, h1, h2, h3, h4, h5, h6) {
	font-size: var(--global-font-size-body) !important;
	line-height: 2.9ex !important;
	font-weight: 500 !important;
}

/* =============================
 * TYPOGRAPHY — BODY TEXT & ICON LIST
 * "body" replaced by the content wrapper so inherited
 * size/weight don't leak into the admin bar or overlays.
============================= */

:where(.site, .editor-styles-wrapper),
:where(.site, .editor-styles-wrapper) p,
:where(.site, .editor-styles-wrapper) .wp-block-kadence-iconlist {
	font-size: var(--global-font-size-body);
	line-height: 2.9ex;
	font-weight: 500;
}
.wpt-p {
	font-size: var(--global-font-size-body) !important;
	line-height: 2.9ex !important;
	font-weight: 500 !important;
}

/* Make default margin-bottom fluid */
section.wpt-section p {
	margin-block-end: var(--global-kb-spacing-xs);
}

/* =============================
 * TYPOGRAPHY — EYEBROW HEADING
 * .wpt-eyebrow → dark variant (palette10)
============================= */

:is(.wpt-eyebrow, .wpt-eyebrow-light).wp-block-kadence-advancedheading {
	--wpt-eyebrow-color: var(--global-palette10);

	color: var(--wpt-eyebrow-color);
	font-family: inherit;
	font-size: var(--global-kb-font-size-sm);
	width: fit-content;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3em 1em;
	margin-block-end: var(--global-kb-spacing-sm);
	border-radius: 9999px;
	border: 1px solid var(--wpt-eyebrow-color);
	background: radial-gradient(
		ellipse at center,
		transparent 30%,
		color-mix(in srgb, var(--wpt-eyebrow-color) 30%, transparent) 100%
	);
}

.wpt-eyebrow-light.wp-block-kadence-advancedheading {
	--wpt-eyebrow-color: var(--global-palette8);
}

/* 
 * .wpt-eyebrow-light → light variant (palette8) */
:is(.wpt-eyebrow, .wpt-eyebrow-light).wp-block-kadence-advancedheading :is(h1, h2, h3, h4, h5, h6, p) {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
}

/* =============================
 * TYPOGRAPHY — Text formatting
============================= */

/* Text default: pretty (inherited by everything in the content area) */
:where(.site, .editor-styles-wrapper),
:where(.site, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6, p, li) {
	text-wrap: pretty;
}

/* Override with balance — on the element itself, or on the
   nested text element when Kadence puts the class on a wrapper (editor) */
:where(.site, .editor-styles-wrapper) .balance,
:where(.site, .editor-styles-wrapper) .balance :is(h1, h2, h3, h4, h5, h6, p) {
	text-wrap: balance;
}
/* Remove link decoration */
a {
	text-decoration: none;
}

/* =============================
 * TYPOGRAPHY — Text highlight
============================= */
::selection {
	background: var(--global-palette10);
	color: var(--global-palette9);
}

/* ACF Highlight */
mark.acf-highlight {
	background-color: #99d6ff;
	color: inherit;
	padding-inline: 2px;
	border-radius: var(--wpt-radius-sm);
}


/* =============================
 * SPACING - TOKENS
 * Define global spacing tokens using clamp() for fluid scaling.
 * Used for padding, margins, gaps, and section spacing site-wide.
============================= */

:root {
	/* Fluid horizontal padding for content edges (mobile → desktop) */
	--global-content-edge-padding: clamp(1rem, 4.878vw + -0.159rem, 3.5rem);

	/* Default vertical spacing for sections (mobile → desktop) */
	--global-section-padding-y: clamp(2.5rem, 4.878vw + 1.341rem, 5rem);

	/* Row gap (tablet → desktop) */
	--global-row-gutter-sm: clamp(0.5rem, 1.852vw + -0.389rem, 1rem);
	--global-row-gutter-md: clamp(1rem, 3.704vw + -0.778rem, 2rem);
	--global-row-gutter-lg: clamp(2rem, 7.407vw + -1.556rem, 4rem);

	/* Row gap mobile */
	--global-row-gutter-mobile: clamp(2rem, 2.787vw + 1.338rem, 2.5rem);

	/* Column gap scale. (tablet → desktop) */
	--global-kb-gap-sm: clamp(0.5rem, 1.852vw + -0.389rem, 1rem);
	--global-kb-gap-md: clamp(1rem, 3.704vw + -0.778rem, 2rem);
	--global-kb-gap-lg: clamp(2rem, 7.407vw + -1.556rem, 4rem);

	/* Global fluid spacing scale (Kadence spacing tokens) */
	--global-kb-spacing-xxs: clamp(0.25rem, 0.488vw + 0.134rem, 0.5rem);
	--global-kb-spacing-xs:  clamp(0.5rem, 0.976vw + 0.268rem, 1rem);
	--global-kb-spacing-sm:  clamp(1rem, 1.463vw + 0.652rem, 1.75rem);
	--global-kb-spacing-md:  clamp(1.25rem, 1.951vw + 0.787rem, 2.25rem);
	--global-kb-spacing-lg:  clamp(1.5rem, 2.439vw + 0.921rem, 2.75rem);
	--global-kb-spacing-xl:  clamp(2rem, 3.415vw + 1.189rem, 3.75rem);
	--global-kb-spacing-xxl: clamp(3rem, 3.902vw + 2.073rem, 5rem);
	--global-kb-spacing-3xl: clamp(4rem, 4.878vw + 2.841rem, 6.5rem);
	--global-kb-spacing-4xl: clamp(5rem, 5.854vw + 3.61rem, 8rem);
	--global-kb-spacing-5xl: clamp(7rem, 5.854vw + 5.61rem, 10rem);
}

@media (max-width: 767px) {
	section .wpt-container {
		row-gap: var(--global-row-gutter-mobile);
	}
}

/* =============================
 * SPACING — SECTION (opt-in)
============================= */

section.wpt-section {
	padding-block: var(--global-section-padding-y);
}

/* Button spacing */
.wp-block-kadence-advancedbtn {
	padding-block-start: var(--global-kb-spacing-xs);
}

/* =============================
 * TOKENS — RADIUS
============================= */

:root {
	--wpt-radius-sm: 4px;
	--wpt-radius-md: 8px;
	--wpt-radius-lg: 12px;
}

/* =============================
 * IMAGES / MEDIA
============================= */

/* Kadence image default radius; per-block settings still win (zero specificity) */
:where(.wp-block-kadence-image) img {
	--kb-img-radius: var(--wpt-radius-md);
}

/* Core image block + galleries */
:where(.wp-block-image, .kb-gallery-ul .kadence-blocks-gallery-item) img {
	border-radius: var(--wpt-radius-md);
}

/* Prevents sub-pixel gaps */
:where(.wp-block-image, .wp-block-kadence-image) img {
	display: block;
}

/* Post images: clip the intrinsic wrapper so the radius shows */
.kadence-post-image-intrisic .kadence-post-image-inner-intrisic {
	border-radius: var(--wpt-radius-md);
	overflow: hidden;
}

/* Margin-block Opt-in */
:where(.wp-block-image, .wp-block-kadence-image.img-margin) img {
	margin-block: var(--global-kb-spacing-md);
}

/* BG-styles Opt-in */
figure.img-bg {
	background-color: #D6EEF9;
	padding: var(--global-kb-spacing-xxs);
	border: 1px solid var(--global-palette10);
	border-radius: var(--wpt-radius-md);
}

/* iFrames */
.wp-block-kadence-dynamichtml iframe {
	border-radius: var(--wpt-radius-md);
}

/* =============================
 * Section - Border-block styles
============================= */

section.border-block-gradient {
	border-block: 1px solid;
	border-image: linear-gradient(to right, transparent, var(--global-palette7), transparent) 1;
}

section.border-top-gradient {
	border-block-start: 1px solid;
	border-image: linear-gradient(to right, transparent, var(--global-palette7), transparent) 1;
}

section.border-bottom-gradient {
	border-block-end: 1px solid;
	border-image: linear-gradient(to right, transparent, var(--global-palette7), transparent) 1;
}

/* =============================
 * UTILITIES & COMPONENT TWEAKS
 * Small layout fixes that don't belong in the token sections.
============================= */

/* Ensure all items in the related posts carousel have equal height */
.carousel-item > article {
	height: 100%;
}

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

/* Hide sidebar on mobile devices (max-width: 768px). */
@media (max-width: 768px) {
	.has-sidebar .primary-sidebar {
		display: none;
	}
}