/*
Theme Name:  ManagedLocal Child
Template:    kadence
Description: Kadence child theme for ManagedLocal.com
Version:     1.0.0
Author:      ManagedLocal
*/

/* ============================================
   GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

/* ============================================
   BRAND TOKENS
   ============================================ */
:root {
	--ml-navy:       #042C53;
	--ml-navy-mid:   #0C447C;
	--ml-blue:       #185FA5;
	--ml-blue-mid:   #378ADD;
	--ml-sky:        #85B7EB;
	--ml-sky-light:  #B5D4F4;
	--ml-sky-xlight: #E6F1FB;
	--ml-white:      #FFFFFF;
	--ml-offwhite:   #F5F6F8;
	--ml-gray:       #888780;
	--ml-text:       #1A1A2E;
	--ml-text-muted: #5A6475;

	--ml-font-display: 'DM Serif Display', Georgia, serif;
	--ml-font-body:    'DM Sans', system-ui, sans-serif;

	--ml-radius-sm:  4px;
	--ml-radius-md:  8px;
	--ml-radius-lg:  12px;
	--ml-radius-xl:  20px;

	--ml-shadow-sm:  0 1px 3px rgba(4,44,83,0.08), 0 1px 2px rgba(4,44,83,0.06);
	--ml-shadow-md:  0 4px 16px rgba(4,44,83,0.10), 0 2px 6px rgba(4,44,83,0.06);
	--ml-shadow-lg:  0 8px 32px rgba(4,44,83,0.12), 0 4px 12px rgba(4,44,83,0.08);
}

/* ============================================
   GLOBAL RESETS & BASE
   ============================================ */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--ml-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--ml-text);
	background-color: var(--ml-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--ml-font-display);
	font-weight: 400;
	line-height: 1.2;
	color: var(--ml-navy);
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
	margin-bottom: 1.25rem;
	color: var(--ml-text-muted);
}

a {
	color: var(--ml-blue);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--ml-blue-mid);
}

strong, b {
	font-weight: 600;
	color: var(--ml-text);
}

/* Eyebrow label style */
.ml-eyebrow,
.wp-block-kadence-rowlayout .ml-eyebrow {
	display: inline-block;
	font-family: var(--ml-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ml-blue);
	margin-bottom: 0.75rem;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.site-header,
#masthead {
	background-color: var(--ml-white);
	border-bottom: 1px solid rgba(4,44,83,0.08);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 rgba(4,44,83,0.06);
}

.site-branding .site-title,
.site-branding .site-title a {
	font-family: var(--ml-font-body);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ml-navy);
	letter-spacing: -0.02em;
}

.site-branding .site-title a:hover {
	color: var(--ml-blue);
}

/* Primary nav */
.primary-navigation a,
.main-navigation a,
#site-navigation a {
	font-family: var(--ml-font-body);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--ml-text-muted);
	transition: color 0.2s ease;
	padding: 0.25rem 0;
}

.primary-navigation a:hover,
.main-navigation a:hover,
#site-navigation a:hover {
	color: var(--ml-navy);
}

/* ============================================
   BUTTONS
   ============================================ */
.wp-block-button__link,
.button,
button[type="submit"],
input[type="submit"],
.kb-button {
	font-family: var(--ml-font-body);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--ml-radius-md);
	padding: 0.75rem 1.75rem;
	transition: all 0.2s ease;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* Primary button */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.button.primary,
.kb-button.kb-btn-global-outline {
	background-color: var(--ml-blue);
	color: var(--ml-white) !important;
	border: 2px solid var(--ml-blue);
	box-shadow: var(--ml-shadow-sm);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--ml-navy-mid);
	border-color: var(--ml-navy-mid);
	box-shadow: var(--ml-shadow-md);
	transform: translateY(-1px);
}

/* Ghost / outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--ml-blue) !important;
	border: 2px solid var(--ml-blue);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--ml-sky-xlight);
}

/* Ghost on dark bg */
.has-navy-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.ml-hero .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--ml-sky-light) !important;
	border-color: var(--ml-sky);
}

.has-navy-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(133,183,235,0.15);
}

/* ============================================
   HERO SECTION
   ============================================ */
.ml-hero,
.wp-block-kadence-rowlayout.ml-hero {
	background-color: var(--ml-navy);
	padding: 6rem 2rem;
	position: relative;
	overflow: hidden;
}

.ml-hero::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(55,138,221,0.12) 0%, transparent 70%);
	pointer-events: none;
}

.ml-hero h1,
.ml-hero .wp-block-heading {
	color: var(--ml-white);
	font-family: var(--ml-font-display);
}

.ml-hero p {
	color: var(--ml-sky-light);
	font-size: 1.1rem;
	max-width: 520px;
}

.ml-hero .ml-eyebrow {
	color: var(--ml-sky);
}

/* ============================================
   STAT BAR
   ============================================ */
.ml-stats,
.wp-block-kadence-rowlayout.ml-stats {
	background-color: var(--ml-white);
	border-bottom: 1px solid rgba(4,44,83,0.08);
	padding: 2.5rem 2rem;
}

.ml-stat-item {
	text-align: center;
	padding: 0 1rem;
}

.ml-stat-number {
	display: block;
	font-family: var(--ml-font-display);
	font-size: 2.25rem;
	color: var(--ml-blue);
	line-height: 1;
	margin-bottom: 0.35rem;
}

.ml-stat-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--ml-text-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ============================================
   SECTION BACKGROUNDS
   ============================================ */
.ml-section-light,
.wp-block-kadence-rowlayout.ml-section-light {
	background-color: var(--ml-offwhite);
}

.ml-section-navy,
.wp-block-kadence-rowlayout.ml-section-navy {
	background-color: var(--ml-navy);
}

.ml-section-navy h1,
.ml-section-navy h2,
.ml-section-navy h3,
.ml-section-navy p {
	color: var(--ml-white);
}

.ml-section-navy p {
	color: var(--ml-sky-light);
}

/* ============================================
   SERVICE CARDS
   ============================================ */
.ml-service-card,
.wp-block-kadence-column.ml-service-card {
	background-color: var(--ml-white);
	border: 1px solid rgba(4,44,83,0.09);
	border-radius: var(--ml-radius-lg);
	padding: 2rem 1.75rem;
	box-shadow: var(--ml-shadow-sm);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.ml-service-card:hover {
	box-shadow: var(--ml-shadow-md);
	transform: translateY(-3px);
}

.ml-service-card h3 {
	font-size: 1.2rem;
	margin-bottom: 0.6rem;
}

.ml-service-card p {
	font-size: 0.95rem;
	margin-bottom: 0;
}

.ml-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--ml-sky-xlight);
	border-radius: var(--ml-radius-md);
	margin-bottom: 1rem;
}

/* ============================================
   TESTIMONIAL / SOCIAL PROOF
   ============================================ */
.ml-testimonial {
	background-color: var(--ml-white);
	border: 1px solid rgba(4,44,83,0.09);
	border-left: 4px solid var(--ml-blue);
	border-radius: 0 var(--ml-radius-lg) var(--ml-radius-lg) 0;
	padding: 1.75rem 2rem;
	box-shadow: var(--ml-shadow-sm);
}

.ml-testimonial blockquote {
	font-family: var(--ml-font-display);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--ml-navy);
	margin: 0 0 1rem 0;
	line-height: 1.5;
	border: none;
	padding: 0;
}

.ml-testimonial cite {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ml-text-muted);
	font-style: normal;
}

/* ============================================
   CTA SECTION
   ============================================ */
.ml-cta-section {
	background: linear-gradient(135deg, var(--ml-navy) 0%, var(--ml-navy-mid) 100%);
	padding: 5rem 2rem;
	text-align: center;
}

.ml-cta-section h2 {
	color: var(--ml-white);
	margin-bottom: 1rem;
}

.ml-cta-section p {
	color: var(--ml-sky-light);
	font-size: 1.05rem;
	margin-bottom: 2rem;
}

/* ============================================
   FORMS (Contact, etc.)
   ============================================ */
.wp-block-kadence-form input,
.wp-block-kadence-form textarea,
.wp-block-kadence-form select,
.wpcf7 input,
.wpcf7 textarea {
	font-family: var(--ml-font-body);
	font-size: 0.95rem;
	border: 1.5px solid rgba(4,44,83,0.15);
	border-radius: var(--ml-radius-md);
	padding: 0.75rem 1rem;
	color: var(--ml-text);
	background-color: var(--ml-white);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
}

.wp-block-kadence-form input:focus,
.wp-block-kadence-form textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--ml-blue);
	box-shadow: 0 0 0 3px rgba(24,95,165,0.12);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer,
#colophon {
	background-color: var(--ml-navy);
	color: var(--ml-sky-light);
	padding: 3rem 2rem 1.5rem;
}

.site-footer a {
	color: var(--ml-sky-light);
	transition: color 0.2s ease;
}

.site-footer a:hover {
	color: var(--ml-white);
}

.site-footer h3,
.site-footer h4 {
	color: var(--ml-white);
	font-size: 1rem;
	font-family: var(--ml-font-body);
	font-weight: 600;
	margin-bottom: 1rem;
}

.site-footer p,
.site-footer li {
	font-size: 0.9rem;
	color: var(--ml-sky-light);
	line-height: 1.7;
}

.site-footer .site-info {
	border-top: 1px solid rgba(133,183,235,0.15);
	padding-top: 1.5rem;
	margin-top: 2rem;
	font-size: 0.8rem;
	color: rgba(181,212,244,0.6);
}

/* ============================================
   KADENCE BLOCKS OVERRIDES
   ============================================ */

/* Row layout padding normalization */
.wp-block-kadence-rowlayout {
	padding-left: max(1.5rem, 5vw) !important;
	padding-right: max(1.5rem, 5vw) !important;
}

/* Inner column spacing */
.wp-block-kadence-column {
	padding: 1rem;
}

/* Kadence accordion */
.wp-block-kadence-accordion .kt-accordion-panel-inner {
	font-family: var(--ml-font-body);
	font-size: 0.95rem;
	color: var(--ml-text-muted);
}

.wp-block-kadence-accordion .kt-accordion-header-wrap h3 {
	font-family: var(--ml-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ml-navy);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.ml-text-center { text-align: center; }
.ml-text-white  { color: var(--ml-white) !important; }
.ml-text-blue   { color: var(--ml-blue) !important; }
.ml-text-navy   { color: var(--ml-navy) !important; }
.ml-text-muted  { color: var(--ml-text-muted) !important; }

.ml-max-600 { max-width: 600px; margin-left: auto; margin-right: auto; }
.ml-max-800 { max-width: 800px; margin-left: auto; margin-right: auto; }

.ml-mt-0 { margin-top: 0 !important; }
.ml-mb-0 { margin-bottom: 0 !important; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
	.ml-hero {
		padding: 4rem 1.5rem;
	}

	.ml-stats {
		padding: 2rem 1.5rem;
	}

	.ml-stat-number {
		font-size: 1.75rem;
	}

	.ml-service-card {
		padding: 1.5rem;
	}
}

@media (max-width: 480px) {
	h1 { font-size: 1.85rem; }
	h2 { font-size: 1.5rem; }
}