/**
 * FictionX Open Data Policy - Frontend Styles
 *
 * One document, with a download, a browser view and an inline preview.
 *
 * This replaces an inline style block that was DUPLICATED, rule for rule, in
 * opendata_ar.dwt and opendata_en.dwt - 23 rules each, in two standalone HTML
 * documents that had already drifted: the Arabic title asked for Tajawal and the
 * English one for Inter though only Arabic loaded the font, and the same paragraph
 * was line-height 2 in one file and 1.9 in the other. There is one template now, so
 * there is one sheet.
 *
 * The old page was built on a gold accent (#E8A317 / #FFC65C, written out nine times
 * per file) which belonged to nothing else on the site. It is on the same teal set as
 * every sibling module now - the values below are bisat's, measured, so the two pages
 * are the same page with different content: band #EFF3F4 at 40px/56px, cards white at
 * 14px radius on a #DCE4E6 hairline, icon chips 44px at 11px radius on a 9% teal tint,
 * and the primary action deep teal, 42px tall at 10px radius.
 *
 * 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.
 */

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

	/* 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. */
	--fxod-primary-rgb: 38, 102, 124;
}

[data-bs-theme="dark"] .fxod-hero,
[data-bs-theme="dark"] .fxod-band {
	/* The teal is ink and border in almost every rule below, and on the dark surface
	   #26667c measures 2.85:1 - under the 4.5:1 a small label needs. Lightened for dark
	   only. Its one BACKGROUND use, the primary button under white text, is pinned back
	   to the deep teal further down or it would invert into pale-on-white. */
	--fxod-teal: #4FA3BA;
	--fxod-ink: #E8F0F2;
	--fxod-muted: #9FB3B9;
	--fxod-mist: #0F1B1F;
	--fxod-rule: rgba(255, 255, 255, .10);
	--fxod-surface: #16242A;
}

/* ==============================================================================
   The hero, on the band header.dwt paints behind every module page
   ============================================================================== */
.fxod-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. */
.fxod-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. */
.fxod-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	padding-bottom: 26px;
}
.fxod-hero-crumbs .breadcrumb {
	justify-content: flex-start;
	margin-bottom: 6px;
	opacity: .85;
}
.fxod-hero-crumbs .breadcrumb-item,
.fxod-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 and an underline. The underline needs its own important:
   style.bundle.rtl.css carries body a:hover { text-decoration: none !important }. */
.fxod-hero-crumbs .breadcrumb-item.opacity-75 {
	opacity: .72 !important;
	transition: opacity .2s ease;
}
.fxod-hero-crumbs .breadcrumb-item.opacity-75:hover {
	opacity: 1 !important;
}
.fxod-hero-crumbs .breadcrumb-item a:hover {
	color: #fff !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.fxod-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);
}
.fxod-hero-sub {
	margin: 10px 0 0;
	max-width: 54ch;
	color: rgba(255, 255, 255, .86);
	font-size: 17px;
	line-height: 1.9;
}

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

/* ==============================================================================
   The format line
   ============================================================================== */
/* The sibling list screens put a result count opposite their search pill. There is
   nothing to search here - one document - so the chip states what it is, in the place
   the siblings put their count. */
.fxod-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin: 0 0 24px;
}
.fxod-count {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(var(--fxod-primary-rgb), .09);
	color: var(--fxod-teal);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
/* style.bundle.rtl.css carries i[class] { color: var(--kt-text-muted) } - an attribute
   selector plus a type selector, (0,1,1) - which beats plain inheritance, so every
   icon in this file states its colour. */
.fxod-count i {
	color: inherit;
	font-size: 12.5px;
}

/* ==============================================================================
   The document card
   ============================================================================== */
.fxod-card {
	border: 1px solid var(--fxod-rule);
	border-radius: 14px;
	background: var(--fxod-surface);
	padding: 24px;
}

.fxod-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}
.fxod-badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: rgba(var(--fxod-primary-rgb), .09);
	color: var(--fxod-teal);
}
.fxod-badge i {
	color: inherit;
	font-size: 18px;
}
.fxod-head-text {
	min-width: 0;
}
.fxod-title {
	margin: 0;
	color: var(--fxod-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.65;
}
.fxod-sub {
	margin: 2px 0 0;
	color: var(--fxod-muted);
	font-size: 12.5px;
	font-weight: 500;
}
.fxod-desc {
	margin: 0 0 20px;
	max-width: 76ch;
	color: var(--fxod-muted);
	font-size: 14.5px;
	line-height: 1.9;
}

/* ------------------------------------------------------------- the actions ---- */
.fxod-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}
.fxod-btn,
.fxod-btn:hover {
	/* Declared on :hover as well - the theme's a:hover { transition: color .2s ease }
	   is (0,1,1) and REPLACES this list the moment the pointer lands, so a transition
	   set only at rest snaps instead of easing. */
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.fxod-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
.fxod-btn i {
	color: inherit;
	font-size: 13.5px;
}
.fxod-btn:focus-visible {
	outline: 3px solid rgba(var(--fxod-primary-rgb), .55);
	outline-offset: 2px;
}
/* The deep teal, not var(--fxod-teal): this is the one background use, and the light
   teal under white text measures 3.1:1. */
.fxod-btn-primary {
	background: var(--fxod-teal-deep);
	color: #fff;
}
.fxod-btn-primary:hover {
	background: #0a2f3b;
	color: #fff;
}
.fxod-btn-ghost {
	border-color: var(--fxod-rule);
	background: transparent;
	color: var(--fxod-ink);
}
.fxod-btn-ghost:hover {
	border-color: var(--fxod-teal);
	background: rgba(var(--fxod-primary-rgb), .06);
	color: var(--fxod-teal);
}

/* ---------------------------------------------------------- the meta strip ---- */
.fxod-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	border-top: 1px solid var(--fxod-rule);
	padding-top: 16px;
}
.fxod-meta span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fxod-muted);
	font-size: 12.5px;
	font-weight: 500;
}
.fxod-meta i {
	color: var(--fxod-teal);
	font-size: 12.5px;
}

/* ==============================================================================
   The preview
   ============================================================================== */
.fxod-preview {
	overflow: hidden;
	border: 1px solid var(--fxod-rule);
	border-radius: 14px;
	background: var(--fxod-surface);
	margin-top: 20px;
}
.fxod-preview iframe {
	display: block;
	width: 100%;
	height: 78vh;
	min-height: 520px;
	border: 0;
}

/* ==============================================================================
   The document is not there
   ============================================================================== */
/* A precondition, not a failure: it says what to do rather than what the server did
   not find. The page shipped for years pointing all three of its links at a file that
   404s. */
.fxod-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 1px solid var(--fxod-rule);
	border-radius: 14px;
	background: var(--fxod-surface);
	margin-top: 20px;
	padding: 48px 28px;
}
.fxod-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(var(--fxod-primary-rgb), .09);
	color: var(--fxod-teal);
	margin-bottom: 16px;
}
.fxod-empty-icon i {
	color: inherit;
	font-size: 22px;
}
.fxod-empty-title {
	margin: 0 0 8px;
	color: var(--fxod-ink);
	font-size: 16px;
	font-weight: 700;
}
.fxod-empty-body {
	margin: 0;
	max-width: 52ch;
	color: var(--fxod-muted);
	font-size: 13.5px;
	line-height: 1.9;
}

@media (max-width: 991.98px) {
	/* The off-canvas drawer sits outside the viewport; without this the page can be
	   scrolled sideways to reach it - measured 43px of horizontal scroll here before
	   the rule was added. 25 of the sibling module sheets already carry it, which is
	   why this page was the only one that scrolled. */
	.wrapper {
		overflow-x: clip;
	}
}

/* ============================================================ narrow screens ---- */
@media (max-width: 767.98px) {
	.fxod-band {
		padding: 28px 0 40px;
	}
	.fxod-card {
		padding: 18px;
	}
	/* Side by side at 390px the two buttons had about eight characters each. */
	.fxod-actions {
		flex-direction: column;
	}
	.fxod-btn {
		justify-content: center;
		width: 100%;
	}
	/* 78vh of PDF on a phone is a scroll trap inside a scroll. */
	.fxod-preview iframe {
		height: 60vh;
		min-height: 360px;
	}
}