/*
	WeGoSwim — theme overrides (Spectral-friendly)
	------------------------------------------------
	Palette: B · теплее · Harbour
	Photos: banner (page-wrapper) · services (#two) · contact (#contact)
	Solid fills: About (#one) · Locations (#three) — same --wg-mid + soft depth
*/

:root {
	/* Harbour — deep navy shell + sea mid */
	--wg-mid: #2f4a5e;
	--wg-bg: #243044;
	--wg-bg-deep: #1a2030;

	/* Accents — soft aqua icons + coral-red CTA (lane-rope signal on banner) */
	--wg-accent: #3db8c9;
	--wg-cta: #e85d4c;
	--wg-cta-hover: #f07167;
	--wg-cta-active: #d14a3b;
	--wg-cta-ink: #ffffff;

	/* Type — soft off-white / cooler body (readable, not pure white) */
	--wg-heading: #eaf4f7;
	--wg-text: #d5e4ec;
	--wg-text-muted: #c8dae6;
	--wg-text-dim: rgba(197, 216, 226, 0.55);

	/* Neutral black veil on photos (no blue/purple cast) */
	--wg-veil: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
	--wg-veil-strong: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.6));
	/* Contact — stronger than Services so CTA copy stays legible */
	--wg-veil-contact: linear-gradient(rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.7));

	/* Shared soft inset depth for solid mid sections */
	--wg-solid-depth:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		inset 0 14px 28px -16px rgba(0, 0, 0, 0.18),
		inset 0 -14px 28px -16px rgba(0, 0, 0, 0.14);
}

/* ------------------------------------------------------------------ */
/* Shell                                                               */
/* ------------------------------------------------------------------ */

body {
	background: var(--wg-bg);
	color: var(--wg-text);
}

body.landing #page-wrapper {
	background-image:
		var(--wg-veil),
		url("../../images/banner.jpg");
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 0;
}

#banner {
	background-image: none;
	background-color: transparent;
}

body.is-mobile.landing #page-wrapper {
	background: none;
	background-image: none;
}

body.is-mobile.landing #banner {
	background-image:
		var(--wg-veil),
		url("../../images/banner.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* ------------------------------------------------------------------ */
/* Banner type + intro motion                                          */
/* Spectral already animates h2 (scale/lines) and .more.               */
/* We extend the same beat to subtitle + CTA so load feels complete.   */
/* ------------------------------------------------------------------ */

#banner h2:before,
#banner h2:after {
	background: rgba(234, 244, 247, 0.9);
}

#banner .inner {
	position: relative;
	z-index: 1;
	max-width: 46em;
	margin: 0 auto;
	padding: 1.5em 1.25em;
	background: radial-gradient(
		ellipse 75% 70% at 50% 45%,
		rgba(0, 0, 0, 0.38) 0%,
		rgba(0, 0, 0, 0.14) 55%,
		rgba(0, 0, 0, 0) 100%
	);
}

#banner h2 {
	color: var(--wg-heading);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* Slightly larger hero copy — same Spectral uppercase style */
#banner p {
	color: rgba(234, 244, 247, 0.92);
	font-size: 1.15em;
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.92;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
	-moz-transition: opacity 0.85s ease, transform 0.85s ease;
	-webkit-transition: opacity 0.85s ease, transform 0.85s ease;
	-ms-transition: opacity 0.85s ease, transform 0.85s ease;
	transition: opacity 0.85s ease, transform 0.85s ease;
	-moz-transition-delay: 0.35s;
	-webkit-transition-delay: 0.35s;
	-ms-transition-delay: 0.35s;
	transition-delay: 0.35s;
}

#banner .inner .actions {
	-moz-transition: opacity 0.85s ease, transform 0.85s ease;
	-webkit-transition: opacity 0.85s ease, transform 0.85s ease;
	-ms-transition: opacity 0.85s ease, transform 0.85s ease;
	transition: opacity 0.85s ease, transform 0.85s ease;
	-moz-transition-delay: 0.55s;
	-webkit-transition-delay: 0.55s;
	-ms-transition-delay: 0.55s;
	transition-delay: 0.55s;
}

#banner .more {
	color: rgba(234, 244, 247, 0.8);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

#banner .button.primary {
	text-shadow: none;
	font-weight: 600;
	letter-spacing: 0.16em;
}

/* Preload: hide + offset, then ease in with the title lines */
body.is-preload #banner p {
	opacity: 0;
	-moz-transform: translateY(1.25em);
	-webkit-transform: translateY(1.25em);
	-ms-transform: translateY(1.25em);
	transform: translateY(1.25em);
}

body.is-preload #banner .inner .actions {
	opacity: 0;
	-moz-transform: translateY(1.5em);
	-webkit-transform: translateY(1.5em);
	-ms-transform: translateY(1.5em);
	transform: translateY(1.5em);
}

@media screen and (max-width: 736px) {
	#banner p {
		font-size: 1.08em;
		letter-spacing: 0.1em;
		line-height: 1.85;
	}
}

/* ------------------------------------------------------------------ */
/* Body readability (long EN copy in solid + feature cards)            */
/* Headings stay Spectral uppercase; paragraphs get calmer tracking.   */
/* ------------------------------------------------------------------ */

#one header.major p,
#three header.major p,
#two .features li p,
#contact header p {
	font-size: 1.06em;
	line-height: 1.8;
	letter-spacing: 0.04em;
	font-weight: 400;
}

/* Same content width as Services (.wrapper > .inner) — no extra clamp */

#two header.major p {
	font-size: 1.05em;
	letter-spacing: 0.06em;
	line-height: 1.75;
	color: var(--wg-text-muted);
}

/* ------------------------------------------------------------------ */
/* SOLID — About + Locations (matched mid + soft depth)                */
/* ------------------------------------------------------------------ */

#one.wrapper.style1,
#three.wrapper.style3,
#three {
	background-color: var(--wg-mid);
	background-image: none;
	background-attachment: scroll;
	color: var(--wg-text-muted);
	box-shadow: var(--wg-solid-depth);
}

#one.wrapper.style1 header.major h2,
#one.wrapper.style1 header.major h3,
#one.wrapper.style1 h2,
#three.wrapper.style3 header.major h2,
#three.wrapper.style3 header.major h3,
#three h2 {
	color: var(--wg-heading);
	border-color: rgba(234, 244, 247, 0.18);
	text-shadow: none;
}

#one.wrapper.style1 header p,
#one.wrapper.style1 header.major p,
#three.wrapper.style3 header p,
#three.wrapper.style3 header.major p,
#three header p {
	color: var(--wg-text-muted);
	text-shadow: none;
}

/* ------------------------------------------------------------------ */
/* PHOTO — Services                                                    */
/* ------------------------------------------------------------------ */

#two.wrapper.style2,
#two {
	background-color: var(--wg-bg);
	background-image:
		var(--wg-veil-strong),
		url("../../images/services.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	color: var(--wg-text);
}

#two header.major h2,
#two header.major h3 {
	color: var(--wg-heading);
	border-color: rgba(234, 244, 247, 0.18);
}

#two header.major p,
#two header p {
	color: var(--wg-text-muted);
}

#two .features li {
	background-color: rgba(26, 32, 48, 0.52);
	border: 1px solid rgba(234, 244, 247, 0.12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--wg-text-muted);
}

#two .features li h3 {
	color: var(--wg-heading);
}

#two .features li p {
	color: var(--wg-text-muted);
}

#two .features li:before,
.features li:before {
	color: var(--wg-accent);
}

body.is-mobile #two,
body.is-mobile.landing #two {
	background-attachment: scroll;
}

@media screen and (max-width: 768px) {
	#two {
		background-attachment: scroll;
	}
}

/* ------------------------------------------------------------------ */
/* PHOTO — Contact (strong veil only — no radial box / hard edge)      */
/* ------------------------------------------------------------------ */

#contact.wrapper.style4,
#contact {
	background-color: var(--wg-bg-deep);
	background-image:
		var(--wg-veil-contact),
		url("../../images/contact.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--wg-text);
}

body.is-mobile.landing #contact,
body.is-mobile.landing .wrapper.style4 {
	background-image:
		var(--wg-veil-contact),
		url("../../images/contact.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Soft blur shadow only — avoids hard bar under multi-line type */
#contact header h2 {
	color: var(--wg-heading);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 0 28px rgba(0, 0, 0, 0.35);
}

#contact header p {
	color: rgba(234, 244, 247, 0.94);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5), 0 0 22px rgba(0, 0, 0, 0.3);
}

/* Brief copy confirmation under contact buttons (hidden until used) */
#contact .email-toast {
	margin: 0.75em 0 0 0;
	min-height: 1.35em;
	text-align: center;
	font-size: 0.8em;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: none;
	line-height: 1.5;
	color: var(--wg-accent);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}

#contact .email-toast.is-on {
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Chrome                                                              */
/* ------------------------------------------------------------------ */

#header {
	background-color: var(--wg-bg);
}

#header.alt {
	background-color: transparent;
}

/* Coral-red CTA — white label; soft lift so it sits above photo yellow/blue */
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
	background-color: var(--wg-cta);
	color: var(--wg-cta-ink) !important;
	border-color: transparent !important;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32) !important;
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
	background-color: var(--wg-cta-hover) !important;
	color: var(--wg-cta-ink) !important;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38) !important;
}

input[type="submit"].primary:active,
input[type="reset"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
	background-color: var(--wg-cta-active) !important;
	color: var(--wg-cta-ink) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

body.landing #footer,
#footer {
	background-color: var(--wg-bg-deep);
	padding: 1.5em 0 1.2em 0;
}

#footer .copyright {
	font-size: 0.75em;
	margin: 0;
	color: var(--wg-text-dim);
	opacity: 1;
	letter-spacing: 0.08em;
	text-transform: none;
}

/* Quiet CCA credit — present, not competing with brand */
#footer .design-credit {
	font-size: 0.92em;
	letter-spacing: 0.04em;
	opacity: 0.72;
}

#footer .design-credit a {
	border-bottom: none;
	color: inherit;
	opacity: 0.9;
}

#footer .design-credit a:hover {
	color: var(--wg-text-muted);
	opacity: 1;
}