/* =========================================================================
   GeneratePress Client Child  |  main.css
   =========================================================================

   HOW TO REBRAND A CLIENT SITE
   Change the values in the :root block below. That single block controls
   colour, type, spacing, and shape across the whole site. Swap the logo in
   Appearance, then Customize, then Layout, then Header. Nothing else needs
   editing for a fresh client look.
   ========================================================================= */

:root {
	/* Brand colour. This is the one a client notices first. */
	--brand: #1a56db;
	--brand-dark: #1442ab;
	--brand-contrast: #ffffff;

	/* Neutrals. Text and surfaces. */
	--ink: #0f172a;
	--muted: #475569;
	--line: #e2e8f0;
	--surface: #ffffff;
	--surface-alt: #f8fafc;

	/* Type. Pick fonts in GeneratePress Typography, then set the stack here. */
	--font-body: var(--gp-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--font-head: var(--gp-font-head, var(--font-body));
	--text-base: 1.0625rem;
	--leading: 1.65;

	/* Shape and rhythm. */
	--radius: 10px;
	--gap: clamp(1rem, 2vw, 1.5rem);
	--section-y: clamp(3rem, 7vw, 6rem);

	/* Motion. */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--motion: 0.6s;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading);
	color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	line-height: 1.2;
	color: var(--ink);
}

a {
	color: var(--brand);
	text-underline-offset: 0.15em;
}

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

/* Images never push layout around as they load. This guards CLS. */
img {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.gpcc-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--brand);
	color: var(--brand-contrast);
	border-radius: var(--radius);
	padding: 0.75em 1.5em;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--motion) var(--ease), transform var(--motion) var(--ease);
}

.gpcc-btn:hover,
.wp-block-button__link:hover {
	background: var(--brand-dark);
	color: var(--brand-contrast);
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   Inline icons
   ------------------------------------------------------------------------- */

.gpcc-icon {
	display: inline-block;
	vertical-align: middle;
	flex: none;
}

/* -------------------------------------------------------------------------
   Scroll animation
   The "js" class is added by the theme only when JavaScript runs, so visitors
   without JavaScript always see the content. Reduced motion users skip it too.
   Add data-animate to any block to fade it in on scroll.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.js [data-animate],
	.js .u-animate {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity var(--motion) var(--ease), transform var(--motion) var(--ease);
		will-change: opacity, transform;
	}

	.js [data-animate].is-visible,
	.js .u-animate.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------- */

.gpcc-section {
	padding-block: var(--section-y);
}

.gpcc-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--gap);
}

/* -------------------------------------------------------------------------
   Pattern helpers
   Styling for the starter block patterns. Each hooks onto a class so the
   pattern markup stays clean and these rules control the look.
   ------------------------------------------------------------------------- */

.gpcc-hero {
	background: var(--surface-alt);
}

.gpcc-lead {
	font-size: 1.2rem;
	color: var(--muted);
	max-width: 48ch;
	margin-inline: auto;
}

.gpcc-cta {
	background: var(--brand);
	color: var(--brand-contrast);
}

.gpcc-cta h1,
.gpcc-cta h2,
.gpcc-cta h3 {
	color: var(--brand-contrast);
}

.gpcc-cta p,
.gpcc-cta .gpcc-lead {
	color: var(--brand-contrast);
	opacity: 0.92;
}

/* -------------------------------------------------------------------------
   Contact, logos, and testimonials
   ------------------------------------------------------------------------- */

.gpcc-contact-item {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.75rem;
}

.gpcc-contact-item .gpcc-icon {
	color: var(--brand);
}

.gpcc-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	color: var(--muted);
	font-weight: 600;
}

.gpcc-quote {
	font-size: 1.05rem;
}

.gpcc-cite {
	color: var(--muted);
	font-weight: 600;
	margin-top: 0.5rem;
}