/**
 * Page-template specific overrides.
 *
 * These rules were previously inlined as <style> blocks inside individual
 * PHP templates. They have been consolidated here and scoped to the body
 * class WordPress already outputs for each template, so the cascade and
 * specificity behaviour is preserved (and slightly strengthened).
 *
 * @package gymnase
 */

/* -------------------------------------------------------------------------
 * Front page (front-page.php)
 * ---------------------------------------------------------------------- */
body.home .tmp_header {
	border-top: solid #fff;
	border-bottom: solid #fff;
	background-color: transparent !important;
}

body.home .tmp_header a,
body.home .tmp_header a:visited {
	color: #fff;
}

body.home .tmp_header ul li:last-child {
	border-color: #fff;
}

body.home .tmp_header.is-active {
	background-color: #FFFEF3 !important;
}

body.home .tmp_header.is-active ul li:last-child {
	border-color: #0275D4;
}

body.home .tmp_header.is-active .header_hamburger .line {
	background-color: #0275D4;
}

body.home .tmp_header > div:last-child,
body.home .div_main_header > div:last-child {
	border-left: 2px solid #fff;
}

body.home .tmp_header > div:first-child,
body.home .div_main_header > div:first-child {
	border-right: 2px solid #fff;
}

body.home .header_hamburger .line {
	background-color: #0275D4;
}

/* -------------------------------------------------------------------------
 * Single project / post (template-parts/content.php)
 * ---------------------------------------------------------------------- */
body.single #page {
	background-color: #FFFEF3 !important;
}

body.single .div_header_white {
	border-top: solid #0275D4;
	border-bottom: solid #0275D4;
}

body.single .div_header_white ul {
	border-left: 2px solid #0275D4;
}

body.single .div_header_white a,
body.single .div_header_white a:visited {
	color: #0275D4;
}

body.single .div_header_white ul li:last-child {
	border-color: #0275D4;
}

body.single .div_header_white.is-active ul li:last-child {
	border-color: #FFFEF3;
}

body.single .div_header_white.is-active .header_hamburger .line {
	background-color: #FFFEF3;
}

body.single .div_header_white > div:last-child,
body.single .div_main_header > div:last-child {
	border-left: 2px solid #0275D4;
}

body.single .div_header_white > div:first-child,
body.single .div_main_header > div:first-child {
	border-right: 2px solid #0275D4;
}

body.single #sticky_header nav {
	background-color: #FFFEF3 !important;
}

body.single .header_hamburger .line {
	background-color: #0275D4;
}

body.single .btn-11::before,
body.single .btn-11::after {
	background-image: url("../img/Tennis-ball.png");
}

/* Hide the global footer on the standalone GYM gallery post (post ID 59). */
body.single.postid-59 .main_footer {
	display: none;
}

/* -------------------------------------------------------------------------
 * Contact page (gymnase-contact.php)
 * ---------------------------------------------------------------------- */
body.page-template-gymnase-contact #page {
	background-color: #0275D4 !important;
}

body.page-template-gymnase-contact .div_header_white {
	border-top: solid #fff;
	border-bottom: solid #fff;
}

body.page-template-gymnase-contact .div_header_white a,
body.page-template-gymnase-contact .div_header_white a:visited {
	color: #fff;
}

body.page-template-gymnase-contact .div_header_white ul {
	border-left: 2px solid #fff;
}

body.page-template-gymnase-contact .div_header_white ul li:last-child {
	border-color: #fff;
}

body.page-template-gymnase-contact .div_header_white > div:last-child,
body.page-template-gymnase-contact .div_main_header > div:last-child {
	border-left: 2px solid #fff;
}

body.page-template-gymnase-contact .div_header_white > div:first-child,
body.page-template-gymnase-contact .div_main_header > div:first-child {
	border-right: 2px solid #fff;
}

body.page-template-gymnase-contact #sticky_header nav {
	background-color: #0275D4 !important;
}

@media only screen and (max-width: 640px) {
	body.page-template-gymnase-contact #sticky_header.is-active nav {
		background-color: #FFFEF3 !important;
	}

	body.page-template-gymnase-contact .div_header_white ul {
		border-left: none;
	}

	body.page-template-gymnase-contact #menu_language {
		color: #FFFEF3 !important;
	}

	body.page-template-gymnase-contact .div_header_white.is-active #menu_language,
	body.page-template-gymnase-contact .div_header_white.is-active #menu_links_toggle {
		color: #0275D4 !important;
	}
}

/* -------------------------------------------------------------------------
 * Projects page (gymnase-projects.php)
 * ---------------------------------------------------------------------- */
body.page-template-gymnase-projects #page {
	background-color: #FFFEF3 !important;
}

body.page-template-gymnase-projects .div_header_white {
	border-top: solid #0275D4;
	border-bottom: 3px solid #0275D4;
}

body.page-template-gymnase-projects .div_header_white a,
body.page-template-gymnase-projects .div_header_white a:visited {
	color: #0275D4;
}

body.page-template-gymnase-projects .div_header_white ul li:last-child {
	border-color: #0275D4;
}

body.page-template-gymnase-projects .div_header_white.is-active ul li:last-child {
	border-color: #FFFEF3;
}

body.page-template-gymnase-projects .div_header_white > div:last-child,
body.page-template-gymnase-projects .div_main_header > div:last-child {
	border-left: 2px solid #0275D4;
}

body.page-template-gymnase-projects .div_header_white > div:first-child,
body.page-template-gymnase-projects .div_main_header > div:first-child {
	border-right: 2px solid #0275D4;
}

body.page-template-gymnase-projects #sticky_header nav {
	background-color: #FFFEF3 !important;
}

body.page-template-gymnase-projects .header_hamburger .line {
	background-color: #0275D4;
}

/* -------------------------------------------------------------------------
 * Services page (gymnase-services.php)
 * ---------------------------------------------------------------------- */
body.page-template-gymnase-services .serv_accordion .accordion-title:after {
	content: "";
	position: absolute;
	right: 20px;
	background-size: contain;
	transition: transform 0.3s ease, filter 0.3s ease;
	filter: brightness(0) invert(1); /* white arrow */
}

body.page-template-gymnase-services .serv_accordion .accordion-title:hover:after {
	filter: brightness(0) saturate(100%) sepia(100%) hue-rotate(180deg); /* blue-ish tint */
}

body.page-template-gymnase-services .accordion-item.is-open .accordion-title:after {
	transform: translateY(-50%) rotate(90deg);
	filter: brightness(0) saturate(100%) sepia(100%) hue-rotate(180deg);
}

body.page-template-gymnase-services #page {
	background-color: #0275D4 !important;
}

body.page-template-gymnase-services .div_header_white {
	border-top: solid #fff;
	border-bottom: solid #fff;
}

body.page-template-gymnase-services .div_header_white a,
body.page-template-gymnase-services .div_header_white a:visited {
	color: #fff;
}

body.page-template-gymnase-services .div_header_white ul {
	border-left: 2px solid #fff;
}

body.page-template-gymnase-services .div_header_white ul li:last-child {
	border-color: #fff;
}

body.page-template-gymnase-services .div_header_white > div:last-child,
body.page-template-gymnase-services .div_main_header > div:last-child {
	border-left: 2px solid #fff;
}

body.page-template-gymnase-services .div_header_white > div:first-child,
body.page-template-gymnase-services .div_main_header > div:first-child {
	border-right: 2px solid #fff;
}

body.page-template-gymnase-services #sticky_header nav {
	background-color: #0275D4 !important;
}

@media only screen and (max-width: 640px) {
	body.page-template-gymnase-services #sticky_header.is-active nav {
		background-color: #FFFEF3 !important;
	}
}

/* -------------------------------------------------------------------------
 * Workout page (workout-page.php)
 * ---------------------------------------------------------------------- */
body.page-template-workout-page .header_hamburger .line {
	background-color: #0275D4;
}

body.single .project_big_website_link.project_url_marquee {
	display: block;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 0;
	padding-right: 0;
}
.project_url_marquee__track {
	display: inline-flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
}
.project_url_marquee__group {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}
.project_url_marquee__item,
.project_url_marquee__sep {
	display: inline-block;
	flex: 0 0 auto;
	padding: 0;
	font-style: normal;
	transform: skewX(0deg);
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.project_url_marquee:hover .project_url_marquee__item,
.project_url_marquee:hover .project_url_marquee__sep {
	transform: skewX(-11deg);
}
/* One poster box for every project whatever the source file measures, capped
   so it never runs past the first screen. Cropping is the intended trade. */
:root {
	--gym-header-height: 70px;
}

body.single .div_project_title img {
	aspect-ratio: 4 / 3;
	height: auto;
	max-height: calc(100vh - var(--gym-header-height));
	max-height: calc(100svh - var(--gym-header-height));
	object-fit: cover;
}

/* The description shares the poster's band. project-motion.js measures the
   poster and publishes its width, the declared value is the fallback. */
@media only screen and (min-width: 961px) {
	body.single .div_project_desc .proj_desc_right {
		width: var(--gym-poster-width, min(70%, 980px));
		margin-left: auto;
	}

	body.single .div_project_desc .proj_desc_right h3 {
		max-width: none;
	}
}

/* Project credits */
body.single .proj_desc_left .project_credit li + li,
body.single .project_description .project_credit li + li {
	margin-top: 6px;
}

/* Small screens got a pinned title floating over a 70%-wide poster jammed
   against the viewport edge, so put the title back in the flow. */
@media only screen and (max-width: 960px) {
	body.single .sec_project_title {
		padding-top: 30px;
	}

	body.single .div_project_title {
		display: block;
		padding: 0 20px;
	}

	body.single .div_project_title h1 {
		position: static;
		margin: 0 0 24px;
		opacity: 1 !important;
	}

	body.single .div_project_title img {
		display: block;
		width: 100%;
		max-width: none;
		margin-top: 0;
	}

	/* .proj_desc_right is width 100% against an auto track, which sized the
	   track past the padded grid and ran the description off screen. */
	body.single .div_project_desc {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single .div_project_desc > div {
		min-width: 0;
		max-width: 100%;
	}

	body.single .div_project_desc .proj_desc_right > div {
		width: auto;
	}

	body.single .div_project_desc .proj_desc_right img {
		max-width: 100%;
	}

	/* a -20px right margin here gave every project page a horizontal scroll */
	body.single .project_description.hide_on_desktop {
		margin-right: 20px;
	}
}

/* Project website marquee link */
body.single .project_big_website_link.project_url_marquee {
	font-size: clamp(42px, 10vw, 190px);
	padding-top: clamp(40px, 6vw, 120px);
	padding-bottom: clamp(40px, 6vw, 120px);
}

/* Project motion (js/project-motion.js) */
.motion-line-mask {
	display: block;
	overflow: hidden;
}

/* the poster reveal overshoots past 100% width, which must not widen the page */
body.single .sec_project_title {
	overflow: hidden;
}

.sec_project_title img,
.project_snippets video {
	will-change: transform, clip-path;
}

@media (prefers-reduced-motion: reduce) {
	.sec_project_title img,
	.project_snippets video {
		will-change: auto;
	}
}

/* Description paragraphs, kept as blocks so SplitText cannot run them together */
body.single .proj_desc_para {
	display: block;
}

body.single .proj_desc_para + .proj_desc_para {
	margin-top: 1em;
}

/* -------------------------------------------------------------------------
 * Project snippets
 *
 * Three square tiles side by side below 640px leave 125px each, which is why
 * the middle one used to be hidden. Below that width the row becomes a
 * snapping filmstrip instead, so all three stay reachable at a size worth
 * looking at. Native scroll does the momentum, GSAP only does the emphasis.
 * ---------------------------------------------------------------------- */
body.single .project_snippets {
	overflow: hidden;
}

body.single .project_snippets:focus-visible {
	outline: 2px solid var(--clr-blue);
	outline-offset: 4px;
}

body.single .project_snippets_rail {
	display: none;
}

@media only screen and (max-width: 640px) {
	body.single .project_snippets {
		gap: 12px;
		padding: 0 20px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 20px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	body.single .project_snippets::-webkit-scrollbar {
		display: none;
	}

	body.single .project_snippets video,
	body.single .project_snippets video:nth-child(2) {
		display: block;
		flex: 0 0 72vw;
		width: 72vw;
		border-right: 2px var(--clr-blue) solid;
		scroll-snap-align: start;
	}

	body.single .project_snippets_rail {
		display: block;
		position: relative;
		height: 30px;
		margin: 18px 20px 0;
	}

	body.single .project_snippets_line,
	body.single .project_snippets_fill {
		position: absolute;
		top: 50%;
		left: 0;
		height: 2px;
		margin-top: -1px;
	}

	body.single .project_snippets_line {
		right: 0;
		background-color: color-mix(in srgb, var(--clr-blue) 20%, transparent);
	}

	body.single .project_snippets_fill {
		width: 0;
		background-color: var(--clr-blue);
	}

	body.single .project_snippets_ball {
		position: absolute;
		top: 50%;
		left: 0;
		width: 30px;
		height: 30px;
		margin-top: -15px;
	}
}