/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page-ground[b-s2i2o7u8yo] {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--paper);
	/* Full-bleed bands use 100vw, which includes the scrollbar width; clip the overshoot. */
	overflow-x: clip;
}

.content-container[b-s2i2o7u8yo] {
	flex: 1 1 auto;
	padding: 28px 24px 64px;
}

/* Shown above a club's site when it is being previewed from the hub host, so the
   preview can never be mistaken for the club's own address. */
.preview-bar[b-s2i2o7u8yo] {
	background-color: var(--brass-600);
	color: #fff;
	font-size: 0.88rem;
	padding: 8px 24px;
	text-align: center;
}

.preview-bar a[b-s2i2o7u8yo] {
	color: #fff;
	margin-left: 8px;
}

.navbar-gsk[b-s2i2o7u8yo] {
	background-color: var(--navy-900);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-gsk .navbar-brand span[b-s2i2o7u8yo] {
	font-family: var(--serif);
	font-size: 1.15rem;
	letter-spacing: 0.01em;
}

.navbar-brand img[b-s2i2o7u8yo] {
	max-height: 38px;
	width: auto;
}

/* A dropdown in the bar — a menu group, or the account menu — opens like a tab pulled
   down from it: the open heading and its list share one colour and meet edge to edge,
   so the list plainly comes from that heading rather than floating over the page as a
   white card. ::deep because the account menu is a component of its own. */
.navbar-gsk[b-s2i2o7u8yo]  .dropdown > .dropdown-toggle {
	border-radius: 6px 6px 0 0;
}

.navbar-gsk[b-s2i2o7u8yo]  .dropdown > .dropdown-toggle::after {
	transition: transform 0.15s ease;
}

.navbar-gsk[b-s2i2o7u8yo]  .dropdown > .dropdown-toggle.show {
	color: #fff;
	background-color: var(--navy-700);
}

.navbar-gsk[b-s2i2o7u8yo]  .dropdown > .dropdown-toggle.show::after {
	transform: rotate(180deg);
}

/* Always a little wider than its heading, so that the list's corner beyond the heading
   is the rounded one, never the heading's square one. */
.navbar-gsk[b-s2i2o7u8yo]  .dropdown > .dropdown-menu {
	--bs-dropdown-min-width: max(10rem, calc(100% + 1.5rem));
	--bs-dropdown-spacer: 0;
	--bs-dropdown-bg: var(--navy-700);
	--bs-dropdown-border-width: 0;
	--bs-dropdown-border-radius: 0 6px 6px 6px;
	--bs-dropdown-item-padding-y: 0.4rem;
	--bs-dropdown-link-color: rgba(255, 255, 255, 0.88);
	--bs-dropdown-link-hover-color: #fff;
	--bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.1);
	--bs-dropdown-link-active-color: #fff;
	--bs-dropdown-link-active-bg: rgba(255, 255, 255, 0.16);
	--bs-dropdown-divider-bg: rgba(255, 255, 255, 0.18);
	box-shadow: 0 14px 30px rgba(8, 30, 53, 0.35);
}

/* Aligned to the heading's right edge, so that is the corner where the two meet. */
.navbar-gsk[b-s2i2o7u8yo]  .dropdown > .dropdown-menu-end {
	--bs-dropdown-border-radius: 6px 0 6px 6px;
}

@media (prefers-reduced-motion: no-preference) {
	.navbar-gsk[b-s2i2o7u8yo]  .dropdown > .dropdown-menu.show {
		animation: nav-dropdown-open-b-s2i2o7u8yo 0.12s ease-out;
	}
}

@keyframes nav-dropdown-open-b-s2i2o7u8yo {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* The folded-up phone menu is a list already, so there a dropdown's list is too: its
   entries indented under the heading, on the bar's own colour. A menu group's list is
   always out, its name a heading, so none of its pages is a second tap away. Only the
   club bar folds up; the hub's never does. */
@media (max-width: 991.98px) {
	.navbar-expand-lg.navbar-gsk[b-s2i2o7u8yo]  .dropdown > .dropdown-toggle.show {
		background: none;
	}

	.navbar-expand-lg.navbar-gsk[b-s2i2o7u8yo]  .dropdown > .dropdown-menu {
		--bs-dropdown-min-width: 0;
		margin: 0;
		padding: 0 0 0.35rem 0.9rem;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.navbar-expand-lg.navbar-gsk[b-s2i2o7u8yo]  .dropdown-item {
		padding: 0.4rem 0;
		color: rgba(255, 255, 255, 0.85);
	}

	.navbar-expand-lg.navbar-gsk[b-s2i2o7u8yo]  .dropdown-item:hover,
	.navbar-expand-lg.navbar-gsk[b-s2i2o7u8yo]  .dropdown-item:focus {
		color: #fff;
		background: none;
	}

	.navbar-expand-lg.navbar-gsk .nav-group > .dropdown-toggle[b-s2i2o7u8yo] {
		pointer-events: none;
		padding-bottom: 0.1rem;
		font-size: 0.78rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--gold-300);
	}

	.navbar-expand-lg.navbar-gsk .nav-group > .dropdown-toggle[b-s2i2o7u8yo]::after {
		display: none;
	}

	.navbar-expand-lg.navbar-gsk .nav-group > .dropdown-menu[b-s2i2o7u8yo] {
		display: block;
		position: static;
	}
}

/* ───── Footer ───── */
.site-footer[b-s2i2o7u8yo] {
	background-color: var(--navy-950);
	color: rgba(255, 255, 255, 0.82);
}

.footer-grid[b-s2i2o7u8yo] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 36px;
	padding: 44px 0 32px;
}

.site-footer h3[b-s2i2o7u8yo] {
	font-size: 1.05rem;
	color: #fff;
	margin-bottom: 12px;
}

/* ::deep on the paragraph and link rules: the contact details are rendered by
   ContactList, and a child component's markup never carries this file's scope attribute. */
.site-footer[b-s2i2o7u8yo]  p {
	margin: 0 0 10px;
	font-size: 0.92rem;
}

.footer-muted[b-s2i2o7u8yo] {
	color: rgba(255, 255, 255, 0.55);
}

.site-footer[b-s2i2o7u8yo]  a {
	color: var(--gold-300);
	text-decoration: none;
}

.site-footer[b-s2i2o7u8yo]  a:hover {
	text-decoration: underline;
}

.smallprint[b-s2i2o7u8yo] {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 16px 0 24px;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.45);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

/* The smallprint link stays as quiet as the copyright text beside it. */
.smallprint a[b-s2i2o7u8yo] {
	color: rgba(255, 255, 255, 0.45);
}

#blazor-error-ui[b-s2i2o7u8yo] {
	color-scheme: light only;
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

#blazor-error-ui .dismiss[b-s2i2o7u8yo] {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}