/* =========================================================
   Journey — global.css
   Loads AFTER GeneratePress so these rules win on overlap.
   ========================================================= */

/* ---------- 1. Design system variables ---------- */
:root {
	--bg: #fcfbf9;
	--bg-card: #F4F1E8;
	--bg-card-soft: #F6F3EB;
	--ink: #0F0F0F;
	--ink-mute: #5E5E5C;
	--ink-soft: #9A9892;
	--line: #E8E4D8;
	--olive: #4A5A1F;
	--olive-soft: #DBE3B5;
	--cream-pill: #d7c6ab;
	--cream-pill-text: #4A5A1F;
	--gold-cta: #cea96f;
	--gold-cta-deep: #B7913F;
	--olive-deep: #2F3E0E;
	--gold: #C4A35A;
	--gold-soft: #F1E4C3;
	--gold-deep: #8C6E2B;
	--green-bubble: #14756A;
	--teams-purple: #4B4A8F;
	--taupe: #99886E;
	--serif: 'Lora', Georgia, serif;
	--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--nav-height: 112px;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	padding: 0;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--bg);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 3. Clear the fixed nav — CSS only, never measured in JS. */
body {
	padding-top: var(--nav-height);
}

/* Flush full-width layout: strip GeneratePress's content-area spacing and the
   article "card" border/shadow so the page's full-bleed sections meet the
   fixed header and the footer with no gaps or stray divider lines.
   Scoped to EXCLUDE the dynamic blog contexts (single posts, category/tag/date
   archives, search results, the native posts index) so those keep a normal,
   readable layout — blog.css styles them. The marketing Custom-HTML pages
   (.page / .home) still get the flush. */
body:not(.single):not(.archive):not(.search):not(.blog) .site-content,
body:not(.single):not(.archive):not(.search):not(.blog) .content-area,
body:not(.single):not(.archive):not(.search):not(.blog) .site-main,
body:not(.single):not(.archive):not(.search):not(.blog) .inside-article,
body:not(.single):not(.archive):not(.search):not(.blog) .entry-content {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
body:not(.single):not(.archive):not(.search):not(.blog) .inside-article {
	border: 0 !important;
	box-shadow: none !important;
}

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

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

/* ---------- 4. Layout container ---------- */
.wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 32px;
}

/* ---------- 5. Links ---------- */
a {
	color: inherit;
	text-decoration: none;
}

/* ---------- 6. Shared buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--gold-cta);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 14px 26px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s;
}
.btn:hover {
	background: var(--olive-deep);
	/* Re-assert white text: GeneratePress's `a:hover { color }` (0,1,1) would
	   otherwise beat the base `.btn` color (0,1,0) and darken the label. */
	color: #fff;
}
.btn .arrow {
	font-size: 13px;
}
.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
}
.btn-ghost:hover {
	background: #fff;
	color: var(--olive);
}

/* ---------- 6b. Neutralize GeneratePress's default <button> chrome ----------
   GeneratePress paints a gray background (and a focus outline) on every <button>
   on hover/focus/active. Our custom interactive controls inside Custom HTML page
   blocks are <button>s, so that gray box (and a glitchy focus border) leaks onto
   them. Strip the chrome site-wide and let each component's own hover styling
   show; keep an accessible keyboard focus ring. Extend this list as other
   button-based components (tabs, chips) are addressed. */
.story-button,
.story-button:hover,
.story-button:focus,
.story-button:active {
	background: none;
	box-shadow: none;
	outline: none;
}
.story-button:focus-visible {
	outline: 2px solid var(--gold-cta);
	outline-offset: 3px;
	border-radius: 14px;
}

/* Tab + step buttons (pick stage, conversation tabs, onboarding stepper):
   drop GeneratePress's gray hover/focus background + box-shadow and keep each
   component's own resting/active background. The onboarding steps only change
   their border on hover, so without this GP's gray box shows through. */
.pick-stage .tab,
.conv-tabs .ct,
.onboard-step,
.filter-chip,
.pulse-choice,
.staff-asks .chip,
.risk-chat .rc-chips .chip {
	box-shadow: none;
}
.pick-stage .tab:focus,
.conv-tabs .ct:focus,
.onboard-step:focus,
.onboard-step:active,
.filter-chip:focus,
.filter-chip:active,
.pulse-choice:focus,
.pulse-choice:active,
.staff-asks .chip:focus,
.staff-asks .chip:active,
.risk-chat .rc-chips .chip:focus,
.risk-chat .rc-chips .chip:active {
	box-shadow: none;
	outline: none;
}
.onboard-step:hover,
.onboard-step:focus {
	background: #fff;
}
.onboard-step.active:hover,
.onboard-step.active:focus {
	background: var(--olive-pale, #F1F4E2);
}
/* Stories filter chips: keep the resting white / active olive background so
   GeneratePress's gray <button> hover box never shows (the chip hover only
   changes color + border). */
.filter-chip:hover,
.filter-chip:focus {
	background: #fff;
}
.filter-chip.active:hover,
.filter-chip.active:focus {
	background: var(--olive);
}
/* Pulse-check choice buttons: keep the soft-cream resting background and black
   text on hover/focus so the ONLY hover change is the 1px gold border (the page
   CSS sets that). Without this GP's gray hover box would cover the cream fill. */
.pulse-choice,
.pulse-choice:hover,
.pulse-choice:focus {
	background: var(--bg-card-soft);
	color: var(--ink);
}
/* Staff-ask + risk-signal chip rows: white resting / gold active background so
   GeneratePress's gray hover box never shows (their non-active hover only
   changes color + border). */
.staff-asks .chip:hover,
.staff-asks .chip:focus,
.risk-chat .rc-chips .chip:hover,
.risk-chat .rc-chips .chip:focus {
	background: #fff;
}
.staff-asks .chip.active:hover,
.staff-asks .chip.active:focus,
.risk-chat .rc-chips .chip.active:hover,
.risk-chat .rc-chips .chip.active:focus {
	background: var(--gold-cta);
	color: #fff;
}
.pick-stage .tab:focus-visible,
.conv-tabs .ct:focus-visible,
.onboard-step:focus-visible,
.filter-chip:focus-visible,
.pulse-choice:focus-visible,
.staff-asks .chip:focus-visible,
.risk-chat .rc-chips .chip:focus-visible {
	outline: 2px solid var(--gold-cta);
	outline-offset: 2px;
}

/* ---------- 7. Screen-reader-only utility ---------- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================
   8. Baseline Gravity Forms styles
   Foundational GF CSS is disabled in functions.php, so this
   baseline guarantees every form is on-brand even with no
   page-specific styling. Page-specific styles layer on top.
   ========================================================= */
.gform_wrapper form {
	margin: 0;
}
.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gform_wrapper .gfield {
	margin: 0;
}
.gform_wrapper .gfield_label {
	display: block;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 8px;
}
.gform_wrapper .gfield_required {
	color: var(--gold-cta-deep);
	margin-left: 2px;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	font-family: var(--sans);
	font-size: 16px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 13px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gform_wrapper textarea {
	min-height: 140px;
	resize: vertical;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--olive);
	box-shadow: 0 0 0 3px var(--olive-soft);
}
.gform_wrapper ::placeholder {
	color: var(--ink-soft);
}

.gform_wrapper .gform_footer {
	margin-top: 24px;
	padding: 0;
}
.gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--gold-cta);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 14px 28px;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}
.gform_wrapper .gform_button:hover {
	background: var(--olive-deep);
}

/* Validation / errors */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-color: #C0492F;
}
.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	color: #C0492F;
	margin-top: 6px;
}
.gform_wrapper .gform_validation_errors {
	font-family: var(--sans);
	border: 1px solid #C0492F;
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 24px;
	color: #C0492F;
	background: #fdf3f1;
}
.gform_wrapper .gform_required_legend {
	display: none;
}

/* Confirmation message (static text confirmations) */
.gform_confirmation_message {
	font-family: var(--sans);
	font-size: 17px;
	color: var(--ink);
	padding: 20px 0;
}