/* =============================================================================
   RIBUSA Lead System — Form Styles
   Gutenberg / block-theme safe  ·  Mobile-first  ·  55+ audience
   All rules scoped to .ribusa-form-wrap to avoid bleeding into block styles.
   No resets or global overrides — plays nicely with Twenty Twenty-Four/Five
   and any FSE theme.
   ============================================================================= */

/* ── 1. CSS Custom Properties (scoped, not :root, to avoid theme conflicts) ── */
.ribusa-form-wrap {
	/* Brand colours */
	--rf-primary:      #1a5c8a;   /* deep navy – trustworthy */
	--rf-primary-dk:   #134570;
	--rf-primary-lt:   #e3eef7;
	--rf-accent:       #c8a96e;   /* warm gold */
	--rf-accent-lt:    #fff8ec;
	--rf-accent-bd:    #f0deb2;

	/* Surfaces */
	--rf-bg:           #f8f6f2;   /* warm off-white card background */
	--rf-white:        #ffffff;
	--rf-border:       #d4cfc7;

	/* Typography */
	--rf-text:         #1e1e1e;   /* matches WP block theme base */
	--rf-muted:        #6b6660;
	--rf-font-serif:   Georgia, 'Times New Roman', serif;
	--rf-font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--rf-font-size:    17px;      /* floor for 55+ readability */

	/* States */
	--rf-success:      #2e7d32;
	--rf-error:        #b71c1c;

	/* Shape */
	--rf-radius:       12px;
	--rf-radius-sm:    7px;
	--rf-shadow:       0 6px 28px rgba(0, 0, 0, 0.10);

	/* Motion */
	--rf-ease:         0.22s ease;
}

/* ── 2. Wrapper card ─────────────────────────────────────────────────────────
   Self-contained block — does NOT inherit line-height or margin resets from
   block themes. Uses explicit values everywhere.
   ──────────────────────────────────────────────────────────────────────────── */
.ribusa-form-wrap {
	/* Layout */
	display:        block;
	width:          100%;
	max-width:      680px;
	margin-inline:  auto;          /* centres inside any block width */
	margin-block:   0 2.5rem;
	box-sizing:     border-box;
	padding:        40px 36px;

	/* Card appearance */
	background:     var(--rf-bg);
	border:         1px solid var(--rf-border);
	border-radius:  var(--rf-radius);
	box-shadow:     var(--rf-shadow);

	/* Typography baseline — isolated from theme */
	font-family:    var(--rf-font-ui);
	font-size:      var(--rf-font-size);
	line-height:    1.55;
	color:          var(--rf-text);

	/* Prevent block theme from injecting gap into flex/grid children */
	--wp--style--block-gap: 0;
}

/* Ensure form element itself has no block-theme margin injection */
.ribusa-form-wrap form,
.ribusa-form-wrap fieldset {
	margin:  0;
	padding: 0;
	border:  none;
}

/* ── 3. Progress bar ─────────────────────────────────────────────────────────
   Larger dots (48 px) for 55+ motor control. Gold connector line.
   ──────────────────────────────────────────────────────────────────────────── */
.ribusa-progress {
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin-bottom:   36px;
	gap:             0;
}

.ribusa-step-dot {
	/* Size — generous for touch and low vision */
	width:            48px;
	height:           48px;
	flex-shrink:      0;
	border-radius:    50%;
	position:         relative;
	z-index:          1;

	/* Default (incomplete) */
	background:       #ddd;
	border:           2px solid transparent;
	color:            #888;

	/* Typography */
	font-family:      var(--rf-font-ui);
	font-size:        17px;
	font-weight:      700;
	line-height:      1;

	/* Centering */
	display:          flex;
	align-items:      center;
	justify-content:  center;

	transition:       background var(--rf-ease), color var(--rf-ease), border-color var(--rf-ease);
}

.ribusa-step-dot.active {
	background:   var(--rf-primary);
	border-color: var(--rf-primary);
	color:        #fff;
	box-shadow:   0 0 0 4px rgba(26, 92, 138, 0.18);
}

.ribusa-step-dot.completed {
	background:   var(--rf-accent);
	border-color: var(--rf-accent);
	color:        #fff;
}

/* Connector lines */
.ribusa-step-line {
	flex:        1;
	height:      3px;
	max-width:   72px;
	background:  #ddd;
	transition:  background var(--rf-ease);
}

.ribusa-step-line.active {
	background: var(--rf-accent);
}

/* Step counter label below dot (optional — shown via ::after) */
.ribusa-progress-label {
	display:     block;
	font-size:   12px;
	color:       var(--rf-muted);
	text-align:  center;
	margin-top:  6px;
}

/* ── 4. Step panels ──────────────────────────────────────────────────────────
   hidden attribute used instead of display:none so screen readers respect it.
   ──────────────────────────────────────────────────────────────────────────── */
.ribusa-step {
	animation: ribusaFadeSlide 0.3s ease both;
}

@keyframes ribusaFadeSlide {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── 5. Step headings ────────────────────────────────────────────────────────
   Explicitly scoped so block theme h2 resets don't leak in.
   ──────────────────────────────────────────────────────────────────────────── */
.ribusa-form-wrap .ribusa-step-title {
	font-family:  var(--rf-font-serif);
	font-size:    clamp(22px, 4vw, 28px);
	font-weight:  700;
	line-height:  1.25;
	color:        var(--rf-primary);
	margin:       0 0 6px 0;
	padding:      0;
	/* Override any WP block theme heading margin */
	border:       none;
	box-shadow:   none;
}

.ribusa-step-sub {
	font-size:    16px;
	color:        var(--rf-muted);
	margin:       0 0 24px 0;
	padding:      0;
	line-height:  1.5;
}

/* ── 6. Radio option cards ───────────────────────────────────────────────────
   Full-row tap targets (min 56 px height) — WCAG 2.5.5 compliant for 55+.
   ──────────────────────────────────────────────────────────────────────────── */
.ribusa-options {
	display:        flex;
	flex-direction: column;
	gap:            12px;
	margin-bottom:  24px;
	/* Reset any block theme list styles in case nested in ul/ol */
	list-style:     none;
	padding:        0;
}

.ribusa-option {
	/* Layout */
	display:        flex;
	align-items:    center;
	gap:            16px;
	min-height:     58px;
	padding:        14px 20px;
	box-sizing:     border-box;

	/* Appearance */
	background:     var(--rf-white);
	border:         2px solid var(--rf-border);
	border-radius:  var(--rf-radius-sm);
	cursor:         pointer;

	/* Typography */
	font-family:    var(--rf-font-ui);
	font-size:      18px;        /* larger for 55+ */
	font-weight:    500;
	line-height:    1.3;
	color:          var(--rf-text);
	text-decoration: none;

	/* UX */
	user-select:    none;
	transition:     border-color var(--rf-ease), background var(--rf-ease), transform var(--rf-ease);
}

.ribusa-option:hover {
	border-color: var(--rf-primary);
	background:   #eef4f9;
	transform:    translateX(3px);
}

.ribusa-option.selected {
	border-color: var(--rf-primary);
	background:   var(--rf-primary-lt);
}

/* Custom radio circle — replaces browser default */
.ribusa-option input[type="radio"] {
	/* Reset block theme input styles */
	all:           unset;
	box-sizing:    border-box;

	width:         24px;
	height:        24px;
	border:        2px solid #bbb;
	border-radius: 50%;
	flex-shrink:   0;
	position:      relative;
	cursor:        pointer;
	transition:    border-color var(--rf-ease), background var(--rf-ease);
}

.ribusa-option input[type="radio"]:checked {
	border-color: var(--rf-primary);
	background:   var(--rf-primary);
}

.ribusa-option input[type="radio"]:checked::after {
	content:       '';
	display:       block;
	width:         9px;
	height:        9px;
	background:    #fff;
	border-radius: 50%;
	position:      absolute;
	inset:         50% auto auto 50%;
	transform:     translate(-50%, -50%);
}

/* Keyboard focus ring — visible and generous */
.ribusa-option input[type="radio"]:focus-visible {
	outline:        3px solid var(--rf-accent);
	outline-offset: 3px;
}

/* ── 7. Contact / text fields ────────────────────────────────────────────────
   Explicitly override block theme input resets (Twenty Twenty-Four adds
   border-radius:0 and various padding resets).
   ──────────────────────────────────────────────────────────────────────────── */
.ribusa-field {
	margin-bottom: 20px;
}

.ribusa-field label {
	/* Explicit — don't inherit block theme label styles */
	display:       block;
	font-family:   var(--rf-font-ui);
	font-size:     15px;
	font-weight:   600;
	line-height:   1.4;
	color:         var(--rf-text);
	margin:        0 0 7px 0;
	padding:       0;
}

.ribusa-req { color: var(--rf-error); }
.ribusa-opt {
	color:       var(--rf-muted);
	font-weight: 400;
	font-size:   13px;
}

.ribusa-field input[type="text"],
.ribusa-field input[type="email"],
.ribusa-field input[type="tel"] {
	/* Full override — block themes often strip padding/border */
	all:            unset;
	box-sizing:     border-box;
	display:        block;
	width:          100%;

	padding:        14px 16px;
	font-family:    var(--rf-font-ui);
	font-size:      17px;         /* 55+ readable */
	line-height:    1.4;
	color:          var(--rf-text);

	background:     var(--rf-white);
	border:         2px solid var(--rf-border);
	border-radius:  var(--rf-radius-sm);

	transition:     border-color var(--rf-ease), box-shadow var(--rf-ease);
	-webkit-appearance: none;
}

.ribusa-field input[type="text"]:focus,
.ribusa-field input[type="email"]:focus,
.ribusa-field input[type="tel"]:focus {
	outline:      none;
	border-color: var(--rf-primary);
	box-shadow:   0 0 0 3px rgba(26, 92, 138, 0.16);
}

.ribusa-field input::placeholder {
	color:   #aaa;
	opacity: 1;
}

/* ── 8. Consent checkbox ─────────────────────────────────────────────────────*/
.ribusa-consent-wrap {
	background:    var(--rf-accent-lt);
	border:        1px solid var(--rf-accent-bd);
	border-radius: var(--rf-radius-sm);
	padding:       16px 18px;
	margin-bottom: 20px;
}

.ribusa-consent-label {
	display:     flex;
	gap:         14px;
	align-items: flex-start;
	cursor:      pointer;
	font-size:   15px;
	line-height: 1.55;
	color:       var(--rf-text);
}

.ribusa-consent-label input[type="checkbox"] {
	/* Minimal override — keep browser native for accessibility */
	width:         22px;
	height:        22px;
	flex-shrink:   0;
	margin-top:    2px;
	cursor:        pointer;
	accent-color:  var(--rf-primary);
}

/* ── 9. Error messages ───────────────────────────────────────────────────────*/
.ribusa-error {
	display:       block;
	font-family:   var(--rf-font-ui);
	font-size:     15px;
	font-weight:   600;
	line-height:   1.4;
	color:         var(--rf-error);
	min-height:    22px;
	margin-bottom: 12px;
	padding:       0;
}

/* ── 10. Navigation buttons ──────────────────────────────────────────────────
    Large, thumb-friendly (min 52 px height). Full override so block theme
    button styles (border-radius:0, all:unset, etc.) don't strip our design.
   ──────────────────────────────────────────────────────────────────────────── */
.ribusa-nav {
	display:         flex;
	gap:             12px;
	justify-content: flex-end;
	align-items:     center;
	margin-top:      12px;
	flex-wrap:       wrap;
}

.ribusa-btn {
	/* Full override */
	all:             unset;
	box-sizing:      border-box;
	cursor:          pointer;

	/* Size — WCAG 2.5.5 large target */
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	min-height:      52px;
	padding:         14px 30px;

	/* Typography */
	font-family:     var(--rf-font-ui);
	font-size:       17px;
	font-weight:     700;
	line-height:     1;
	white-space:     nowrap;
	text-decoration: none;

	/* Shape */
	border:          2px solid transparent;
	border-radius:   var(--rf-radius-sm);

	transition:      background var(--rf-ease), color var(--rf-ease),
	                 border-color var(--rf-ease), transform var(--rf-ease),
	                 box-shadow var(--rf-ease);
}

/* Primary — Next / Submit */
.ribusa-btn-next,
.ribusa-btn-submit {
	background:   var(--rf-primary);
	color:        #fff;
	border-color: var(--rf-primary);
}

.ribusa-btn-next:hover,
.ribusa-btn-submit:hover {
	background:   var(--rf-primary-dk);
	border-color: var(--rf-primary-dk);
	transform:    translateY(-2px);
	box-shadow:   0 4px 14px rgba(26, 92, 138, 0.30);
}

/* Focus ring */
.ribusa-btn-next:focus-visible,
.ribusa-btn-submit:focus-visible {
	outline:        3px solid var(--rf-accent);
	outline-offset: 3px;
}

/* Secondary — Back */
.ribusa-btn-back {
	background:   transparent;
	color:        var(--rf-muted);
	border-color: var(--rf-border);
}

.ribusa-btn-back:hover {
	background:   #eee;
	color:        var(--rf-text);
	border-color: #bbb;
}

.ribusa-btn-back:focus-visible {
	outline:        3px solid var(--rf-accent);
	outline-offset: 3px;
}

/* Disabled state */
.ribusa-btn:disabled,
.ribusa-btn[disabled] {
	opacity:   0.6;
	cursor:    not-allowed;
	transform: none;
	box-shadow: none;
}

/* ── 11. Loading spinner ─────────────────────────────────────────────────────*/
.ribusa-spinner {
	display:         inline-block;
	width:           20px;
	height:          20px;
	border:          3px solid rgba(255,255,255,0.35);
	border-top-color:#fff;
	border-radius:   50%;
	animation:       ribusaSpin 0.75s linear infinite;
}

@keyframes ribusaSpin {
	to { transform: rotate(360deg); }
}

/* ── 12. Success state ───────────────────────────────────────────────────────*/
.ribusa-success {
	text-align: center;
	padding:    24px 0 8px;
}

.ribusa-success-icon {
	display:       flex;
	align-items:   center;
	justify-content: center;
	width:         80px;
	height:        80px;
	border-radius: 50%;
	background:    var(--rf-success);
	color:         #fff;
	font-size:     38px;
	margin:        0 auto 20px;
}

.ribusa-form-wrap .ribusa-success h2 {
	font-family: var(--rf-font-serif);
	font-size:   clamp(24px, 5vw, 30px);
	font-weight: 700;
	color:       var(--rf-success);
	margin:      0 0 14px;
	padding:     0;
	border:      none;
}

.ribusa-success p {
	font-size:   17px;
	color:       var(--rf-muted);
	line-height: 1.65;
	max-width:   420px;
	margin:      0 auto;
	padding:     0;
}

/* ── 13. Responsive ─────────────────────────────────────────────────────────
   Mobile-first breakpoints. Columns block on homepage stacks at <782px
   (WP's native tablet breakpoint) so we match that threshold.
   ──────────────────────────────────────────────────────────────────────────── */

/* Larger phones landscape / small tablets — 2-col option grid */
@media (min-width: 540px) {
	.ribusa-options {
		display:               grid;
		grid-template-columns: 1fr 1fr;
	}
}

/* Full-width card inside a column block — keep card from overflowing */
@media (max-width: 781px) {
	.ribusa-form-wrap {
		padding:       28px 20px;
		/* Remove horizontal margin so card fills column block nicely */
		margin-inline: 0;
		max-width:     100%;
	}

	.ribusa-step-dot {
		width:     38px;
		height:    38px;
		font-size: 15px;
	}

	.ribusa-step-line {
		max-width: 44px;
	}

	/* Stack nav buttons vertically, full width, Back on bottom */
	.ribusa-nav {
		flex-direction:  column-reverse;
		align-items:     stretch;
	}

	.ribusa-btn {
		width:   100%;
		padding: 16px 20px;
	}

	/* Single-column options on narrow screens */
	.ribusa-options {
		grid-template-columns: 1fr;
	}
}

/* Very small phones */
@media (max-width: 380px) {
	.ribusa-form-wrap {
		padding: 20px 14px;
	}

	.ribusa-form-wrap .ribusa-step-title {
		font-size: 20px;
	}

	.ribusa-step-dot {
		width:     32px;
		height:    32px;
		font-size: 13px;
	}

	.ribusa-step-line {
		max-width: 28px;
	}
}

/* ── 14. Block theme integration helpers ────────────────────────────────────
   Gutenberg Columns block gives each column a wp-block-column wrapper.
   These rules ensure the card looks right whether placed:
   (a) in a Columns > Column block  (b) in a full-width Group block
   ──────────────────────────────────────────────────────────────────────────── */

/* When the shortcode block sits inside a wp-block-column */
.wp-block-column .ribusa-form-wrap {
	margin-inline: 0;
	max-width:     100%;
}

/* When used inside a constrained Group or Cover block */
.wp-block-group .ribusa-form-wrap,
.wp-block-cover .ribusa-form-wrap {
	margin-inline: auto;
}

/* Prevent block theme from adding gap between our internal flex children */
.ribusa-form-wrap * {
	/* Intentionally NOT using all:unset here — only reset gap injection */
	gap: revert;
}
.ribusa-nav,
.ribusa-progress,
.ribusa-options,
.ribusa-consent-label {
	/* Re-declare our intentional gaps after the revert above */
	gap: var(--rf-nav-gap, 12px);
}
.ribusa-options    { --rf-nav-gap: 12px; }
.ribusa-nav        { --rf-nav-gap: 12px; }
.ribusa-progress   { --rf-nav-gap: 0; }
.ribusa-consent-label { --rf-nav-gap: 14px; }