/* ==========================================================================
   GARI design standards — 2026 website review
   Palette, type scale and button rules. Loaded by the GARI Site Tweaks
   mu-plugin after Divi's stylesheets.

   Scoping note: everything here is deliberately limited to page content
   sections. Divi's theme-builder header (*_tb_header) and footer
   (*_tb_footer) keep their own layout and spacing.
   ========================================================================== */

:root {
	--gari-navy:       #102A43; /* authority, governance, headings */
	--gari-green:      #6FAC39; /* brand accent, taken from the GARI logo */
	--gari-green-deep: #2C6E49;
	--gari-grey:       #F4F6F8;
	--gari-body:       #2F3A45;
}

/* Content sections only - never the theme-builder header or footer */
/* Font and scale only - colour is left to each Divi module, because
   several sections place headings on dark backgrounds. */
#et-boc .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) :is(h1,h2,h3,h4) {
	font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.25;
}
#et-boc .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) h1 {
	font-size: clamp(2.25rem, 1.55rem + 2.4vw, 3.375rem); font-weight: 700; letter-spacing: -0.015em;
}
#et-boc .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) h2 {
	font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.375rem); font-weight: 600; letter-spacing: -0.01em;
}
#et-boc .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) h3 {
	font-size: clamp(1.25rem, 1.10rem + 0.7vw, 1.625rem); font-weight: 600;
}

/* --- Buttons: one consistent style (#30) --------------------------------- */
#et-boc .et_pb_button,
#et-boc .et_pb_contact_submit {
	background-color: var(--gari-green) !important;
	border: 2px solid var(--gari-green) !important;
	color: #FFFFFF !important;
	border-radius: 100px !important;
	font-family: "Work Sans", system-ui, sans-serif !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}
#et-boc .et_pb_button:hover,
#et-boc .et_pb_contact_submit:hover {
	background-color: var(--gari-navy) !important;
	border-color: var(--gari-navy) !important;
	color: #FFFFFF !important;
}

/* Secondary CTA in the hero.
   Driven by the Divi "CSS Class" field on the button module
   (Advanced > CSS ID & Classes), not by a section index, so the rule
   survives any re-ordering of sections. */
#et-boc .et_pb_button.gari-cta-secondary {
	background-color: transparent !important;
	border-color: #FFFFFF !important;
	color: #FFFFFF !important;
}
#et-boc .et_pb_button.gari-cta-secondary:hover {
	background-color: #FFFFFF !important;
	border-color: #FFFFFF !important;
	color: var(--gari-navy) !important;
}

/* Hero CTAs side by side. Divi wraps each button in its own block-level
   wrapper div, so the wrapper is what has to go inline - selected via the
   custom class on the button inside it. */
/* Divi 5 lays columns out with flexbox and drives the axis from its own
   --flex-direction variable, so the two CTAs are put on one row by flipping
   that variable for the column that contains them - found via the custom
   class, so no section/module index is hard-coded. Every other module in the
   column stays full width, which keeps the stacked order above unchanged. */
@media (min-width: 768px) {
	#et-boc .et_flex_column:has(.gari-hero-cta) {
		--flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
	}
	#et-boc .et_flex_column:has(.gari-hero-cta) > .et_pb_module { width: 100%; }
	#et-boc .et_flex_column:has(.gari-hero-cta) > .et_pb_button_module_wrapper { width: auto; }
}

/* --- Links --------------------------------------------------------------- */
#et-boc .et_pb_section:not([class*="_tb_"]) a:not(.et_pb_button) {
	color: var(--gari-green-deep);
	transition: color .2s ease;
}
#et-boc .et_pb_section:not([class*="_tb_"]) a:not(.et_pb_button):hover { color: var(--gari-navy); }

/* --- Footer links -------------------------------------------------------- */
#et-boc [class*="_tb_footer"] a:not(.et_pb_button) { color: rgba(255,255,255,0.72) !important; }
#et-boc [class*="_tb_footer"] a:not(.et_pb_button):hover { color: #FFFFFF !important; }

/* --- Restrained motion (#33) --------------------------------------------- */
/* The header fade/resize was set to 2s, which made the whole site feel slow. */
.pa-header, .pa-header img, .pa-fixed-header, .pa-fixed-header img {
	transition-duration: .3s !important;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Homepage hero: CTAs sit side by side from tablet up ------------------ */
/* Scoped to the hero section only, so no other layout is affected. */
/* --- Lead paragraph ------------------------------------------------------ */
/* The opening statement below the hero reads as an intro, not body copy. */
.home #et-boc .et_pb_section_1 .et_pb_text p {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
	line-height: 1.65;
	color: var(--gari-body);
	max-width: 66ch;
}

/* --- Numbered service cards (#9, #13) ------------------------------------ */
/* The number sits on its own line above the title, so titles stay short and
   the four cards line up instead of wrapping to different depths. */
#et-boc .gari-num {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--gari-green);
	margin-bottom: 8px;
}
/* Card titles are not given a fixed height. The cards sit two across, so the
   titles fit on one or two lines and align on their own. A fixed height was
   needed only while the cards were four across, and left a gap once they
   changed to two. */


/* --- Service card icons (#9, #10) ---------------------------------------- */
/* Centring is set with Divi's own alignment control on each image module.
   These rules only cap the size and tidy the spacing around it. */
#et-boc .gari-service-icon img {
	max-height: 120px;
	width: auto;
	height: auto;
}
#et-boc .gari-service-icon { margin-bottom: 16px; }

/* --- Service cards: equal height and a tighter gap (#13) ----------------- */
/* Scoped with :has() to the rows that hold the service icons, so no other row
   on the site is affected. Divi 5 rows are flex, so the gap is set with the
   gap properties rather than column padding. */
@media (min-width: 768px) {
	#et-boc .et_pb_row:has(.gari-service-icon) {
		align-items: stretch;
		column-gap: 20px;
		row-gap: 20px;
	}
	#et-boc .et_pb_row:has(.gari-service-icon) > .et_pb_column {
		height: auto;
		margin-right: 0 !important;
	}
}

/* --- Homepage hero height (#4) ------------------------------------------- */
/* The hero fills the screen and the content sits low in it, above the fold.
   justify-content is not used here: the row fills the section, so there is no
   free space for flex alignment to distribute and it has no effect. The top
   padding is set as a share of the viewport instead, which is predictable at
   any screen height. 45vh + content + bottom padding stays inside 100svh on a
   laptop, so the buttons are always visible without scrolling. */
#et-boc .gari-hero {
	min-height: 100vh;
	min-height: 100svh;
	padding-top: clamp(160px, 45vh, 520px) !important;
	padding-bottom: 88px !important;
}
@media (max-width: 980px) {
	#et-boc .gari-hero {
		padding-top: clamp(130px, 34vh, 300px) !important;
		padding-bottom: 64px !important;
	}
}