/**
 * KN LAW Theme — Global CSS
 * Foundational styles, custom properties, reset, typography, layout utilities.
 */

/* ========================================================================
   Custom Properties
   ======================================================================== */

:root {
	/* Colors — Primary */
	--kn-navy: #213266;
	--kn-navy-dark: #0e1838;
	--kn-navy-mid: #1a2854;
	--kn-navy-light: #2d4080;

	/* Colors — Accent */
	--kn-coral: #F07B6E;
	--kn-coral-hover: #E06A5D;
	--kn-blush: #FDE8E4;
	--kn-blush-light: #FFF8F6;

	/* Colors — Neutrals */
	--kn-body: #1e293b;
	--kn-muted: #64748b;
	--kn-border: #f0e0dc;
	--kn-success: #16a34a;
	--kn-white: #ffffff;
	--kn-black: #000000;

	/* Typography */
	--kn-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

	/* Font Sizes */
	--kn-text-sm: 14px;
	--kn-text-base: 17px;
	--kn-text-lg: 20px;
	--kn-text-xl: 28px;
	--kn-text-2xl: clamp(32px, 4vw, 44px);
	--kn-text-3xl: clamp(40px, 5vw, 64px);

	/* Spacing */
	--kn-space-xs: 4px;
	--kn-space-sm: 8px;
	--kn-space-md: 16px;
	--kn-space-lg: 24px;
	--kn-space-xl: 32px;
	--kn-space-2xl: 48px;
	--kn-space-3xl: 64px;
	--kn-space-4xl: 96px;
	--kn-space-5xl: 128px;

	/* Layout */
	--kn-content-width: 900px;
	--kn-wide-width: 1400px;
	--kn-gutter: 24px;

	/* Shadows */
	--kn-shadow-sm: 0 1px 2px rgba(33, 50, 102, 0.06);
	--kn-shadow-md: 0 4px 12px rgba(33, 50, 102, 0.08);
	--kn-shadow-lg: 0 8px 30px rgba(33, 50, 102, 0.12);
	--kn-shadow-xl: 0 20px 60px rgba(33, 50, 102, 0.15);

	/* Borders */
	--kn-radius-sm: 6px;
	--kn-radius-md: 10px;
	--kn-radius-lg: 16px;
	--kn-radius-xl: 24px;
	--kn-radius-full: 9999px;

	/* Transitions */
	--kn-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--kn-duration: 0.2s;
	--kn-duration-slow: 0.4s;

	/* Nav height */
	--kn-nav-height: 80px;
}

/* ========================================================================
   Base Reset
   ======================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--kn-nav-height) + 24px);
}

body {
	font-family: var(--kn-font);
	font-size: var(--kn-text-base);
	line-height: 1.7;
	color: var(--kn-body);
	background-color: var(--kn-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* ========================================================================
   Typography
   ======================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kn-font);
	color: var(--kn-navy);
	line-height: 1.2;
}

h1 {
	font-size: var(--kn-text-3xl);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--kn-text-2xl);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

h3 {
	font-size: var(--kn-text-xl);
	font-weight: 700;
	line-height: 1.25;
}

h4 {
	font-size: var(--kn-text-lg);
	font-weight: 600;
	line-height: 1.35;
}

h5 {
	font-size: var(--kn-text-base);
	font-weight: 600;
	line-height: 1.4;
}

h6 {
	font-size: var(--kn-text-sm);
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

p {
	margin-bottom: 1em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--kn-navy);
	text-decoration: none;
	transition: color var(--kn-duration) var(--kn-ease);
}

a:hover {
	color: var(--kn-coral);
}

strong, b {
	font-weight: 700;
}

small {
	font-size: var(--kn-text-sm);
}

/* ========================================================================
   Layout Utilities
   ======================================================================== */

.kn-container {
	width: 100%;
	max-width: var(--kn-wide-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--kn-gutter);
	padding-right: var(--kn-gutter);
}

.kn-container--narrow {
	max-width: var(--kn-content-width);
}

.kn-section {
	padding-top: var(--kn-space-4xl);
	padding-bottom: var(--kn-space-4xl);
}

.kn-section--sm {
	padding-top: var(--kn-space-3xl);
	padding-bottom: var(--kn-space-3xl);
}

.kn-section--lg {
	padding-top: var(--kn-space-5xl);
	padding-bottom: var(--kn-space-5xl);
}

/* Full-bleed sections */
.kn-full-bleed {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}

/* ========================================================================
   Section Backgrounds
   ======================================================================== */

.kn-bg-navy {
	background-color: var(--kn-navy);
	color: var(--kn-white);
}

.kn-bg-navy h1,
.kn-bg-navy h2,
.kn-bg-navy h3,
.kn-bg-navy h4,
.kn-bg-navy h5,
.kn-bg-navy h6 {
	color: var(--kn-white);
}

.kn-bg-navy p {
	color: rgba(255, 255, 255, 0.85);
}

.kn-bg-navy-dark {
	background-color: var(--kn-navy-dark);
	color: var(--kn-white);
}

.kn-bg-navy-dark h1,
.kn-bg-navy-dark h2,
.kn-bg-navy-dark h3,
.kn-bg-navy-dark h4,
.kn-bg-navy-dark h5,
.kn-bg-navy-dark h6 {
	color: var(--kn-white);
}

.kn-bg-blush {
	background-color: var(--kn-blush-light);
}

.kn-bg-blush-medium {
	background-color: var(--kn-blush);
}

.kn-bg-white {
	background-color: var(--kn-white);
}

/* ========================================================================
   Text Utilities
   ======================================================================== */

.kn-text-navy { color: var(--kn-navy); }
.kn-text-coral { color: var(--kn-coral); }
.kn-text-muted { color: var(--kn-muted); }
.kn-text-white { color: var(--kn-white); }
.kn-text-body { color: var(--kn-body); }
.kn-text-success { color: var(--kn-success); }

.kn-text-center { text-align: center; }
.kn-text-left { text-align: left; }
.kn-text-right { text-align: right; }

.kn-text-sm { font-size: var(--kn-text-sm); }
.kn-text-base { font-size: var(--kn-text-base); }
.kn-text-lg { font-size: var(--kn-text-lg); }
.kn-text-xl { font-size: var(--kn-text-xl); }
.kn-text-2xl { font-size: var(--kn-text-2xl); }
.kn-text-3xl { font-size: var(--kn-text-3xl); }

.kn-font-medium { font-weight: 500; }
.kn-font-semibold { font-weight: 600; }
.kn-font-bold { font-weight: 700; }
.kn-font-extrabold { font-weight: 800; }

/* ========================================================================
   Overline / Section Header
   ======================================================================== */

.kn-overline {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--kn-coral);
	margin-bottom: 12px;
}

.kn-bg-navy .kn-overline {
	color: var(--kn-coral);
}

.kn-section-header {
	text-align: center;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--kn-space-3xl);
}

.kn-section-header p {
	color: var(--kn-muted);
	font-size: var(--kn-text-lg);
	margin-top: 12px;
}

.kn-bg-navy .kn-section-header p {
	color: rgba(255, 255, 255, 0.7);
}

/* ========================================================================
   Grid Utilities
   ======================================================================== */

.kn-grid {
	display: grid;
	gap: var(--kn-space-lg);
}

.kn-grid-2 { grid-template-columns: repeat(2, 1fr); }
.kn-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kn-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.kn-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.kn-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.kn-grid-2,
	.kn-grid-3,
	.kn-grid-4 { grid-template-columns: 1fr; }
}

/* ========================================================================
   Flex Utilities
   ======================================================================== */

.kn-flex { display: flex; }
.kn-flex-center { display: flex; align-items: center; justify-content: center; }
.kn-flex-between { display: flex; align-items: center; justify-content: space-between; }
.kn-flex-col { flex-direction: column; }
.kn-flex-wrap { flex-wrap: wrap; }
.kn-gap-sm { gap: var(--kn-space-sm); }
.kn-gap-md { gap: var(--kn-space-md); }
.kn-gap-lg { gap: var(--kn-space-lg); }
.kn-gap-xl { gap: var(--kn-space-xl); }

/* ========================================================================
   Spacing Utilities
   ======================================================================== */

.kn-mt-0 { margin-top: 0; }
.kn-mt-sm { margin-top: var(--kn-space-sm); }
.kn-mt-md { margin-top: var(--kn-space-md); }
.kn-mt-lg { margin-top: var(--kn-space-lg); }
.kn-mt-xl { margin-top: var(--kn-space-xl); }
.kn-mt-2xl { margin-top: var(--kn-space-2xl); }
.kn-mt-3xl { margin-top: var(--kn-space-3xl); }

.kn-mb-0 { margin-bottom: 0; }
.kn-mb-sm { margin-bottom: var(--kn-space-sm); }
.kn-mb-md { margin-bottom: var(--kn-space-md); }
.kn-mb-lg { margin-bottom: var(--kn-space-lg); }
.kn-mb-xl { margin-bottom: var(--kn-space-xl); }
.kn-mb-2xl { margin-bottom: var(--kn-space-2xl); }

/* ========================================================================
   Visibility / Responsive
   ======================================================================== */

.kn-hide-mobile {
	display: block;
}

.kn-show-mobile {
	display: none;
}

@media (max-width: 768px) {
	.kn-hide-mobile {
		display: none !important;
	}
	.kn-show-mobile {
		display: block !important;
	}
}

/* ========================================================================
   Accessible Focus Styles
   ======================================================================== */

:focus-visible {
	outline: 2px solid var(--kn-coral);
	outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ========================================================================
   WordPress Block Overrides
   ======================================================================== */

.wp-site-blocks {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.wp-block-group.alignfull {
	padding-left: 0;
	padding-right: 0;
}

.entry-content > * + * {
	margin-top: var(--kn-space-lg);
}