/*
Theme Name: Kadence Child
Theme URI: https://site-steward.com
Description: Child theme for Steward redesign typography + color normalization.
Author: BlueBridgeDev
Template: kadence
Version: 1.0.8
Text Domain: kadence-child
*/

/* ==========================================================================
   Color system — style guide contract
   ========================================================================== */

:root {
	--steward-ink: #17363A;
	--steward-brand-teal: #2B5055;
	--steward-dark-surface: #2B5A60;
	--steward-action-red: #C44532;
	--steward-brand-yellow: #DAA540;
	--steward-light-gold: #E3BA6C;
	--steward-cream: #F7F2E8;
	--steward-muted: #667477;

	--global-body-font-family: "Inconsolata", ui-monospace, monospace;
	--global-heading-font-family: "Audiowide", sans-serif;
	--global-primary-nav-font-family: "Inconsolata", ui-monospace, monospace;
	--steward-font-display: "Audiowide", sans-serif;
	--steward-font-body: "Inconsolata", ui-monospace, monospace;
}

/* ==========================================================================
   Type system — style guide contract
   Audiowide → H1–H3 only (400)
   Inconsolata → everything else
   ========================================================================== */

html,
body,
button,
input,
select,
textarea,
.entry-content,
.site-header,
.site-footer,
.main-navigation,
.header-button,
.kb-button,
.kt-btn-wrap,
.wp-block-button,
.wp-block-kadence-advancedbtn {
	font-family: var(--steward-font-body);
}

/* H1–H3: Audiowide 400 + scale */
h1,
.h1,
.entry-hero h1,
.wp-block-kadence-advancedheading[data-level="1"],
h1.wp-block-kadence-advancedheading {
	font-family: var(--steward-font-display) !important;
	font-weight: 400 !important;
	font-size: clamp(46px, 2.875rem + 0.625vw, 56px) !important;
	text-transform: none !important;
}

h2,
.h2,
.wp-block-kadence-advancedheading[data-level="2"],
h2.wp-block-kadence-advancedheading {
	font-family: var(--steward-font-display) !important;
	font-weight: 400 !important;
	font-size: clamp(36px, 2rem + 0.625vw, 46px) !important;
	text-transform: none !important;
}

h3,
.h3,
.wp-block-kadence-advancedheading[data-level="3"],
h3.wp-block-kadence-advancedheading {
	font-family: var(--steward-font-display) !important;
	font-weight: 400 !important;
	font-size: clamp(28px, 1.5rem + 0.625vw, 38px) !important;
	text-transform: none !important;
}

/* ==========================================================================
   W6 — Mobile H1 word-break polish
   H1–H3: never break mid-word; smaller H1 below 480px so words like
   "Development" fit at ~390px. Desktop H1 max stays 56px.
   ========================================================================== */

h1,
.h1,
.entry-hero h1,
.wp-block-kadence-advancedheading[data-level="1"],
h1.wp-block-kadence-advancedheading,
h2,
.h2,
.wp-block-kadence-advancedheading[data-level="2"],
h2.wp-block-kadence-advancedheading,
h3,
.h3,
.wp-block-kadence-advancedheading[data-level="3"],
h3.wp-block-kadence-advancedheading {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (max-width: 480px) {
	h1,
	.h1,
	.entry-hero h1,
	.wp-block-kadence-advancedheading[data-level="1"],
	h1.wp-block-kadence-advancedheading {
		font-size: clamp(38px, 5.5vw + 1.25rem, 56px) !important;
	}
}

/* H4–H6: Inconsolata */
h4,
.h4,
.wp-block-kadence-advancedheading[data-level="4"],
h4.wp-block-kadence-advancedheading {
	font-family: var(--steward-font-body) !important;
	font-weight: 700 !important;
	font-size: clamp(24px, 1.4rem + 0.25vw, 28px) !important;
	text-transform: none !important;
}

h5,
.h5,
.wp-block-kadence-advancedheading[data-level="5"],
h5.wp-block-kadence-advancedheading {
	font-family: var(--steward-font-body) !important;
	font-weight: 700 !important;
	font-size: clamp(20px, 1.2rem + 0.125vw, 22px) !important;
	text-transform: none !important;
}

h6,
.h6,
.wp-block-kadence-advancedheading[data-level="6"],
h6.wp-block-kadence-advancedheading {
	font-family: var(--steward-font-body) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	text-transform: uppercase;
}

/* Body / links */
body {
	font-size: 18px;
	font-weight: 400;
}

a {
	font-weight: 700;
}

/* Card 2 — dropdown = top-level nav size (18px) */
.main-navigation .primary-menu-container > ul li.menu-item > a,
.header-navigation .header-menu-container ul ul li.menu-item > a,
.header-navigation .header-menu-container ul.sub-menu li.menu-item > a {
	font-size: 18px !important;
	font-family: var(--steward-font-body);
}

/* Card 4 — kill uppercase on H1–H5 (H6 / eyebrows stay uppercase) */
h1,
h2,
h3,
h4,
h5,
.single-post .post-title h1,
.single-post .single-content h1,
.single-post .single-content h2,
.single-post .single-content h2 span,
.single-post .single-content h3,
.single-post .single-content h4,
.single-post .single-content h5 {
	text-transform: none !important;
}

/* ==========================================================================
   Card 3 — headings / highlight marks: Ink (not orange/red)
   Kadence default mark color is #f76a0c (plugin CSS). CTAs untouched.
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.entry-hero h1,
.wp-block-heading,
.wp-block-kadence-advancedheading:is(h1, h2, h3, h4, h5, h6),
h1.wp-block-kadence-advancedheading,
h2.wp-block-kadence-advancedheading,
h3.wp-block-kadence-advancedheading,
h4.wp-block-kadence-advancedheading,
h5.wp-block-kadence-advancedheading,
h6.wp-block-kadence-advancedheading {
	color: var(--steward-ink);
}

.wp-block-kadence-advancedheading mark.kt-highlight,
.kt-svg-icon-list-text mark.kt-highlight,
mark.kt-highlight {
	color: var(--steward-ink) !important;
}

/* Card 10 — website-design red box text fixed via DB ("color":"#9c2b2a"→Ink).
   No blanket !important here: cream-on-dark headings must stay cream. */

/* ==========================================================================
   Card 15 — blog newsletter / insights signup
   Dark Surface bg, Cream text, Action Red button. Fields/action untouched.
   ========================================================================== */

.kadence-column39_9a9d23-19 > .kt-inside-inner-col {
	background-color: var(--steward-dark-surface) !important;
}

.kadence-column39_9a9d23-19 .wp-block-kadence-advancedheading,
.kadence-column39_9a9d23-19 p {
	color: var(--steward-cream) !important;
}

.insights-signup,
.insights-form {
	width: 100%;
}

.insights-form input,
.insights-signup input#insights-email {
	background: var(--steward-cream) !important;
	color: var(--steward-ink) !important;
	border: none !important;
}

.insights-form input::placeholder,
.insights-signup input#insights-email::placeholder {
	color: var(--steward-muted);
}

.insights-form button,
.insights-signup button {
	background: var(--steward-action-red) !important;
	color: var(--steward-cream) !important;
	border: 0 !important;
}

.insights-form button:hover,
.insights-signup button:hover {
	background: var(--steward-ink) !important;
	color: var(--steward-cream) !important;
}

/* ==========================================================================
   Extra 2 — Large body (20px+) = weight 500
   ========================================================================== */

.entry-content p[style*="font-size:20px"][style*="font-weight:300"],
.entry-content p[style*="font-weight:300"][style*="font-size:20px"],
.entry-content [style*="font-size:20px"][style*="font-weight:300"],
.entry-content [style*="font-size:22px"][style*="font-weight:300"],
.entry-content [style*="font-size:24px"][style*="font-weight:300"],
.entry-content [style*="font-size:26px"][style*="font-weight:300"],
.entry-content [style*="font-size:28px"][style*="font-weight:300"],
.wp-block-kadence-advancedheading[style*="font-size:20px"][style*="font-weight:300"],
.wp-block-kadence-advancedheading[style*="font-size:22px"][style*="font-weight:300"],
.wp-block-kadence-advancedheading[style*="font-size:24px"][style*="font-weight:300"] {
	font-weight: 500 !important;
}

/* Kadence often emits weight 300 on large advancedheading <p> via class CSS —
   bump any paragraph-level advanced heading that is body-large. */
p.wp-block-kadence-advancedheading {
	font-weight: 500;
}

/* ==========================================================================
   W3 — Card 5: hero vertical sizing (site-wide)
   Override Additional CSS 85/95dvh min-heights. Match reference:
   min-height clamp(32rem, 64svh, 44rem) + vertically center content.
   Mobile: auto height so heroes stay fully visible at ~390px.
   ========================================================================== */

/* Extra body/html specificity so these beat Customizer Additional CSS (!important). */
html body.page .custom-new-hero-banner.kb-row-layout-wrap {
	height: auto !important;
	min-height: clamp(32rem, 64svh, 44rem) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit,
html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit > .wp-block-kadence-column,
html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit > .wp-block-kadence-column > .kt-inside-inner-col,
html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-inner-column-height-full,
html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-inner-column-height-full > .wp-block-kadence-column,
html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-inner-column-height-full > .wp-block-kadence-column > .kt-inside-inner-col,
html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-inner-column-height-full > section.wp-block-kadence-column,
html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-inner-column-height-full > section.wp-block-kadence-column > .kt-inside-inner-col {
	min-height: clamp(32rem, 64svh, 44rem) !important;
	align-content: center;
	align-items: center;
	justify-content: center;
}

@media (max-width: 767px) {
	html body.page .custom-new-hero-banner.kb-row-layout-wrap,
	html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit,
	html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit > .wp-block-kadence-column,
	html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit > .wp-block-kadence-column > .kt-inside-inner-col,
	html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-inner-column-height-full,
	html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-inner-column-height-full > .wp-block-kadence-column,
	html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-inner-column-height-full > .wp-block-kadence-column > .kt-inside-inner-col,
	html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-inner-column-height-full > section.wp-block-kadence-column,
	html body.page .custom-new-hero-banner > .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-inner-column-height-full > section.wp-block-kadence-column > .kt-inside-inner-col {
		min-height: auto !important;
	}
}

/* Card 5, second half — equal margin above and beneath the hero text.
   The inner text row ships 104px top / 48px bottom padding, a constant 56px
   offset on all six hero pages. 76px on both sides keeps the same 152px total,
   so the hero height and everything below it stay exactly where they are.
   Scoped to the first inner row: the second one is the absolute logo strip. */
html body.page .custom-new-hero-banner .kt-inside-inner-col > .kb-row-layout-wrap:first-child > .kt-row-column-wrap {
	padding-top: 76px !important;
	padding-bottom: 76px !important;
}

/* Below 768px the hero min-height drops to auto, so the outer row's 80px/0
   padding stops being absorbed by the centering and lands entirely on top.
   40px both sides keeps the same 80px total. */
@media (max-width: 767px) {
	html body.page .custom-new-hero-banner > .kt-row-column-wrap {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}

/* Card 17 — the hero's scroll-down button was absolutely positioned at bottom:0
   of .kt-inside-inner-col while the text row filled the same box, so neither
   reserved space for the other: the button painted over the paragraph's last
   line (28px on five hero pages at 390px, 23px on the homepage at 1440px).
   Making the button part of the flow removes the overlap at every width instead
   of per breakpoint. Its row ships ~193px of padding around a 28px button —
   collapsing that keeps the hero height byte-identical on desktop and tablet;
   below 768px the hero is height:auto, so it grows by the button's real height. */
html body.page .custom-new-hero-banner .kt-inside-inner-col {
	display: flex !important;
	flex-direction: column !important;
}

html body.page .custom-new-hero-banner .kt-inside-inner-col > .kb-row-layout-wrap:first-child {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

html body.page .custom-new-hero-banner .kt-inside-inner-col > .kb-row-layout-wrap:last-child {
	position: static !important;
	margin-top: auto !important;
}

html body.page .custom-new-hero-banner .kt-inside-inner-col > .kb-row-layout-wrap:last-child > .kt-row-column-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: 0 !important;
}

html body.page .custom-new-hero-banner .kt-inside-inner-col > .kb-row-layout-wrap:last-child .kt-inside-inner-col {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ==========================================================================
   W3 — Card 8: homepage testimonial max-width on wide screens
   ========================================================================== */

@media (min-width: 1601px) {
	html body.page-id-3453 .custom-hompage-testimonial > .kt-row-column-wrap,
	html body.page-id-3453 .custom-hompage-testimonial .kb-row-layout-id3453_5939f0-95 > .kt-row-column-wrap {
		max-width: 1200px !important;
		width: 100%;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ==========================================================================
   W3 — Card 11: case-study hero sub-text centered under H1
   Subtitle columns use align-items:flex-start so the paragraph box sits left
   even when text-align:center is set.
   ========================================================================== */

.parent-pageid-3055 .entry-content > .kb-row-layout-wrap:first-of-type .wp-block-kadence-column > .kt-inside-inner-col:has(> p.has-text-align-center),
.parent-pageid-3055 .entry-content > .kb-row-layout-wrap:first-of-type .wp-block-kadence-column > .kt-inside-inner-col:has(> p.wp-block-kadence-advancedheading) {
	align-items: center !important;
}

.parent-pageid-3055 .entry-content > .kb-row-layout-wrap:first-of-type .wp-block-kadence-column > .kt-inside-inner-col > p.has-text-align-center,
.parent-pageid-3055 .entry-content > .kb-row-layout-wrap:first-of-type .wp-block-kadence-column > .kt-inside-inner-col > p.wp-block-kadence-advancedheading {
	text-align: center !important;
	width: 100%;
	align-self: center;
}

/* ==========================================================================
   W3 — Card 13: Case Study pill/card hover on service pages
   Pill tags + linked cards: Light Gold accent, slight lift; :focus-visible too.
   ========================================================================== */

.page-id-3546 .wp-block-kadence-advancedheading:has(> a[href*="case-study"]),
.page-id-3546 .wp-block-kadence-advancedheading:has(> strong > a[href*="case-study"]),
.page-id-3546 .wp-block-kadence-advancedheading:has(a[href*="case-study"]),
.page-id-3572 .wp-block-kadence-advancedheading:has(> a[href*="case-study"]),
.page-id-3572 .wp-block-kadence-advancedheading:has(> strong > a[href*="case-study"]),
.page-id-3572 .wp-block-kadence-advancedheading:has(a[href*="case-study"]) {
	border-radius: 100px !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.page-id-3546 .wp-block-kadence-advancedheading:has(a[href*="case-study"]):hover,
.page-id-3546 .wp-block-kadence-advancedheading:has(a[href*="case-study"]):focus-within,
.page-id-3572 .wp-block-kadence-advancedheading:has(a[href*="case-study"]):hover,
.page-id-3572 .wp-block-kadence-advancedheading:has(a[href*="case-study"]):focus-within {
	background-color: var(--steward-light-gold) !important;
	border-color: var(--steward-light-gold) !important;
	color: var(--steward-ink) !important;
	transform: translateY(-2px);
}

.page-id-3546 .wp-block-kadence-advancedheading a[href*="case-study"],
.page-id-3572 .wp-block-kadence-advancedheading a[href*="case-study"],
.page-id-3546 p.wp-block-kadence-advancedheading a[href*="case-study"],
.page-id-3572 p.wp-block-kadence-advancedheading a[href*="case-study"] {
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.page-id-3546 .wp-block-kadence-advancedheading a[href*="case-study"]:hover,
.page-id-3546 .wp-block-kadence-advancedheading a[href*="case-study"]:focus-visible,
.page-id-3572 .wp-block-kadence-advancedheading a[href*="case-study"]:hover,
.page-id-3572 .wp-block-kadence-advancedheading a[href*="case-study"]:focus-visible,
.page-id-3546 p.wp-block-kadence-advancedheading a[href*="case-study"]:hover,
.page-id-3546 p.wp-block-kadence-advancedheading a[href*="case-study"]:focus-visible,
.page-id-3572 p.wp-block-kadence-advancedheading a[href*="case-study"]:hover,
.page-id-3572 p.wp-block-kadence-advancedheading a[href*="case-study"]:focus-visible {
	color: var(--steward-light-gold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.page-id-3546 .kb-section-has-link:has(.wp-block-kadence-advancedheading),
.page-id-3572 .kb-section-has-link:has(.wp-block-kadence-advancedheading) {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-id-3546 .kb-section-has-link:has(.wp-block-kadence-advancedheading):hover,
.page-id-3546 .kb-section-has-link:has(.wp-block-kadence-advancedheading):focus-within,
.page-id-3572 .kb-section-has-link:has(.wp-block-kadence-advancedheading):hover,
.page-id-3572 .kb-section-has-link:has(.wp-block-kadence-advancedheading):focus-within {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(23, 54, 58, 0.16);
}

.page-id-3546 .kb-section-has-link .kb-section-link-overlay:focus-visible,
.page-id-3572 .kb-section-has-link .kb-section-link-overlay:focus-visible {
	outline: 2px solid var(--steward-light-gold);
	outline-offset: 4px;
}

/* ==========================================================================
   W3 — Card 16: CONTACT US heading — half size, centered (contact page only)
   Additional CSS uses clamp(40px, 10vw, 120px); 50% → clamp(20px, 5vw, 60px).
   ========================================================================== */

.page-id-2214 .kt-adv-heading2214_2c1b33-9d,
.page-id-2214 .wp-block-kadence-advancedheading.kt-adv-heading2214_2c1b33-9d,
.page-id-2214 .wp-block-kadence-advancedheading.kt-adv-heading2214_2c1b33-9d[data-kb-block="kb-adv-heading2214_2c1b33-9d"] {
	font-size: clamp(20px, 5vw, 60px) !important;
	text-align: center !important;
}

/* ==========================================================================
   W8 — Cards 3 & 10: legacy red (#9c2b2a) leftovers in the testimonials component
   Snippet CSS prints in footer (later source order). Win on specificity:
   name ≥0-2-0 (no !important); arrows ≥0-2-0 + !important (snippet is !important).
   ========================================================================== */

.steward-testimonials .testimonial-name {
	color: var(--steward-ink);
}

.steward-testimonials .swiper-button-prev,
.steward-testimonials .swiper-button-next,
.steward-testimonials .swiper-button-prev:after,
.steward-testimonials .swiper-button-next:after {
	color: var(--steward-brand-teal) !important;
}

/* ==========================================================================
   W14 — Case studies: sticky section titles (client blanket authorization)
   .wrap.kt-clear sets overflow:hidden, which kills position:sticky — hence the
   !important. The inner col needs height:100% or sticky has no travel.
   Desktop only: below 992px the two columns stack.
   ========================================================================== */

@media (min-width: 992px) {
	.parent-pageid-3055 .wrap.kt-clear,
	.parent-pageid-3055 .entry-content .kb-row-layout-wrap,
	.parent-pageid-3055 .entry-content .kt-row-column-wrap,
	.parent-pageid-3055 .entry-content .wp-block-kadence-column,
	.parent-pageid-3055 .entry-content .kt-inside-inner-col {
		overflow: visible !important;
	}

	.parent-pageid-3055 .entry-content .kt-row-column-wrap.kt-has-2-columns > .wp-block-kadence-column:first-child > .kt-inside-inner-col {
		height: 100%;
	}

	.parent-pageid-3055 .entry-content .kt-row-column-wrap.kt-has-2-columns > .wp-block-kadence-column:first-child .wp-block-kadence-advancedheading {
		position: sticky;
		top: 40px;
	}
}

/* Blog grid post titles */
.kt-blocks-post-grid-item .entry-title a:not(.button):not(.list) {
	color: inherit;
	display: block;
	text-decoration: none;
	line-height: 1;
}

/* Load-more renders post grid titles as h5 — match the initial h2 card titles */
.kt-blocks-post-grid-item h5.entry-title {
	font-family: var(--steward-font-display) !important;
	font-weight: 400 !important;
	font-size: clamp(36px, 2rem + 0.625vw, 46px) !important;
}