/*
 * Солонго Лазик Төв — дизайн систем (token + суурь + компонент).
 * Баримт: docs/design-system.md. Elementor Global Kit (3000) ижил утгуудыг агуулна.
 */

/* ---------------------------------------------------------------------------
 * 1. Фонт — Manrope (variable 200–800), self-host, SIL OFL 1.1 (assets/fonts/manrope/OFL.txt)
 * ------------------------------------------------------------------------ */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope/manrope-cyrillic-ext-wght.woff2") format("woff2-variations"), url("../fonts/manrope/manrope-cyrillic-ext-wght.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope/manrope-cyrillic-wght.woff2") format("woff2-variations"), url("../fonts/manrope/manrope-cyrillic-wght.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope/manrope-latin-ext-wght.woff2") format("woff2-variations"), url("../fonts/manrope/manrope-latin-ext-wght.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope/manrope-latin-wght.woff2") format("woff2-variations"), url("../fonts/manrope/manrope-latin-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
 * 2. Token
 * ------------------------------------------------------------------------ */
:root {
	/* Өнгө (WCAG contrast-ийг docs/design-system.md-ээс үзнэ үү) */
	--sl-color-primary: #2b479e;        /* логоны хөх */
	--sl-color-primary-dark: #1d3272;   /* hover, бараан дэвсгэр */
	--sl-color-accent: #b3560f;         /* ЗӨВХӨН "Цаг захиалах" CTA */
	--sl-color-accent-hover: #8f440b;
	--sl-color-text: #1f2937;
	--sl-color-text-muted: #5b6472;
	--sl-color-bg: #ffffff;
	--sl-color-surface: #f5f7fb;        /* карт, тодруулсан section */
	--sl-color-tint: #eef2fa;           /* hover дэвсгэр, сонгогдсон төлөв */
	--sl-color-border: #dde3ee;         /* чимэглэлийн зураас, картын хүрээ */
	--sl-color-border-strong: #7c8698;  /* input-ийн хүрээ (≥3:1) */
	--sl-color-on-primary: #ffffff;
	--sl-color-on-accent: #ffffff;
	--sl-focus-ring: var(--sl-color-primary);

	/* Бараан section (hero, сэтгэгдэл, footer) */
	--sl-color-ink: #0b1638;            /* хамгийн бараан navy */
	--sl-color-ink-2: #142a6b;          /* ink → primary-ийн дунд */
	--sl-color-sky: #a9bdeb;            /* бараан дэвсгэр дээрх тодруулга, линк (ink дээр 9.4:1) */
	--sl-color-on-dark-muted: #c9d0e0;  /* бараан дэвсгэр дээрх туслах текст (ink дээр 11.4:1) */
	--sl-color-glow: #f28027;           /* логоны улбар шар — ЗӨВХӨН чимэглэл (текст, товчинд биш) */
	--sl-color-highlight: #ffc69a;      /* бараан дэвсгэр дээрх тодруулсан үг (ink дээр 11.6:1) */

	/* Фонт */
	--sl-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sl-font-weight-regular: 400;
	--sl-font-weight-medium: 500;
	--sl-font-weight-semibold: 600;
	--sl-font-weight-bold: 700;

	/* Хэмжээ — modular scale 1.25, суурь 17px. Mobile-д clamp()-аар багасна. */
	--sl-text-sm: 15px;
	--sl-text-base: 17px;
	--sl-text-h6: 17px;
	--sl-text-h5: clamp(19px, 0.6vw + 16.6px, 21px);
	--sl-text-h4: clamp(22px, 1vw + 18.4px, 27px);
	--sl-text-h3: clamp(25px, 1.6vw + 19.3px, 33px);
	--sl-text-h2: clamp(30px, 2.4vw + 21.4px, 42px);
	--sl-text-h1: clamp(36px, 3.2vw + 24.5px, 52px);
	--sl-leading-body: 1.6;
	--sl-leading-heading: 1.2;
	--sl-leading-tight: 1.3;

	/* Зай — 8px систем */
	--sl-space-1: 8px;
	--sl-space-2: 16px;
	--sl-space-3: 24px;
	--sl-space-4: 32px;
	--sl-space-5: 48px;
	--sl-space-6: 64px;
	--sl-space-7: 96px;
	--sl-section-space: 96px;

	/* Хэлбэр */
	--sl-radius: 12px;
	--sl-radius-lg: 20px;
	--sl-radius-xl: 28px;
	--sl-radius-pill: 999px;
	--sl-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
	--sl-shadow-card-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 28px rgba(16, 24, 40, .10);
	--sl-shadow-lg: 0 2px 6px rgba(11, 22, 56, .06), 0 24px 56px -12px rgba(11, 22, 56, .22);
	--sl-transition: .2s ease;
	--sl-ease-out: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 767px) {
	:root {
		--sl-section-space: 56px;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Суурь typography
 * Гарчгийн хэмжээг зөвхөн агуулгын хэсэгт (Elementor Heading/Text Editor, нийтлэлийн агуулга) өгнө.
 * Theme-ийн компонентууд (`h3.item-title > a` г.м.) хэмжээгээ дотоод линкэд өгдөг тул h-д том хэмжээ
 * өгвөл мөр хоорондын зай тэлдэг.
 * ------------------------------------------------------------------------ */
html body {
	font-family: var(--sl-font-sans);
	font-size: var(--sl-text-base);
	line-height: var(--sl-leading-body);
	color: var(--sl-color-text);
	background-color: var(--sl-color-bg);
	-webkit-font-smoothing: antialiased;
}

html body :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--sl-font-sans);
	color: var(--sl-color-text);
	letter-spacing: -0.01em;
}

/* Elementor Heading widget: тусгай хэмжээ өгөөгүй бол tag-аар нь (widget-ийн тохиргоо давамгайлна). */
.elementor-widget-heading h1.elementor-heading-title,
.sl-prose :where(h1) { font-size: var(--sl-text-h1); line-height: var(--sl-leading-heading); font-weight: var(--sl-font-weight-bold); }
.elementor-widget-heading h2.elementor-heading-title,
.sl-prose :where(h2) { font-size: var(--sl-text-h2); line-height: var(--sl-leading-heading); font-weight: var(--sl-font-weight-bold); }
.elementor-widget-heading h3.elementor-heading-title,
.sl-prose :where(h3) { font-size: var(--sl-text-h3); line-height: var(--sl-leading-tight); font-weight: var(--sl-font-weight-bold); }
.elementor-widget-heading h4.elementor-heading-title,
.sl-prose :where(h4) { font-size: var(--sl-text-h4); line-height: var(--sl-leading-tight); font-weight: var(--sl-font-weight-semibold); }
.elementor-widget-heading h5.elementor-heading-title,
.sl-prose :where(h5) { font-size: var(--sl-text-h5); line-height: 1.4; font-weight: var(--sl-font-weight-semibold); }
.elementor-widget-heading h6.elementor-heading-title,
.sl-prose :where(h6) { font-size: var(--sl-text-h6); line-height: 1.4; font-weight: var(--sl-font-weight-semibold); }

/* Урт текст: Text Editor widget, Elementor-гүй нийтлэл/хуудасны агуулга, эсвэл .sl-prose. */
.elementor-widget-text-editor :where(h1, h2, h3, h4, h5, h6),
body:not(.elementor-page) .entry-content :where(h1, h2, h3, h4, h5, h6) {
	margin-top: 1.4em;
	margin-bottom: .5em;
}

.elementor-widget-text-editor :where(h1) , body:not(.elementor-page) .entry-content :where(h1) { font-size: var(--sl-text-h1); line-height: var(--sl-leading-heading); }
.elementor-widget-text-editor :where(h2) , body:not(.elementor-page) .entry-content :where(h2) { font-size: var(--sl-text-h2); line-height: var(--sl-leading-heading); }
.elementor-widget-text-editor :where(h3) , body:not(.elementor-page) .entry-content :where(h3) { font-size: var(--sl-text-h3); line-height: var(--sl-leading-tight); }
.elementor-widget-text-editor :where(h4) , body:not(.elementor-page) .entry-content :where(h4) { font-size: var(--sl-text-h4); line-height: var(--sl-leading-tight); }
.elementor-widget-text-editor :where(h5) , body:not(.elementor-page) .entry-content :where(h5) { font-size: var(--sl-text-h5); line-height: 1.4; }
.elementor-widget-text-editor :where(h6) , body:not(.elementor-page) .entry-content :where(h6) { font-size: var(--sl-text-h6); line-height: 1.4; }

html body :where(p, li, td, th, dd, blockquote) {
	font-size: inherit;
	line-height: var(--sl-leading-body);
}

html body :where(input, select, textarea, button) {
	font-family: inherit;
}

html body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
	border-color: var(--sl-color-border-strong);
}

/* Харагдахуйц focus — бараан дэвсгэр дээр ч цагаан хүрээ тусгаарлана. */
html body :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sl-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--sl-color-bg);
}

/* ---------------------------------------------------------------------------
 * 4. Товч — .sl-btn + --primary | --secondary | --ghost (+ --accent зөвхөн CTA)
 * ------------------------------------------------------------------------ */
.sl-btn,
.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sl-space-1);
	min-height: 48px;
	padding: 12px var(--sl-space-3);
	border: 2px solid transparent;
	border-radius: var(--sl-radius);
	font-family: var(--sl-font-sans);
	font-size: 16px;
	font-weight: var(--sl-font-weight-semibold);
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sl-transition), border-color var(--sl-transition), color var(--sl-transition), box-shadow var(--sl-transition);
}

/* Elementor-ын Button widget анхдагчаар accent авдаг — accent зөвхөн CTA тул primary болгоно.
 * Widget дээр тусгайлан өнгө сонгосон бол тэр нь давамгайлна. */
html body .elementor-widget-button .elementor-button {
	background-color: var(--sl-color-primary);
	color: var(--sl-color-on-primary);
}

html body .elementor-widget-button .elementor-button:hover {
	background-color: var(--sl-color-primary-dark);
	color: var(--sl-color-on-primary);
}

.sl-btn--primary {
	background-color: var(--sl-color-primary);
	border-color: var(--sl-color-primary);
	color: var(--sl-color-on-primary);
}

.sl-btn--primary:hover {
	background-color: var(--sl-color-primary-dark);
	border-color: var(--sl-color-primary-dark);
	color: var(--sl-color-on-primary);
}

.sl-btn--secondary {
	background-color: var(--sl-color-bg);
	border-color: var(--sl-color-primary);
	color: var(--sl-color-primary);
}

.sl-btn--secondary:hover {
	background-color: var(--sl-color-tint);
	color: var(--sl-color-primary-dark);
	border-color: var(--sl-color-primary-dark);
}

.sl-btn--ghost {
	background-color: transparent;
	color: var(--sl-color-primary);
	padding-inline: var(--sl-space-2);
}

.sl-btn--ghost:hover {
	background-color: var(--sl-color-tint);
	color: var(--sl-color-primary-dark);
}

.sl-btn:focus-visible,
.elementor-widget-button .elementor-button:focus-visible {
	outline: 3px solid var(--sl-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--sl-color-bg);
}

.sl-btn[disabled],
.sl-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
}

/* Elementor Button widget-ийн загвар: Advanced → CSS Classes → sl-btn-secondary | sl-btn-ghost | sl-btn-accent
 * (sl-btn-primary буюу class-гүй бол primary). */
html body .elementor-widget-button.sl-btn-secondary .elementor-button {
	background-color: var(--sl-color-bg);
	border-color: var(--sl-color-primary);
	color: var(--sl-color-primary);
}

html body .elementor-widget-button.sl-btn-secondary .elementor-button:hover {
	background-color: var(--sl-color-tint);
	border-color: var(--sl-color-primary-dark);
	color: var(--sl-color-primary-dark);
}

html body .elementor-widget-button.sl-btn-ghost .elementor-button {
	background-color: transparent;
	color: var(--sl-color-primary);
	padding-inline: var(--sl-space-2);
}

html body .elementor-widget-button.sl-btn-ghost .elementor-button:hover {
	background-color: var(--sl-color-tint);
	color: var(--sl-color-primary-dark);
}

/* "Цаг захиалах" CTA — accent өнгийг зөвхөн энд хэрэглэнэ: header-ийн товч, захиалгын систем
 * (solongo.medsoft.care) эсвэл "цаг-захиалга" хуудас руу орох товч, .sl-cta class. */
.sl-btn--accent,
html body #masthead .action-items-primary-btn,
html body .mean-bar .btn-header,
html body a:is(.elementor-button, .item-btn, .btn-fill)[href*="solongo.medsoft.care" i],
html body a:is(.elementor-button, .item-btn, .btn-fill)[href*="%d1%86%d0%b0%d0%b3-%d0%b7%d0%b0%d1%85%d0%b8%d0%b0%d0%bb%d0%b3%d0%b0" i],
html body .elementor-widget .sl-cta a,
html body .elementor-widget-button.sl-btn-accent .elementor-button,
html body a.sl-cta {
	/* Widget-ийн тусгай өнгө, theme-ийн !important-аас үл хамааран CTA үргэлж accent. */
	background-color: var(--sl-color-accent) !important;
	border-color: var(--sl-color-accent) !important;
	color: var(--sl-color-on-accent) !important;
	border-radius: var(--sl-radius);
	font-weight: var(--sl-font-weight-semibold);
}

.sl-btn--accent:hover,
html body #masthead .action-items-primary-btn:hover,
html body .mean-bar .btn-header:hover,
html body a:is(.elementor-button, .item-btn, .btn-fill)[href*="solongo.medsoft.care" i]:hover,
html body a:is(.elementor-button, .item-btn, .btn-fill)[href*="%d1%86%d0%b0%d0%b3-%d0%b7%d0%b0%d1%85%d0%b8%d0%b0%d0%bb%d0%b3%d0%b0" i]:hover,
html body .elementor-widget .sl-cta a:hover,
html body .elementor-widget-button.sl-btn-accent .elementor-button:hover,
html body a.sl-cta:hover {
	background-color: var(--sl-color-accent-hover) !important;
	border-color: var(--sl-color-accent-hover) !important;
	color: var(--sl-color-on-accent) !important;
}

/* ---------------------------------------------------------------------------
 * 5. Карт — .sl-card (Elementor: Advanced → CSS Classes → sl-card)
 * ------------------------------------------------------------------------ */
.sl-card {
	padding: var(--sl-space-3);
	border: 1px solid var(--sl-color-border);
	border-radius: var(--sl-radius);
	background-color: var(--sl-color-bg);
	box-shadow: var(--sl-shadow-card);
	transition: box-shadow var(--sl-transition), transform var(--sl-transition);
}

.sl-card--interactive:hover,
a.sl-card:hover {
	box-shadow: var(--sl-shadow-card-hover);
	transform: translateY(-2px);
}

.elementor-element.sl-card > .elementor-widget-container,
.elementor-element.sl-card > .elementor-widget-wrap {
	padding: var(--sl-space-3);
}

.elementor-element.sl-card {
	padding: 0;
}

/* ---------------------------------------------------------------------------
 * 6. Section-ий зай — .sl-section (desktop 96px, mobile 56px)
 * ------------------------------------------------------------------------ */
.sl-section,
.elementor-element.sl-section {
	padding-top: var(--sl-section-space) !important;
	padding-bottom: var(--sl-section-space) !important;
}

.sl-section--surface {
	background-color: var(--sl-color-surface);
}

@media (prefers-reduced-motion: reduce) {
	.sl-btn,
	.sl-card,
	.elementor-widget-button .elementor-button {
		transition: none;
	}

	.sl-card--interactive:hover,
	a.sl-card:hover {
		transform: none;
	}
}