/* =================================================================================================
   11TH NATIONAL SCOUT JAMBOREE 2027 - OFFICIAL PUBLIC THEME
   Official palette:
   Orange #ea5515 | Navy #0d2642 | Blue #00a1e9 | Gold #f6ac00 | Red #c30f23 | Green #22ac39
================================================================================================= */
:root
{
	--jmb-orange: #ea5515;
	--jmb-navy: #0d2642;
	--jmb-blue: #00a1e9;
	--jmb-gold: #f6ac00;
	--jmb-red: #c30f23;
	--jmb-green: #22ac39;

	/* Existing frontend CSS compatibility variables */
	--jmb-green-dark: #0d2642;
	--jmb-green-deep: #081a2e;
	--jmb-green-soft: #fff2e9;
	--jmb-gold-dark: #c30f23;
	--jmb-purple: #00a1e9;

	--jmb-bg: #f7f8fa;
	--jmb-surface: #ffffff;
	--jmb-text: #1d2730;
	--jmb-muted: #68737d;
	--jmb-border: #dce3e8;
	--jmb-shadow: 0 14px 36px rgba(13, 38, 66, 0.13);
	--jmb-shadow-soft: 0 8px 24px rgba(13, 38, 66, 0.08);
}

/* -------------------------------------------------------------------------------------------------
   Jamboree artwork - subtle fixed right-side watermark
------------------------------------------------------------------------------------------------- */
body
{
	position: relative;
	isolation: isolate;
	background-color: var(--jmb-bg);
}

/*
	The old body watermark is disabled.
	The artwork is now attached directly to <main>, so section backgrounds cannot hide it.
*/
body::before
{
	display: none;
}

/* -------------------------------------------------------------------------------------------------
   LARGE JAMBOREE ARTWORK - TOP / LEFT OF THE PAGE CONTENT
   It is ABOVE section backgrounds but BELOW the actual text/cards.
------------------------------------------------------------------------------------------------- */
main
{
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

main::before
{
	content: "";
	position: absolute;
	z-index: 2;

	/* Start immediately at the TOP of the page content, directly below the main menu. */
	top: -120px;
	left: -45px;

	/* VERY LARGE - size is controlled from WIDTH, not viewport height. */
	width: 1120px;

	/*
		Extend the artwork layer all the way to the bottom of <main>.
		The PNG repeats vertically only when the page is taller than one artwork,
		so there is no blank strip at the bottom.
	*/
	bottom: 0;
	height: auto;

	background-image: url('../images/branding/jamboree-background.png');
	background-repeat: repeat-y;
	background-position: left top;
	background-size: 1120px auto;

	/* Visible light watermark - not the almost invisible old value. */
	opacity: 0.085;
	filter: saturate(0.88);

	pointer-events: none;
	user-select: none;
}

/*
	All normal page content stays in front of the artwork.
	The artwork therefore remains visible over white/light section backgrounds,
	but it never covers the text, cards, forms or tables.
*/
main .site-container
{
	position: relative;
	z-index: 3;
}

/*
	Home sections had their own opaque backgrounds.
	Keep them slightly translucent so the large artwork can be seen naturally.
*/
.home-welcome-section,
.process-section
{
	background-color: rgba(255, 255, 255, 0.90);
}

/*
	Portal pages use the main element itself as the page background.
	Keep the content/cards fully readable while the decoration remains visible at the left.
*/
.district-portal-main,
.troop-portal-main
{
	background-color: rgba(247, 249, 251, 0.82);
}

/* -------------------------------------------------------------------------------------------------
   Header / navigation / footer - dark Navy with Orange primary accent
------------------------------------------------------------------------------------------------- */
.site-topbar
{
	background: #081a2e;
	border-bottom-color: rgba(246, 172, 0, 0.25);
}

.site-topbar .site-icon
{
	/* color: var(--jmb-gold); */
}

.site-hero-overlay
{
	background:
		linear-gradient(90deg, rgba(13, 38, 66, 0.98) 0%, rgba(13, 38, 66, 0.92) 42%, rgba(13, 38, 66, 0.70) 69%, rgba(234, 85, 21, 0.24) 100%),
		linear-gradient(180deg, rgba(13, 38, 66, 0.08), rgba(13, 38, 66, 0.50));
}

.site-hero::after
{
	height: 7px;
	background: linear-gradient(
		90deg,
		#ea5515 0%, #ea5515 16.66%,
		#214f78 16.66%, #214f78 33.32%,
		#00a1e9 33.32%, #00a1e9 49.98%,
		#f6ac00 49.98%, #f6ac00 66.64%,
		#c30f23 66.64%, #c30f23 83.30%,
		#22ac39 83.30%, #22ac39 100%
	);
}

.site-hero-content
{
	position: relative;
	gap: 28px;
}

.site-hero-logo
{
	width: 190px;
	height: 190px;
	object-fit: contain;
	filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28));
}

.site-hero-copy
{
	flex: 1 1 auto;
	min-width: 0;
}

.site-hero-kicker
{
	color: var(--jmb-gold);
}

.site-hero-copy h1
{
	text-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}

.site-hero-copy h1 span
{
	color: var(--jmb-gold);
}

.site-hero-page-label
{
	border-left-color: var(--jmb-orange);
	color: var(--jmb-navy);
	background: rgba(255, 255, 255, 0.94);
}

.site-hero-legacy
{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	border: 1px solid rgba(255, 255, 255, 0.58);
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.20);
	backdrop-filter: blur(6px);
}

.site-hero-legacy img
{
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.site-hero-legacy-home
{
	width: 250px;
	padding: 13px 15px;
	border-radius: 18px;
}

.site-hero-legacy-small
{
	position: absolute;
	top: 14px;
	right: 22px;
	z-index: 4;

	width: 132px;
	margin: 0;
	padding: 7px 9px;
	border-radius: 12px;

	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 10px 24px rgba(13, 38, 66, 0.20);
}

.site-nav
{
	background: linear-gradient(90deg, #081a2e, var(--jmb-navy));
	box-shadow: 0 6px 22px rgba(13, 38, 66, 0.28);
}

.site-nav-brand img
{
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.site-nav-menu a.active::after
{
	background: var(--jmb-orange);
}

.site-nav-menu a:hover,
.site-nav-menu a.active
{
	background: rgba(234, 85, 21, 0.16);
}

.site-footer
{
	background: linear-gradient(135deg, #081a2e, var(--jmb-navy));
}

.site-footer-bottom
{
	border-top-color: rgba(246, 172, 0, 0.18);
	background: rgba(0, 0, 0, 0.14);
}

.footer-badge
{
	border-color: rgba(246, 172, 0, 0.28);
	background: rgba(246, 172, 0, 0.10);
}

.site-footer-links a::before
{
	color: var(--jmb-orange);
}

/* -------------------------------------------------------------------------------------------------
   Public headings / buttons / content accents
------------------------------------------------------------------------------------------------- */
.section-kicker,
.portal-panel-kicker,
.registration-step-label
{
	color: var(--jmb-orange);
}

.section-heading h2,
.page-heading-block h2,
.home-welcome-copy h2,
.registration-info-copy h2,
.district-portal-heading h2,
.portal-panel-header h3,
.district-access-title h3
{
	color: var(--jmb-navy);
}

.home-welcome-copy h3
{
	color: var(--jmb-blue);
}

.title-divider
{
	color: var(--jmb-orange);
}

.button-primary,
.portal-btn-primary
{
	color: #ffffff;
	background: linear-gradient(135deg, var(--jmb-orange), #f26b28);
	box-shadow: 0 9px 22px rgba(234, 85, 21, 0.24);
}

.button-primary:hover,
.portal-btn-primary:hover:not(:disabled)
{
	color: #ffffff;
	background: linear-gradient(135deg, #f06a2c, var(--jmb-orange));
	box-shadow: 0 12px 27px rgba(234, 85, 21, 0.30);
}

.portal-btn-danger
{
	background: var(--jmb-red);
}

.service-card-blue
{
	--card-color: var(--jmb-blue);
}

.service-card-orange
{
	--card-color: var(--jmb-orange);
}

.service-card-green
{
	--card-color: var(--jmb-green);
}

.service-card-gold
{
	--card-color: var(--jmb-gold);
}

.service-icon
{
	color: var(--card-color);
}

.home-stats-section
{
	background:
		linear-gradient(135deg, rgba(8, 26, 46, 0.98), rgba(13, 38, 66, 0.94)),
		url('../images/banners/home-banner.jpg') center / cover;
}

.stat-icon
{
	color: var(--jmb-gold);
	background: rgba(246, 172, 0, 0.14);
}

.process-number
{
	color: rgba(234, 85, 21, 0.11);
}

.process-icon,
.summary-icon
{
	color: var(--jmb-orange);
	background: #fff1e9;
}

/* -------------------------------------------------------------------------------------------------
   Portal panels / forms / DataTables
------------------------------------------------------------------------------------------------- */
.district-access-card,
.portal-panel,
.registration-access-card,
.table-panel
{
	border-color: var(--jmb-border);
	box-shadow: var(--jmb-shadow-soft);
}

.district-access-card
{
	border-top-color: var(--jmb-orange);
}

.portal-panel-badge
{
	border-color: rgba(0, 161, 233, 0.28);
	color: var(--jmb-navy);
	background: rgba(0, 161, 233, 0.10);
}

.district-access-icon
{
	color: #ffffff;
	background: linear-gradient(145deg, var(--jmb-navy), var(--jmb-blue));
	box-shadow: 0 9px 22px rgba(13, 38, 66, 0.24);
}

.portal-control:focus
{
	border-color: var(--jmb-blue);
	box-shadow: 0 0 0 3px rgba(0, 161, 233, 0.13);
}

.portal-field-icon:hover,
.portal-field-icon:focus
{
	background: var(--jmb-orange);
}

.district-session-bar
{
	border-color: #dce2e7;
	border-left-color: var(--jmb-orange);
	background: linear-gradient(90deg, rgba(255,255,255,.97), rgba(255,248,244,.97));
}

.portal-inline-warning
{
	border-color: rgba(246, 172, 0, 0.42);
	color: #654500;
	background: #fff8e6;
}

.portal-message-success
{
	border-color: rgba(34, 172, 57, 0.30);
	color: #12672c;
	background: #eef9f0;
}

.portal-message-error
{
	border-color: rgba(195, 15, 35, 0.28);
	color: #89101f;
	background: #fff0f2;
}

.portal-table-responsive .dataTables_wrapper button.dt-button
{
	border-color: var(--jmb-navy);
	color: #ffffff;
	background: var(--jmb-navy);
}

.portal-table-responsive .dataTables_wrapper button.dt-button:hover
{
	border-color: var(--jmb-orange);
	color: #ffffff;
	background: var(--jmb-orange);
}

.portal-table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.portal-table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover
{
	border-color: var(--jmb-orange);
	color: #ffffff !important;
	background: var(--jmb-orange);
}

.portal-action-edit
{
	background: var(--jmb-blue);
}

.portal-action-delete
{
	background: var(--jmb-red);
}

.portal-action-qr,
.portal-copy-visible
{
	background: var(--jmb-green) !important;
}

.portal-copy-visible:hover,
.portal-copy-visible:focus
{
	background: #16852a !important;
}

/* -------------------------------------------------------------------------------------------------
   Foreign / account sections
------------------------------------------------------------------------------------------------- */
.foreign-request-heading h4,
.participant-account-card strong,
.participant-account-help strong
{
	color: var(--jmb-navy);
}

.foreign-request-total,
.participant-account-code
{
	color: var(--jmb-orange);
}

.foreign-grand-total
{
	background: var(--jmb-navy);
	border-left: 5px solid var(--jmb-orange);
}

.foreign-required
{
	color: var(--jmb-red);
}

/* -------------------------------------------------------------------------------------------------
   Responsive branding
------------------------------------------------------------------------------------------------- */
@media (max-width: 1120px)
{
	.site-hero-logo
	{
		width: 165px;
		height: 165px;
	}

	.site-hero-legacy-home
	{
		width: 210px;
	}

	.site-hero-legacy-small
	{
		top: 12px;
		right: 18px;
		width: 112px;
	}
}

@media (max-width: 860px)
{
	.site-hero-content
	{
		flex-wrap: wrap;
		gap: 20px;
	}

	.site-hero-copy
	{
		flex: 1 1 58%;
	}

	.site-hero-legacy
	{
		margin-left: 0;
	}

	.site-hero-legacy-home
	{
		width: 190px;
	}

	.site-hero-legacy-small
	{
		top: 10px;
		right: 14px;
		width: 105px;
	}
}

@media (max-width: 640px)
{
	main::before
	{
		top: -55px;
		left: -55px;
		width: 720px;
		bottom: 0;
		height: auto;
		background-size: 720px auto;
		opacity: 0.070;
	}

	.site-hero-content
	{
		justify-content: center;
		text-align: center;
	}

	.site-hero-logo
	{
		width: 138px;
		height: 138px;
	}

	.site-hero-copy
	{
		flex: 1 1 100%;
	}

	.site-hero-legacy
	{
		margin: 2px auto 0;
	}

	.site-hero-legacy-home
	{
		width: 180px;
	}

	.site-hero-legacy-small
	{
		top: 9px;
		right: 10px;
		width: 96px;
	}

	.site-nav-brand span
	{
		font-size: 0.9rem;
	}
}

/* -------------------------------------------------------------------------------------------------
   LARGE ARTWORK RESPONSIVE SIZE
------------------------------------------------------------------------------------------------- */
@media (max-width: 1120px) and (min-width: 861px)
{
	main::before
	{
		top: -95px;
		left: -40px;
		width: 980px;
		bottom: 0;
		height: auto;
		background-size: 980px auto;
		opacity: 0.080;
	}
}

@media (max-width: 860px) and (min-width: 641px)
{
	main::before
	{
		top: -75px;
		left: -35px;
		width: 840px;
		bottom: 0;
		height: auto;
		background-size: 840px auto;
		opacity: 0.075;
	}
}

/* Existing colours are intentionally unchanged in this revision. */



/* =================================================================================================
   JAMBOREE ARTWORK HORIZONTAL POSITION REFINEMENT
   Shifted right so the complete left-side artwork remains visible instead of being heavily cropped.
================================================================================================= */


/* =================================================================================================
   JAMBOREE ARTWORK FULL-PAGE HEIGHT FIX
   The large left artwork now spans the full <main> height and repeats vertically only when needed.
   This removes the blank lower-left area on long pages.
================================================================================================= */


/* =================================================================================================
   19.08.2026 - FINAL FRONTEND VISUAL REFINEMENT
   - Large left Jamboree artwork made lighter.
   - 115 Years mark positioned at top-right on non-home pages.
   - Second colour-strip segment changed to lighter Navy so it does not disappear into the nav/header.
================================================================================================= */

/* =================================================================================================
   19.08.2026 - JAMBOREE PATTERN STRIP FOR TOP BAR + FOOTER BOTTOM
   Uses the user's uploaded Footer.png artwork.
================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   TOP OF PAGE
   Keep the existing content, but use the Jamboree pattern as the full top-bar background.
------------------------------------------------------------------------------------------------- */
.site-topbar
{
	background: #ea5515;
	border-bottom: 1px solid rgba(13, 38, 66, 0.22);
	box-shadow: 0 2px 7px rgba(13, 38, 66, 0.16);
}

.site-topbar,
.site-topbar p,
.site-topbar a,
.site-topbar .site-icon
{
	text-shadow: none;
	font-weight: 700;
}

/* -------------------------------------------------------------------------------------------------
   FOOTER BOTTOM
   Apply the same Jamboree strip only to the lower copyright bar, not the whole footer.
------------------------------------------------------------------------------------------------- */
.site-footer-bottom
{
	background-color: #c30f23;
	background-image:
		linear-gradient(rgba(13, 38, 66, 0.46), rgba(13, 38, 66, 0.46)),
		url('../images/branding/jamboree-pattern-strip.png');
	background-repeat: repeat-x;
	background-position: center center;
	background-size: auto 44px;

	border-top: 1px solid rgba(255, 255, 255, 0.18);
	min-height: 44px;
}

/*
	Clean footer text treatment:
	No boxes around the copyright text.
	A single subtle Navy overlay is applied across the whole patterned strip,
	then the text stays simple white with a small dark shadow.
*/
.site-footer-bottom,
.site-footer-bottom p,
.site-footer-bottom span,
.site-footer-bottom a
{
	color: #ffffff;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(8, 26, 46, 0.95);
}

.site-footer-bottom .site-container
{
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-left: 16px;
	padding-right: 16px;
}

/* -------------------------------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------------------------------- */
@media (max-width: 640px)
{
	.site-footer-bottom
	{
		min-height: 40px;
		background-size: auto 40px;
	}

	.site-footer-bottom .site-container
	{
		min-height: 40px;
		gap: 8px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.site-footer-bottom,
	.site-footer-bottom p,
	.site-footer-bottom span,
	.site-footer-bottom a
	{
		font-size: 0.78rem;
	}
}



/* =================================================================================================
   19.08.2026 - TOP BAR + FOOTER BOTTOM REFINEMENT
   - Top pattern removed; official Orange #ea5515 used.
   - Top text/icons changed to dark Navy #0d2642.
   - Footer pattern height reduced to 46px desktop / 42px mobile.
   - Footer text made substantially more readable.
================================================================================================= */


/* =================================================================================================
   19.08.2026 - CLEAN FOOTER TEXT REFINEMENT
   - Removed individual text boxes.
   - Darkened the entire pattern strip slightly for consistent contrast.
   - White bold text + subtle Navy shadow.
   - Compact 44px desktop / 40px mobile height.
================================================================================================= */

/* =================================================================================================
   20.08.2026 - 115 YEARS EXCELLENCE LOGO - TRANSPARENT / HIGH VISIBILITY
   Removes the CSS white card behind the anniversary artwork and improves visibility on the hero.
================================================================================================= */

/* Remove the white card, border and blur behind the logo. */
.site-hero-legacy,
.site-hero-legacy-home,
.site-hero-legacy-small
{
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/*
	The uploaded 115 Years PNG already contains transparency.
	Keep the actual artwork directly on the hero and make the grey/red lettering clearer.
*/
.site-hero-legacy img
{
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;

	filter:
		brightness(1.28)
		contrast(1.12)
		drop-shadow(0 2px 2px rgba(0, 0, 0, 0.95))
		drop-shadow(0 0 6px rgba(255, 255, 255, 0.18));
}

/* Home page: slightly larger so the full anniversary wording is easier to read. */
.site-hero-legacy-home
{
	width: 285px;
	padding: 0;
	border-radius: 0;
}

/* Other pages: keep it compact but readable at the top-right. */
.site-hero-legacy-small
{
	width: 150px;
	padding: 0;
	border-radius: 0;
}

@media (max-width: 1120px)
{
	.site-hero-legacy-home
	{
		width: 245px;
	}

	.site-hero-legacy-small
	{
		width: 132px;
	}
}

@media (max-width: 860px)
{
	.site-hero-legacy-home
	{
		width: 215px;
	}

	.site-hero-legacy-small
	{
		width: 118px;
	}
}

@media (max-width: 640px)
{
	.site-hero-legacy-home
	{
		width: 185px;
	}

	.site-hero-legacy-small
	{
		width: 100px;
	}
}

/* =================================================================================================
   20.08.2026 - 115 YEARS LOGO SAME SIZE ON ALL PAGES + SHINING GREY TEXT
================================================================================================= */

/*
	Use the SAME anniversary-logo size on Home and every other public page.
*/
.site-hero-legacy-home,
.site-hero-legacy-small
{
	width: 245px;
	padding: 0;
	border-radius: 0;
}

/*
	The source is a single PNG, so CSS cannot change only the grey pixels separately.
	This treatment keeps the red "115" red while adding a clean white/silver glow that
	makes the grey lettering look brighter and more polished on the dark hero image.
*/
.site-hero-legacy img
{
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;

	/*
		The silver shine is now baked directly into the PNG.
		No glow, no CSS mask and no animation are required.
	*/
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.88));
}

/* Same size principle retained responsively. */
@media (max-width: 1120px)
{
	.site-hero-legacy-home,
	.site-hero-legacy-small
	{
		width: 220px;
	}
}

@media (max-width: 860px)
{
	.site-hero-legacy-home,
	.site-hero-legacy-small
	{
		width: 190px;
	}
}

@media (max-width: 640px)
{
	.site-hero-legacy-home,
	.site-hero-legacy-small
	{
		width: 155px;
	}
}



/* =================================================================================================
   20.08.2026 - 115 YEARS STRONGER SILVER SHINE
   Earlier look retained; grey lettering gets stronger white/silver glow.
================================================================================================= */


/* =================================================================================================
   20.08.2026 - 115 YEARS CLEAN SHARP READABILITY FIX
   Removed the heavy white glow that caused smudging.
   Grey wording is brighter/clearer with sharp edges; red 115 remains strong.
================================================================================================= */


/* =================================================================================================
   20.08.2026 - 115 YEARS BAKED-IN SILVER SHINE
   The grey wording is now metallic silver inside the PNG itself.
   This avoids browser mask/animation issues and keeps the red 115/Years unchanged.
================================================================================================= */

/* =================================================================================================
   20.08.2026 - 115 YEARS LOGO FINAL SIZE / POSITION SYNC
   - Slightly larger.
   - Same size on Home and all other public pages.
   - Same top-right position on Home and all other public pages.
   - Existing other-page position is preserved and used as the common position.
================================================================================================= */

/*
	The hero content already has position:relative.
	Use the existing INNER-PAGE top-right coordinates for BOTH classes,
	so the other pages do not move.
*/
.site-hero-legacy-home,
.site-hero-legacy-small
{
	position: absolute;
	top: 14px;
	right: 22px;
	left: auto;
	z-index: 4;

	width: 275px;
	max-width: 275px;

	margin: 0;
	padding: 0;
	border-radius: 0;

	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Keep the silver PNG sharp. */
.site-hero-legacy-home img,
.site-hero-legacy-small img
{
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Same size + same place at each responsive breakpoint. */
@media (max-width: 1120px)
{
	.site-hero-legacy-home,
	.site-hero-legacy-small
	{
		top: 12px;
		right: 18px;

		width: 245px;
		max-width: 245px;
	}
}

@media (max-width: 860px)
{
	.site-hero-legacy-home,
	.site-hero-legacy-small
	{
		top: 10px;
		right: 14px;

		width: 215px;
		max-width: 215px;
	}
}

@media (max-width: 640px)
{
	.site-hero-legacy-home,
	.site-hero-legacy-small
	{
		top: 9px;
		right: 10px;

		width: 170px;
		max-width: 170px;
	}
}

/* =================================================================================================
   20.08.2026 - 115 YEARS LOGO VERTICAL CENTER ALIGNMENT
   Keep the same size and right-side position on every public page.
   Only the vertical position is changed so the logo sits exactly between hero top and bottom.
================================================================================================= */

.site-hero-legacy-home,
.site-hero-legacy-small
{
	top: 50%;
	transform: translateY(-50%);
}

/* Keep vertical centering identical at every responsive breakpoint. */
@media (max-width: 1120px)
{
	.site-hero-legacy-home,
	.site-hero-legacy-small
	{
		top: 50%;
		transform: translateY(-50%);
	}
}

@media (max-width: 860px)
{
	.site-hero-legacy-home,
	.site-hero-legacy-small
	{
		top: 50%;
		transform: translateY(-50%);
	}
}

@media (max-width: 640px)
{
	.site-hero-legacy-home,
	.site-hero-legacy-small
	{
		top: 50%;
		transform: translateY(-50%);
	}
}

/* =================================================================================================
   20.08.2026 - FRONTEND NAVIGATION / ACCESS HUBS
   Main navigation:
   Home | Registration | Log In
================================================================================================= */

.portal-hub-main
{
	padding-top: 62px;
	padding-bottom: 82px;
}

.portal-hub-heading
{
	margin-bottom: 28px;
}

.portal-hub-grid
{
	display: grid;
	gap: 22px;
	margin: 0 auto;
}

.portal-hub-grid-three
{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-hub-grid-two
{
	max-width: 930px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-hub-card
{
	min-height: 320px;
}

.portal-hub-account-card
{
	min-height: 300px;
}

.portal-hub-role
{
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	margin-bottom: 17px;
	padding: 4px 9px;
	border: 1px solid color-mix(in srgb, var(--card-color) 28%, white);
	border-radius: 999px;
	background: color-mix(in srgb, var(--card-color) 9%, white);
	color: var(--card-color);
	font-size: 0.68rem;
	font-weight: 850;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.portal-hub-scout-note
{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 15px;
	max-width: 1080px;
	margin: 0 auto 26px;
	padding: 15px 17px;
	border: 1px solid rgba(234, 85, 21, 0.26);
	border-left: 5px solid #ea5515;
	border-radius: 11px;
	background: rgba(255, 248, 244, 0.96);
	box-shadow: 0 8px 20px rgba(13, 38, 66, 0.07);
}

.portal-hub-scout-note-icon
{
	width: 45px;
	height: 45px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #0d2642;
	color: #ffffff;
}

.portal-hub-scout-note-icon .site-icon
{
	width: 23px;
	height: 23px;
}

.portal-hub-scout-note strong,
.portal-hub-scout-note span
{
	display: block;
}

.portal-hub-scout-note strong
{
	margin-bottom: 2px;
	color: #0d2642;
	font-size: 0.92rem;
}

.portal-hub-scout-note span
{
	color: #586875;
	font-size: 0.83rem;
	line-height: 1.5;
}

.portal-hub-note-button
{
	margin-top: 0;
	white-space: nowrap;
}

.portal-hub-help
{
	max-width: 930px;
	margin: 22px auto 0;
	padding: 13px 15px;
	border: 1px solid rgba(13, 38, 66, 0.12);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.90);
	color: #66737e;
	font-size: 0.80rem;
	line-height: 1.55;
	text-align: center;
}

.portal-hub-help strong
{
	color: #0d2642;
}

@media (max-width: 900px)
{
	.portal-hub-grid-three
	{
		grid-template-columns: 1fr;
	}

	.portal-hub-grid-two
	{
		grid-template-columns: 1fr;
	}

	.portal-hub-card,
	.portal-hub-account-card
	{
		min-height: 270px;
	}

	.portal-hub-scout-note
	{
		grid-template-columns: auto minmax(0, 1fr);
	}

	.portal-hub-note-button
	{
		grid-column: 1 / -1;
		justify-self: start;
	}
}

@media (max-width: 640px)
{
	.portal-hub-main
	{
		padding-top: 48px;
		padding-bottom: 60px;
	}

	.portal-hub-scout-note
	{
		grid-template-columns: 1fr;
		text-align: left;
	}

	.portal-hub-note-button
	{
		width: 100%;
	}

	.portal-hub-scout-note-icon
	{
		width: 41px;
		height: 41px;
	}
}