/**
 * Kunhar Medical
 * Demo 01 — Clinical Corporate
 *
 * Temporary Demo 01 design preset.
 */


/* ==========================================================
   DESIGN TOKENS
   ========================================================== */

body.kunhar-demo-01 {

	font-family: "Roboto", Arial, sans-serif;

	/* Brand / accent */
	--kunhar-primary: #e43c3e;
	--kunhar-primary-dark: #c93436;

	/* Typography */
	--kunhar-heading: #252B30;
	--kunhar-text: #56636C;
	--kunhar-muted: #78838B;

	/* Clinical backgrounds */
	--kunhar-clinical: #DDEBF7;
	--kunhar-clinical-light: #F3F8FC;

	/* Neutral system */
	--kunhar-white: #FFFFFF;
	--kunhar-background: #F7F9FA;
	--kunhar-border: #DDE4E8;

	/* Layout */
	--kunhar-container: 1600px;
	--kunhar-gutter: 20px;

	/* Section spacing */
	--kunhar-section-space: 96px;

	/* Radius */
	--kunhar-radius-sm: 4px;
	--kunhar-radius-md: 8px;
	--kunhar-radius-lg: 14px;

	/* Transitions */
	--kunhar-transition: 0.2s ease;

	color: var(--kunhar-text);
	background: var(--kunhar-white);
}


/* ==========================================================
   GLOBAL BOX SIZING
   ========================================================== */

body.kunhar-demo-01 *,
body.kunhar-demo-01 *::before,
body.kunhar-demo-01 *::after {
	box-sizing: border-box;
}


/* ==========================================================
   CONTAINER
   ========================================================== */

body.kunhar-demo-01 .kunhar-container {
	width: 100%;
	max-width: var(--kunhar-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--kunhar-gutter);
	padding-right: var(--kunhar-gutter);
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

body.kunhar-demo-01 h1,
body.kunhar-demo-01 h2,
body.kunhar-demo-01 h3,
body.kunhar-demo-01 h4,
body.kunhar-demo-01 h5,
body.kunhar-demo-01 h6 {
	color: var(--kunhar-heading);
}

body.kunhar-demo-01 p {
	color: var(--kunhar-text);
}

body.kunhar-demo-01 a {
	color: inherit;
}


/* ==========================================================
   SECTIONS
   ========================================================== */

body.kunhar-demo-01 .kunhar-section {
	padding-top: var(--kunhar-section-space);
	padding-bottom: var(--kunhar-section-space);
}

body.kunhar-demo-01 .kunhar-section--white {
	background: var(--kunhar-white);
}

body.kunhar-demo-01 .kunhar-section--soft {
	background: var(--kunhar-background);
}

body.kunhar-demo-01 .kunhar-section--clinical {
	background: var(--kunhar-clinical-light);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

body.kunhar-demo-01 .kunhar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 46px;
	padding: 11px 22px;

	border: 1px solid transparent;
	border-radius: var(--kunhar-radius-sm);

	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;

	text-decoration: none;
	cursor: pointer;

	transition:
		background-color var(--kunhar-transition),
		border-color var(--kunhar-transition),
		color var(--kunhar-transition),
		transform var(--kunhar-transition);
}

body.kunhar-demo-01 .kunhar-button--primary {
	background: var(--kunhar-primary);
	border-color: var(--kunhar-primary);
	color: var(--kunhar-white);
}

body.kunhar-demo-01 .kunhar-button--primary:hover,
body.kunhar-demo-01 .kunhar-button--primary:focus-visible {
	background: var(--kunhar-primary-dark);
	border-color: var(--kunhar-primary-dark);
	color: var(--kunhar-white);
}

body.kunhar-demo-01 .kunhar-button--outline {
	background: transparent;
	border-color: var(--kunhar-border);
	color: var(--kunhar-heading);
}

body.kunhar-demo-01 .kunhar-button--outline:hover,
body.kunhar-demo-01 .kunhar-button--outline:focus-visible {
	border-color: var(--kunhar-primary);
	color: var(--kunhar-primary);
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

body.kunhar-demo-01 a:focus-visible,
body.kunhar-demo-01 button:focus-visible {
	outline: 2px solid var(--kunhar-primary);
	outline-offset: 3px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

	body.kunhar-demo-01 {
		--kunhar-section-space: 72px;
	}

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

	body.kunhar-demo-01 {
		--kunhar-section-space: 56px;
		--kunhar-gutter: 20px;
	}

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	body.kunhar-demo-01 *,
	body.kunhar-demo-01 *::before,
	body.kunhar-demo-01 *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

}