/**
 * Intimacy Insight — Free Health Tools
 * --------------------------------------------------------------------
 * Styling for the homepage "Free Health Tools" section
 * (template-parts/homepage/health-tools.php +
 * template-parts/health-tools/tool-card.php). Registered as its own
 * stylesheet (not folded into homepage.css) so a future Elementor
 * widget could reuse the .ii-tool-card component on any page type via
 * get_style_depends(), the same reasoning already applied to
 * single-article.css — see inc/enqueue.php.
 *
 * 100% design-token driven — zero hardcoded colors, exactly like every
 * other stylesheet in the theme.
 */

/* ====================================================================
   1. FREE HEALTH TOOLS
   ------------------------------------------------------------------
   Generic card grid — every card looks identical regardless of which
   tool it renders (template-parts/health-tools/tool-card.php never
   emits a tool-specific class), so this file never needs a per-tool
   selector either.
   ==================================================================== */

.ii-health-tools {
	background:
		radial-gradient(80% 60% at 100% 0%, rgba(14, 124, 114, 0.06), transparent 55%),
		radial-gradient(70% 60% at 0% 100%, rgba(39, 70, 144, 0.05), transparent 55%),
		var(--ii-color-bg-alt);
}

.ii-tool-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ii-space-4);
}

@media (min-width: 768px) {
	.ii-tool-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ii-tool-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ii-tool-card {
	background-color: var(--ii-color-bg);
	border: 1px solid var(--ii-color-border);
	border-radius: var(--ii-radius-lg);
	overflow: hidden;
	transition: box-shadow var(--ii-transition-base), border-color var(--ii-transition-base);
}

.ii-tool-card:hover {
	box-shadow: var(--ii-shadow-md);
}

.ii-tool-card__trigger {
	display: flex;
	align-items: center;
	gap: var(--ii-space-4);
	width: 100%;
	padding: var(--ii-space-5);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--ii-font-body);
}

.ii-tool-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--ii-radius-md);
	color: var(--ii-color-primary-dark);
	background-color: var(--ii-color-primary-light);
}

.ii-tool-card__icon .ii-icon {
	width: 24px;
	height: 24px;
}

.ii-tool-card__heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.ii-tool-card__title {
	font-size: var(--ii-text-base);
	font-weight: var(--ii-weight-semibold);
	color: var(--ii-color-text-primary);
}

.ii-tool-card__desc {
	font-size: var(--ii-text-sm);
	color: var(--ii-color-text-secondary);
	line-height: var(--ii-leading-normal);
}

.ii-tool-card__caret {
	flex-shrink: 0;
	display: flex;
	color: var(--ii-color-text-secondary);
}

.ii-tool-card__caret .ii-icon {
	width: 18px;
	height: 18px;
	transition: transform var(--ii-transition-fast);
}

.ii-tool-card__trigger[aria-expanded="true"] .ii-tool-card__caret .ii-icon {
	transform: rotate(180deg);
}

.ii-tool-card__panel {
	padding: 0 var(--ii-space-5) var(--ii-space-5);
	border-top: 1px solid var(--ii-color-border);
	background-color: var(--ii-color-bg-alt);
}

.ii-tool-card__fields {
	display: flex;
	flex-direction: column;
	gap: var(--ii-space-4);
	padding-top: var(--ii-space-5);
}

.ii-tool-field label {
	display: block;
	font-size: var(--ii-text-sm);
	font-weight: var(--ii-weight-medium);
	color: var(--ii-color-text-primary);
	margin-bottom: var(--ii-space-2);
}

.ii-tool-field__unit {
	font-weight: var(--ii-weight-regular);
	color: var(--ii-color-text-secondary);
}

.ii-tool-field__input {
	width: 100%;
	padding: var(--ii-space-3) var(--ii-space-4);
	font-family: var(--ii-font-body);
	font-size: var(--ii-text-base);
	color: var(--ii-color-text-primary);
	background-color: var(--ii-color-bg);
	border: 1px solid var(--ii-color-border);
	border-radius: var(--ii-radius-md);
	transition: border-color var(--ii-transition-fast), box-shadow var(--ii-transition-fast);
}

.ii-tool-field__input:focus-visible {
	outline: none;
	border-color: var(--ii-color-primary);
	box-shadow: 0 0 0 3px rgba(14, 124, 114, 0.12);
}

.ii-tool-field--quiz {
	border: none;
	margin: 0;
	padding: 0;
}

.ii-tool-field--quiz legend {
	font-size: var(--ii-text-sm);
	font-weight: var(--ii-weight-medium);
	color: var(--ii-color-text-primary);
	margin-bottom: var(--ii-space-2);
	padding: 0;
}

.ii-tool-field__quiz-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ii-space-2);
}

.ii-tool-field__quiz-option {
	display: inline-flex;
	align-items: center;
	gap: var(--ii-space-2);
	padding: var(--ii-space-2) var(--ii-space-3);
	font-size: var(--ii-text-sm);
	color: var(--ii-color-text-secondary);
	background-color: var(--ii-color-bg);
	border: 1px solid var(--ii-color-border);
	border-radius: var(--ii-radius-full);
	cursor: pointer;
	transition: border-color var(--ii-transition-fast), color var(--ii-transition-fast);
}

/* .is-checked is toggled by assets/js/health-tools.js on the radio's
   'change' event — deliberately not relying on the :has() selector so
   the checked state styles correctly in browsers without :has()
   support (a real ThemeForest compatibility requirement). */
.ii-tool-field__quiz-option.is-checked {
	border-color: var(--ii-color-primary);
	color: var(--ii-color-primary-dark);
	font-weight: var(--ii-weight-medium);
}

.ii-tool-field__quiz-option input {
	margin: 0;
}

.ii-tool-card__calculate {
	margin-top: var(--ii-space-5);
}

.ii-tool-card__result {
	margin-top: var(--ii-space-4);
	padding: var(--ii-space-4);
	background-color: var(--ii-color-bg);
	border: 1px solid var(--ii-color-border);
	border-radius: var(--ii-radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--ii-space-2);
}

.ii-tool-card__result.is-error {
	border-color: var(--ii-color-error);
	background-color: rgba(239, 68, 68, 0.06);
}

.ii-tool-card__result-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ii-space-3);
	font-size: var(--ii-text-sm);
	padding-left: var(--ii-space-3);
	border-left: 3px solid var(--ii-color-border);
}

/**
 * Tone is communicated via this decorative left-border accent, NOT via
 * text color. The semantic success/warning/error tokens fail WCAG AA
 * 4.5:1 as normal-sized text on this background (~2.0–3.3:1) — already
 * discovered and fixed once for the Recommended Plugins badges (see
 * CHANGELOG v2.1.0). A 3px border is a non-text UI indicator (WCAG
 * 1.4.11 requires only 3:1, which every one of these tokens passes),
 * while the value itself stays readable dark text.
 */
.ii-tool-card__result-row--accent {
	border-left-color: var(--ii-color-primary);
}

.ii-tool-card__result-row--success {
	border-left-color: var(--ii-color-success);
}

.ii-tool-card__result-row--warning {
	border-left-color: var(--ii-color-warning);
}

.ii-tool-card__result-row--error {
	border-left-color: var(--ii-color-error);
}

.ii-tool-card__result-label {
	color: var(--ii-color-text-secondary);
}

.ii-tool-card__result-value {
	font-weight: var(--ii-weight-semibold);
	font-family: var(--ii-font-heading);
	color: var(--ii-color-text-primary);
}

.ii-tool-card__result-message,
.ii-tool-card__result-note {
	margin: 0;
	font-size: var(--ii-text-sm);
	color: var(--ii-color-text-secondary);
	line-height: var(--ii-leading-normal);
}

/* Error state uses the same readable-text + accent-border pattern as
   the success/warning/error rows above, rather than coloring the
   message text itself red (would repeat the same contrast failure). */
.ii-tool-card__result.is-error .ii-tool-card__result-message {
	color: var(--ii-color-text-primary);
	font-weight: var(--ii-weight-medium);
	padding-left: var(--ii-space-3);
	border-left: 3px solid var(--ii-color-error);
}

.ii-tool-card__disclaimer {
	display: flex;
	align-items: flex-start;
	gap: var(--ii-space-2);
	margin: var(--ii-space-4) 0 0;
	font-size: var(--ii-text-xs);
	color: var(--ii-color-text-muted);
	line-height: var(--ii-leading-normal);
}

.ii-tool-card__disclaimer .ii-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 1px;
}

/* ====================================================================
   2. DARK MODE
   ==================================================================== */

[data-theme="dark"] .ii-tool-card,
[data-theme="dark"] .ii-tool-field__input,
[data-theme="dark"] .ii-tool-field__quiz-option,
[data-theme="dark"] .ii-tool-card__result {
	background-color: var(--ii-color-bg);
	border-color: var(--ii-color-border);
}

[data-theme="dark"] .ii-tool-card__panel {
	background-color: var(--ii-color-bg-alt);
}

[data-theme="dark"] .ii-tool-card__result.is-error {
	background-color: rgba(239, 68, 68, 0.12);
}