/*
Theme Name: Garmendale
Author: Wriggle
Author URI:
Description: Theme for Garmendale Engineering.
Version: 1.0
License: (c) Copyright of Wriggle. All Rights Reserved.
Text Domain: starter
*/

/* ==========================================================================
   Design tokens
   Desktop frame 1728, mobile frame 390. Every fluid value below is
   anchored to those two frame widths.
   ========================================================================== */

:root {
	/* Palette - "Red" and "Red/Black", plus literals from the frame */
	--red:              #e43839;
	--red-ink:          #210202; /* "Red/Black" - default text colour */
	--red-tint:         #fcebeb; /* secondary button fill, progress track */
	--red-tint-strong:  #fad7d7; /* highlighted words in the statement band */
	--red-overlay:      rgba(204, 44, 50, 0.9); /* project card hover */
	--white:            #ffffff;
	--panel:            #f7f7f7; /* contact form panel */
	--ink-muted:        rgba(29, 37, 45, 0.7); /* consent line */
	--field-border:     #0a3072; /* checkbox border */

	/* Layout */
	--radius: 10px;
	/* 30px at 390 -> 100px at 1728 */
	--gutter: clamp(30px, 9.6px + 5.232vw, 100px);
	--container: 1528px; /* 1728 minus the two 100px gutters */
	--narrow: 1080px;    /* centred text column */

	/* Section rhythm. Every measured gap on the homepage is 40 (390) -> 80 (1728). */
	--space-tight:   clamp(20px, 14.17px + 1.495vw, 40px);
	--space-default: clamp(40px, 28.34px + 2.990vw, 80px);
	--space-loose:   clamp(60px, 42.51px + 4.484vw, 120px);

	/* Futura PT is an Adobe Fonts family. Set the kit id via the
	   garmendale_adobe_fonts_kit filter to load the real thing; Jost is the
	   metric-similar geometric fallback that ships by default. */
	--font: "futura-pt", "Futura PT", "Jost", "Century Gothic", "Avenir Next", sans-serif;
}

/* Futura PT weight names -> numeric weights used throughout:
   Book 400 . Medium 500 . Demi 600 . Heavy/Bold 700 */

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--white);
	color: var(--red-ink);
	font-family: var(--font);
	font-weight: 400;
	font-size: 20px;
	/* Futura PT's normal leading, read off the design's own text boxes:
	   20px -> 26, 18px -> 23, 16px -> 21, 14px -> 18. */
	line-height: 1.3;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* Form controls do not inherit the family - say so explicitly. */
input, select, textarea, button { font-family: inherit; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 10000;
	background: var(--white); color: var(--red-ink); padding: 12px 20px;
}
.skip-link:focus { left: 0; }

.visually-hidden {
	position: absolute !important; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   Fluid type scale - .title<max><min> / .subtitle<max><min>
   Anchored 390 -> 1728. The class goes on a WRAPPER; the rule targets children.

   .title5636 is the one step here with no frame behind it: the design has no
   interior page, and a page title set in .title4428 came out the same size as
   the H2s underneath it. 56 sits between the hero's 68 and the section 44, so
   the ladder reads 68 / 56 / 44 / 32.
   ========================================================================== */

.title6838    > * { font-size: clamp(38px, 29.26px + 2.242vw, 68px); } /* H1 hero */
.title5636    > * { font-size: clamp(36px, 30.17px + 1.495vw, 56px); } /* H1 on an interior page */
.title4428    > * { font-size: clamp(28px, 23.34px + 1.196vw, 44px); } /* H2 section, Get In Touch */
.title3222    > * { font-size: clamp(22px, 19.09px + 0.747vw, 32px); } /* card + panel titles */
.title3226    > * { font-size: clamp(26px, 24.25px + 0.448vw, 32px); } /* the "?" glyph */
.subtitle2822 > * { font-size: clamp(22px, 20.25px + 0.448vw, 28px); } /* Head Office */
.subtitle2018 > * { font-size: clamp(18px, 17.42px + 0.149vw, 20px); } /* eyebrows, body copy */

/* ==========================================================================
   Section shell - the gap between two sections belongs to the lower one.
   ========================================================================== */

.section {
	position: relative;
	padding: var(--space-above, var(--space-default)) 0 0;
}

/* Filled sections split into a band so the background can run full-bleed while
   the gap layer above it stays transparent. Rendered on every section, filled
   or not, so the markup shape never changes. */
.section__band { position: relative; padding-inline: var(--gutter); }
.section__band--bleed { padding-inline: 0; }

/* A menu item lands on the section's own top edge, and the header pins itself
   as a bar over whatever is under it - 60px tall at 390, 94 at 1728 - so the
   jump has to clear that or the heading arrives underneath it. */
.section[id] { scroll-margin-top: clamp(90px, 84.17px + 1.495vw, 110px); }

.section__container { width: 100%; max-width: var(--container); margin-inline: auto; }
.section__narrow    { width: 100%; max-width: var(--narrow);    margin-inline: auto; }

/* ==========================================================================
   Shared pieces
   ========================================================================== */

/* Eyebrow - 20/18 Demi, uppercase in the copy itself. */
.eyebrow > * {
	margin: 0;
	font-weight: 600;
	text-align: center;
	color: var(--red-ink);
}
.eyebrow--light > * { color: var(--white); }

/* Section heading - 44/28 Demi red, centred. */
.section-title {
	font-weight: 600;
	line-height: 1.273; /* 44px heading in a 56px box */
	color: var(--red);
	text-align: center;
}

/* Intro paragraph - 20/18 Book, centred. */
.section-intro { text-align: center; color: var(--red-ink); }

/* Buttons - 280x50 desktop, full width at mobile, r10, 18px Demi/26. */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	/* 280 is the design's button at BOTH frames. min-width beats max-width per
	   spec, so a bare 280 pokes out of any column narrower than that - below
	   the 390 frame the gating panel's copy column is 267. */
	min-width: min(280px, 100%); max-width: 100%; height: 50px; padding: 0 24px;
	border-radius: var(--radius);
	font-size: 18px; line-height: 26px; font-weight: 600;
	text-align: center;
	transition: background-color .2s ease, color .2s ease;
}
.btn--primary   { background: var(--red);      color: var(--white); }
.btn--primary:hover,
.btn--primary:focus-visible { background: #c72c2d; }
.btn--secondary { background: var(--red-tint); color: var(--red); }
.btn--secondary:hover,
.btn--secondary:focus-visible { background: var(--white); }
.enquiry-form__submit {
	border: none;
}
@media (max-width: 767px) {
	/* Buttons keep their 280px width at mobile unless the design runs them the
	   full 330px of the column - the hero pair, Load more and Submit do, the
	   gating panel's "Enquire now" (280px) does not. */
	.hero-section__actions .btn,
	.services-section__loadMore,
	.enquiry-form__submit { width: 100%; }
}

/* Form controls - 50px tall, r10, white, label-as-placeholder in 20px Book. */
.field {
	width: 100%; height: 50px;
	padding: 0 15px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--white);
	color: var(--red-ink);
	/* The design is 20px at both frames, but 20 reads oversized in a phone's
	   field, so on request (2026-09-02) this runs 18px at 390 to the design's
	   20px at 1728. A clamp rather than a query: it is a value that travels,
	   not a layout change, so there is no width at which it jumps. 18 is the
	   floor, not a waypoint - below 390 it holds rather than easing further. */
	font-size: clamp(18px, 17.417px + 0.1495vw, 20px);
	line-height: 26px;
}
.field::placeholder { color: var(--red-ink); opacity: 1; }
.field:focus { border-color: var(--red); outline: none; }

textarea.field { height: 165px; padding: 12px 15px; resize: vertical; }

select.field {
	appearance: none;
	padding-right: 40px;
	/* The design's own chevron */
	background-image: url("img/icon-chevron.svg");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 12.37px 17px;
}

/* Icons drawn from the design's vectors rather than an icon font. */
.icon {
	display: inline-block; flex: none;
	background-color: currentColor;
	mask: var(--icon) no-repeat center / contain;
	-webkit-mask: var(--icon) no-repeat center / contain;
}
.icon--phone     { width: 18px;   height: 18px;    --icon: url("img/icon-phone.svg"); }
.icon--email     { width: 21px;   height: 15.75px; --icon: url("img/icon-email.svg"); }
.icon--linkedin  { width: 18px;   height: 18px;    --icon: url("img/icon-linkedin.svg"); }
.icon--facebook  { width: 22px;   height: 21.92px; --icon: url("img/icon-facebook.svg"); }
.icon--instagram { width: 18px;   height: 18px;    --icon: url("img/icon-instagram.svg"); }

/* Full-bleed marquee shared by the client and accreditation strips. */
.marquee { overflow: hidden; }
.marquee__track {
	display: flex; align-items: center; width: max-content;
	animation: marquee-scroll var(--marquee-duration, 45s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
	.marquee { overflow-x: auto; }
}

/* The 404 holds too little content to push the legal bar down the screen, so
   it — and only it — gets a sticky-footer layout. Scoped to the error404 body
   class rather than applied globally, because every other page is long enough
   on its own and a flex body would be a change no other template asked for. */
body.error404 {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Mobile browser chrome makes 100vh taller than the visible area. */
@supports (min-height: 100dvh) {
	body.error404 {
		min-height: 100dvh;
	}
}

body.error404 main {
	flex: 1 0 auto;
}