/*
 * miniOrange Knowledge Base — design tokens (FAQ site).
 *
 * Same values as the KB design system (src/theme/tokens.ts):
 *   palette  primary #EB5424 / hover #D9471B / pressed #C83C16,
 *            text #232323 / #666666, dark text #FFFFFF / #B3B3B3,
 *            backgrounds #FFFFFF / #171717 / #F5F5F5,
 *            dark strokes #454545 / #5C5C5C, logo wordmark #5F6062;
 *   roles    switch between light (default) and dark with
 *            html[data-mo-theme="dark"] (no longer set: the header has no switch since 2.5.1).
 * Lengths are in px and font sizes in rem; the theme's Bootstrap 3 sets
 * html { font-size: 10px }, so 1rem = 10px here (see the type scale below).
 * Spacing is the KB design's value × 1.25 (the design reads right at 125%
 * on laptops, so it is built at that size; breakpoints, hairlines and
 * WordPress admin-bar offsets are not scaled). Type uses the scale below. MO_FAQ_UI_SCALE in
 * includes/ui.php scales the inline SVG icons to match.
 */

:root {
	--mo-primary: #eb5424;
	--mo-primary-hover: #d9471b;
	--mo-primary-pressed: #c83c16;
	--mo-black: #171717;
	--mo-white: #ffffff;
	--mo-dark-text: #ffffff;
	--mo-dark-text-muted: #b3b3b3;
	--mo-dark-border: #454545;
	--mo-dark-border-strong: #5c5c5c;

	--mo-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mo-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	/*
	 * Type scale, in rem. On these pages 1rem = 10px (the theme's Bootstrap
	 * sets html { font-size: 10px }), so 1.6rem = 16px.
	 *
	 * Each size is fluid: clamp(SMALLEST, fluid middle, LARGEST).
	 *   LARGEST  = the size at 1536px wide and up (a laptop at 100% zoom);
	 *   SMALLEST = 87.5% of it, at 1229px wide and below (the same laptop
	 *              zoomed to 125%, and tablets/phones);
	 *   between the two widths the size glides smoothly.
	 * To change a size, change LARGEST and SMALLEST (keep SMALLEST = 0.875 ×
	 * LARGEST) and the middle term: middle = (S - 1229 × k)/10 rem + k × 100 vw,
	 * with k = (L - S)/307 in px. Or set all three to the same rem value for a
	 * fixed size, e.g. --mo-fs-nav: 1.6rem;
	 */
	--mo-fs-xs: clamp(1.1375rem, 0.487rem + 0.5293vw, 1.3rem);       /* 13px  meta: dates, views, "Product / Topic" */
	--mo-fs-sm: clamp(1.225rem, 0.5244rem + 0.57vw, 1.4rem);         /* 14px  breadcrumbs, pills, small buttons */
	--mo-fs-md: clamp(1.4rem, 0.5993rem + 0.6515vw, 1.6rem);         /* 16px  default: body, lists, sidebar, inputs, buttons */
	--mo-fs-lg: clamp(1.4rem, 0.5993rem + 0.6515vw, 1.6rem);         /* 16px  question & card titles, article body */
	--mo-fs-lead: clamp(1.2rem, 0.6743rem + 0.7329vw, 1.6rem);       /* up to 16px  homepage line under the title */
	--mo-fs-xl: clamp(1.925rem, 0.8241rem + 0.8958vw, 2.2rem);       /* 22px  section headings */
	--mo-fs-2xl: clamp(2.45rem, 1.0489rem + 1.1401vw, 2.8rem);       /* 28px  page / article title (small screens) */
	--mo-fs-3xl: clamp(3.15rem, 1.3485rem + 1.4658vw, 3.6rem);       /* 36px  page / article title, hero (small screens) */
	--mo-fs-4xl: clamp(4.2rem, 1.798rem + 1.9544vw, 4.8rem);         /* 48px  homepage title */
	--mo-fs-nav: clamp(1.4rem, 0.5993rem + 0.6515vw, 1.6rem);        /* 16px  header menus and their dropdown links */
	--mo-fs-cta: clamp(1.3562rem, 0.5806rem + 0.6311vw, 1.55rem);    /* 15.5px header Contact Support button */
	--mo-fs-ft-link: clamp(1rem, 0.5619rem + 0.6107vw, 1.3rem);  /* 13px  footer links, phone, email, button */
	--mo-fs-ft-head: clamp(1.575rem, 0.6743rem + 0.7329vw, 1.6rem);  /* 16px  footer column headings */
	--mo-fs-ft-over: clamp(1.4rem, 0.5993rem + 0.6515vw, 1.4rem);    /* 14px  footer "STAY CONNECTED" */
	--mo-fs-ft-small: clamp(1.225rem, 0.5244rem + 0.57vw, 1.2rem);   /* 12px  footer bottom bar */

	--mo-radius-sm: 0.5rem;
	--mo-radius-md: 0.75rem;
	--mo-radius-lg: 1rem;

	--mo-page-max: 140rem;
	--mo-reading-max: 100rem;
	--mo-header-h: 6.4rem; /* site header bar */
	--mo-control-h: 4.5rem;
	--mo-control-h-lg: 6rem;

	--mo-speed: 120ms;
	--mo-ease: cubic-bezier(0.2, 0, 0, 1);

	/* Light roles (default) */
	--mo-surface: #ffffff;
	--mo-surface-subtle: #f5f5f5;
	--mo-surface-selected: rgba(35, 35, 35, 0.07);
	--mo-surface-inverse: #171717;
	--mo-surface-header: rgba(255, 255, 255, 0.85);
	--mo-text: #232323;
	--mo-text-muted: #666666;
	--mo-text-inverse: #ffffff;
	--mo-icon: #666666;
	--mo-border: rgba(35, 35, 35, 0.1);
	--mo-border-strong: rgba(35, 35, 35, 0.2);
	--mo-accent: #eb5424;
	--mo-accent-hover: #d9471b;
	--mo-accent-pressed: #c83c16;
	--mo-accent-soft: rgba(235, 84, 36, 0.14);
	--mo-on-accent: #ffffff;
	--mo-focus: #eb5424;
	--mo-danger: #c83c16;
	--mo-success: #16a34a;
	--mo-error: #dc2626;
	--mo-shadow-popover: 0 1.5rem 4rem -1.5rem rgba(35, 35, 35, 0.18), 0 0 0 1px rgba(35, 35, 35, 0.1);
	--mo-shadow-lift: 0 0.75rem 2rem -1rem rgba(35, 35, 35, 0.1), 0 1px 0.375rem rgba(35, 35, 35, 0.03);
	--mo-logo-text: #5f6062;
	--mo-hero-glow: rgba(235, 84, 36, 0.1);
	--mo-hero-glow-soft: rgba(235, 84, 36, 0.04);
	--mo-hero-line: rgba(235, 84, 36, 0.3);
	--mo-page-glow: rgba(235, 84, 36, 0.07);
}

html[data-mo-theme="dark"] {
	color-scheme: dark;
	--mo-surface: #171717;
	--mo-surface-subtle: rgba(255, 255, 255, 0.04);
	--mo-surface-selected: rgba(255, 255, 255, 0.08);
	--mo-surface-inverse: #ffffff;
	--mo-surface-header: rgba(23, 23, 23, 0.8);
	--mo-text: #ffffff;
	--mo-text-muted: #b3b3b3;
	--mo-text-inverse: #171717;
	--mo-icon: #b3b3b3;
	--mo-border: #454545;
	--mo-border-strong: #5c5c5c;
	--mo-accent-soft: rgba(235, 84, 36, 0.24);
	--mo-danger: #eb5424;
	--mo-success: #22a855;
	--mo-error: #e5484d;
	--mo-shadow-popover: 0 1.5rem 4rem -1.5rem rgba(23, 23, 23, 0.9), 0 0 0 1px #454545;
	--mo-shadow-lift: 0 1rem 2.5rem -1.25rem rgba(23, 23, 23, 0.7);
	--mo-logo-text: #ffffff;
	--mo-hero-glow: rgba(235, 84, 36, 0.1);
	--mo-hero-glow-soft: rgba(235, 84, 36, 0.035);
	--mo-hero-line: rgba(235, 84, 36, 0.38);
	--mo-page-glow: rgba(235, 84, 36, 0.08);
}

/* Shared utilities (header, footer and pages). */
.mo-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.mo-icon {
	display: block;
	flex-shrink: 0;
	fill: currentColor;
}

.mo-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--mo-page-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}

@media (min-width: 600px) {
	.mo-wrap {
		padding-left: 5rem;
		padding-right: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mo-sh *,
	.mo-ui *,
	.mo-ft * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}