/**
 * FictionX sitemap - Frontend Styles
 *
 * Every section of the site, as cards: the content modules with their categories (and
 * for pages and news, the items inside them), then a card of the standalone pages.
 *
 * Moved from templates/fiction/assets/css/sitemap.css, which sat in the theme tree
 * and was linked WITHOUT a filemtime() stamp - so an edit to it never reached a
 * browser that already held it, the same trap as the theme bundles. The markup it
 * styled was Metronic's .card/.card-header/.badge with 682 inline style attributes
 * carrying a per-section colour.
 *
 * Those six hard-coded colours (#3E97FF blue, #F6B100 amber, #17C653 green, #7239EA
 * purple, #F8285A red, #0D7A8D teal) are gone. A tone in this system is reserved for
 * something that HAS a state; six brand colours across six sections is decoration,
 * and it made the one page whose job is orientation read as the least related to the
 * rest of the site. Every section tile is the one teal tint the library, topics and
 * govhe tiles use.
 *
 * Tokens are scoped to this module's own two wrappers rather than :root - every
 * sibling sheet puts them on :root, so on a page loading two of them the last wins.
 */

.fxsm-hero,
.fxsm-band {
	--fxsm-teal: #26667c;        /* the site's own --bs-primary */
	--fxsm-teal-deep: #0E3D4C;
	--fxsm-ink: #0B2B33;
	--fxsm-muted: #5B7076;
	--fxsm-mist: #EFF3F4;
	--fxsm-rule: #DCE4E6;

	/* The theme's --bs-primary-rgb is 40,84,109, which is NOT --bs-primary (#26667c):
	   every rgba(var(--bs-primary-rgb), ...) tint comes out a different blue. */
	--fxsm-primary-rgb: 38, 102, 124;

	--fxsm-surface: #fff;
}

[data-bs-theme="dark"] .fxsm-hero,
[data-bs-theme="dark"] .fxsm-band {
	/* The teal is ink and border in almost every rule below, and on the dark surface
	   #26667c measured 2.85:1 - under the 4.5:1 a 12.5px label needs. */
	--fxsm-teal: #4FA3BA;
	--fxsm-ink: #E8F0F2;
	--fxsm-muted: #9FB3B9;
	--fxsm-mist: #0F1B1F;
	--fxsm-rule: rgba(255, 255, 255, .10);

	--fxsm-surface: #16242A;
}

/* ==============================================================================
   The hero, on the band header.dwt paints behind every module page
   ============================================================================== */
.fxsm-hero {
	position: relative;
	z-index: 3;
	padding: 18px 0 0;
}
/* A one-way ramp: nothing at the top, where the band's video is left alone behind the
   nav, coming on through the lower half and ending opaque at the band's edge. */
.fxsm-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(5, 27, 34, 0) 0%,
		rgba(5, 27, 34, .10) 30%,
		rgba(5, 27, 34, .34) 52%,
		rgba(5, 27, 34, .70) 74%,
		rgba(5, 27, 34, .92) 89%,
		rgba(5, 27, 34, 1) 100%);
	pointer-events: none;
}
/* Start-aligned: text-align start resolves to right in Arabic and left in English on
   its own, so there is no direction-specific rule anywhere in this file. */
.fxsm-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	padding-bottom: 26px;
}
.fxsm-hero-crumbs .breadcrumb {
	justify-content: flex-start;
	margin-bottom: 6px;
	opacity: .85;
}
.fxsm-hero-crumbs .breadcrumb-item,
.fxsm-hero-crumbs .breadcrumb-item a {
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	font-weight: 500;
}
/* The crumbs carry Metronic's .text-hover-primary, whose rule is
   color: var(--bs-text-primary) !important - the hero's own teal, so a hovered crumb
   vanished. Colour is not winnable here (.text-white is !important too), so the
   feedback rides on opacity. */
.fxsm-hero-crumbs .breadcrumb-item.opacity-75 {
	opacity: .72 !important;
	transition: opacity .2s ease;
}
.fxsm-hero-crumbs .breadcrumb-item.opacity-75:hover {
	opacity: 1 !important;
}
.fxsm-hero-crumbs .breadcrumb-item a:hover {
	color: #fff !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.fxsm-hero-title {
	margin: 0;
	color: #fff;
	font-size: clamp(32px, 18px + 3.2vw, 56px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}
.fxsm-hero-sub {
	margin: 10px 0 0;
	max-width: 54ch;
	color: rgba(255, 255, 255, .86);
	font-size: 17px;
	line-height: 1.9;
}

/* --------------------------------------------------------------- the band ---- */
.fxsm-band {
	position: relative;
	z-index: 2;
	background: var(--fxsm-mist);
	padding: 40px 0 56px;
}

/* ==============================================================================
   The section cards
   ============================================================================== */
/* Two columns from 1200px. grid-auto-rows is deliberately NOT 1fr here: these cards
   hold wildly different numbers of rows, and forcing equal heights would leave a
   four-row card with the whitespace of a thirty-row one beside it. */
.fxsm-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0 0 20px;
	align-items: start;
}
@media (min-width: 1200px) {
	.fxsm-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.fxsm-card {
	border: 1px solid var(--fxsm-rule);
	border-radius: 18px;
	background: var(--fxsm-surface);
	overflow: hidden;
}
.fxsm-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--fxsm-rule);
}
.fxsm-card-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: rgba(var(--fxsm-primary-rgb), .09);
	color: var(--fxsm-teal);
}
[data-bs-theme="dark"] .fxsm-card-icon {
	background: rgba(var(--fxsm-primary-rgb), .26);
}
.fxsm-card-icon i {
	font-size: 16px;
}
.fxsm-card-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--fxsm-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}
.fxsm-card-n {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(var(--fxsm-primary-rgb), .09);
	color: var(--fxsm-teal);
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .fxsm-card-n {
	background: rgba(var(--fxsm-primary-rgb), .26);
}
.fxsm-card-body {
	padding: 8px 12px 12px;
}

/* ==============================================================================
   A category row
   ============================================================================== */
.fxsm-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--fxsm-ink);
	text-decoration: none;
	/* Declared on the hover state too: the theme's a:hover { transition: color .2s }
	   is (0,1,1) and REPLACES this list on hover. */
	transition: background-color .15s ease, color .15s ease;
}
.fxsm-row:hover,
.fxsm-row:focus-visible {
	background: rgba(var(--fxsm-primary-rgb), .07);
	color: var(--fxsm-teal);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
[data-bs-theme="dark"] .fxsm-row:hover,
[data-bs-theme="dark"] .fxsm-row:focus-visible {
	background: rgba(var(--fxsm-primary-rgb), .20);
}
.fxsm-row:focus-visible {
	outline: 3px solid rgba(var(--fxsm-primary-rgb), .55);
	outline-offset: 2px;
}
.fxsm-row-icon {
	flex: 0 0 auto;
	color: var(--fxsm-teal);
	font-size: 14px;
}
.fxsm-row-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}
.fxsm-row-n {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--fxsm-mist);
	color: var(--fxsm-muted);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .fxsm-row-n {
	background: rgba(255, 255, 255, .07);
}
/* The arrow appears on hover. It is a chevron rotated by CSS rather than a left or
   right arrow glyph: the page is served in both directions, so the asset cannot
   carry the direction. */
.fxsm-row-arrow {
	flex: 0 0 auto;
	color: var(--fxsm-teal);
	font-size: 11px;
	opacity: 0;
	transform: rotate(-90deg);
	transition: opacity .15s ease;
}
[dir="rtl"] .fxsm-row-arrow {
	transform: rotate(90deg);
}
.fxsm-row:hover .fxsm-row-arrow,
.fxsm-row:focus-visible .fxsm-row-arrow {
	opacity: 1;
}

/* A dashed rule between categories, not between a category and its own items. */
.fxsm-sep {
	height: 0;
	margin: 2px 12px;
	border-top: 1px dashed var(--fxsm-rule);
}

/* ==============================================================================
   The items inside a category
   ============================================================================== */
/* border-inline-start puts the guide on the correct edge in both directions. The old
   sheet wrote border-right and then undid it with a [dir="ltr"] override - two rules
   and a margin swap where one logical property does the job. */
.fxsm-sub {
	margin-inline-start: 20px;
	padding-inline-start: 10px;
	padding-bottom: 4px;
	border-inline-start: 2px solid var(--fxsm-rule);
}
.fxsm-sub-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 8px;
	color: var(--fxsm-muted);
	font-size: 12.5px;
	line-height: 1.7;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.fxsm-sub-row:hover,
.fxsm-sub-row:focus-visible {
	background: rgba(var(--fxsm-primary-rgb), .07);
	color: var(--fxsm-teal);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
[data-bs-theme="dark"] .fxsm-sub-row:hover,
[data-bs-theme="dark"] .fxsm-sub-row:focus-visible {
	background: rgba(var(--fxsm-primary-rgb), .20);
}
.fxsm-sub-row:focus-visible {
	outline: 3px solid rgba(var(--fxsm-primary-rgb), .55);
	outline-offset: 2px;
}
.fxsm-dot {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--fxsm-muted);
	opacity: .6;
}
/* One line per item: these are article and page titles, and letting them wrap turned
   a list of thirty into a wall. */
.fxsm-sub-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==============================================================================
   The standalone pages
   ============================================================================== */
.fxsm-static-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
	padding: 16px 20px 20px;
}
.fxsm-static {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 14px 16px;
	border: 1px dashed var(--fxsm-rule);
	border-radius: 14px;
	color: var(--fxsm-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.fxsm-static:hover,
.fxsm-static:focus-visible {
	border-color: var(--fxsm-teal);
	border-style: solid;
	background: rgba(var(--fxsm-primary-rgb), .07);
	color: var(--fxsm-teal);
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
[data-bs-theme="dark"] .fxsm-static:hover,
[data-bs-theme="dark"] .fxsm-static:focus-visible {
	background: rgba(var(--fxsm-primary-rgb), .20);
}
.fxsm-static:focus-visible {
	outline: 3px solid rgba(var(--fxsm-primary-rgb), .55);
	outline-offset: 2px;
}
.fxsm-static-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(var(--fxsm-primary-rgb), .09);
	color: var(--fxsm-teal);
}
[data-bs-theme="dark"] .fxsm-static-icon {
	background: rgba(var(--fxsm-primary-rgb), .26);
}
.fxsm-static-icon i {
	font-size: 14px;
}

/* ==============================================================================
   Icon colour: style.bundle.rtl.css carries i[class] { color: var(--kt-text-muted) }
   ============================================================================== */
/* That selector is an attribute selector PLUS a type selector - specificity (0,1,1) -
   so it beats inheritance anywhere this sheet colours a PARENT and lets the <i>
   inherit. Scoped under .fxsm-band to reach (0,2,1) rather than tying at (0,1,1) and
   relying on which sheet happens to load last. */
.fxsm-band .fxsm-card-icon i,
.fxsm-band .fxsm-static-icon i,
.fxsm-band .fxsm-card-n i,
.fxsm-band .fxsm-row-n i {
	color: inherit;
}

/* ==============================================================================
   Motion and width
   ============================================================================== */
@keyframes fxsm-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.fxsm-hero-title {
	animation: fxsm-rise .55s cubic-bezier(.22, .7, .3, 1) both;
}

@media (max-width: 991.98px) {
	/* The off-canvas drawer sits outside the viewport; without this the page can be
	   scrolled sideways to reach it. */
	.wrapper {
		overflow-x: clip;
	}
}

@media (max-width: 767.98px) {
	.fxsm-hero {
		padding-top: 6px;
	}
	.fxsm-hero-inner {
		padding-bottom: 20px;
	}
	.fxsm-band {
		padding-top: 28px;
	}
	.fxsm-card-head {
		padding: 14px 16px;
	}
	.fxsm-static-grid {
		grid-template-columns: 1fr;
		padding: 14px 16px 16px;
	}
	.fxsm-sub {
		margin-inline-start: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Reduced motion means no MOVEMENT, not a dead page: the travel goes and the short
	   colour fades are kept. */
	.fxsm-hero-title {
		animation: none;
	}
	.fxsm-row,
	.fxsm-sub-row,
	.fxsm-static,
	.fxsm-row-arrow,
	.fxsm-hero-crumbs .breadcrumb-item.opacity-75 {
		transition: none;
	}
}