/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.0.0
*/

/* ==========================================================================
 * Design foundations (UI/UX redesign Phase 1, 2026-10-18)
 *
 * Load order matters: GeneratePress enqueues this file a second time as
 * `generate-child`, AFTER its own `generate-style-inline-css` block that
 * defines :root { --contrast … --accent }. Equal specificity + later source
 * = these values win, with no !important needed. Every existing child-theme
 * stylesheet already reads the GP variables, so remapping them here restyles
 * the whole site from one place.
 * ========================================================================== */

:root {
	/* Brand tokens */
	--if-ink: #14181f;          /* charcoal — body text, dark sections */
	--if-navy: #1c2a3a;         /* deep navy — reserved for dark panels (Phase 2+) */
	--if-paper: #faf8f4;        /* warm paper — page background */
	--if-white: #ffffff;        /* cards, form surfaces */
	--if-grey-text: #4b535d;    /* supporting text — 7.3:1 on paper */
	--if-grey-ui: #7a828c;      /* UI borders/placeholders — ≥3:1 on white */
	--if-grey-line: #e4e2dc;    /* hairlines, dividers */
	--if-grey-soft: #f1efea;    /* subtle panel tint */
	--if-red: #c8102e;          /* fire-engine red — 5.9:1 with white text */
	--if-red-dark: #a00d25;     /* hover/active — 8.1:1 with white text */
	--if-focus: var(--if-red);

	/* GeneratePress global colours → brand tokens (parent theme untouched) */
	--contrast: var(--if-ink);
	--contrast-2: var(--if-grey-text);
	--contrast-3: var(--if-grey-ui);
	--base: var(--if-grey-line);
	--base-2: var(--if-paper);
	--base-3: var(--if-white);
	--accent: var(--if-red);

	/* Fluent Forms reads this for its submit button (fluentform-public-default.css). */
	--fluentform-primary: var(--if-red);

	/* Type scale — fluid between ~360px and ~1280px viewports */
	--if-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--if-text-sm: 0.875rem;
	--if-text-base: 1.0625rem;
	--if-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--if-text-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--if-text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	--if-text-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
	--if-text-h1: clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
	--if-leading-tight: 1.15;
	--if-leading-body: 1.6;

	/* Spacing scale (4px base) */
	--if-space-1: 0.25rem;
	--if-space-2: 0.5rem;
	--if-space-3: 0.75rem;
	--if-space-4: 1rem;
	--if-space-5: 1.5rem;
	--if-space-6: 2rem;
	--if-space-7: 3rem;
	--if-space-8: 4rem;
	--if-space-9: 6rem;
	--if-section-y: clamp(3rem, 2rem + 4vw, 6rem);

	--if-radius-sm: 4px;
	--if-transition: 150ms ease;
}

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

body {
	font-size: var(--if-text-base);
	line-height: var(--if-leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	color: var(--if-ink);
	font-weight: 700;
	line-height: var(--if-leading-tight);
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

h1 {
	font-size: var(--if-text-h1);
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--if-text-h2);
}

h3 {
	font-size: var(--if-text-h3);
}

h4 {
	font-size: var(--if-text-h4);
}

.entry-content p,
.entry-content li {
	max-width: 72ch;
}

/* --------------------------------------------------------------------------
 * Links and focus
 * ------------------------------------------------------------------------ */

a {
	text-underline-offset: 0.18em;
	transition: color var(--if-transition);
}

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

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

/* Red on charcoal is only ~3:1 — use white rings on the dark footer. */
.site-footer :focus-visible,
.intimefire-footer-menu-wrap :focus-visible {
	outline-color: var(--if-white);
}

/* --------------------------------------------------------------------------
 * Buttons
 * Same selector list GeneratePress uses for its #55555e default, so these
 * replace its colours exactly where it applied them — nothing broader.
 * ------------------------------------------------------------------------ */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background) {
	color: var(--if-white);
	background-color: var(--if-red);
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
a.button:focus,
a.wp-block-button__link:not(.has-background):active,
a.wp-block-button__link:not(.has-background):focus,
a.wp-block-button__link:not(.has-background):hover {
	color: var(--if-white);
	background-color: var(--if-red-dark);
}

/* Box model only for content buttons — never the header/menu/search toggles. */
a.button,
.wp-block-button__link,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border-radius: var(--if-radius-sm);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--if-transition), color var(--if-transition), border-color var(--if-transition);
}

/* Secondary: charcoal outline (core "Outline" block style). */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	color: var(--if-ink);
	background-color: transparent;
	border: 2px solid var(--if-ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus {
	color: var(--if-white);
	background-color: var(--if-ink);
	border-color: var(--if-ink);
}

/* Tertiary: text link with arrow. Opt-in utility for upcoming patterns. */
.if-text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375em;
	min-height: 44px;
	font-weight: 600;
	color: var(--if-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--if-red);
}

.if-text-link:hover {
	color: var(--if-red-dark);
}

/*
 * Fluent Forms submit. Fluent defines --fluentform-primary on :root, and on
 * templates where the shortcode runs late (e.g. single-product.php) its
 * stylesheet prints in the footer — after this file — so the :root value
 * above loses on source order. Setting the variable on the form element
 * itself wins regardless of load order.
 */
.fluentform {
	--fluentform-primary: var(--if-red);
}

.fluentform .ff-btn-submit:focus-visible {
	outline: 3px solid var(--if-focus);
	outline-offset: 2px;
}

.fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	min-height: 48px;
	border-radius: var(--if-radius-sm);
	font-weight: 600;
}

.fluentform .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: var(--if-red-dark);
	opacity: 1;
}

/* --------------------------------------------------------------------------
 * Header and primary navigation (Phase 2, 2026-10-18)
 * Restyles GeneratePress's own header/nav markup; no template overrides.
 * The quote button is a normal menu item carrying the `if-menu-cta` class
 * (Appearance → Menus → CSS Classes), so it stays editable in wp-admin.
 * ------------------------------------------------------------------------ */

.site-header {
	background-color: var(--if-white);
	border-bottom: 1px solid var(--if-grey-line);
}

.inside-header {
	padding-top: var(--if-space-3);
	padding-bottom: var(--if-space-3);
}

.main-navigation .main-nav ul li a {
	font-size: 0.9375rem;
	font-weight: 600;
}

/* GP sets submenus on --base, which is now the beige hairline colour. */
.main-navigation ul ul {
	background-color: var(--if-white);
	border: 1px solid var(--if-grey-line);
	box-shadow: 0 8px 24px rgba(20, 24, 31, 0.08);
}

.main-navigation .main-nav ul ul li a {
	font-weight: 500;
	line-height: 1.35;
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
}

.main-navigation .main-nav ul li.if-menu-cta > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 8px 0 8px var(--if-space-3);
	padding: 0 1.125rem;
	line-height: 1.2;
	color: var(--if-white);
	background-color: var(--if-red);
	border-radius: var(--if-radius-sm);
	transition: background-color var(--if-transition);
}

.main-navigation .main-nav ul li.if-menu-cta > a:hover,
.main-navigation .main-nav ul li.if-menu-cta > a:focus,
.main-navigation .main-nav ul li.if-menu-cta[class*="current-menu-"] > a {
	color: var(--if-white);
	background-color: var(--if-red-dark);
}

/* GP's mobile menu kicks in at ≤768px: full-width items, button inset. */
@media (max-width: 768px) {
	.main-navigation .main-nav ul li a {
		min-height: 48px;
		display: flex;
		align-items: center;
	}

	.main-navigation .main-nav ul ul {
		border: 0;
		box-shadow: none;
		background-color: var(--if-grey-soft);
	}

	.main-navigation .main-nav ul li.if-menu-cta > a {
		justify-content: center;
		margin: var(--if-space-3) 20px var(--if-space-4);
	}
}

/* --------------------------------------------------------------------------
 * Responsive safety
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}