/* =====================================================================
   Freshline - Joomla 6 template
   Modern, clean & fresh. Mobile-first. Bootstrap 5. Native dark mode.
   Hand-authored build of scss/template.scss
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------- */
:root {
	color-scheme: light;

	--fl-brand: #2563eb;
	--fl-brand-contrast: #ffffff;
	--fl-radius: 1rem;
	--fl-radius-sm: calc(var(--fl-radius) * 0.5);
	--fl-radius-pill: 999px;
	--fl-container-max: 1200px;
	--fl-gutter: 1.25rem;
	--fl-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--fl-bg: #ffffff;
	--fl-bg-subtle: #f3f5fa;
	--fl-surface: #ffffff;
	--fl-surface-2: #eceff6;
	--fl-text: #0f172a;
	--fl-text-muted: #556074;
	--fl-heading: #0b1220;
	--fl-border: #dde3ee;
	--fl-border-strong: #c6cfde;

	--fl-header-bg: rgba(255, 255, 255, 0.82);
	--fl-header-border: rgba(15, 23, 42, 0.10);
	--fl-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
	--fl-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 16px 36px -18px rgba(15, 23, 42, 0.24);
	--fl-shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, 0.30);

	--fl-header-h: 64px;
	--fl-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-bs-theme="dark"] {
	color-scheme: dark;

	--fl-brand: #60a5fa;
	--fl-brand-contrast: #04122e;

	--fl-bg: #0b1120;
	--fl-bg-subtle: #0e1626;
	--fl-surface: #121c30;
	--fl-surface-2: #1b273f;
	--fl-text: #e5edfa;
	--fl-text-muted: #93a3bd;
	--fl-heading: #f4f8ff;
	--fl-border: #243149;
	--fl-border-strong: #33415d;

	--fl-header-bg: rgba(11, 17, 32, 0.72);
	--fl-header-border: rgba(255, 255, 255, 0.08);
	--fl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--fl-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -20px rgba(0, 0, 0, 0.7);
	--fl-shadow-lg: 0 30px 70px -28px rgba(0, 0, 0, 0.75);
}

/* Bridge Freshline tokens into Bootstrap 5.3 variables so core
   components (cards, dropdowns, forms, offcanvas...) blend in. */
:root,
[data-bs-theme="light"] {
	--bs-body-bg: var(--fl-bg);
	--bs-body-color: var(--fl-text);
	--bs-emphasis-color: var(--fl-heading);
	--bs-border-color: var(--fl-border);
	--bs-secondary-bg: var(--fl-surface-2);
	--bs-tertiary-bg: var(--fl-bg-subtle);
	--bs-primary: var(--fl-brand);
	--bs-link-color: var(--fl-brand);
	--bs-link-hover-color: color-mix(in srgb, var(--fl-brand) 78%, #000);
	--bs-border-radius: var(--fl-radius-sm);
	--bs-border-radius-lg: var(--fl-radius);
}

[data-bs-theme="dark"] {
	--bs-body-bg: var(--fl-bg);
	--bs-body-color: var(--fl-text);
	--bs-emphasis-color: var(--fl-heading);
	--bs-border-color: var(--fl-border);
	--bs-secondary-bg: var(--fl-surface-2);
	--bs-tertiary-bg: var(--fl-bg-subtle);
	--bs-primary: var(--fl-brand);
	--bs-link-color: var(--fl-brand);
	--bs-link-hover-color: color-mix(in srgb, var(--fl-brand) 80%, #fff);
}

/* ---------------------------------------------------------------------
   2. Base / reset-ish
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--fl-header-h) + 1.5rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--fl-bg);
	color: var(--fl-text);
	font-family: var(--fl-font-sans);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	transition: background-color var(--fl-transition), color var(--fl-transition);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--fl-heading);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-top: 0;
	text-wrap: balance;
}

h1, .h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
h2, .h2 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.15rem); }
h3, .h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); }

p { margin-top: 0; }

a {
	color: var(--fl-brand);
	text-decoration: none;
	transition: color var(--fl-transition);
}

a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

:where(.fl-content) img { border-radius: var(--fl-radius-sm); }

::selection {
	background: color-mix(in srgb, var(--fl-brand) 24%, transparent);
	color: var(--fl-heading);
}

:focus-visible {
	outline: 2px solid var(--fl-brand);
	outline-offset: 2px;
	border-radius: 4px;
}

hr {
	border: 0;
	border-top: 1px solid var(--fl-border);
	opacity: 1;
	margin: 2rem 0;
}

/* ---------------------------------------------------------------------
   3. Layout primitives
   --------------------------------------------------------------------- */
.fl-container {
	width: 100%;
	max-width: var(--fl-container-max);
	margin-inline: auto;
	padding-inline: 1.15rem;
}

@media (min-width: 768px) {
	.fl-container { padding-inline: 1.75rem; }
}

.fl-page-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.has-sticky-footer .fl-page-wrap .fl-main { flex: 1 0 auto; }

.fl-section {
	padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem);
	background: var(--fl-bg-subtle);
}
.fl-section + .fl-section { border-top: 1px solid var(--fl-border); }

.fl-main {
	padding-block: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
	background: var(--fl-bg);
}

/* Match the gap between the sidebars and the main column to the gap
   the sidebar modules have among themselves (see .fl-sidebar below). */
.fl-main > .fl-container > .row {
	--bs-gutter-x: 1.25rem;
}

.fl-skip-link {
	position: fixed;
	inset-inline-start: 1rem;
	inset-block-start: 1rem;
	z-index: 2000;
	padding: 0.65rem 1rem;
	background: var(--fl-brand);
	color: var(--fl-brand-contrast);
	border-radius: var(--fl-radius-sm);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   4. Topbar
   --------------------------------------------------------------------- */
.fl-topbar {
	background: var(--fl-surface-2);
	border-bottom: 1px solid var(--fl-border);
	font-size: 0.875rem;
}

.fl-topbar .fl-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
}

.fl-topbar :where(ul) { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; }

/* ---------------------------------------------------------------------
   5. Header
   --------------------------------------------------------------------- */
.fl-header {
	background: var(--fl-header-bg);
	border-bottom: 1px solid var(--fl-header-border);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	transition: box-shadow var(--fl-transition), background-color var(--fl-transition);
}

.fl-header--sticky {
	position: sticky;
	top: 0;
	z-index: 1030;
}

.fl-header.is-scrolled { box-shadow: var(--fl-shadow); }

.fl-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--fl-header-h);
}

.fl-header__brand { display: flex; align-items: baseline; gap: 0.75rem; margin-inline-end: auto; }

.fl-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: -0.03em;
	color: var(--fl-heading);
}

.fl-brand:hover { text-decoration: none; }
.fl-brand__logo { display: block; max-height: 40px; width: auto; }
.fl-brand__logo--dark { display: none; }
[data-bs-theme="dark"] .fl-brand__logo--light { display: none; }
[data-bs-theme="dark"] .fl-brand__logo--dark { display: block; }

.fl-brand__tagline { color: var(--fl-text-muted); font-size: 0.9rem; font-weight: 400; }

.fl-header__tools { display: flex; align-items: center; gap: 0.5rem; }

/* ---------------------------------------------------------------------
   6. Primary navigation (mod_menu)
   --------------------------------------------------------------------- */
.fl-nav { align-items: stretch; }

.fl-nav :where(ul) { list-style: none; margin: 0; padding: 0; }

.fl-nav > :where(ul, .mod-menu) {
	display: flex;
	align-items: stretch;
	gap: 0.15rem;
}

.fl-nav :where(li) { position: relative; display: flex; align-items: center; }

.fl-nav :where(a, .nav-header, span.separator) {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0.85rem;
	border-radius: var(--fl-radius-pill);
	color: var(--fl-text);
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1;
	white-space: nowrap;
	transition: background-color var(--fl-transition), color var(--fl-transition);
}

.fl-nav :where(a):hover {
	background: var(--fl-surface-2);
	color: var(--fl-heading);
	text-decoration: none;
}

.fl-nav :where(.current, .active) > :where(a) {
	background: color-mix(in srgb, var(--fl-brand) 14%, transparent);
	color: var(--fl-brand);
}

/* Dropdowns */
.fl-nav :where(li) > :where(ul) {
	position: absolute;
	top: calc(100% + 0.4rem);
	inset-inline-start: 0;
	min-width: 220px;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.5rem;
	background: var(--fl-surface);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	box-shadow: var(--fl-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--fl-transition), transform var(--fl-transition), visibility var(--fl-transition);
	z-index: 20;
}

.fl-nav :where(li):hover > :where(ul),
.fl-nav :where(li):focus-within > :where(ul) {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fl-nav :where(li) > :where(ul) :where(a) {
	width: 100%;
	border-radius: var(--fl-radius-sm);
	font-weight: 500;
}

.fl-nav :where(li) > :where(ul) :where(ul) {
	top: -0.5rem;
	inset-inline-start: calc(100% + 0.4rem);
}

/* ---------------------------------------------------------------------
   7. Theme toggle
   --------------------------------------------------------------------- */
.fl-theme-toggle,
.fl-burger {
	--sz: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sz);
	height: var(--sz);
	padding: 0;
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-pill);
	background: var(--fl-surface);
	color: var(--fl-text);
	cursor: pointer;
	transition: background-color var(--fl-transition), border-color var(--fl-transition), color var(--fl-transition), transform var(--fl-transition);
}

.fl-theme-toggle:hover,
.fl-burger:hover {
	border-color: var(--fl-border-strong);
	color: var(--fl-brand);
}

.fl-theme-toggle:active { transform: scale(0.94); }

.fl-theme-toggle .fl-icon { position: absolute; transition: opacity var(--fl-transition), transform var(--fl-transition); }
.fl-theme-toggle { position: relative; overflow: hidden; }
.fl-theme-toggle .fl-icon--moon { opacity: 0; transform: rotate(-40deg) scale(0.6); }
.fl-theme-toggle .fl-icon--sun { opacity: 1; transform: rotate(0) scale(1); }
[data-bs-theme="dark"] .fl-theme-toggle .fl-icon--moon { opacity: 1; transform: rotate(0) scale(1); }
[data-bs-theme="dark"] .fl-theme-toggle .fl-icon--sun { opacity: 0; transform: rotate(40deg) scale(0.6); }

/* ---------------------------------------------------------------------
   8. Burger / offcanvas
   --------------------------------------------------------------------- */
.fl-burger__box { position: relative; width: 20px; height: 14px; }
.fl-burger__inner,
.fl-burger__inner::before,
.fl-burger__inner::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--fl-transition), top var(--fl-transition), opacity var(--fl-transition);
}
.fl-burger__inner { top: 50%; transform: translateY(-50%); }
.fl-burger__inner::before { content: ""; top: -6px; }
.fl-burger__inner::after { content: ""; top: 6px; }
.fl-burger[aria-expanded="true"] .fl-burger__inner { background: transparent; }
.fl-burger[aria-expanded="true"] .fl-burger__inner::before { top: 0; transform: rotate(45deg); }
.fl-burger[aria-expanded="true"] .fl-burger__inner::after { top: 0; transform: rotate(-45deg); }

.fl-offcanvas {
	background: var(--fl-surface);
	color: var(--fl-text);
	border-inline-start: 1px solid var(--fl-border);
}

.fl-offcanvas .offcanvas-header { border-bottom: 1px solid var(--fl-border); }

.fl-offcanvas__nav :where(ul) { list-style: none; margin: 0; padding: 0; }
.fl-offcanvas__nav > :where(ul, .mod-menu) { display: flex; flex-direction: column; gap: 0.15rem; }

.fl-offcanvas__nav :where(a, .nav-header, span.separator) {
	display: block;
	padding: 0.8rem 0.9rem;
	border-radius: var(--fl-radius-sm);
	color: var(--fl-text);
	font-weight: 500;
	font-size: 1.02rem;
}

.fl-offcanvas__nav :where(a):hover { background: var(--fl-surface-2); text-decoration: none; }

.fl-offcanvas__nav :where(.current, .active) > :where(a) {
	background: color-mix(in srgb, var(--fl-brand) 16%, transparent);
	color: var(--fl-brand);
}

.fl-offcanvas__nav :where(li) { position: relative; }

.fl-offcanvas__nav :where(li) :where(ul) {
	margin-inline-start: 0.6rem;
	padding-inline-start: 0.6rem;
	border-inline-start: 2px solid var(--fl-border);
}

.fl-submenu-toggle {
	position: absolute;
	inset-block-start: 0.35rem;
	inset-inline-end: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--fl-text-muted);
	cursor: pointer;
	border-radius: var(--fl-radius-sm);
	transition: transform var(--fl-transition), background-color var(--fl-transition);
}

.fl-submenu-toggle:hover { background: var(--fl-surface-2); }
.fl-submenu-toggle.is-open { transform: rotate(180deg); }

/* ---------------------------------------------------------------------
   9. Hero / banner
   --------------------------------------------------------------------- */
.fl-banner {
	background:
		radial-gradient(1200px 400px at 80% -10%, color-mix(in srgb, var(--fl-brand) 16%, transparent), transparent),
		var(--fl-bg-subtle);
	border-bottom: 1px solid var(--fl-border);
	padding-block: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
}

/* ---------------------------------------------------------------------
   10. Breadcrumbs
   --------------------------------------------------------------------- */
.fl-breadcrumbs {
	border-top: 1px solid var(--fl-border);
	border-bottom: 1px solid var(--fl-border);
	font-size: 0.875rem;
	background: var(--fl-bg);
}
.fl-breadcrumbs .fl-container { padding-block: 0.75rem; }
.fl-breadcrumbs .breadcrumb { margin: 0; }
.fl-breadcrumbs ol { --bs-breadcrumb-divider: "›"; }

/* ---------------------------------------------------------------------
   11. Module card chrome
   --------------------------------------------------------------------- */
.fl-sidebar .card,
.fl-section .card,
.fl-footer .card,
.fl-offcanvas__extra .card {
	background: var(--fl-surface);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius);
	box-shadow: var(--fl-shadow-sm);
	padding: clamp(0.55rem, 0.45rem + 0.4vw, 0.8rem);
}

/* Equal-height cards only make sense side by side in a grid row
   (top-a/top-b, bottom-a/b/c) - sidebar cards stack vertically and
   should just hug their own content. */
.fl-section .card,
.fl-footer .card,
.fl-offcanvas__extra .card {
	height: 100%;
}

.card > .card-body { padding: 0; }

.card > .card-header,
.card > .card-body > h1:first-child,
.card > .card-body > h2:first-child,
.card > .card-body > h3:first-child {
	margin: 0 0 0.6rem;
	padding: 0;
	background: transparent;
	border: 0;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.fl-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.fl-sidebar > * + * { margin-top: 0 !important; }

/* Generic module fallback (style="none") inside sidebars */
.fl-sidebar > div:not(.card) {
	background: var(--fl-surface);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius);
	padding: 1.25rem;
}

/* ---------------------------------------------------------------------
   12. Content niceties
   --------------------------------------------------------------------- */
.fl-content .item-page,
.fl-content .blog,
.fl-content .blog-featured {
	background: var(--fl-surface);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius);
	/* Top padding matches the sidebar card padding (see section 11) so the
	   top edge of the content text lines up with the top edge of the
	   sidebar text; left/right and bottom are half the original spacing. */
	padding: clamp(0.55rem, 0.45rem + 0.4vw, 0.8rem) clamp(0.625rem, 0.5rem + 0.75vw, 1.25rem) clamp(0.625rem, 0.5rem + 0.75vw, 1.25rem);
	box-shadow: var(--fl-shadow-sm);
}

/* Category blog (.blog) and featured articles (.blog-featured) both list
   their entries as sibling ".blog-item" divs inside a ".blog-items"
   wrapper (Joomla 6 core markup) - separate them with a hairline, and
   the leading block from the intro block below it. */
.fl-content .blog-item + .blog-item {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--fl-border);
}

.fl-content .items-leading + .blog-items {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--fl-border);
}

.fl-content .page-header h1,
.fl-content .page-header h2 { margin-bottom: 1rem; }

.fl-content table:not(.table) {
	width: 100%;
	border-collapse: collapse;
}
.fl-content table:not(.table) :where(th, td) {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--fl-border);
	text-align: start;
}
.fl-content table:not(.table) thead th { background: var(--fl-surface-2); }

blockquote {
	margin: 1.5rem 0;
	padding: 0.5rem 1.25rem;
	border-inline-start: 3px solid var(--fl-brand);
	color: var(--fl-text-muted);
	font-style: italic;
}

/* ---------------------------------------------------------------------
   13. Buttons (brand)
   --------------------------------------------------------------------- */
.btn {
	--bs-btn-border-radius: var(--fl-radius-pill);
	font-weight: 600;
	padding-inline: 1.15rem;
	transition: transform var(--fl-transition), box-shadow var(--fl-transition), background-color var(--fl-transition);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
	--bs-btn-bg: var(--fl-brand);
	--bs-btn-border-color: var(--fl-brand);
	--bs-btn-color: var(--fl-brand-contrast);
	--bs-btn-hover-bg: color-mix(in srgb, var(--fl-brand) 85%, #000);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--fl-brand) 85%, #000);
	--bs-btn-hover-color: var(--fl-brand-contrast);
	--bs-btn-active-bg: color-mix(in srgb, var(--fl-brand) 75%, #000);
	--bs-btn-active-border-color: color-mix(in srgb, var(--fl-brand) 75%, #000);
	--bs-btn-disabled-bg: var(--fl-brand);
	--bs-btn-disabled-border-color: var(--fl-brand);
	box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--fl-brand) 80%, transparent);
}

[data-bs-theme="dark"] .btn-primary {
	--bs-btn-hover-bg: color-mix(in srgb, var(--fl-brand) 82%, #fff);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--fl-brand) 82%, #fff);
	--bs-btn-active-bg: color-mix(in srgb, var(--fl-brand) 70%, #fff);
}

.btn-outline-primary {
	--bs-btn-color: var(--fl-brand);
	--bs-btn-border-color: var(--fl-brand);
	--bs-btn-hover-bg: var(--fl-brand);
	--bs-btn-hover-border-color: var(--fl-brand);
	--bs-btn-hover-color: var(--fl-brand-contrast);
}

/* ---------------------------------------------------------------------
   14. Forms
   --------------------------------------------------------------------- */
.form-control,
.form-select {
	background-color: var(--fl-bg);
	border-color: var(--fl-border-strong);
	border-radius: var(--fl-radius-sm);
	color: var(--fl-text);
	padding: 0.6rem 0.85rem;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--fl-brand);
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--fl-brand) 25%, transparent);
	background-color: var(--fl-bg);
	color: var(--fl-text);
}

.form-control::placeholder { color: var(--fl-text-muted); }

/* Joomla search module */
.fl-header__search .form-control { min-width: 200px; }

/* ---------------------------------------------------------------------
   15. System messages (works with the message.php override too)
   --------------------------------------------------------------------- */
/* Joomla always outputs this container, even with no message to show -
   only add the gap when it actually holds something, otherwise it pushes
   the content column down and misaligns it against the sidebars. */
#system-message-container:not(:empty) { margin-bottom: 1.5rem; }

.alert {
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	background: var(--fl-surface);
	color: var(--fl-text);
	box-shadow: var(--fl-shadow-sm);
}
.alert-success { border-inline-start: 4px solid #16a34a; }
.alert-info { border-inline-start: 4px solid var(--fl-brand); }
.alert-warning { border-inline-start: 4px solid #d97706; }
.alert-danger { border-inline-start: 4px solid #dc2626; }

/* ---------------------------------------------------------------------
   16. Pagination
   --------------------------------------------------------------------- */
.pagination {
	--bs-pagination-color: var(--fl-text);
	--bs-pagination-bg: var(--fl-surface);
	--bs-pagination-border-color: var(--fl-border);
	--bs-pagination-hover-bg: var(--fl-surface-2);
	--bs-pagination-hover-color: var(--fl-heading);
	--bs-pagination-hover-border-color: var(--fl-border-strong);
	--bs-pagination-active-bg: var(--fl-brand);
	--bs-pagination-active-border-color: var(--fl-brand);
	--bs-pagination-active-color: var(--fl-brand-contrast);
	gap: 0.35rem;
	flex-wrap: wrap;
}
.page-link { border-radius: var(--fl-radius-sm) !important; }

/* ---------------------------------------------------------------------
   17. Footer
   --------------------------------------------------------------------- */
.fl-footer {
	margin-top: auto;
	background: var(--fl-surface-2);
	border-top: 1px solid var(--fl-border);
	padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	font-size: 0.95rem;
}

.fl-footer__modules { margin-bottom: 1.75rem; }
.fl-footer__modules .card { background: transparent; border: 0; box-shadow: none; padding: 0; }

.fl-footer :where(ul) { list-style: none; margin: 0; padding: 0; }
.fl-footer :where(a) { color: var(--fl-text-muted); }
.fl-footer :where(a):hover { color: var(--fl-brand); }

.fl-footer__text { color: var(--fl-text-muted); margin-bottom: 1rem; }

.fl-footer__bottom {
	border-top: 1px solid var(--fl-border);
	padding-top: 1.25rem;
	color: var(--fl-text-muted);
	text-align: center;
}

/* ---------------------------------------------------------------------
   18. Back to top
   --------------------------------------------------------------------- */
.fl-backtotop {
	position: fixed;
	inset-block-end: 1.25rem;
	inset-inline-end: 1.25rem;
	z-index: 1040;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-pill);
	background: var(--fl-surface);
	color: var(--fl-text);
	box-shadow: var(--fl-shadow);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--fl-transition), transform var(--fl-transition), color var(--fl-transition);
}

.fl-backtotop.is-visible { opacity: 1; transform: translateY(0); }
.fl-backtotop:hover { color: var(--fl-brand); }

/* ---------------------------------------------------------------------
   19. Error & offline pages
   --------------------------------------------------------------------- */
.fl-error,
.fl-offline {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 2rem 0;
	background:
		radial-gradient(1000px 420px at 50% -10%, color-mix(in srgb, var(--fl-brand) 14%, transparent), transparent),
		var(--fl-bg);
}

.fl-error__card,
.fl-offline__card {
	max-width: 520px;
	margin-inline: auto;
	text-align: center;
	background: var(--fl-surface);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius);
	box-shadow: var(--fl-shadow-lg);
	padding: clamp(1.75rem, 1.2rem + 3vw, 3rem);
}

.fl-error__code {
	font-size: clamp(3.5rem, 2rem + 10vw, 6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	margin: 0;
	background: linear-gradient(135deg, var(--fl-brand), color-mix(in srgb, var(--fl-brand) 40%, #a855f7));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.fl-error__title { margin: 0.5rem 0 0.75rem; }
.fl-error__message { color: var(--fl-text-muted); margin-bottom: 1.5rem; }
.fl-error__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.fl-offline__form { margin-top: 1.5rem; text-align: start; }

/* ---------------------------------------------------------------------
   20. Responsive helpers (mobile-first up)
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.fl-header__inner { min-height: 58px; }
	:root { --fl-header-h: 58px; }
}

@media (min-width: 992px) {
	.fl-brand__logo { max-height: 44px; }
}

/* ---------------------------------------------------------------------
   21. Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ---------------------------------------------------------------------
   22. Print
   --------------------------------------------------------------------- */
@media print {
	.fl-header, .fl-topbar, .fl-footer, .fl-backtotop, .fl-offcanvas, .fl-breadcrumbs { display: none !important; }
	body { background: #fff; color: #000; }
	.fl-content .item-page { border: 0; box-shadow: none; padding: 0; }
}