/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/**
 * App bottom navigation bar.
 *
 * Only rendered for requests detected as coming from the NPE mobile app,
 * but the stylesheet loads on every public page.
 *
 * Every rule is scoped under #npe-app-bar, so theme and Elementor styles
 * cannot win against it by class specificity alone.
 */
:root {
	--npe-app-bar-height: 56px;
	--npe-app-bar-background: #fff;
	--npe-app-bar-border: rgba(0, 0, 0, 0.08);
	--npe-app-bar-color: #02192A;
	--npe-app-bar-color-active: #02192A;
	--npe-app-bar-active-indicator: #02192A;
}

#npe-app-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	background: var(--npe-app-bar-background);
	border-top: 1px solid var(--npe-app-bar-border);
	padding-bottom: env(safe-area-inset-bottom);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

#npe-app-bar .npe-app-bar__list {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

#npe-app-bar .npe-app-bar__item {
	flex: 1 1 0;
	margin: 0;
	list-style: none;
}

#npe-app-bar .npe-app-bar__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	position: relative;
	box-sizing: border-box;
	height: var(--npe-app-bar-height);
	padding: 6px 4px;
	color: var(--npe-app-bar-color);
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

#npe-app-bar .npe-app-bar__link:focus-visible {
	outline: 2px solid var(--npe-app-bar-color-active);
	outline-offset: -3px;
}

#npe-app-bar .npe-app-bar__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
}

#npe-app-bar .npe-app-bar__icon svg {
	display: block;
	width: 26px;
	height: 26px;
}

#npe-app-bar .npe-app-bar__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#npe-app-bar .npe-app-bar__link.is-active {
	color: var(--npe-app-bar-color-active);
}

#npe-app-bar .npe-app-bar__link.is-active::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: 4px;
    background: var(--npe-app-bar-active-indicator);
}
/* Entries that are not wired up yet, such as Explore. */
#npe-app-bar .npe-app-bar__link.is-placeholder {
	opacity: 0.55;
}

/* Keep page content clear of the fixed bar. */
body.npe-app-mode {
	padding-bottom: calc(var(--npe-app-bar-height) + env(safe-area-inset-bottom));
}

/**
 * App header.
 *
 * Code-rendered header: logo (left), then a right cluster holding the
 * greeting, a thin divider, and the profile icon.
 *
 * Every rule is scoped under #npe-app-header for the same reason as the bar.
 */
:root {
	--npe-app-header-height: 56px;
	--npe-app-header-background: #0f1d2e;
	--npe-app-header-logo: #e8e6dc;
	--npe-app-header-color: #f5f5f2;
	--npe-app-header-divider: #ffffff;
}

#npe-app-header {
	position: sticky;
	top: 0;
	z-index: 9998;
	background: var(--npe-app-header-background);
	padding: 10px 0;
}

#npe-app-header .npe-app-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	height: var(--npe-app-header-height);
	padding: 0 16px;
}

#npe-app-header .npe-app-header__logo {
	flex: 0 0 auto;
	min-width: 0;
}

#npe-app-header .npe-app-header__logo img {
	width: 37px;
	height: auto;
	display: block;
	/* Render the (dark) logo as pure white on the dark header. */
	filter: brightness(0) invert(1);
}

#npe-app-header .npe-app-header__logo-text {
	color: var(--npe-app-header-logo);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
}

/* Right cluster: greeting, divider, profile icon. */
#npe-app-header .npe-app-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 1 auto;
	min-width: 0;
}

#npe-app-header .npe-app-header__greeting {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

#npe-app-header .npe-app-header__club-title {
	color: #AD8140;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

#npe-app-header .npe-app-header__greeting-line {
	color: var(--npe-app-header-color);
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#npe-app-header .npe-app-header__greeting-hi {
	font-weight: 400;
}

#npe-app-header .npe-app-header__greeting-name {
	font-weight: 700;
}

#npe-app-header .npe-app-header__divider {
	flex: 0 0 auto;
	align-self: center;
	width: 2px;
	height: 35px;
	background: var(--npe-app-header-divider);
}

#npe-app-header .npe-app-header__home,
#npe-app-header .npe-app-header__profile {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	color: var(--npe-app-header-color);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

#npe-app-header .npe-app-header__home:focus-visible,
#npe-app-header .npe-app-header__profile:focus-visible {
	outline: 2px solid var(--npe-app-header-color);
	outline-offset: -2px;
	border-radius: 4px;
}

#npe-app-header .npe-app-header__profile svg {
	display: block;
	width: 35px;
	height: 35px;
}

/* Home icon reuses the bottom-bar SVG (24px stroke icon), sized to sit beside the profile icon. */
#npe-app-header .npe-app-header__home svg {
	display: block;
	width: 26px;
	height: 26px;
}
/* Page-transition loader, shown by public JS on link taps in the app. */
#npe-app-loader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.7);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s;
}

#npe-app-loader.is-visible {
	opacity: 1;
	visibility: visible;
}

#npe-app-loader .npe-app-loader__spinner {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(2, 25, 42, 0.15);
	border-top-color: #02192A;
	border-radius: 50%;
	animation: npe-app-spin 0.8s linear infinite;
}

@keyframes npe-app-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-color-scheme: dark) {
	:root {
		--npe-app-bar-background: #fff;
		--npe-app-bar-border: rgba(0, 0, 0, 0.08);
		--npe-app-bar-color: #02192A;
		--npe-app-bar-color-active: #02192A;
	}
}