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

/* ═══════════════════════════════════════════════════════════════
   CONVENTIONS

   · Desktop first. Base rules describe the wide layout; every media
     query is `max-width` and steps downwards. Breakpoints in use:
     1150 (nav → dropdown), 1100, 900, 767.
   · One declaration per line, alphabetical within a rule.
   · Fluid values are clamps anchored to the design's own frame
     widths, 390 → 1728.
   · Section spacing belongs to the TOP of each section only, as
     --space-above. There is no "space below".
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TOKENS
   Colours read from the desktop and mobile designs.
   ═══════════════════════════════════════════════════════════════ */
:root {
	/* Palette */
	--gd-blue: #2B5F94;
	--gd-blue-dark: #21496F;
	--gd-blue-80: rgba(43, 95, 148, 0.8);
	--gd-blue-20: rgba(43, 95, 148, 0.2);
	--gd-ink: #292A2B;
	--gd-black: #000000;
	--gd-white: #FFFFFF;
	--gd-panel: #E2E9F1;
	--gd-tint: #ECF1F5;
	--gd-hero-fade: #F5F8FA;
	--gd-card-open: #8DA9C5;
	--gd-panel-light: #F7F7F7;
	--gd-footer-bar: #A0B7CF;
	--gd-field-ink: #210202;
	--gd-consent-ink: rgba(29, 37, 45, 0.7);

	/* Layout */
	--gd-gutter: clamp(30px, 9.6px + 5.2317vw, 100px);
	--gd-container: 1528px;
	--gd-narrow: 680px; /* centred text column for editor-written pages */
	--gd-header-h: 148px;
	/* Pinned state. 20px of padding read as tall on review, so the logo comes
	   down to 50px with 15px above and below — 80px against 148 at rest. Both
	   restore at the top of the page, which is the only place the pinned and
	   resting positions coincide. */
	--gd-header-h-compact: 80px;
	--gd-header-logo-compact: 50px;
	--gd-radius-card: 20px;
	/* Hero image only: rx30 at 1728, rx20 at 390. Every other card and
	   image is a flat 20 at both widths. */
	--gd-radius-hero: clamp(20px, 17.09px + 0.7474vw, 30px);
	--gd-radius-tile: 10px;
	--gd-radius-pill: 30px;

	/* Type — Neue Frutiger World from the client's Adobe Fonts kit.
	   Adobe publishes the family lowercase-hyphenated; the display name
	   after it matches a locally installed copy. */
	--gd-font: "neue-frutiger-world", "Neue Frutiger World", "Frutiger", "Segoe UI", system-ui, -apple-system, sans-serif;
	--gd-h1: clamp(38px, 32.17px + 1.4948vw, 58px);
	--gd-h1-lh: clamp(50px, 44.17px + 1.4948vw, 70px);
	--gd-h2: clamp(28px, 23.92px + 1.0463vw, 42px);
	--gd-h2-lh: clamp(32px, 26.17px + 1.4948vw, 52px);
	--gd-h3: clamp(22px, 20.25px + 0.4484vw, 28px);
	--gd-h3-lh: clamp(30px, 27.67px + 0.5979vw, 38px);
	--gd-body: 16px;
	--gd-body-lh: 26px;
	--gd-eyebrow: clamp(18px, 17.42px + 0.1495vw, 20px);
	--gd-eyebrow-lh: clamp(26px, 25.42px + 0.1495vw, 28px);
	--gd-legal: clamp(14px, 16.58px + -0.1495vw, 16px);

	/* Weights. The Adobe Fonts kit serves neue-frutiger-world at 100–900 in
	   hundreds only — there is no 750 face, so the design's Heavy 750 has to
	   land on a neighbour. Measured on advance width at 42px, 700 is +0.3%/+0.5%
	   and 800 is +3.9%/+4.1% — so Heavy is 700, not 800. Same test on Bold at
	   22px: 600 is +0.6%, 700 is +4.1%. The earlier 800/700 pair is what the
	   client flagged as 'extra bolded' on titles and subtitles.

	   The full mapping (the design's style names sit one kit slot BELOW their
	   apparent number):
	     Book    -> 300   (0.00% / +0.26% / +0.47%, three samples)
	     Regular -> 400   (+0.09% on a 1068px string)
	     Bold    -> 600   (+0.6%)
	     Heavy   -> 700   (0.00% twice)
	   Heavy is NOT an approximation — 700 is the same outline, exactly. Book and
	   Regular are DIFFERENT faces in the design, so both tokens are needed. */
	--gd-heavy: 700;
	--gd-bold: 600;
	--gd-medium: 500;
	--gd-regular: 400;
	--gd-book: 300;

	--gd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ═══════════════════════════════════════════════════════════════
   RESET / BASE
   ═══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	background: var(--gd-white);
	color: var(--gd-black);
	font-family: var(--gd-font);
	font-size: var(--gd-body);
	font-weight: var(--gd-regular);
	line-height: var(--gd-body-lh);
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-style: normal;
	font-weight: var(--gd-heavy);
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
	padding: 0;
}

p + p {
	margin-top: var(--gd-body-lh);
}

ul,
ol {
	margin: 0;
	padding: 0;
}

li {
	margin: 0;
	padding: 0;
}

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

a {
	color: var(--gd-blue);
	text-decoration: none;
	transition: color 0.25s var(--gd-ease), opacity 0.25s var(--gd-ease);
}

a:hover {
	color: var(--gd-blue-dark);
}

em {
	font-style: italic;
}

strong {
	font-weight: var(--gd-bold);
}

button {
	font: inherit;
}

/* Form controls do not inherit the family on their own */
input,
select,
textarea,
button {
	font-family: inherit;
}

main {
	display: block;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT

   Every section is two boxes: the <section> is a transparent gap
   layer carrying only --space-above, and the __band inside it holds
   any background plus its own inner padding. The band is rendered
   for every section, filled or not, so the markup shape never
   changes when a background is switched on.
   ═══════════════════════════════════════════════════════════════ */
.gd-container {
	margin: 0 auto;
	max-width: calc(var(--gd-container) + var(--gd-gutter) * 2);
	padding-inline: var(--gd-gutter);
	width: 100%;
}

.gd-section {
	padding-top: var(--space-above, clamp(40px, 34.17px + 1.4948vw, 60px));
	position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
   ═══════════════════════════════════════════════════════════════ */
.gd-h1 {
	color: var(--gd-blue);
	font-size: var(--gd-h1);
	font-weight: var(--gd-heavy);
	line-height: var(--gd-h1-lh);
}

.gd-h2 {
	color: var(--gd-blue);
	font-size: var(--gd-h2);
	font-weight: var(--gd-heavy);
	line-height: var(--gd-h2-lh);
}

.gd-h3 {
	font-size: var(--gd-h3);
	font-weight: var(--gd-heavy);
	line-height: var(--gd-h3-lh);
}

.gd-eyebrow {
	color: var(--gd-black);
	font-size: var(--gd-eyebrow);
	font-weight: var(--gd-regular);
	line-height: var(--gd-eyebrow-lh);
	text-align: center;
}

.gd-body {
	color: var(--gd-black);
	font-size: var(--gd-body);
	line-height: var(--gd-body-lh);
}

/* Rich text arrives from a WYSIWYG field, so it can hold several
   paragraphs, lists and inline links. */
.gd-body > p:first-child {
	margin-top: 0;
}

.gd-body a {
	text-decoration: underline;
	text-underline-position: from-font;
}

.gd-body ul,
.gd-body ol {
	margin: var(--gd-body-lh) 0 0;
	padding-left: 20px;
}

.gd-body li {
	list-style: disc;
}

.gd-body ol li {
	list-style: decimal;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — 250x50 pill, radius 30
   ═══════════════════════════════════════════════════════════════ */
.gd-btn {
	align-items: center;
	background: var(--gd-blue);
	border: 1px solid var(--gd-blue);
	border-radius: var(--gd-radius-pill);
	color: var(--gd-white);
	cursor: pointer;
	display: inline-flex;
	font-size: 16px;
	font-weight: var(--gd-regular);
	justify-content: center;
	line-height: 26px;
	min-height: 50px;
	min-width: 250px;
	padding: 11px 24px;
	text-align: center;
	transition: background-color 0.3s var(--gd-ease), border-color 0.3s var(--gd-ease), color 0.3s var(--gd-ease);
}

.gd-btn:hover,
.gd-btn:focus-visible {
	background: var(--gd-white);
	border-color: var(--gd-blue);
	color: var(--gd-blue);
}

.gd-btn--outline {
	background: transparent;
	color: var(--gd-blue);
}

.gd-btn--outline:hover,
.gd-btn--outline:focus-visible {
	background: var(--gd-blue);
	color: var(--gd-white);
}

.gd-btn--wide {
	min-width: 280px;
}

/* ═══════════════════════════════════════════════════════════════
   SLIDER ARROWS — 50px circles
   ═══════════════════════════════════════════════════════════════ */
/* The arrows sit 10px apart at 390 and 20px apart at 1728. Flat 20px made the
   head row 350px wide inside a 330px container at 390, pushing the last arrow
   20px past the right gutter. */
.gd-arrows {
	display: flex;
	gap: clamp(10px, 7.09px + 0.7474vw, 20px);
}

.gd-arrow {
	align-items: center;
	background: var(--gd-blue);
	border: 0;
	border-radius: 50%;
	color: var(--gd-white);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 17px;
	height: 50px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color 0.3s var(--gd-ease);
	width: 50px;
}

.gd-arrow:hover:not(.gd-arrow--off) {
	background: var(--gd-blue-dark);
}

/* Disabled end state — the circle drops to #2B5F94 at
   20% while the glyph stays solid white. */
.gd-arrow--off {
	background: rgba(43, 95, 148, 0.2);
	cursor: default;
	pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEAD — heading and copy left, CTA cluster right
   ═══════════════════════════════════════════════════════════════ */
.gd-head {
	align-items: flex-end;
	display: flex;
	gap: 40px;
	justify-content: space-between;
}

.gd-head__intro {
	flex: 1 1 auto;
	max-width: 1012px;
}

.gd-head__text {
	margin-top: 10px;
}

/* Same 10 → 20 ramp as .gd-arrows: the head text ends at 240 with the first
   arrow at 250 (mobile), and at 1488 with the first at 1508 (desktop). */
.gd-head__actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: clamp(10px, 7.09px + 0.7474vw, 20px);
}

/* ═══════════════════════════════════════════════════════════════
   SHARED SLIDER SHELL

   The track runs from the container's left edge to the viewport's
   right edge so the neighbouring slides show, exactly as in the
   design (3 x 483 cards + 40 gaps, 4th slide starting at x1668).
   ═══════════════════════════════════════════════════════════════ */
:root {
	--gd-slide-gap: clamp(10px, 1.26px + 2.2422vw, 40px);
}

/* Slick's clipping is lifted off .slick-list further down and
   re-applied here: this element is full-bleed, so the track is cut
   at the page edge. `clip` rather than `hidden` — it creates no
   scroll container, so nothing scrolls sideways and overflow-y
   stays visible. */
.gd-slider-viewport {
	overflow-x: clip;
	overflow-y: visible;
	width: 100%;
}

.gd-slider {
	margin-left: max(var(--gd-gutter), calc((100% - var(--gd-container)) / 2));
	margin-right: calc(max(var(--gd-gutter), calc((100% - var(--gd-container)) / 2)) - var(--gd-slide-gap));
}

.gd-slider .slick-slide {
	opacity: 0.3;
	padding-right: var(--gd-slide-gap);
	transition: opacity 0.55s var(--gd-ease);
}

.gd-slider .slick-slide.slick-active {
	opacity: 1;
}

.gd-slider:not(.slick-initialized) {
	display: flex;
}

.gd-slider:not(.slick-initialized) > * {
	flex: 0 0 calc(100% / 3);
	padding-right: var(--gd-slide-gap);
}

/* ═══════════════════════════════════════════════════════════════
   MEDIA CARD — 483x561, radius 20
   ═══════════════════════════════════════════════════════════════ */
.gd-card {
	aspect-ratio: 483 / 561;
	border-radius: var(--gd-radius-card);
	color: var(--gd-white);
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* Height guard. The card's height is derived from its width, so a short
   screen has no say in it — at 1400x800 the section measured 904px and the
   client could never see its top and bottom at once. Cap the height at
   whatever the screen has left once the pinned header and the section head
   are paid for, and let the ratio go wide when it must; the media is
   object-fit: cover, so nothing distorts and only the crop changes. The
   floor stops the card collapsing on a very short window. Desktop only —
   the one-up mobile card already fits. */
@media (min-width: 768px) {
	.gd-card {
		max-height: max(300px, calc(100vh - 320px));
		max-height: max(300px, calc(100svh - 320px));
	}
}

/* Below 1100 .gd-head stacks — measured 174px against 109px wide — so the
   card has about 70px less of the screen to work with. */
@media (min-width: 768px) and (max-width: 1100px) {
	.gd-card {
		max-height: max(300px, calc(100vh - 390px));
		max-height: max(300px, calc(100svh - 390px));
	}
}

a.gd-card,
.gd-card[role="button"] {
	cursor: pointer;
}

.gd-card__media {
	inset: 0;
	position: absolute;
}

.gd-card__media img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--gd-ease);
	width: 100%;
}

.gd-card:hover .gd-card__media img {
	transform: scale(1.06);
}

.gd-card::after {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 17.38%, rgba(0, 0, 0, 0) 92.87%);
	content: "";
	inset: 0;
	position: absolute;
}

/* Title and arrow share a row, so the arrow is centred on the text
   rather than floating at its own offset from the card edge. */
.gd-card__body {
	align-items: center;
	bottom: clamp(24px, 19.34px + 1.1958vw, 40px);
	display: flex;
	gap: 20px;
	justify-content: space-between;
	left: clamp(18px, 11.59px + 1.6442vw, 40px);
	position: absolute;
	right: clamp(18px, 11.59px + 1.6442vw, 40px);
	z-index: 2;
}

.gd-card__title {
	color: var(--gd-white);
	display: block;
	font-size: var(--gd-h3);
	font-weight: var(--gd-heavy);
	line-height: var(--gd-h3-lh);
	margin: 0;
	text-shadow: 4px 4px 24px rgba(0, 0, 0, 0.45);
}

.gd-card__arrow {
	align-items: center;
	color: var(--gd-white);
	display: flex;
	flex: 0 0 26px;
	font-size: 20px;
	height: 26px;
	justify-content: center;
	line-height: 1;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.3s var(--gd-ease), transform 0.3s var(--gd-ease);
	width: 26px;
}

/* Modal cards carry the design's thin plus (26x26 with 2px strokes), not an
   arrow — an arrow reads as "goes somewhere"
   and these open a modal in place. Same construction as the accordion plus. */
.gd-card__plus {
	display: block;
	height: 100%;
	position: relative;
	width: 100%;
}

.gd-card__plus::before,
.gd-card__plus::after {
	background: currentColor;
	content: "";
	inset: 0;
	margin: auto;
	position: absolute;
}

.gd-card__plus::before {
	height: 2px;
	width: 100%;
}

.gd-card__plus::after {
	height: 100%;
	width: 2px;
}

.gd-card:hover .gd-card__arrow,
.gd-card:focus-visible .gd-card__arrow {
	opacity: 1;
	transform: translateX(0);
}

/* ═══════════════════════════════════════════════════════════════
   SLICK OVERRIDES — the theme's arrows replace slick's own
   ═══════════════════════════════════════════════════════════════ */
.slick-slider {
	margin-bottom: 0;
}

/* slick.css is enqueued from the section templates, so it loads AFTER
   this file — a bare `.slick-list { overflow: visible }` loses to
   slick's own `overflow: hidden` on equal specificity. Scoped so it
   wins on weight rather than order, or the neighbouring slides are
   clipped away. */
.gd-slider.slick-slider .slick-list {
	overflow: visible;
}

.slick-track {
	display: flex;
}

.slick-slide {
	height: auto;
}

.slick-slide > div {
	height: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
	.gd-head {
		align-items: stretch;
		flex-direction: column;
		gap: 20px;
	}

	.gd-head__actions {
		justify-content: space-between;
	}
}

@media (max-width: 767px) {
	.gd-btn {
		width: 100%;
	}

	.gd-btn--wide {
		min-width: 210px;
		width: auto;
	}
}

@media (hover: none) {
	.gd-card__arrow {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gd-slider .slick-slide {
		transition: none;
	}
}

/* ═══════════════════════════════
   404 — centred and narrow. The only place in the theme that needs
   space BELOW a section, because there is no band or following
   section to supply it.
   ═══════════════════════════════ */
.gd-404 {
	padding-bottom: clamp(60px, 45.43px + 3.7369vw, 110px);
}

.gd-404__inner {
	margin-inline: auto;
	max-width: 720px;
	text-align: center;
}

.gd-404__intro {
	margin-top: 20px;
}

.gd-404__intro a {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* ═══════════════════════════════════════════════════════════════
   PROSE — editor content (Gutenberg) on the legal pages.

   The design has no interior page, so nothing here is measured off
   a frame; it is built from the theme's own tokens so a legal page
   reads as the same site.

   These headings size themselves rather than sitting in a type-scale
   wrapper: the editor emits bare <h2>/<h3> and there is nothing to
   hang a helper class on.
   ═══════════════════════════════════════════════════════════════ */
.gd-prose {
	color: var(--gd-black);
	font-size: var(--gd-body);
	line-height: var(--gd-body-lh);
	margin-inline: auto;
	max-width: var(--gd-narrow);
	width: 100%;
}

/* One rhythm for the whole flow, so a block never has to know what
   follows it. Kept at the theme's own paragraph step. */
.gd-prose > * + * {
	margin-top: var(--gd-body-lh);
}

.gd-prose > h1 + * {
	margin-top: clamp(20px, 14.17px + 1.4948vw, 40px);
}

.gd-prose h2,
.gd-prose h3,
.gd-prose h4 {
	text-wrap: balance;
}

.gd-prose h2 {
	color: var(--gd-blue);
	font-size: var(--gd-h2);
	line-height: var(--gd-h2-lh);
	margin-top: clamp(30px, 25.63px + 1.1211vw, 45px);
}

.gd-prose h3 {
	font-size: var(--gd-h3);
	line-height: var(--gd-h3-lh);
	margin-top: clamp(24px, 20.5px + 0.8969vw, 36px);
}

.gd-prose h4 {
	font-size: var(--gd-eyebrow);
	line-height: var(--gd-eyebrow-lh);
	margin-top: 24px;
}

/* A heading belongs to the text it introduces, so it binds tighter to what
   follows than two paragraphs do to each other. */
.gd-prose > :is(h2, h3, h4) + * {
	margin-top: 12px;
}

/* A subheading straight after a section heading keeps a little more air,
   so the two do not read as one stacked title. */
.gd-prose > :is(h2, h3) + :is(h3, h4) {
	margin-top: 20px;
}

.gd-prose h2:first-child,
.gd-prose h3:first-child,
.gd-prose h4:first-child {
	margin-top: 0;
}

.gd-prose a {
	text-decoration: underline;
	text-underline-position: from-font;
}

.gd-prose ul,
.gd-prose ol {
	list-style: disc;
	padding-left: 24px;
}

.gd-prose ol {
	list-style: decimal;
}

.gd-prose li + li {
	margin-top: 8px;
}

.gd-prose li::marker {
	color: var(--gd-blue);
}

.gd-prose blockquote {
	border-left: 2px solid var(--gd-blue);
	font-size: var(--gd-h3);
	line-height: var(--gd-h3-lh);
	margin-inline: 0;
	padding-left: 20px;
}

.gd-prose img,
.gd-prose figure {
	border-radius: var(--gd-radius-tile);
}

.gd-prose figure {
	margin-inline: 0;
}

.gd-prose figcaption {
	color: var(--gd-consent-ink);
	font-size: var(--gd-legal);
	margin-top: 10px;
}

.gd-prose hr {
	background: var(--gd-blue-20);
	border: 0;
	height: 1px;
	margin-block: clamp(30px, 25.63px + 1.1211vw, 45px);
}

.gd-prose table {
	border-collapse: collapse;
	width: 100%;
}

.gd-prose th,
.gd-prose td {
	border-bottom: 1px solid var(--gd-blue-20);
	padding: 10px 15px;
	text-align: left;
}

/* A footer link targeting a heading has to clear the pinned bar. */
.gd-prose [id] {
	scroll-margin-top: clamp(90px, 84.17px + 1.4948vw, 110px);
}

/* Editor-written pages need space BELOW, for the same reason .gd-404 does:
   there is no following section or band to supply it. */
.gd-page {
	padding-bottom: clamp(60px, 45.43px + 3.7369vw, 110px);
}
/* 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;
}