/*
 * 'Sora' (headings across auth pages, blog, login popup and 404) was only
 * ever being requested via a <link> on the 404
 * template — every other page had no way to load it, so font-family:'Sora'
 * silently fell back to plain sans-serif there the whole time. @import
 * works inside a plain .css file (unlike a <link> tag) and this file is
 * already auto-loaded on every page, so this is the one place that fixes
 * it everywhere at once. 'Inter' is already loaded site-wide via the
 * template's own webfont settings; imported again here only as a safe
 * fallback in case that setting is ever turned off.
 */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* JoomForge auth pages (login / registration) */
.jf-auth-page {
	background: #F6F7FA;
	min-height: calc(100vh - 76px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 24px;
}

.jf-auth-card {
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: 16px;
	padding: 44px 40px;
	max-width: 420px;
	width: 100%;
	box-shadow: 0 24px 60px -30px rgba(6, 18, 41, 0.2);
	position: relative;
	overflow: hidden;
}

.jf-auth-card::before {
	content: '';
	position: absolute;
	top: -24px;
	right: -24px;
	width: 100px;
	height: 100px;
	background: #FFE7DE;
	clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%);
}

.jf-auth-card > * {
	position: relative;
	z-index: 1;
}

.jf-auth-card h1 {
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: #061229;
	margin: 0 0 6px;
}

.jf-auth-card .jf-auth-subtitle {
	font-size: 14px;
	color: #5B6472;
	margin-bottom: 28px;
}

.jf-auth-card .control-group,
.jf-auth-card .mb-3 {
	margin-bottom: 16px;
}

.jf-auth-card label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #061229;
	margin-bottom: 6px;
}

.jf-auth-card label .star {
	color: #FD3B00;
}

.jf-auth-card .form-control {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	font-size: 15px;
	color: #0B1220;
	font-family: 'Inter', system-ui, sans-serif;
}

.jf-auth-card .password-group .input-group {
	position: relative;
	display: block;
}

.jf-auth-card .password-group .form-control {
	padding-right: 44px;
}

.jf-auth-card .input-password-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #5B6472;
	cursor: pointer;
	padding: 6px;
}

.jf-auth-card .form-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #061229;
}

.jf-auth-card button[type="submit"],
.jf-auth-card .com-users-registration__register {
	width: 100%;
	background: #FD3B00;
	color: #FFFFFF;
	border: none;
	font-weight: 700;
	font-size: 15px;
	padding: 13px;
	border-radius: 8px;
	cursor: pointer;
	margin-top: 6px;
	font-family: 'Inter', system-ui, sans-serif;
}

.jf-auth-card .jf-auth-links {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	margin-top: -4px;
}

.jf-auth-card .jf-auth-links a,
.jf-auth-card .jf-auth-footnote a {
	color: #FD3B00;
	text-decoration: none;
	font-weight: 600;
}

.jf-auth-card .jf-auth-footnote {
	text-align: center;
	font-size: 14px;
	color: #5B6472;
	margin-top: 22px;
}

.jf-auth-card fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

.jf-auth-card legend {
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #061229;
	margin: 20px 0 12px;
	padding: 0;
}

.jf-auth-card legend:first-child {
	margin-top: 0;
}

.jf-auth-card .field-spacer .control-label {
	font-size: 12px;
	color: #5B6472;
	font-weight: 400;
	margin-bottom: 12px;
}

.jf-auth-card small,
.jf-auth-card .text-muted {
	font-size: 12px;
	color: #5B6472;
}

/* JoomForge blog (com_content category blog layout) */
.jf-blog-page {
	font-family: 'Inter', system-ui, sans-serif;
}

.jf-blog-hero {
	background: #FFFFFF;
	padding: 80px 48px 12px;
	text-align: center;
}

.jf-blog-hero h1 {
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	font-size: 44px;
	color: #061229;
	margin: 0 0 14px;
}

.jf-blog-hero .jf-blog-subtitle {
	font-size: 17px;
	line-height: 1.6;
	color: #5B6472;
	margin: 0 auto;
	max-width: 560px;
}

.jf-blog-body {
	background: #FFFFFF;
	padding: 56px 48px 40px;
}

.jf-blog-body-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.jf-blog-featured {
	margin-bottom: 56px;
}

.jf-blog-featured .com-content-category-blog__item {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 40px;
	align-items: center;
	border: 1px solid #E5E7EB;
	border-radius: 16px;
	overflow: hidden;
}

.jf-blog-thumb {
	background: #F6F7FA;
	width: 100%;
	height: 180px;
	display: block;
	overflow: hidden;
}

.jf-blog-featured .jf-blog-thumb {
	height: 320px;
}

.jf-blog-thumb a,
.jf-blog-thumb .article-intro-image {
	display: block;
	height: 100%;
}

.jf-blog-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jf-blog-featured .jf-blog-content {
	padding: 8px 36px 8px 0;
}

.jf-blog-badge {
	display: inline-block;
	background: #FFE7DE;
	color: #FD3B00;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
	text-decoration: none;
}

.jf-blog-featured h2,
.jf-blog-featured h3 {
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: #061229;
	margin: 0 0 12px;
	line-height: 1.2;
}

.jf-blog-excerpt {
	font-size: 14.5px;
	line-height: 1.6;
	color: #5B6472;
	margin-bottom: 16px;
}

.jf-blog-meta {
	font-size: 13px;
	color: #7A8398;
}

.jf-blog-grid {
	display: grid;
	grid-template-columns: repeat(var(--jf-blog-cols, 3), 1fr);
	gap: 28px;
}

.jf-blog-grid .com-content-category-blog__item a.jf-blog-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.jf-blog-grid .jf-blog-thumb {
	border-radius: 12px;
	margin-bottom: 16px;
}

.jf-blog-grid .jf-blog-badge {
	background: none;
	padding: 0;
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.jf-blog-grid h2,
.jf-blog-grid h3 {
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	font-size: 17px;
	color: #061229;
	margin: 0 0 8px;
	line-height: 1.3;
}

.jf-blog-links {
	list-style: none;
	margin: 40px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid #E5E7EB;
}

.jf-blog-links__item {
	border-bottom: 1px solid #E5E7EB;
}

.jf-blog-links__item:last-child {
	border-bottom: none;
}

.jf-blog-links__item a {
	display: block;
	padding: 14px 4px;
	color: #061229;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}

.jf-blog-links__item a:hover {
	color: #FD3B00;
}

.jf-blog-page .com-content-category-blog__navigation {
	margin-top: 40px;
	text-align: center;
}

.jf-blog-page .com-content-category-blog__pagination ul {
	list-style: none;
	display: inline-flex;
	gap: 6px;
	padding: 0;
	margin: 0;
}

.jf-blog-page .com-content-category-blog__pagination a,
.jf-blog-page .com-content-category-blog__pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	color: #061229;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

.jf-blog-page .com-content-category-blog__pagination a:hover {
	background: #FFF4F0;
	color: #FD3B00;
}

.jf-blog-page .com-content-category-blog__pagination .page-item.active .page-link {
	background: #FD3B00;
	border-color: #FD3B00;
	color: #FFFFFF;
}

.jf-blog-page .com-content-category-blog__pagination .page-item.disabled .page-link {
	color: #C4CAD6;
}

.jf-blog-page .com-content-category-blog__counter {
	font-size: 13px;
	color: #7A8398;
}

@media (max-width: 900px) {
	.jf-blog-featured .com-content-category-blog__item {
		grid-template-columns: 1fr;
	}

	.jf-blog-featured .jf-blog-content {
		padding: 8px 24px 24px;
	}

	.jf-blog-featured .jf-blog-thumb {
		height: 200px;
	}

	.jf-blog-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.jf-blog-hero {
		padding: 48px 24px 12px;
	}

	.jf-blog-hero h1 {
		font-size: 32px;
	}

	.jf-blog-body {
		padding: 32px 24px;
	}

	.jf-blog-grid {
		grid-template-columns: 1fr !important;
	}
}

/*
 * JoomForge Manager (com_joomforge + mod_joomforge_*) design-token override.
 *
 * That extension ships its own complete design system (media/com_joomforge/
 * css/site.css), scoped under .joomforge and themed entirely through ~30
 * --jf-color- and --jf-font- custom properties it defines on .joomforge
 * itself (with sane fallback values) rather than inheriting from the page. Every
 * view and module consumes only those tokens plus plain Bootstrap classes
 * (.btn, .card, .table, .modal...) that site.css itself re-themes with the
 * same tokens — so re-pointing the tokens here re-skins all of it, and no
 * per-view/per-module override files are needed.
 *
 * `body .joomforge` (rather than bare `.joomforge`) only exists to win the
 * cascade over site.css's own same-specificity `.joomforge` rule regardless
 * of stylesheet load order, without needing !important.
 *
 * Status colours (success/warning/danger/info/neutral) are left at the
 * component's own defaults on purpose: they carry universal meaning
 * (paid/active vs expired vs failed) that reusing the brand's orange accent
 * for one of them would blur with "call to action".
 *
 * The --bs-* lines below are a separate, necessary piece: site.css only
 * themes the classes it explicitly styles (.btn, .jf-badge, etc). Plain
 * Bootstrap defaults it never touches — e.g. the Account page's nav-tabs,
 * whose inactive-tab colour comes straight from Bootstrap's own
 * --bs-link-color — otherwise keep rendering in Bootstrap's stock blue.
 * Remapping Bootstrap's own variables here catches those cases site-wide
 * without hunting down every unstyled Bootstrap component individually.
 */
body .joomforge {
	--bs-primary: #FD3B00;
	--bs-primary-rgb: 253, 59, 0;
	--bs-link-color: #FD3B00;
	--bs-link-color-rgb: 253, 59, 0;
	--bs-link-hover-color: #E03500;
	--jf-color-primary: #FD3B00;
	--jf-color-primary-hover: #E03500;
	--jf-color-on-primary: #FFFFFF;
	--jf-color-secondary: #061229;
	--jf-color-accent: #FD3B00;
	--jf-color-accent-hover: #E03500;
	--jf-color-on-accent: #FFFFFF;
	--jf-color-background: #F6F7FA;
	--jf-color-foreground: #061229;
	--jf-color-card: #FFFFFF;
	--jf-color-card-foreground: #061229;
	--jf-color-muted: #F6F7FA;
	--jf-color-muted-foreground: #5B6472;
	--jf-color-border: #E5E7EB;
	--jf-color-ring: #FD3B00;
	--jf-font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/*
 * The pricing view's "Recommended" plan badge reuses .jf-badge-info (site.css
 * line 328) — the same class the tickets view uses for a genuine "answered"
 * status. Left alone, "Recommended" would render in the component's
 * untouched info-blue, which reads as a status chip rather than the
 * marketing highlight it actually is. Scoped to .jf-plan-badge specifically
 * (not .jf-badge-info generally) so the ticket status badge keeps its
 * correct blue/info meaning.
 */
body .joomforge .jf-plan-badge {
	background-color: color-mix(in srgb, var(--jf-color-primary) 16%, transparent);
	color: var(--jf-color-primary);
}

/*
 * JoomForge Docs (com_joomforgedocs) design-token override.
 *
 * Same architecture as JoomForge Manager above: the extension's own
 * media/com_joomforgedocs/css/site.css is scoped under .joomforgedocs and
 * themed through --jfd- custom properties it defines on that element, so
 * re-pointing them here re-skins every view (docs landing, space, article)
 * without per-view override files. The --bs- lines catch plain Bootstrap
 * defaults (e.g. links inside article bodies) that it never styles itself.
 *
 * --jfd-color-muted is deliberately a neutral grey rather than the page
 * background: the sidebar hover/active rows, table headers, inline code and
 * blockquotes all paint it ON TOP of the background, so the two must differ.
 */
body .joomforgedocs {
	--bs-primary: #FD3B00;
	--bs-primary-rgb: 253, 59, 0;
	--bs-link-color: #FD3B00;
	--bs-link-color-rgb: 253, 59, 0;
	--bs-link-hover-color: #E03500;
	--jfd-color-primary: #FD3B00;
	--jfd-color-primary-hover: #E03500;
	--jfd-color-on-primary: #FFFFFF;
	--jfd-color-accent: #FD3B00;
	--jfd-color-on-accent: #FFFFFF;
	--jfd-color-background: #F6F7FA;
	--jfd-color-foreground: #061229;
	--jfd-color-card: #FFFFFF;
	--jfd-color-card-foreground: #061229;
	--jfd-color-muted: #EEF0F5;
	--jfd-color-muted-foreground: #5B6472;
	--jfd-color-border: #E5E7EB;
	--jfd-font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* site.css hardcodes slate-900 for code blocks instead of using a token. */
body .joomforgedocs .jfd-content pre {
	background: #061229;
}

/*
 * site.css never sets a heading font for this component, so headings fall
 * through to the template's typography settings, which give h1 Inter but
 * h2-h6 "Noto Sans": two different heading fonts on one page. JoomForge
 * Manager pins all of its headings to its one sans token; do the same here.
 */
body .joomforgedocs :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--jfd-font-sans);
}

/* Links and inline code inside article prose otherwise get the template's
   blue link colour and Bootstrap's pink code colour. Links are scoped to
   prose elements so the prev/next cards keep their own styling. */
body .joomforgedocs .jfd-content :is(p, li, td, th, blockquote) a {
	color: var(--jfd-color-primary);
	text-decoration: none;
}

body .joomforgedocs .jfd-content :is(p, li, td, th, blockquote) a:hover {
	color: var(--jfd-color-primary-hover);
	text-decoration: underline;
}

body .joomforgedocs .jfd-content :not(pre) > code {
	color: var(--jfd-color-foreground);
}

/* Article grid: the 1fr content column can't shrink below its widest child
   (a code block), so it pushes the TOC column out past the layout's right
   edge. The space view's column already sets this; the article's didn't. */
body .joomforgedocs .jfd-content {
	min-width: 0;
}

/* A table wider than the column (easy on a phone) was simply clipped: the
   template hides horizontal page overflow, so nothing let it scroll. */
body .joomforgedocs .jfd-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Bootstrap's .card sets flex-direction: column, which stacks each search
   result's link and space pill instead of the intended one-line row. */
body .joomforgedocs .jfd-search-results__item {
	flex-direction: row;
}

/* Sidebar hover/active reuse the header dropdown's hover treatment. */
body .joomforgedocs .jfd-sidebar__link:hover,
body .joomforgedocs .jfd-sidebar__link--active {
	background: #FFF4F0;
	color: var(--jfd-color-primary);
}

body .joomforgedocs .jfd-sidebar summary::marker {
	color: var(--jfd-color-primary);
}

/* The component removes the input's own outline and adds no replacement. */
body .joomforgedocs .jfd-search-bar {
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body .joomforgedocs .jfd-search-bar:focus-within {
	border-color: var(--jfd-color-primary);
	box-shadow: 0 0 0 3px rgba(253, 59, 0, 0.15);
}

/*
 * Joomla's stock profile page prints each custom field's value as-is, so the
 * "Avatar" media field (jf-avatar) came out as a full-size <img> as wide as
 * the page. Cap any image in that list as a small round thumbnail.
 */
[id^="users-profile-custom-"] .list-group-item img {
	display: block;
	width: 96px;
	height: 96px;
	max-width: 100%;
	margin-top: 8px;
	border-radius: 50%;
	object-fit: cover;
}