/* Forjum overrides on top of Paradigm Shift (main.css). */

:root {
	--forjum-accent: #00bcd4;
	--forjum-accent-dark: #0097a7;
	--might: #e53935;
	--agility: #ffb300;
	--vitality: #43a047;
	--spirit: #7e57c2;
	--presence: #26c6da;
}

/* Accent: template mint -> Forjum cyan */
a:hover { color: var(--forjum-accent) !important; }
input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary,
button.primary, .button.primary {
	background-color: var(--forjum-accent);
	box-shadow: none;
	color: #ffffff !important;
}
.button.primary:hover { background-color: var(--forjum-accent-dark); }
.button.primary:active { background-color: var(--forjum-accent-dark); }

/* Intro */
.intro header .lead-small {
	font-size: 1rem;
	opacity: 0.75;
	margin-top: -0.75rem;
}

/* Stat icons in their stat colors */
ul.feature-icons.stats li:before { color: #ffffff; }
ul.feature-icons li.stat-might:before { background-image: none; background: var(--might); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
ul.feature-icons li.stat-agility:before { background-image: none; background: var(--agility); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
ul.feature-icons li.stat-vitality:before { background-image: none; background: var(--vitality); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
ul.feature-icons li.stat-spirit:before { background-image: none; background: var(--spirit); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
ul.feature-icons li.stat-presence:before { background-image: none; background: var(--presence); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
ul.feature-icons li { line-height: 1.5; }

/* Phone screenshots: show the whole screen instead of cropping it */
.gallery a:not(.landscape) img {
	object-fit: contain;
	background: #0e0e14;
}

/* Minigame pills */
ul.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
}
ul.pills li {
	border: solid 1px rgba(144, 144, 144, 0.35);
	border-radius: 999px;
	padding: 0.2rem 0.9rem;
	font-size: 0.9rem;
	margin: 0;
}

/* Minigame pills that open the minigame screenshot (reuse the gallery
   modal, but not the gallery's tile layout) */
.gallery.pills-gallery {
	display: block;
	margin: 0;
	width: auto;
}
.gallery.pills-gallery a {
	display: block;
	width: auto;
	margin: 0;
	padding: 0.2rem 0.9rem;
	border-bottom: 0;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	cursor: zoom-in;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.gallery.pills-gallery ul.pills li {
	padding: 0;
	border-color: var(--stat, rgba(144, 144, 144, 0.35));
}
.gallery.pills-gallery ul.pills li:hover,
.gallery.pills-gallery ul.pills li:focus-within {
	background-color: var(--stat);
}
.gallery.pills-gallery ul.pills li:hover a,
.gallery.pills-gallery ul.pills li:focus-within a {
	color: #fff;
}
.gallery.pills-gallery ul.pills li.agility:hover a,
.gallery.pills-gallery ul.pills li.agility:focus-within a {
	color: #000;
}
ul.pills li.might { --stat: #e53935; }
ul.pills li.agility { --stat: #ffb300; }
ul.pills li.vitality { --stat: #43a047; }
ul.pills li.spirit { --stat: #7e57c2; }
ul.pills li.presence { --stat: #26c6da; }

/* Language switcher (intro) */
.lang-switch {
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	margin: 0 0 1.5rem 0;
	opacity: 0.85;
}
.lang-switch a { border-bottom: 0; }
.lang-switch span[aria-current] { font-weight: 700; }

/* Three steps */
ol.steps { margin-top: 2rem; }
ol.steps li { margin-bottom: 1rem; }

/* Small print */
p.note {
	font-size: 0.9rem;
	opacity: 0.7;
}

/* Template mint band and header lines -> Forjum cyan */
#wrapper:before { background-color: #4dd0e1 !important; }
#wrapper > section > header:before,
#wrapper > section > header h1:before,
#wrapper > section > header h2:before { background: #00acc1 !important; }
@media screen and (max-width: 980px) {
	#wrapper > section > header { background-color: #4dd0e1 !important; }
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before { background-color: var(--forjum-accent); border-color: var(--forjum-accent); }

/* Store icons in the hero (icon only, labels for screen readers) */
.intro ul.store-icons { margin: 0.5rem 0 1.5rem 0; }
.intro ul.store-icons li a.icon:before { font-size: 1.6rem; }
.intro ul.store-icons li a { width: 3rem; height: 3rem; line-height: 3rem; }

/* Wristwatch icon (Font Awesome free has none) */
ul.feature-icons li.icon-watch:before {
	content: '';
	background-image:
		url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='6' width='11' height='12' rx='3'/%3E%3Cpath d='M9 6l.6-3h4.8l.6 3M9 18l.6 3h4.8l.6-3M17.5 10.5h1'/%3E%3C/svg%3E"),
		url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath d='M256,0l221.7,128v256L256,512L34.3,384V128L256,0z' fill='rgba(144, 144, 144, 0.1)' /%3E%3C/svg%3E");
	background-size: 45%, contain;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}

/* Real biometrics: app screen slider + single-column features */
.bio-row {
	display: grid;
	grid-template-columns: minmax(180px, 42%) 1fr;
	gap: 2.5rem;
	align-items: center;
	margin-top: 2.5rem;
}
.app-slider-frame {
	position: relative;
	aspect-ratio: 600 / 1298;
	border-radius: 22px;
	overflow: hidden;
	border: solid 1px rgba(144, 144, 144, 0.3);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
	background: #ffffff;
}
.app-slider-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s ease;
}
.app-slider-frame img.is-active { opacity: 1; }
.app-slider-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
}
.app-slider-dots button {
	width: 8px;
	height: 8px;
	min-width: 0;
	padding: 0;
	border-radius: 50%;
	border: 0;
	box-shadow: none;
	background: rgba(144, 144, 144, 0.35);
	cursor: pointer;
}
.app-slider-dots button[aria-selected="true"] { background: var(--forjum-accent); }
ul.feature-icons.single { margin: 0; }
ul.feature-icons.single li { width: 100%; margin-top: 1.25rem; }
ul.feature-icons.single li:first-child { margin-top: 0; }
ul.feature-icons.single li:nth-child(2) { margin-top: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
	.app-slider-frame img { transition: none; }
}
@media screen and (max-width: 736px) {
	.bio-row { grid-template-columns: 1fr; }
	.app-slider { width: 100%; max-width: 260px; margin: 0 auto; }
}

/* Stat list follows the slider */
ul.feature-icons.stats.single li { opacity: 0.55; transition: opacity 0.4s ease; }
ul.feature-icons.stats.single li.is-current { opacity: 1; }

/* Forjum helix watermark in the cyan band (replaces the template line art) */
#wrapper:before,
body.is-mobile #wrapper:before {
	background-image: url("../../images/forjum/spiral-watermark.svg") !important;
	background-repeat: no-repeat !important;
	/* Behind the right-aligned titles, full screen height */
	background-position: calc(27vw - 6.6vh) 50% !important;
	background-size: auto 100vh !important;
	background-attachment: fixed !important;
}
@media screen and (max-width: 980px) {
	/* Stacked layout: plain section headers, helix only in the intro */
	#wrapper > section > header,
	body.is-mobile #wrapper > section > header {
		background-image: none !important;
	}
	#wrapper > section.intro > header,
	body.is-mobile #wrapper > section.intro > header {
		background-image: url("../../images/forjum/spiral-watermark.svg") !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
		background-size: auto 95% !important;
		background-attachment: scroll !important;
	}
}

/* Readiness card screenshot (recovery score section) */
.image.main.readiness-card { margin: 2rem 0 2.5rem 0; }
.image.main.readiness-card img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.10));
}

/* Photos in a gallery: fill the tile (screenshots keep the contain rule above) */
.gallery a.photo img {
	object-fit: cover;
	background: none;
}
@media screen and (max-width: 736px) {
	/* One per row: side by side the phone screens are too small to read */
	.gallery a.photo { width: calc(100% - 1.25rem); }
	.gallery a.photo img { height: 56vw; min-height: 0; }
}

/* Signals grid (how it works, step 1) */
.image.main.signals-grid img {
	width: 100%;
	height: auto;
	border-radius: 14px;
}