/* =============================================================
   Khafif Modern Business — Core Styles
   =============================================================
   Builds on design-system.css. Provides:
     1. Typography baseline
     2. Layout containers
     3. Header & navigation
     4. Footer
     5. Page content area
     6. Buttons & links
     7. Forms (refined)
     8. Cards
     9. FAQ (refined)
   ============================================================= */


/* ============================================================
   1. TYPOGRAPHY BASELINE
   ============================================================ */

body {
	font-family: var(--kh-font-body);
	font-size: var(--kh-text-base);
	line-height: var(--kh-leading-relaxed);
	color: var(--kh-color-text-strong);
	background-color: var(--kh-color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Headings — defined hierarchy with intentional spacing */

h1, h2, h3, h4, h5, h6,
.kh-h1, .kh-h2, .kh-h3, .kh-h4, .kh-h5, .kh-h6 {
	font-family: var(--kh-font-heading);
	font-weight: var(--kh-weight-bold);
	line-height: var(--kh-leading-tight);
	letter-spacing: var(--kh-tracking-tight);
	color: var(--kh-color-text);
	margin: 0 0 var(--kh-space-4);
}

h1, .kh-h1 {
	font-size: clamp(var(--kh-text-3xl), 4vw, var(--kh-text-4xl));
	margin-block-end: var(--kh-space-6);
}

h2, .kh-h2 {
	font-size: clamp(var(--kh-text-2xl), 3vw, var(--kh-text-3xl));
	margin-block-start: var(--kh-space-12);
	margin-block-end: var(--kh-space-5);
}

h3, .kh-h3 {
	font-size: var(--kh-text-2xl);
	margin-block-start: var(--kh-space-8);
	margin-block-end: var(--kh-space-4);
	line-height: var(--kh-leading-snug);
}

h4, .kh-h4 {
	font-size: var(--kh-text-xl);
	margin-block-start: var(--kh-space-6);
	margin-block-end: var(--kh-space-3);
	line-height: var(--kh-leading-snug);
}

h5, .kh-h5 {
	font-size: var(--kh-text-lg);
	font-weight: var(--kh-weight-semibold);
	margin-block-start: var(--kh-space-5);
	margin-block-end: var(--kh-space-2);
	line-height: var(--kh-leading-snug);
}

h6, .kh-h6 {
	font-size: var(--kh-text-base);
	font-weight: var(--kh-weight-semibold);
	letter-spacing: var(--kh-tracking-wide);
	text-transform: uppercase;
	color: var(--kh-color-text-soft);
	margin-block-start: var(--kh-space-5);
	margin-block-end: var(--kh-space-2);
}

/* First heading in a content area has less top margin */
.kh-content > h1:first-child,
.kh-content > h2:first-child,
.kh-content > h3:first-child {
	margin-block-start: 0;
}

/* Paragraphs */
p {
	margin: 0 0 var(--kh-space-paragraph);
	line-height: var(--kh-leading-relaxed);
}

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

/* Inline text */
strong, b {
	font-weight: var(--kh-weight-semibold);
	color: var(--kh-color-text);
}

em, i {
	font-style: italic;
}

small {
	font-size: var(--kh-text-sm);
	color: var(--kh-color-text-soft);
}

mark {
	background-color: var(--kh-color-accent-soft);
	color: var(--kh-color-text);
	padding: 0 2px;
	border-radius: var(--kh-radius-sm);
}

code {
	font-family: var(--kh-font-mono);
	font-size: 0.9em;
	background-color: var(--kh-color-bg-muted);
	padding: 2px 6px;
	border-radius: var(--kh-radius-sm);
	color: var(--kh-color-text);
}

pre {
	font-family: var(--kh-font-mono);
	background-color: var(--kh-color-bg-muted);
	padding: var(--kh-space-4);
	border-radius: var(--kh-radius-lg);
	overflow-x: auto;
	line-height: var(--kh-leading-normal);
	margin: 0 0 var(--kh-space-4);
	border: 1px solid var(--kh-color-border);
}

pre code {
	background: none;
	padding: 0;
}


/* ============================================================
   2. LINKS
   ============================================================
   Subtle by default, accent-colored. Underline appears on hover
   for clarity without visual noise.
*/

a {
	color: var(--kh-color-accent);
	text-decoration: none;
	transition: color var(--kh-transition);
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var(--kh-transition), color var(--kh-transition);
}

a:hover,
a:focus-visible {
	color: var(--kh-color-accent-hover);
	background-size: 100% 1px;
}

a:focus-visible {
	outline: 2px solid var(--kh-color-focus-ring);
	outline-offset: 2px;
	border-radius: var(--kh-radius-sm);
}

/* Don't underline links in cards or buttons (they have their own styling) */
.kh-card a:not(.kh-btn),
.kh-btn,
.kh-card-link {
	background-image: none;
}


/* ============================================================
   3. LAYOUT CONTAINERS
   ============================================================ */

.kh-container {
	width: 100%;
	max-width: var(--kh-container-xl);
	margin-inline: auto;
	padding-inline: var(--kh-space-6);
}

.kh-container-narrow {
	max-width: var(--kh-container-md);
}

.kh-container-prose {
	max-width: var(--kh-prose);
	margin-inline: auto;
}

/* Section padding */
.kh-section {
	padding-block: var(--kh-space-section);
}

.kh-section-sm {
	padding-block: var(--kh-space-12);
}

@media (max-width: 768px) {
	.kh-container {
		padding-inline: var(--kh-space-4);
	}
	.kh-section {
		padding-block: var(--kh-space-12);
	}
}


/* ============================================================
   4. SITE HEADER
   ============================================================ */

.kh-site-header {
	background-color: var(--kh-color-bg);
	border-block-end: 1px solid var(--kh-color-border);
	position: sticky;
	top: 0;
	z-index: var(--kh-z-sticky);
	backdrop-filter: saturate(180%) blur(5px);
	background-color: rgba(255, 255, 255, 0.85);
}

.kh-site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kh-space-6);
	min-height: var(--kh-header-height);
}

.kh-site-branding {
	flex-shrink: 0;
}

.kh-site-title {
	font-family: var(--kh-font-heading);
	font-size: var(--kh-text-xl);
	font-weight: var(--kh-weight-bold);
	margin: 0;
	letter-spacing: var(--kh-tracking-tight);
	line-height: 1;
}

.kh-site-title a {
	color: var(--kh-color-text);
	background-image: none;
}

.kh-site-title a:hover {
	color: var(--kh-color-accent);
}

.kh-site-description {
	font-size: var(--kh-text-xs);
	color: var(--kh-color-text-soft);
	margin: 4px 0 0;
}

.kh-custom-logo-link img {
	max-height: 44px;
	width: auto;
	display: block;
}

/* Primary navigation */
.kh-primary-nav {
	display: flex;
	align-items: center;
	gap: var(--kh-space-1);
}

.kh-primary-nav ul {
	list-style: none;
	display: flex;
	gap: var(--kh-space-1);
	margin: 0;
	padding: 0;
	align-items: center;
}

.kh-primary-nav a {
	display: inline-block;
	padding: var(--kh-space-2) var(--kh-space-3);
	color: var(--kh-color-text-soft);
	font-size: var(--kh-text-sm);
	font-weight: var(--kh-weight-medium);
	border-radius: var(--kh-radius-md);
	background-image: none;
	transition: all var(--kh-transition);
}

.kh-primary-nav a:hover,
.kh-primary-nav .current-menu-item > a {
	color: var(--kh-color-text);
	background-color: var(--kh-color-bg-soft);
}

/* Header CTA button */
.kh-header-cta {
	margin-inline-start: var(--kh-space-4);
}


/* ============================================================
   5. PAGE / POST CONTENT
   ============================================================ */

.kh-main {
	min-height: calc(100vh - var(--kh-header-height) - 200px);
}

.kh-page-header {
	padding-block: var(--kh-space-12) var(--kh-space-8);
	border-block-end: 1px solid var(--kh-color-border-soft);
	margin-block-end: var(--kh-space-10);
}

.kh-page-header h1 {
	margin: 0;
	font-size: clamp(var(--kh-text-3xl), 4vw, var(--kh-text-4xl));
}

.kh-page-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kh-space-3);
	margin-block-start: var(--kh-space-3);
	font-size: var(--kh-text-sm);
	color: var(--kh-color-text-soft);
}

.kh-page-meta > * {
	display: inline-flex;
	align-items: center;
	gap: var(--kh-space-1);
}

/* Article content — the prose container */
.kh-entry-content {
	max-width: var(--kh-prose);
}

.kh-entry-content > * + * {
	margin-block-start: var(--kh-space-4);
}

.kh-entry-content blockquote {
	border-inline-start: 3px solid var(--kh-color-accent);
	padding-inline-start: var(--kh-space-5);
	margin: var(--kh-space-6) 0;
	font-size: var(--kh-text-lg);
	color: var(--kh-color-text-strong);
	font-style: italic;
}

.kh-entry-content blockquote cite {
	display: block;
	margin-block-start: var(--kh-space-2);
	font-size: var(--kh-text-sm);
	color: var(--kh-color-text-soft);
	font-style: normal;
}

.kh-entry-content blockquote cite::before {
	content: '— ';
}

.kh-entry-content ul,
.kh-entry-content ol {
	padding-inline-start: var(--kh-space-6);
	margin: 0 0 var(--kh-space-4);
}

.kh-entry-content li {
	margin-block-end: var(--kh-space-2);
	line-height: var(--kh-leading-relaxed);
}

.kh-entry-content img,
.kh-entry-content video {
	max-width: 100%;
	height: auto;
	border-radius: var(--kh-radius-lg);
	margin: var(--kh-space-6) 0;
}

.kh-entry-content hr {
	border: none;
	height: 1px;
	background-color: var(--kh-color-border);
	margin: var(--kh-space-10) 0;
}

.kh-entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--kh-space-6) 0;
	font-size: var(--kh-text-sm);
}

.kh-entry-content th,
.kh-entry-content td {
	padding: var(--kh-space-3) var(--kh-space-4);
	border-bottom: 1px solid var(--kh-color-border-soft);
	text-align: start;
}

.kh-entry-content th {
	font-weight: var(--kh-weight-semibold);
	color: var(--kh-color-text);
	background-color: var(--kh-color-bg-soft);
}


/* ============================================================
   6. BUTTONS
   ============================================================ */

.kh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kh-space-2);
	padding: var(--kh-space-3) var(--kh-space-5);
	font-family: var(--kh-font-body);
	font-size: var(--kh-text-sm);
	font-weight: var(--kh-weight-semibold);
	line-height: 1;
	border-radius: var(--kh-radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--kh-transition);
	white-space: nowrap;
	background-image: none;
	text-decoration: none;
}

.kh-btn:focus-visible {
	outline: 3px solid var(--kh-color-focus-ring);
	outline-offset: 2px;
}

/* Primary — solid accent */
.kh-btn-primary {
	background-color: var(--kh-color-text);
	color: var(--kh-color-bg);
	border-color: var(--kh-color-text);
}

.kh-btn-primary:hover {
	background-color: var(--kh-color-text-strong);
	color: var(--kh-color-bg);
	transform: translateY(-1px);
	box-shadow: var(--kh-shadow-md);
}

/* Accent — uses the gold */
.kh-btn-accent {
	background-color: var(--kh-color-accent);
	color: #ffffff;
	border-color: var(--kh-color-accent);
}

.kh-btn-accent:hover {
	background-color: var(--kh-color-accent-hover);
	color: #ffffff;
	border-color: var(--kh-color-accent-hover);
	transform: translateY(-1px);
	box-shadow: var(--kh-shadow-md);
}

/* Secondary — outlined */
.kh-btn-secondary {
	background-color: var(--kh-color-bg);
	color: var(--kh-color-text);
	border-color: var(--kh-color-border);
}

.kh-btn-secondary:hover {
	background-color: var(--kh-color-bg-soft);
	color: var(--kh-color-text);
	border-color: var(--kh-color-border-strong);
}

/* Ghost — minimal */
.kh-btn-ghost {
	background-color: transparent;
	color: var(--kh-color-text-soft);
}

.kh-btn-ghost:hover {
	background-color: var(--kh-color-bg-soft);
	color: var(--kh-color-text);
}

/* Sizes */
.kh-btn-sm {
	padding: var(--kh-space-2) var(--kh-space-3);
	font-size: var(--kh-text-xs);
}

.kh-btn-lg {
	padding: var(--kh-space-4) var(--kh-space-6);
	font-size: var(--kh-text-base);
}


/* ============================================================
   7. FORMS
   ============================================================ */

.kh-input,
.kh-textarea,
.kh-select,
.kh-content input[type="text"],
.kh-content input[type="email"],
.kh-content input[type="tel"],
.kh-content input[type="url"],
.kh-content input[type="number"],
.kh-content input[type="password"],
.kh-content input[type="search"],
.kh-content textarea,
.kh-content select {
	display: block;
	width: 100%;
	padding: var(--kh-space-3) var(--kh-space-4);
	font-family: var(--kh-font-body);
	font-size: var(--kh-text-base);
	line-height: var(--kh-leading-normal);
	color: var(--kh-color-text);
	background-color: var(--kh-color-bg);
	border: 1px solid var(--kh-color-border);
	border-radius: var(--kh-radius-md);
	transition: border-color var(--kh-transition), box-shadow var(--kh-transition);
	appearance: none;
}

.kh-input:focus,
.kh-textarea:focus,
.kh-select:focus,
.kh-content input:focus,
.kh-content textarea:focus,
.kh-content select:focus {
	outline: none;
	border-color: var(--kh-color-accent);
	box-shadow: 0 0 0 3px var(--kh-color-focus-ring);
}

.kh-textarea,
.kh-content textarea {
	min-height: 120px;
	resize: vertical;
}

.kh-input::placeholder,
.kh-content input::placeholder,
.kh-content textarea::placeholder {
	color: var(--kh-color-text-mute);
}

.kh-form-label {
	display: block;
	font-size: var(--kh-text-sm);
	font-weight: var(--kh-weight-medium);
	color: var(--kh-color-text);
	margin-block-end: var(--kh-space-2);
}

.kh-form-hint {
	display: block;
	font-size: var(--kh-text-xs);
	color: var(--kh-color-text-soft);
	margin-block-start: var(--kh-space-1);
}


/* ============================================================
   8. CARDS
   ============================================================ */

.kh-card {
	background-color: var(--kh-color-surface);
	border: 1px solid var(--kh-color-border);
	border-radius: var(--kh-radius-lg);
	padding: var(--kh-space-6);
	transition: border-color var(--kh-transition), box-shadow var(--kh-transition), transform var(--kh-transition);
}

.kh-card:hover {
	border-color: var(--kh-color-border-strong);
	box-shadow: var(--kh-shadow-md);
}

.kh-card-link:hover {
	transform: translateY(-2px);
}

.kh-card-title {
	font-size: var(--kh-text-lg);
	font-weight: var(--kh-weight-semibold);
	margin: 0 0 var(--kh-space-2);
	color: var(--kh-color-text);
}

.kh-card-desc {
	font-size: var(--kh-text-sm);
	color: var(--kh-color-text-soft);
	line-height: var(--kh-leading-relaxed);
	margin: 0;
}

.kh-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--kh-radius-md);
	background-color: var(--kh-color-accent-soft);
	color: var(--kh-color-accent);
	margin-block-end: var(--kh-space-4);
	font-size: var(--kh-text-2xl);
}

/* Card grid */
.kh-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--kh-space-5);
}


/* ============================================================
   9. FAQ — REFINED
   ============================================================
   Overrides the basic FAQ styles added earlier with the
   Modern Business aesthetic.
*/

.khafif-faqs {
	margin-block-start: var(--kh-space-8);
	padding-block-start: var(--kh-space-8);
	border-block-start: 1px solid var(--kh-color-border-soft);
}

.khafif-faqs-title {
	font-family: var(--kh-font-heading);
	font-size: var(--kh-text-2xl);
	font-weight: var(--kh-weight-bold);
	letter-spacing: var(--kh-tracking-tight);
	margin: 0 0 var(--kh-space-6);
	color: var(--kh-color-text);
}

.khafif-faqs-list {
	display: flex;
	flex-direction: column;
	gap: var(--kh-space-3);
	max-width: var(--kh-prose);
}

.khafif-faq-item {
	background-color: var(--kh-color-surface);
	border: 1px solid var(--kh-color-border);
	border-radius: var(--kh-radius-lg);
	transition: border-color var(--kh-transition), background-color var(--kh-transition);
}

.khafif-faq-item[open] {
	border-color: var(--kh-color-border-strong);
	background-color: var(--kh-color-bg-soft);
}

.khafif-faq-item summary.khafif-faq-question {
	cursor: pointer;
	padding: var(--kh-space-4) var(--kh-space-5);
	font-size: var(--kh-text-base);
	font-weight: var(--kh-weight-semibold);
	color: var(--kh-color-text);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--kh-space-4);
	user-select: none;
	border-radius: var(--kh-radius-lg);
	transition: color var(--kh-transition);
}

.khafif-faq-item summary.khafif-faq-question:hover {
	color: var(--kh-color-accent);
}

.khafif-faq-item summary.khafif-faq-question::-webkit-details-marker { display: none; }
.khafif-faq-item summary.khafif-faq-question::marker { display: none; }

.khafif-faq-item summary.khafif-faq-question::after {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-inline-end: 2px solid var(--kh-color-text-soft);
	border-block-end: 2px solid var(--kh-color-text-soft);
	transform: rotate(45deg);
	transition: transform var(--kh-transition);
	margin-block-end: 4px;
}

.khafif-faq-item[open] summary.khafif-faq-question::after {
	transform: rotate(-135deg);
	margin-block-end: 0;
	margin-block-start: 4px;
	border-color: var(--kh-color-accent);
}

.khafif-faq-item .khafif-faq-answer {
	padding: 0 var(--kh-space-5) var(--kh-space-5);
	color: var(--kh-color-text-soft);
	line-height: var(--kh-leading-relaxed);
	font-size: var(--kh-text-base);
}

.khafif-faq-item .khafif-faq-answer p:first-child { margin-top: 0; }
.khafif-faq-item .khafif-faq-answer p:last-child { margin-bottom: 0; }


/* ============================================================
   10. SITE FOOTER
   ============================================================ */

.kh-site-footer {
	background-color: var(--kh-color-bg-soft);
	border-block-start: 1px solid var(--kh-color-border);
	padding-block: var(--kh-space-16) var(--kh-space-8);
	margin-block-start: var(--kh-space-section);
}

.kh-site-footer-inner {
	display: grid;
	grid-template-columns: 2fr repeat(2, 1fr);
	gap: var(--kh-space-12);
	margin-block-end: var(--kh-space-10);
}

@media (max-width: 768px) {
	.kh-site-footer-inner {
		grid-template-columns: 1fr;
		gap: var(--kh-space-8);
	}
}

.kh-footer-brand {
	max-width: 360px;
}

.kh-footer-brand .kh-site-title {
	font-size: var(--kh-text-lg);
	margin-block-end: var(--kh-space-3);
}

.kh-footer-brand p {
	font-size: var(--kh-text-sm);
	color: var(--kh-color-text-soft);
	line-height: var(--kh-leading-relaxed);
	margin: 0;
}

.kh-footer-heading {
	font-family: var(--kh-font-heading);
	font-size: var(--kh-text-sm);
	font-weight: var(--kh-weight-semibold);
	letter-spacing: var(--kh-tracking-wide);
	text-transform: uppercase;
	color: var(--kh-color-text-soft);
	margin: 0 0 var(--kh-space-4);
}

.kh-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--kh-space-2);
}

.kh-footer-links a {
	font-size: var(--kh-text-sm);
	color: var(--kh-color-text-soft);
	background-image: none;
	transition: color var(--kh-transition);
}

.kh-footer-links a:hover {
	color: var(--kh-color-accent);
}

.kh-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--kh-space-4);
	padding-block-start: var(--kh-space-6);
	border-block-start: 1px solid var(--kh-color-border);
	font-size: var(--kh-text-sm);
	color: var(--kh-color-text-mute);
}

.kh-footer-bottom a {
	color: var(--kh-color-text-soft);
	background-image: none;
}


/* ============================================================
   11. UTILITIES
   ============================================================ */

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

.kh-text-soft { color: var(--kh-color-text-soft); }
.kh-text-mute { color: var(--kh-color-text-mute); }
.kh-text-accent { color: var(--kh-color-accent); }

.kh-text-center { text-align: center; }
.kh-text-start { text-align: start; }
.kh-text-end { text-align: end; }


/* ============================================================
   13. GUTENBERG BLOCK STYLES
   ============================================================
   Style support for common Gutenberg blocks so they look
   consistent with the design system.
*/

/* Button blocks */
.wp-block-button {
	margin: var(--kh-space-4) 0;
}

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kh-space-2);
	padding: var(--kh-space-3) var(--kh-space-5);
	font-family: var(--kh-font-body);
	font-size: var(--kh-text-sm);
	font-weight: var(--kh-weight-semibold);
	line-height: 1.3;
	color: #ffffff;
	background-color: var(--kh-color-accent);
	border: 1px solid var(--kh-color-accent);
	border-radius: var(--kh-radius-md);
	text-decoration: none;
	transition: all var(--kh-transition);
	background-image: none;
	cursor: pointer;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--kh-color-accent-hover);
	border-color: var(--kh-color-accent-hover);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: var(--kh-shadow-md);
}

/* Outlined button variant */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--kh-color-text);
	border-color: var(--kh-color-border-strong);
}

.is-style-outline .wp-block-button__link:hover {
	background-color: var(--kh-color-bg-soft);
	color: var(--kh-color-text);
	border-color: var(--kh-color-text);
}

/* Image blocks */
.wp-block-image {
	margin: var(--kh-space-6) 0;
}

.wp-block-image img {
	border-radius: var(--kh-radius-lg);
	max-width: 100%;
	height: auto;
}

.wp-block-image figcaption {
	font-size: var(--kh-text-sm);
	color: var(--kh-color-text-soft);
	text-align: center;
	margin-block-start: var(--kh-space-2);
}

/* Quote blocks */
.wp-block-quote,
.wp-block-pullquote {
	border-inline-start: 3px solid var(--kh-color-accent);
	padding: 0 0 0 var(--kh-space-5);
	padding-inline: var(--kh-space-5) 0;
	margin: var(--kh-space-6) 0;
	font-size: var(--kh-text-lg);
	color: var(--kh-color-text-strong);
	font-style: italic;
}

.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-block-start: var(--kh-space-2);
	font-size: var(--kh-text-sm);
	color: var(--kh-color-text-soft);
	font-style: normal;
}

/* List blocks */
.wp-block-list {
	padding-inline-start: var(--kh-space-6);
	margin: 0 0 var(--kh-space-4);
}

.wp-block-list li {
	margin-block-end: var(--kh-space-2);
	line-height: var(--kh-leading-relaxed);
}

/* Separator block */
.wp-block-separator {
	border: none;
	height: 1px;
	background-color: var(--kh-color-border);
	margin: var(--kh-space-10) auto;
	max-width: 80px;
}

.wp-block-separator.is-style-wide {
	max-width: 100%;
}

/* Code block (real code, in <pre>) */
.wp-block-code {
	background-color: var(--kh-color-bg-muted);
	border: 1px solid var(--kh-color-border);
	border-radius: var(--kh-radius-lg);
	padding: var(--kh-space-4);
	margin: var(--kh-space-4) 0;
	overflow-x: auto;
	font-family: var(--kh-font-mono);
	font-size: var(--kh-text-sm);
	line-height: var(--kh-leading-normal);
}


/* ============================================================
   14. INLINE CODE — refined for Arabic content
   ============================================================
   When users wrap Arabic text in <code> tags (intentionally or
   accidentally via paste), the monospace font has poor Arabic
   glyphs. Use the body font for inline code instead, distinguished
   only by background and slight padding.
*/

:not(pre) > code {
	font-family: inherit;
	font-size: 0.92em;
	background-color: var(--kh-color-bg-muted);
	padding: 1px 6px;
	border-radius: var(--kh-radius-sm);
	color: var(--kh-color-text);
	letter-spacing: normal;
	border: 1px solid var(--kh-color-border-soft);
}

/* Only true code blocks (in <pre>) use the mono font */
pre code {
	font-family: var(--kh-font-mono);
	background: none;
	border: none;
	padding: 0;
}


/* ============================================================
   15. PAGE LOAD ANIMATIONS
   ============================================================
   Subtle, ONE-TIME, on initial page load. Adds polish without
   being distracting on every interaction.
*/

@keyframes kh-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.kh-page-header,
.kh-entry-content {
	animation: kh-fade-up 0.5s ease-out both;
}

.kh-entry-content {
	animation-delay: 0.05s;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* ============================================================
   16. HOMEPAGE — HERO SECTION
   ============================================================
   The first impression. Generous whitespace, large refined
   typography, two-button hierarchy. No imagery by default —
   composed entirely of type and space.
*/

.kh-home-hero {
	position: relative;
	padding-block: clamp(var(--kh-space-16), 10vw, var(--kh-space-32)) clamp(var(--kh-space-12), 8vw, var(--kh-space-24));
	overflow: hidden;
	background-color: var(--kh-color-bg);
}

.kh-home-hero-inner {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
	position: relative;
	z-index: 2;
}

.kh-home-hero-eyebrow {
	display: inline-block;
	padding: var(--kh-space-1) var(--kh-space-3);
	background-color: var(--kh-color-accent-soft);
	color: var(--kh-color-accent-strong);
	font-size: var(--kh-text-xs);
	font-weight: var(--kh-weight-semibold);
	letter-spacing: var(--kh-tracking-wide);
	text-transform: uppercase;
	border-radius: var(--kh-radius-full);
	margin-block-end: var(--kh-space-5);
}

.kh-home-hero-title {
	font-size: clamp(2rem, 6vw, var(--kh-text-6xl));
	font-weight: var(--kh-weight-bold);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--kh-color-text);
	margin: 0;
}

.kh-home-hero-subtitle {
	font-size: clamp(var(--kh-text-base), 2vw, var(--kh-text-xl));
	color: var(--kh-color-text-soft);
	line-height: var(--kh-leading-relaxed);
	max-width: 600px;
	margin: var(--kh-space-5) auto 0;
}

.kh-home-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kh-space-3);
	justify-content: center;
	margin-block-start: var(--kh-space-8);
}

/* Decorative element — very subtle accent in background */
.kh-home-hero-decoration {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(1000px, 90vw);
	height: min(1000px, 90vw);
	background: radial-gradient(circle at center,
		var(--kh-color-accent-soft) 0%,
		transparent 60%);
	opacity: 0.5;
	pointer-events: none;
	z-index: 1;
}


/* ============================================================
   17. SECTION HEADERS (homepage sections)
   ============================================================ */

.kh-section-header {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	margin-block-end: var(--kh-space-12);
}

.kh-section-title {
	font-size: clamp(var(--kh-text-2xl), 4vw, var(--kh-text-4xl));
	font-weight: var(--kh-weight-bold);
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 var(--kh-space-3);
	color: var(--kh-color-text);
}

.kh-section-subtitle {
	font-size: var(--kh-text-lg);
	color: var(--kh-color-text-soft);
	line-height: var(--kh-leading-relaxed);
	margin: 0;
}

.kh-section-footer {
	text-align: center;
	margin-block-start: var(--kh-space-10);
}


/* ============================================================
   18. SERVICES GRID
   ============================================================
   Modern Business card grid: subtle borders, hover lift,
   icon at top, clear hierarchy.
*/

.kh-home-services {
	background-color: var(--kh-color-bg-soft);
	border-block-start: 1px solid var(--kh-color-border-soft);
	border-block-end: 1px solid var(--kh-color-border-soft);
}

.kh-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--kh-space-4);
}

.kh-service-card {
	display: flex;
	flex-direction: column;
	background-color: var(--kh-color-surface);
	border: 1px solid var(--kh-color-border);
	border-radius: var(--kh-radius-lg);
	padding: var(--kh-space-6);
	text-decoration: none;
	color: inherit;
	background-image: none;
	transition: all var(--kh-transition);
	position: relative;
	overflow: hidden;
}

.kh-service-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background-color: var(--kh-color-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--kh-transition);
}

.kh-service-card:hover {
	transform: translateY(-3px);
	border-color: var(--kh-color-border-strong);
	box-shadow: var(--kh-shadow-lg);
}

.kh-service-card:hover::before {
	transform: scaleX(1);
}

.kh-service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--kh-radius-md);
	background-color: var(--kh-color-accent-soft);
	color: var(--kh-color-accent);
	font-size: var(--kh-text-2xl);
	margin-block-end: var(--kh-space-4);
}

.kh-service-title {
	font-family: var(--kh-font-heading);
	font-size: var(--kh-text-lg);
	font-weight: var(--kh-weight-bold);
	line-height: 1.3;
	color: var(--kh-color-text);
	margin: 0 0 var(--kh-space-2);
}

.kh-service-excerpt {
	font-size: var(--kh-text-sm);
	color: var(--kh-color-text-soft);
	line-height: var(--kh-leading-relaxed);
	margin: 0 0 var(--kh-space-4);
	flex: 1;
}

.kh-service-meta {
	display: flex;
	align-items: center;
	gap: var(--kh-space-3);
	padding-block-start: var(--kh-space-3);
	border-block-start: 1px solid var(--kh-color-border-soft);
	font-size: var(--kh-text-sm);
}

.kh-service-price {
	font-weight: var(--kh-weight-semibold);
	color: var(--kh-color-text);
}

.kh-service-duration {
	font-size: var(--kh-text-xs);
}

.kh-service-arrow {
	position: absolute;
	top: var(--kh-space-6);
	inset-inline-start: var(--kh-space-6);
	color: var(--kh-color-text-mute);
	transition: color var(--kh-transition), transform var(--kh-transition);
	transform: rotate(-90deg);
}

[dir="rtl"] .kh-service-arrow {
	transform: rotate(90deg);
}

.kh-service-card:hover .kh-service-arrow {
	color: var(--kh-color-accent);
}


/* ============================================================
   19. FINAL CTA SECTION
   ============================================================
   Strong but not loud. Dark background, light text,
   single primary action.
*/

.kh-home-cta {
	background-color: var(--kh-color-text);
	color: var(--kh-color-bg);
	padding-block: clamp(var(--kh-space-16), 8vw, var(--kh-space-24));
	position: relative;
	overflow: hidden;
}

.kh-home-cta::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, var(--kh-color-accent) 0%, transparent 70%);
	opacity: 0.08;
	pointer-events: none;
}

.kh-home-cta-inner {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
	position: relative;
	z-index: 1;
}

.kh-home-cta-title {
	font-size: clamp(var(--kh-text-2xl), 4vw, var(--kh-text-4xl));
	font-weight: var(--kh-weight-bold);
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0;
	color: var(--kh-color-bg);
}

.kh-home-cta-subtitle {
	font-size: var(--kh-text-lg);
	color: rgba(255, 255, 255, 0.7);
	line-height: var(--kh-leading-relaxed);
	margin: var(--kh-space-4) 0 0;
}

.kh-home-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kh-space-3);
	justify-content: center;
	margin-block-start: var(--kh-space-8);
}

.kh-home-cta .kh-btn-accent svg {
	margin-inline-end: var(--kh-space-1);
}


/* ============================================================
   20. RESPONSIVE TUNING
   ============================================================ */

@media (max-width: 640px) {
	.kh-services-grid {
		grid-template-columns: 1fr;
	}

	.kh-home-hero-actions,
	.kh-home-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.kh-home-hero-actions .kh-btn,
	.kh-home-cta-actions .kh-btn {
		width: 100%;
	}
}


/* ============================================================
   21. DEFENSIVE OVERRIDES (force homepage styles)
   ============================================================
   Higher specificity to ensure homepage sections render correctly
   regardless of any conflicting rules from base style.css.
*/

/* Section header is always centered */
.kh-section > .kh-container > .kh-section-header,
.kh-section .kh-section-header {
	text-align: center;
}

/* Service card forces own color (not link color) */
a.kh-service-card,
a.kh-service-card:hover,
a.kh-service-card:focus,
a.kh-service-card:visited {
	color: var(--kh-color-text-strong);
	background-image: none;
	text-decoration: none;
}

a.kh-service-card .kh-service-title {
	color: var(--kh-color-text);
}

a.kh-service-card .kh-service-excerpt {
	color: var(--kh-color-text-soft);
}

a.kh-service-card .kh-service-price {
	color: var(--kh-color-text);
}

a.kh-service-card:hover .kh-service-title {
	color: var(--kh-color-text);
}

/* Make services section background pop visibly */
.kh-section.kh-home-services {
	background-color: var(--kh-color-bg-soft);
}

/* Ensure hero & sections have proper container behavior */
.kh-home-hero > .kh-container,
.kh-section > .kh-container {
	position: relative;
	z-index: 2;
}

/* Force button text color (override link color) */
.kh-btn,
.kh-btn:hover,
.kh-btn:focus,
.kh-btn:visited {
	background-image: none;
	text-decoration: none;
}

.kh-btn-primary,
.kh-btn-primary:hover,
.kh-btn-primary:focus,
.kh-btn-primary:visited {
	color: var(--kh-color-bg);
}

.kh-btn-accent,
.kh-btn-accent:hover,
.kh-btn-accent:focus,
.kh-btn-accent:visited {
	color: #ffffff;
}

.kh-btn-secondary,
.kh-btn-secondary:hover,
.kh-btn-secondary:focus,
.kh-btn-secondary:visited {
	color: var(--kh-color-text);
}

.kh-btn-ghost,
.kh-btn-ghost:hover,
.kh-btn-ghost:focus,
.kh-btn-ghost:visited {
	color: var(--kh-color-text-soft);
}

/* =========================================================
   1.9.0 — Micro-interactions on Service Cards
   Purpose: subtle lift on touch/hover that feels premium
   without harming performance (transform + opacity only).
   ========================================================= */

/* Animated icon on hover — gentle scale + colour shift */
.kh-service-card .kh-service-icon {
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.kh-service-card:hover .kh-service-icon {
	transform: scale(1.08) rotate(-3deg);
	background-color: var(--kh-color-accent);
	color: #fff;
}

/* Title nudge on hover — pulls the eye toward the CTA */
.kh-service-card .kh-service-title {
	transition: color 0.2s ease;
}
.kh-service-card:hover .kh-service-title {
	color: var(--kh-color-accent);
}

/* Card "tap" feedback for touch devices (no hover) */
@media (hover: none) {
	.kh-service-card { transition: transform 0.12s ease; }
	.kh-service-card:active { transform: scale(0.98); }
}

/* Respect reduced-motion preference — accessibility win */
@media (prefers-reduced-motion: reduce) {
	.kh-service-card,
	.kh-service-card .kh-service-icon,
	.kh-service-card .kh-service-title {
		transition: none !important;
	}
	.kh-service-card:hover {
		transform: none !important;
	}
	.kh-service-card:hover .kh-service-icon {
		transform: none !important;
	}
}