/*
Theme Name: Kadence Child - Inman & Strickler
Theme URI: https://inmanandstrickler.com
Description: Custom Kadence child theme for Inman & Strickler PLC landing pages.
Author: Inman & Strickler PLC
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
	--color-primary: #1B4D3E;
	--color-accent: #C9A84C;
	--color-bg-light: #F5F3EF;
	--color-text-dark: #1A1A1A;
	--color-text-light: #FFFFFF;
	--color-footer-bg: #111111;

	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	--section-padding-desktop: 80px;
	--section-padding-mobile: 48px;
}

/* ==========================================================================
   Base Typography
   ========================================================================== */
body,
button,
input,
select,
textarea {
	font-family: var(--font-body);
	color: var(--color-text-dark);
}

h1, h2, h3, h4, h5, h6,
.wp-block-kadence-advancedheading {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-text-dark);
	letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.875rem, 3vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.25; }

p, li, span, label {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
}

a {
	color: var(--color-primary);
	transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
	opacity: 0.8;
}

/* ==========================================================================
   Restore Core Columns Vertical Alignment
   Kadence sets .wp-block-columns{align-items:normal !important}, which
   silently defeats WordPress core's are-vertically-aligned-* classes.
   ========================================================================== */
.wp-block-columns.are-vertically-aligned-center {
	align-items: center !important;
}

.wp-block-columns.are-vertically-aligned-top {
	align-items: flex-start !important;
}

.wp-block-columns.are-vertically-aligned-bottom {
	align-items: flex-end !important;
}

.lp-inner .wp-block-columns {
	margin-bottom: 0;
}

/* ==========================================================================
   Landing Page Section / Inner Wrappers
   ========================================================================== */
.lp-section {
	padding-top: var(--section-padding-mobile);
	padding-bottom: var(--section-padding-mobile);
	padding-left: 24px;
	padding-right: 24px;
}

@media (min-width: 768px) {
	.lp-section {
		padding-top: var(--section-padding-desktop);
		padding-bottom: var(--section-padding-desktop);
		padding-left: 48px;
		padding-right: 48px;
	}
}

.hero-section {
	padding-top: 12px;
}

@media (min-width: 768px) {
	.hero-section {
		padding-top: 20px;
	}
}

.lp-inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.lp-inner.lp-narrow {
	max-width: 860px;
}

.hero-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hero-centered .placeholder-box {
	width: 100%;
}

/* ==========================================================================
   Color Utility Sections
   ========================================================================== */
.is-style-section-primary,
.section-bg-primary {
	background-color: var(--color-primary) !important;
	color: var(--color-text-light);
}

.is-style-section-primary h1,
.is-style-section-primary h2,
.is-style-section-primary h3,
.is-style-section-primary p,
.is-style-section-primary li,
.section-bg-primary h1,
.section-bg-primary h2,
.section-bg-primary h3,
.section-bg-primary p,
.section-bg-primary li {
	color: var(--color-text-light);
}

.is-style-section-light,
.section-bg-light {
	background-color: var(--color-bg-light) !important;
	color: var(--color-text-dark);
}

.is-style-section-footer,
.section-bg-footer {
	background-color: var(--color-footer-bg) !important;
	color: var(--color-text-light);
}

.is-style-section-footer a {
	color: var(--color-text-light);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.wp-block-button__link,
.kt-button,
.kb-button,
button[type="submit"],
input[type="submit"] {
	background-color: var(--color-accent) !important;
	color: var(--color-text-dark) !important;
	border: none !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-family: var(--font-body);
	padding: 16px 32px;
	transition: opacity 0.2s ease, transform 0.15s ease;
}

.wp-block-button__link:hover,
.kt-button:hover,
.kb-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	opacity: 0.9;
	color: var(--color-text-dark) !important;
}

/* ==========================================================================
   Gold Underline Accent
   ========================================================================== */
.gold-underline {
	position: relative;
	display: inline-block;
	padding-bottom: 16px;
}

.gold-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 3px;
	background-color: var(--color-accent);
}

.is-style-section-primary .gold-underline::after,
.section-bg-primary .gold-underline::after {
	background-color: var(--color-accent);
}

/* ==========================================================================
   Result Cards
   ========================================================================== */
.result-card {
	background-color: var(--color-text-light);
	border-top: 4px solid var(--color-accent);
	padding: 32px 24px;
	text-align: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.result-card .result-amount {
	font-family: var(--font-heading);
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--color-primary);
	display: block;
	margin-bottom: 8px;
}

.result-card .result-label {
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--color-text-dark);
}

/* ==========================================================================
   Trust Column Icons
   ========================================================================== */
.trust-icon-placeholder {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.trust-section {
	padding-top: 48px;
	padding-bottom: 48px;
}

@media (min-width: 768px) {
	.trust-section {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

/* ==========================================================================
   Forms (Kadence Form Block)
   ========================================================================== */
.kt-row-column-wrap {
	gap: 16px !important;
}

.kb-forms-form input[type="text"],
.kb-forms-form input[type="tel"],
.kb-forms-form input[type="email"],
.kb-forms-form textarea {
	font-family: var(--font-body);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0;
	padding: 14px 16px;
	width: 100%;
	background-color: var(--color-text-light);
	color: var(--color-text-dark);
}

.is-style-section-primary .kb-forms-form label,
.section-bg-primary .kb-forms-form label {
	color: var(--color-text-light);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer,
footer.kadence-footer {
	background-color: var(--color-footer-bg);
	color: var(--color-text-light);
}

.footer-section {
	padding-top: 32px;
	padding-bottom: 40px;
}

@media (min-width: 768px) {
	.footer-section {
		padding-top: 40px;
		padding-bottom: 48px;
	}
}

.footer-disclaimer {
	font-size: 0.9rem;
	line-height: 1.5;
	opacity: 0.75;
	max-width: 720px;
}

.footer-phone {
	color: var(--color-accent);
	font-weight: 700;
	text-decoration: none;
}

.footer-phone:hover {
	opacity: 0.85;
}

/* ==========================================================================
   Image / Logo Placeholders
   ========================================================================== */
.placeholder-box {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px dashed rgba(255, 255, 255, 0.4);
	color: var(--color-text-light);
	font-family: var(--font-body);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-height: 220px;
	padding: 16px;
}

.section-bg-light .placeholder-box,
.is-style-section-light .placeholder-box {
	background-color: rgba(27, 77, 62, 0.06);
	border: 1px dashed rgba(27, 77, 62, 0.35);
	color: var(--color-primary);
}

.placeholder-box.placeholder-logo {
	min-height: 64px;
	max-width: 220px;
	padding: 16px;
}

.placeholder-box.placeholder-photo {
	min-height: 420px;
}

/* ==========================================================================
   Real Logo / Photo (once client assets are uploaded)
   ========================================================================== */
.firm-logo {
	max-width: 220px;
}

.firm-logo img {
	width: 100%;
	height: auto;
	display: block;
}

.person-photo {
	overflow: hidden;
	aspect-ratio: 10 / 7;
}

.person-photo figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.person-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   Phone Number Emphasis
   ========================================================================== */
.phone-number-cta {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--color-accent);
	text-decoration: none;
}

.is-style-section-light .phone-number-cta,
.section-bg-light .phone-number-cta {
	color: var(--color-primary);
}

/* ==========================================================================
   Hero Section Typography (scaled down ~10%)
   ========================================================================== */
.hero-section h1 {
	font-size: clamp(2rem, 3.6vw, 3.15rem);
}

.hero-section .phone-number-cta {
	font-size: 1.575rem;
}

.hero-section .hero-subhead {
	font-size: 1.05rem !important;
}