/*
 Theme Name:   Fyscoach App
 Theme URI:    https://fyscoach.se
 Description:  Child theme för Astra – app-landningssida (Floorball Performance)
 Author:       Fyscoach
 Template:     astra
 Version:      1.0.0
 Text Domain:  fyscoach-app
*/

/* Grundstilar ärver från Astra. App-landningssidan använder app-landing.css. */

/* Kritiska temastilar så att mörkt tema alltid syns när .fp-app-wrap finns (laddas med barn-temat) */
.fp-app-wrap {
	background: var(--brand-bg, #0a0a0a) !important;
	color: #ffffff !important;
	--fp-bg: var(--brand-bg, #0a0a0a);
	--fp-bg-card: var(--brand-surface, #1a1a1a);
	--fp-accent: var(--brand-accent, #D4D41E);
	--fp-text: #ffffff;
	--fp-text-muted: rgba(255, 255, 255, 0.62);
	--fp-text-subtle: rgba(255, 255, 255, 0.45);
	min-height: 100vh;
	box-sizing: border-box;
}
.fp-app-wrap .fp-app-header { background: var(--brand-bg, #0a0a0a) !important; }
.fp-app-wrap .fp-app-hero-title,
.fp-app-wrap .fp-app-hero-tagline { color: #ffffff; }
.fp-app-wrap .fp-app-hero-line.fp-app-accent,
.fp-app-wrap .fp-app-hero-line .fp-app-accent { color: var(--brand-accent, #D4D41E); }
.fp-app-wrap .fp-app-role-question .fp-app-accent { color: var(--brand-accent, #D4D41E); }
.fp-app-wrap .fp-app-role-btn { background: transparent; color: var(--fp-text-muted); border: none; }
.fp-app-wrap .fp-app-role-btn.is-active { background: var(--brand-accent, #D4D41E); color: var(--brand-bg, #0a0a0a); }
.fp-app-wrap .fp-app-card { background: var(--brand-surface, #1a1a1a); color: #ffffff; border-color: rgba(181,255,0,0.3); }
.fp-app-wrap .fp-app-btn-primary { background: var(--brand-accent, #D4D41E); color: var(--brand-bg, #0a0a0a); }
.fp-app-wrap .fp-app-btn-primary.fp-app-btn-apply { background: transparent; color: #ffffff; border-color: var(--brand-accent, #D4D41E); }
.fp-app-wrap .fp-app-btn-outline { background: transparent; color: var(--brand-accent, #D4D41E); border: 2px solid var(--brand-accent, #D4D41E); }
.fp-app-wrap .fp-app-nav-link { color: var(--fp-text-subtle); }
.fp-app-wrap .fp-app-btn-login { background: var(--brand-accent, #D4D41E); color: var(--brand-bg, #0a0a0a); }
html:has(.fp-app-wrap),
body:has(.fp-app-wrap) {
	background: var(--brand-bg, #0a0a0a) !important;
	color-scheme: dark;
}
body:has(.fp-app-wrap) #page.site,
body:has(.fp-app-wrap) #content.site-content {
	background: transparent !important;
}

/* ── Bottennavigering (app tab-bar): fyra kolumner; måste funka på smala iPhone utan clip/overflow. */
/* --fp-android-edge-bottom sätts av JS i Capacitor-Android-appen (Android 15 edge-to-edge
   tvingar WebView bakom gestpilen och env(safe-area-inset-bottom) returnerar 0 där). På
   iPhone och i webbläsare är variabeln tom → max() faller tillbaka på env() som vanligt. */
body.fp-app-has-bottom-nav {
	--fp-bottom-nav-h: 58px;
	--fp-bottom-nav-side-pad: 8px;
	--fp-bottom-safe: max(env(safe-area-inset-bottom, 0px), var(--fp-android-edge-bottom, 0px));
	padding-bottom: calc(var(--fp-bottom-nav-h) + var(--fp-bottom-safe)) !important;
}
.fp-app-bottom-nav {
	position: fixed;
	bottom: var(--fp-bottom-safe, 0px);
	inset-inline: 0;
	width: 100%;
	z-index: 9999;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	column-gap: 0;
	box-sizing: border-box;
	background: var(--brand-surface-2, #111111);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	height: var(--fp-bottom-nav-h, 58px);
	padding: 0 calc(var(--fp-bottom-nav-side-pad, 8px) + max(0px, env(safe-area-inset-right, 0px))) 0 calc(var(--fp-bottom-nav-side-pad, 8px) + max(0px, env(safe-area-inset-left, 0px)));
	border-radius: 0 !important;
	box-shadow: none !important;
}
.fp-app-bottom-nav::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: var(--fp-bottom-safe, env(safe-area-inset-bottom, 0px));
	background: var(--brand-surface-2, #111111);
	pointer-events: none;
	z-index: -1;
}
.fp-app-bottom-nav-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	height: 100%;
	box-sizing: border-box;
	text-decoration: none !important;
	color: var(--fp-text-subtle, rgba(255, 255, 255, 0.45)) !important;
	font-size: clamp(6.5px, 2.15vw, 9px);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.12;
	padding: 4px 1px 2px;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	transition: color 0.2s;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.fp-app-bottom-nav-link.is-active,
.fp-app-bottom-nav-link:hover {
	color: var(--brand-accent, #D4D41E) !important;
}
.fp-app-bottom-nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}
.fp-app-bottom-nav-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.fp-app-bottom-nav-label {
	display: block;
	width: 100%;
}
/* Ge plats åt bottennavigeringen så inget innehåll göms bakom */
body.fp-app-has-bottom-nav .fp-app-wrap {
	padding-bottom: calc(var(--fp-bottom-nav-h, 58px) + var(--fp-bottom-safe, env(safe-area-inset-bottom, 0px)));
}

/* Astra “scroll to top” ska följa gul/mörk färgprofil istället för standardblå. */
#ast-scroll-top {
	background: var(--brand-accent, #D4D41E) !important;
	color: var(--brand-bg, #0a0a0a) !important;
	border: 1px solid rgba(var(--brand-bg-rgb, 10, 10, 10), 0.45) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
}
#ast-scroll-top:hover,
#ast-scroll-top:focus-visible {
	background: var(--brand-accent-dark, #bfc31a) !important;
	color: var(--brand-bg, #0a0a0a) !important;
}
#ast-scroll-top .ast-icon.icon-arrow svg {
	fill: var(--brand-bg, #0a0a0a) !important;
}

/* Astra “scroll to top” – blå pil; passar inte app-temat och krockar med bottennav. */
body.fp-app-has-bottom-nav #ast-scroll-top,
body:has(.fp-app-wrap) #ast-scroll-top {
	display: none !important;
}

/* Dev: hård omladdning-banner (endast vissa användare, se functions.php) */
.fp-app-dev-refresh-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(8px + max(env(safe-area-inset-bottom, 0px), var(--fp-android-edge-bottom, 0px)));
	z-index: 10001;
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 14px;
	border: none;
	border-top: 1px solid rgba(var(--brand-accent-rgb, 212, 212, 30), 0.45);
	background: rgba(var(--brand-surface-rgb, 26, 26, 26), 0.98);
	color: var(--brand-accent, #D4D41E);
	font-weight: 600;
	font-size: 11px;
	line-height: 1.25;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
}
body.fp-app-has-bottom-nav .fp-app-dev-refresh-banner {
	bottom: calc(var(--fp-bottom-nav-h, 58px) + var(--fp-bottom-safe, env(safe-area-inset-bottom, 0px)));
}

/* Smal telefon (t.ex. iPhone Pro, inte Max): mer radhöjd + mindre sidmarginal så inget klipps. */
@media (max-width: 430px) {
	body.fp-app-has-bottom-nav {
		--fp-bottom-nav-h: 62px;
		--fp-bottom-nav-side-pad: 2px;
	}
}

/* Landskap: Samsungs gestpil flyttas till sidan av skärmen (kortsidan blir
   topp/botten), så bottennavet behöver ingen extra padding där. iPhone i
   landskap har en kort home-indicator vid kortsidan som env() rapporterar
   korrekt → låter env() styra direkt och nollställer Android-fallbacken. */
@media (orientation: landscape) {
	body.fp-app-has-bottom-nav {
		--fp-bottom-safe: env(safe-area-inset-bottom, 0px);
	}
}
.fp-app-dev-refresh-banner:active {
	background: rgba(45, 45, 15, 0.98);
}
.fp-app-dev-refresh-banner:disabled {
	opacity: 0.85;
	cursor: wait;
}
.fp-app-dev-refresh-banner__text {
	pointer-events: none;
}