/*
 * RGN site-wide adaptation of Eventually by HTML5 UP (AJ).
 * Source: https://html5up.net/eventually
 * License: https://creativecommons.org/licenses/by/3.0/
 * Adapted from the supplied main.scss/main.css, background, type, form, button,
 * and icon components. RGN navigation, layouts, controls, and brand colors stay
 * authoritative. The supplied Google Fonts import is intentionally omitted;
 * Font Awesome assets remain local under this template directory.
 */
@import url('fontawesome-all.min.css');

:root {
	--rgn-template-red: var(--red, #f12632);
	--rgn-template-panel: rgba(16, 16, 21, .9);
	--rgn-template-border: rgba(255, 255, 255, .17);
	--rgn-template-transition: .2s ease-in-out;
}

html {
	background: #0b0b0e;
	scroll-behavior: smooth;
}

body,
body.admin-body {
	position: relative;
	isolation: isolate;
	background: transparent;
}

/* Adapted from the template's layered slideshow background. */
#bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: .52;
	pointer-events: none;
	transition: opacity 2s ease-in-out;
}

#bg::after {
	position: absolute;
	inset: 0;
	z-index: 3;
	background:
		linear-gradient(180deg, rgba(7, 7, 10, .52) 0%, rgba(7, 7, 10, .74) 54%, rgba(7, 7, 10, .9) 100%),
		linear-gradient(90deg, rgba(8, 8, 11, .2), rgba(8, 8, 11, .08));
	content: "";
}

#bg > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 150%;
	height: 100%;
	background-position: center;
	background-size: cover;
	opacity: 0;
	visibility: hidden;
	transition: opacity 3s ease;
}

#bg > div.visible {
	z-index: 1;
	visibility: visible;
	opacity: 1;
	animation: rgn-template-pan 45s linear infinite;
}

#bg > div.visible.top {
	z-index: 2;
}

@keyframes rgn-template-pan {
	from { transform: translateX(0); }
	to { transform: translateX(-25%); }
}

body.is-preload * ,
body.is-preload *::before,
body.is-preload *::after {
	animation: none !important;
	transition: none !important;
}

body.is-preload #bg {
	opacity: 0;
}

/* Template typography and focus treatment, tuned to RGN's existing scale. */
body,
input,
select,
textarea,
button {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: -.01em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 800;
	text-wrap: balance;
}

a,
button,
.button,
.btn {
	transition: color var(--rgn-template-transition), background-color var(--rgn-template-transition), border-color var(--rgn-template-transition), box-shadow var(--rgn-template-transition), transform var(--rgn-template-transition);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid #ff7b82;
	outline-offset: 4px;
}

.header-inner nav a,
.admin-nav a {
	display: inline-flex;
	align-items: center;
	gap: .55em;
}

.header-inner nav .fa,
.header-inner nav .fas,
.header-inner nav .far,
.header-inner nav .fab,
.admin-nav .fa,
.admin-nav .fas,
.admin-nav .far,
.admin-nav .fab,
.footer-bottom .fa,
.footer-bottom .fas,
.footer-bottom .far,
.footer-bottom .fab {
	flex: 0 0 auto;
	font-size: .9em;
	opacity: .9;
}

.header-inner nav .fa,
.header-inner nav .fas,
.admin-nav .fa,
.admin-nav .fas {
	color: #ff6972;
}

.site-header,
.subnav,
footer,
.admin-top,
.admin-footer {
	background-color: rgba(8, 8, 11, .88);
	backdrop-filter: blur(14px);
}

.site-header,
.subnav,
.admin-top,
.admin-footer {
	border-color: var(--rgn-template-border);
}

/* Keep positioned menus above page content and outside the subnav blur stack. */
.site-header,
.admin-top {
	position: relative;
	z-index: 120;
}

.subnav {
	position: relative;
	z-index: 110;
	backdrop-filter: none;
}

/* Give the dense admin navigation its own full-width row on desktop. */
@media (min-width: 1101px) {
	.admin-top {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "brand actions" "nav nav";
		align-items: center;
		gap: 0 24px;
		flex-wrap: nowrap;
		padding: 8px 28px 0;
	}

	.admin-brand {
		grid-area: brand;
		padding: 8px 0 12px;
	}

	.admin-nav-menu {
		grid-area: nav;
		width: 100%;
		min-width: 0;
		order: initial;
	}

	.admin-nav {
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		padding: 0 0 8px;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.admin-nav a {
		flex: 0 0 auto;
		padding: 10px 0 12px;
	}

	.admin-actions {
		grid-area: actions;
		width: auto;
		flex-wrap: nowrap;
		justify-content: flex-end;
		padding: 0 0 12px;
	}
}

@media (min-width: 761px) and (max-width: 1100px) {
	.admin-top {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		flex-wrap: nowrap;
		padding: 8px 20px;
	}

	.admin-brand {
		padding: 8px 0 12px;
	}

	.admin-actions {
		width: 100%;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0 0 10px;
	}

	.admin-nav-menu {
		width: 100%;
		order: initial;
	}

	.admin-nav {
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		padding: 4px 0 10px;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.admin-nav a {
		flex: 0 0 auto;
		padding: 8px 0 10px;
	}
}

/* Shared glass-panel treatment; existing layout and status accents remain. */
.card,
.portal,
.plan,
.community-card,
.member-card,
.lfg-card,
.gallery-card,
.event-item,
.status-card,
.feature-panel,
.callout,
.server-panel,
.community-form,
.customer-form,
.feed-form,
.feed-post,
.feed-empty,
.service-card,
.ticket-card,
.notice-card,
.app-section,
.admin-card,
.admin-count,
.login-card,
.admin-note,
.rgn-control-card,
.rgn-console-card,
.rgn-settings-card {
	border-radius: 4px 20px 4px 20px;
	background-color: var(--rgn-template-panel);
	box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
	backdrop-filter: blur(8px);
}

.portal,
.community-card,
.member-card,
.gallery-card,
.event-item,
.status-card,
.feed-post,
.admin-card,
.login-card {
	transition: background-color var(--rgn-template-transition), border-color var(--rgn-template-transition), box-shadow var(--rgn-template-transition), transform var(--rgn-template-transition);
}

.portal:hover,
.community-card:hover,
.member-card:hover,
.gallery-card:hover {
	box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

/* The template's outlined controls, adapted to the established red accent. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
	border-color: rgba(255, 255, 255, .27);
	border-radius: 5px 13px 5px 13px;
	background-color: rgba(9, 9, 13, .78);
	transition: border-color var(--rgn-template-transition), background-color var(--rgn-template-transition), box-shadow var(--rgn-template-transition);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
select:focus,
textarea:focus {
	border-color: #ff525b;
	background-color: rgba(18, 18, 22, .96);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--rgn-template-red);
}

.button,
.btn,
.feed-mini,
.copy-btn,
.admin-nav-toggle,
.admin-count,
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
	border-radius: 3px 13px 3px 13px;
}

.button:hover,
.btn:hover,
.feed-mini:hover,
.copy-btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:not(:disabled):hover {
	transform: translateY(-1px);
}

.btn.danger:hover,
.account-drop button.danger:hover,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
	transform: none;
}

.template-attribution {
	max-width: 1176px;
	margin: 22px auto 0;
	color: #85858f;
	font-size: .72rem;
	line-height: 1.6;
}

.template-attribution a {
	color: #c6c6cd;
	text-decoration: underline;
	text-decoration-color: #7f3339;
	text-underline-offset: 3px;
}

.template-attribution a:hover {
	color: #fff;
}

.admin-footer .template-attribution {
	flex-basis: 100%;
	max-width: none;
	margin: 0;
}

@media (max-width: 1280px) {
	#bg > div.visible {
		animation-duration: 29.25s;
	}
}

@media (max-width: 736px) {
	#bg > div.visible {
		animation-duration: 18s;
	}

	.template-attribution {
		padding-right: 20px;
		padding-left: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	#bg > div,
	#bg > div.visible {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}

	#bg > div:not(:first-child) {
		display: none !important;
	}

	#bg > div:first-child {
		visibility: visible;
		opacity: 1;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
	}
}