/* ==========================================================================
   GALVCO BRAND STYLESHEET
   Single source of truth for brand colours, fonts and base type.
   Loaded on the front-end AND inside the Elementor editor/preview (see brand-assets.php)
   so the brand system is available whether the theme or Elementor is rendering.

   Source of truth: Galvco Brand Guidelines v1.00 (Oct 2024).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand fonts (self-hosted).
   Drop the licensed font files into ../fonts/ using the filenames below.
   Until they exist, the browser falls back to Calibri / system-ui (no FOIT
   thanks to font-display: swap). See assets/fonts/README.md.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Gasterol';
	src: url('../fonts/gasterol.woff2') format('woff2'),
		 url('../fonts/gasterol.woff') format('woff');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Akkurat';
	src: url('../fonts/akkurat-light.woff2') format('woff2'),
		 url('../fonts/akkurat-light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Akkurat';
	src: url('../fonts/akkurat-regular.woff2') format('woff2'),
		 url('../fonts/akkurat-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Akkurat';
	src: url('../fonts/akkurat-bold.woff2') format('woff2'),
		 url('../fonts/akkurat-bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Brand tokens (CSS custom properties).
   Use these everywhere — including inside Elementor HTML widgets. These are also
   mirrored into Elementor's Global Colors / Global Fonts (see elementor/kit-global-settings.json).
   -------------------------------------------------------------------------- */
:root {
	/* Primary */
	--galvco-cobalt: #005395;          /* Corrosion-proof Cobalt — primary buttons, headers, nav, links */
	/* Secondary */
	--galvco-indigo: #122246;          /* Industrial Indigo — hero sections, footer background */
	--galvco-green: #cddd59;           /* Guardian Green — accent highlights, badges, icons, bullets */
	--galvco-steel-sky: #a7d7db;       /* Steel Sky — secondary backgrounds, card highlights */
	/* Neutrals */
	--galvco-white: #ffffff;           /* Page backgrounds, reverse text */
	--galvco-dark-grey: #333333;       /* Body copy */
	--galvco-light-grey: #f5f5f5;      /* Light section backgrounds */

	/* Type families */
	--galvco-font-heading: 'Gasterol', 'Calibri', system-ui, sans-serif;
	--galvco-font-body: 'Akkurat', 'Calibri', system-ui, sans-serif;

	/* Type scale (desktop) */
	--galvco-h1: clamp(2.5rem, 5vw, 4.5rem);   /* ~72px */
	--galvco-h2: clamp(2rem, 3.5vw, 3rem);
	--galvco-h3: 1.75rem;
	--galvco-body: 1.125rem;                    /* 18px */
	--galvco-body-mobile: 1rem;                 /* 16px min on mobile */

	--galvco-radius: 4px;
	--galvco-max-width: 1200px;
}

/* --------------------------------------------------------------------------
   3. Base typography.
   Headings: Gasterol, ALL CAPS, tracking -25 (per style guide), Cobalt by default.
   Body: Akkurat Light, dark grey.
   These are scoped lightly so Elementor can override per element where needed.
   -------------------------------------------------------------------------- */
body {
	font-family: var(--galvco-font-body);
	font-weight: 300;
	color: var(--galvco-dark-grey);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--galvco-font-heading);
	text-transform: uppercase;
	letter-spacing: -0.025em;   /* tracking -25 */
	color: var(--galvco-cobalt);
	line-height: 1.05;
	font-weight: 400;
}

/* Reverse type: headings/body on dark or coloured backgrounds use white. */
.galvco-reverse h1,
.galvco-reverse h2,
.galvco-reverse h3,
.galvco-reverse h4,
.galvco-reverse h5,
.galvco-reverse h6,
.galvco-reverse,
.galvco-reverse p {
	color: var(--galvco-white);
}

a {
	color: var(--galvco-cobalt);
}

/* Visible keyboard focus everywhere (Guardian Green ring, offset so it reads on any bg). */
a:focus-visible,
button:focus-visible,
.galvco-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--galvco-green);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Brand buttons.
   -------------------------------------------------------------------------- */
.galvco-btn {
	display: inline-block;
	font-family: var(--galvco-font-heading);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	text-decoration: none;
	padding: 0.85em 1.75em;
	border-radius: var(--galvco-radius);
	border: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	min-height: 44px;            /* touch target */
	line-height: 1.4;
}

.galvco-btn--primary {
	background-color: var(--galvco-cobalt);
	color: var(--galvco-white);
}
.galvco-btn--primary:hover {
	background-color: var(--galvco-indigo);
	color: var(--galvco-white);
}

.galvco-btn--reverse {
	background-color: var(--galvco-white);
	color: var(--galvco-cobalt);
}
.galvco-btn--reverse:hover {
	background-color: var(--galvco-green);
	color: var(--galvco-indigo);
}

.galvco-btn--outline {
	background-color: transparent;
	color: var(--galvco-white);
	border-color: var(--galvco-white);
}
.galvco-btn--outline:hover {
	background-color: var(--galvco-white);
	color: var(--galvco-cobalt);
}

/* Guardian Green turnaround / category badge. */
.galvco-badge {
	display: inline-block;
	background-color: var(--galvco-green);
	color: var(--galvco-indigo);
	font-family: var(--galvco-font-heading);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: 0.85rem;
	padding: 0.35em 0.8em;
	border-radius: var(--galvco-radius);
	/* Symmetric margins so badge rows breathe when they sit side by side or wrap,
	   while single centred badges stay centred. */
	margin: 0.3em 0.35em;
}

/* Guardian Green diamond bullet, e.g. for "The Galvco Difference" list. */
.galvco-diamond-list {
	list-style: none;
	padding-left: 0;
}
.galvco-diamond-list li {
	position: relative;
	padding-left: 1.75em;
	margin-bottom: 0.75em;
}
.galvco-diamond-list li::before {
	content: "\25C7";   /* ◇ */
	position: absolute;
	left: 0;
	color: var(--galvco-green);
	font-size: 1.1em;
}

/* Curated downloads list — rendered by [galvco_downloads] (Technical Information). */
.galvco-downloads {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 860px;
	display: grid;
	gap: 1rem;
	text-align: left;
}
.galvco-downloads__item {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--galvco-white);
	border-left: 4px solid var(--galvco-cobalt);
	border-radius: calc(var(--galvco-radius) * 2);
	box-shadow: 0 8px 24px rgba(18, 34, 70, 0.10);
	padding: 1.25rem 1.5rem;
}
.galvco-downloads__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--galvco-light-grey);
	color: var(--galvco-cobalt);
}
.galvco-downloads__item--link {
	border-left-color: var(--galvco-green);
}
.galvco-downloads__item--link .galvco-downloads__icon {
	color: var(--galvco-indigo);
}
.galvco-downloads__body {
	flex: 1 1 auto;
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}
.galvco-downloads__title {
	font-family: var(--galvco-font-heading);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--galvco-indigo);
	font-size: 1.15rem;
	line-height: 1.2;
}
.galvco-downloads__note {
	color: var(--galvco-dark-grey);
	font-size: 0.95rem;
}
.galvco-downloads__meta {
	color: var(--galvco-cobalt);
	font-weight: 400;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.galvco-downloads__link {
	flex: 0 0 auto;
}
.galvco-downloads__empty {
	text-align: center;
	color: var(--galvco-dark-grey);
}
@media (max-width: 640px) {
	.galvco-downloads__item {
		flex-wrap: wrap;
	}
	.galvco-downloads__link {
		flex-basis: 100%;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   5. Layout helpers + accessibility.
   Used by the theme's standard-WordPress render path (blog, archives, singles).
   Elementor pages lay out their own sections; these don't fight them.
   -------------------------------------------------------------------------- */
.galvco-container {
	width: 100%;
	max-width: var(--galvco-max-width);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.galvco-main {
	min-height: 40vh;
}

.galvco-content {
	padding-block: 3rem;
}

.galvco-article__title {
	margin-bottom: 1.5rem;
}

.galvco-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--galvco-cobalt);
	color: #fff;
	padding: 0.75em 1.25em;
}
.galvco-skip-link:focus {
	left: 0;
}

.galvco-no-scroll {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   6. Brand site header (two-tier) — owned by the theme (header.php).
   Solid white by default. On the front page (body.galvco-front) it is transparent
   over the video hero until scrolled, then turns solid and collapses the utility bar.
   -------------------------------------------------------------------------- */
.galvco-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--galvco-white);
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.galvco-header--scrolled {
	box-shadow: 0 2px 12px rgba(18, 34, 70, 0.12);
}

/* Tier 1 — utility bar (email; phone + hours hidden until launch). */
.galvco-header__topbar {
	background: var(--galvco-indigo);
	max-height: 60px;
	transition: background-color 0.25s ease, max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}
.galvco-header__topbar-inner {
	width: 100%;
	max-width: var(--galvco-max-width);
	margin-inline: auto;
	padding: 0.4rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5rem;
}
.galvco-header__topbar a {
	color: var(--galvco-white);
	text-decoration: none;
	font-family: var(--galvco-font-body);
	font-size: 0.85rem;
}
.galvco-header__topbar a:hover {
	color: var(--galvco-green);
}
.galvco-header__email {
	font-weight: 700;
}
.galvco-utility {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.galvco-utility__hours {
	/* White (not Steel Sky): must stay legible when the front-page topbar goes
	   transparent over the hero video. */
	color: var(--galvco-white);
	font-family: var(--galvco-font-body);
	font-size: 0.85rem;
}

/* Tier 2 — main bar (logo, nav, CTA). */
.galvco-header__inner {
	width: 100%;
	max-width: var(--galvco-max-width);
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 80px;
}
.galvco-header__logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.galvco-header__logo .galvco-logo {
	/* Definite height so SVGs with only a viewBox (no intrinsic width/height) render
	   at a real size inside the flex header; width scales to the ~3.84:1 aspect. */
	height: 44px;
	width: auto;
	max-width: 200px;
}
/* Dual logo: cobalt by default; reverse only when transparent over the hero. */
.galvco-logo--reverse { display: none; }
.galvco-logo--cobalt { display: block; }

.galvco-header__nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.galvco-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.galvco-menu a {
	text-decoration: none;
	color: var(--galvco-dark-grey);
	font-family: var(--galvco-font-body);
	font-weight: 400;
	transition: color 0.15s ease;
}
.galvco-menu a:hover,
.galvco-menu .current-menu-item > a {
	color: var(--galvco-cobalt);
}
.galvco-header__cta {
	padding: 0.6em 1.25em;
	min-height: 0;
}

/* Hamburger — hidden on desktop. */
.galvco-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.galvco-header__toggle-bar {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--galvco-cobalt);
	transition: background-color 0.2s ease;
}

/* ---- Front page: transparent over the hero (until scrolled) ---- */
.galvco-front .galvco-header {
	position: fixed;
	left: 0;
	right: 0;
	background: transparent;
}
.galvco-front .galvco-header:not(.galvco-header--scrolled) .galvco-header__topbar {
	background: transparent;
}
.galvco-front .galvco-header:not(.galvco-header--scrolled) .galvco-logo--cobalt { display: none; }
.galvco-front .galvco-header:not(.galvco-header--scrolled) .galvco-logo--reverse { display: block; }
.galvco-front .galvco-header:not(.galvco-header--scrolled) .galvco-menu a {
	color: var(--galvco-white);
}
.galvco-front .galvco-header:not(.galvco-header--scrolled) .galvco-menu a:hover,
.galvco-front .galvco-header:not(.galvco-header--scrolled) .galvco-menu .current-menu-item > a {
	color: var(--galvco-green);
}
.galvco-front .galvco-header:not(.galvco-header--scrolled) .galvco-header__toggle-bar {
	background: var(--galvco-white);
}

/* ---- Front page: solid on scroll (collapse the utility bar) ---- */
.galvco-front .galvco-header--scrolled {
	background: var(--galvco-white);
}
.galvco-front .galvco-header--scrolled .galvco-header__topbar {
	max-height: 0;
	padding: 0;
	opacity: 0;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. Brand site footer (Industrial Indigo, reverse logo) — theme (footer.php).
   -------------------------------------------------------------------------- */
.galvco-footer {
	background: var(--galvco-indigo);
	color: var(--galvco-white);
	padding: 3.5rem 1.25rem 1.5rem;
	margin-top: 0;
}
.galvco-footer__inner {
	max-width: var(--galvco-max-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
}
.galvco-footer img {
	/* Definite width so viewBox-only SVGs render (see header logo note). */
	width: 180px;
	max-width: 100%;
	height: auto;
}
.galvco-footer h3 {
	color: var(--galvco-green);
	margin-bottom: 0.75rem;
}
.galvco-footer p {
	color: var(--galvco-white);
	margin: 0.4rem 0;
}
.galvco-footer__brand p {
	color: var(--galvco-steel-sky);
	margin-top: 1rem;
}
.galvco-footer a {
	color: var(--galvco-white);
	text-decoration: none;
}
.galvco-footer a:hover {
	color: var(--galvco-green);
}
.galvco-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.galvco-footer__menu li {
	margin: 0.4rem 0;
}
.galvco-footer__note {
	color: var(--galvco-steel-sky) !important;
}
.galvco-footer__legal {
	max-width: var(--galvco-max-width);
	margin: 2rem auto 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 1rem;
	color: var(--galvco-steel-sky);
	font-size: 0.85rem;
}
.galvco-footer__legal a {
	color: var(--galvco-steel-sky);
}

/* --------------------------------------------------------------------------
   8. Mobile — hide the utility bar; hamburger + full-screen Indigo nav overlay.
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
	body {
		font-size: var(--galvco-body-mobile);
	}
	/* Utility bar is desktop-only (matches the reference). */
	.galvco-header__topbar {
		display: none;
	}
	.galvco-header__toggle {
		display: flex;
		order: 3;
	}
	.galvco-header__nav {
		position: fixed;
		inset: 70px 0 0 0;
		background: var(--galvco-indigo);
		flex-direction: column;
		justify-content: flex-start;
		gap: 1.5rem;
		padding: 2.5rem 1.5rem;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
	}
	.galvco-header--nav-open .galvco-header__nav {
		transform: translateX(0);
	}
	.galvco-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		width: 100%;
	}
	/* In the open overlay the menu is always on Indigo, so keep links white. */
	.galvco-menu a,
	.galvco-front .galvco-header:not(.galvco-header--scrolled) .galvco-menu a {
		color: var(--galvco-white);
		font-size: 1.25rem;
	}
	.galvco-menu a:hover,
	.galvco-menu .current-menu-item > a {
		color: var(--galvco-green);
	}
	.galvco-header__cta {
		margin-top: 0.5rem;
	}
	.galvco-hero__content {
		padding-top: 6rem;
	}
	.galvco-hero__content p {
		font-size: 1.1rem;
	}
}

/* --------------------------------------------------------------------------
   9. Front-page video hero — full viewport, cycling background video with a
   brand-gradient placeholder until clips are supplied (header.php / footer.php
   wire up the cycling; drop clip URLs into the hero's data-galvco-hero-videos).
   -------------------------------------------------------------------------- */
.galvco-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	color: var(--galvco-white);
}
.galvco-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Brand-gradient placeholder, shown until a video loads. */
	background: linear-gradient(135deg, var(--galvco-indigo) 0%, var(--galvco-cobalt) 100%);
}
.galvco-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
}
.galvco-hero__media--has-video .galvco-hero__video {
	display: block;
}
.galvco-hero__placeholder-label {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	font-family: var(--galvco-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.6);
	border: 1px dashed rgba(255, 255, 255, 0.4);
	padding: 0.25rem 0.6rem;
	border-radius: var(--galvco-radius);
}
.galvco-hero__media--has-video .galvco-hero__placeholder-label {
	display: none;
}
/* Scrim so the headline stays legible over any video. */
.galvco-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(18, 34, 70, 0.55) 0%, rgba(18, 34, 70, 0.2) 45%, rgba(18, 34, 70, 0.6) 100%);
}
.galvco-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--galvco-max-width);
	margin-inline: auto;
	padding: 8rem 1.25rem 4rem;   /* top padding clears the fixed two-tier header */
}
.galvco-hero__content h1 {
	color: var(--galvco-white);
	font-size: var(--galvco-h1);
	max-width: 18ch;
	margin: 0 0 1rem;
}
.galvco-hero__content p {
	color: var(--galvco-white);
	font-size: 1.25rem;
	max-width: 60ch;
	margin: 0 0 1.5rem;
}
.galvco-hero__cta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Elementor buttons placed inline (auto width) sit on one axis: the column's flex
   centring staggers side-by-side buttons when only the first carries Elementor's
   default 20px bottom widget margin, so pin them to the top of their flex line. */
.elementor-widget-wrap > .elementor-widget-button.elementor-widget__width-auto {
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
   10. Fluent Forms — brand skin (Contact enquiry + Get a Quote forms).
   -------------------------------------------------------------------------- */
.fluentform .ff-el-group {
	margin-bottom: 1.4rem;
}
.fluentform .ff-el-input--label label {
	font-family: var(--galvco-font-body);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--galvco-indigo);
}
.fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.8em 1em;
	font-family: var(--galvco-font-body);
	font-size: 1rem;
	color: var(--galvco-ink, #333);
	background-color: var(--galvco-white);
	border: 1.5px solid #d5dbe4;
	border-radius: var(--galvco-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--galvco-cobalt);
	box-shadow: 0 0 0 3px rgba(0, 83, 149, 0.15);
}
.fluentform textarea.ff-el-form-control {
	min-height: 130px;
}
.fluentform .ff-btn-submit {
	display: inline-block;
	width: 100%;
	font-family: var(--galvco-font-heading);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	font-size: 1.05rem;
	padding: 0.9em 1.75em;
	color: var(--galvco-white);
	background-color: var(--galvco-cobalt);
	border: 2px solid transparent;
	border-radius: var(--galvco-radius);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.fluentform .ff-btn-submit:hover {
	background-color: var(--galvco-indigo);
}
.fluentform .ff-el-form-check-label {
	font-family: var(--galvco-font-body);
	color: var(--galvco-ink, #333);
}
.fluentform .ff-message-success {
	background-color: var(--galvco-green);
	color: var(--galvco-indigo);
	border: none;
	border-radius: var(--galvco-radius);
	font-family: var(--galvco-font-body);
	padding: 1rem 1.25rem;
}