/*
 * ApplianceNews Expert Advice — frontend styles.
 * Inherits the site's fonts, adds structure. Mobile-first.
 *
 * COLOR MODEL (2026-08-16, after owner review on the live Foxiz theme):
 * appliancenews.org is a DARK site. The card is therefore a dark surface —
 * slightly lighter than the page — with light text, so it reads as native
 * rather than as a white block dropped onto a dark page.
 *
 * Every color inside the card is set EXPLICITLY through the variables below.
 * Nothing inherits from the theme, so no theme cascade can produce
 * same-on-same text. `color-scheme: dark` tells browsers running their own
 * "auto dark mode" that this region is already dark, so they leave it alone
 * instead of inverting or washing it out.
 *
 * To retune the palette, edit the variables only.
 */

.anea-card {
	--anea-bg: #1c1f26;
	--anea-bg-input: #262a33;
	--anea-border: #343945;
	--anea-text: #f3f4f6;
	--anea-text-muted: #b3b9c6;
	--anea-accent: #f3f4f6;
	--anea-accent-text: #111827;
	--anea-focus: #93c5fd;

	background: var( --anea-bg );
	border: 1px solid var( --anea-border );
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.35 );
	color: var( --anea-text );
	color-scheme: dark;
	margin: 1.5rem auto;
	max-width: 30rem;
	padding: 1.75rem 1.5rem;
}

/* Explicit text color on every text element — nothing inherits from the theme. */
body .anea-card,
body .anea-card p,
body .anea-card span,
body .anea-card label,
body .anea-card legend,
body .anea-card dt,
body .anea-card dd,
body .anea-card li,
body .anea-card h2,
body .anea-card h3,
body .anea-card h4,
body .anea-card strong,
body .anea-card em,
body .anea-card small {
	color: var( --anea-text ) !important;
}

body .anea-card input[type="email"],
body .anea-card input[type="password"],
body .anea-card input[type="tel"],
body .anea-card input[type="text"] {
	background: var( --anea-bg-input ) !important;
	color: var( --anea-text ) !important;
	-webkit-text-fill-color: var( --anea-text ); /* Chrome autofill / auto-dark overrides */
	color-scheme: dark;
}

body .anea-card .anea-card__sub,
body .anea-card .anea-card__meta,
body .anea-card .anea-field__hint,
body .anea-card .anea-req {
	color: var( --anea-text-muted ) !important;
}

.anea-card__title {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

.anea-card__sub {
	font-size: 0.95rem;
	margin: 0 0 1.25rem;
}

.anea-card__meta {
	font-size: 0.9rem;
	margin: 0.75rem 0 0;
}

.anea-form p,
.anea-field {
	margin: 0 0 1rem;
}

.anea-field label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.anea-field input[type="email"],
.anea-field input[type="password"],
.anea-field input[type="text"],
.anea-card input[type="email"],
.anea-card input[type="password"],
.anea-card input[type="text"] {
	border: 1px solid var( --anea-border );
	border-radius: 6px;
	box-sizing: border-box;
	font-size: 1rem;
	padding: 0.6rem 0.75rem;
	width: 100%;
}

.anea-card input::placeholder {
	color: var( --anea-text-muted );
	opacity: 1;
}

.anea-field input:focus,
.anea-card input:focus {
	border-color: var( --anea-focus );
	outline: 2px solid rgba( 147, 197, 253, 0.35 );
	outline-offset: 1px;
}

/* Links inside the card: keep the theme's accent, add underline for a
   contrast-independent affordance. */
.anea-card a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.anea-field__hint {
	display: block;
	font-size: 0.8rem;
	margin-top: 0.25rem;
}

.anea-check {
	font-size: 0.9rem;
	line-height: 1.45;
}

.anea-check input[type="checkbox"] {
	accent-color: var( --anea-focus );
	margin-right: 0.4rem;
}

.anea-req {
	font-size: 0.85em;
}

.anea-actions {
	margin: 1.25rem 0 0;
}

.anea-btn {
	background: transparent;
	border: 1px solid var( --anea-border, #343945 );
	border-radius: 6px;
	color: var( --anea-text, #f3f4f6 );
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.6rem 1.25rem;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.anea-btn:hover {
	background: rgba( 255, 255, 255, 0.06 );
	border-color: var( --anea-text-muted, #b3b9c6 );
	color: var( --anea-text, #f3f4f6 );
}

.anea-btn--primary {
	background: var( --anea-accent, #f3f4f6 );
	border-color: var( --anea-accent, #f3f4f6 );
	color: var( --anea-accent-text, #111827 );
}

.anea-btn--primary:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: var( --anea-accent-text, #111827 );
}

/* Notices sit OUTSIDE the card, so they carry their own full palette. */
.anea-notice {
	border-radius: 8px;
	font-size: 0.95rem;
	margin: 1rem auto;
	max-width: 30rem;
	padding: 0.85rem 1rem;
}

.anea-notice--success {
	background: #0f2e22;
	border: 1px solid #1f6b4a;
	color: #a7f3d0;
}

.anea-notice--error {
	background: #3a1416;
	border: 1px solid #8b2c31;
	color: #fecaca;
}

.anea-notice__cta {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.anea-badge {
	border-radius: 999px;
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.15rem 0.6rem;
}

body .anea-card .anea-badge--ok {
	background: #0f2e22;
	color: #a7f3d0 !important;
}

body .anea-card .anea-badge--warn {
	background: #3b2a08;
	color: #fde68a !important;
}

.anea-dl {
	display: grid;
	gap: 0.35rem 1rem;
	grid-template-columns: auto 1fr;
	margin: 0 0 1rem;
}

.anea-dl dt {
	font-size: 0.9rem;
	font-weight: 600;
}

body .anea-card .anea-dl dt {
	color: var( --anea-text-muted ) !important;
}

.anea-dl dd {
	font-size: 0.95rem;
	margin: 0;
	overflow-wrap: anywhere;
}

.anea-hr {
	border: 0;
	border-top: 1px solid var( --anea-border );
	margin: 1.25rem 0;
}

.anea-turnstile {
	margin: 0 0 1rem;
}

/* Honeypot: offscreen, not display:none (some bots skip display:none fields). */
.anea-hp {
	left: -9999px;
	position: absolute;
	top: auto;
}

/* Core wp_login_form() markup rendered inside our cards. */
.anea-card #anea-login-form p {
	margin: 0 0 1rem;
}

.anea-card #anea-login-form label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.anea-card #anea-login-form .login-remember label {
	font-weight: 400;
}

.anea-card #anea-login-form input[type="submit"] {
	background: var( --anea-accent );
	border: 1px solid var( --anea-accent );
	border-radius: 6px;
	color: var( --anea-accent-text );
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.6rem 1.25rem;
}

@media ( max-width: 480px ) {
	.anea-card {
		border-left: 0;
		border-radius: 0;
		border-right: 0;
		padding: 1.25rem 1rem;
	}
}

/* =========================================================================
 * Wizard
 * ======================================================================= */

.anea-card--wizard,
.anea-card--wide {
	max-width: 40rem;
}

.anea-wizard.is-busy .anea-opt,
.anea-wizard.is-busy .anea-btn {
	opacity: 0.6;
	pointer-events: none;
}

.anea-bullets {
	margin: 0.75rem 0 1.25rem 1.1rem;
	padding: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

.anea-btn--lg {
	font-size: 1.1rem;
	padding: 0.85rem 1.75rem;
	width: 100%;
	text-align: center;
}

@media ( min-width: 481px ) {
	.anea-btn--lg {
		width: auto;
	}
}

.anea-btn--ghost {
	background: transparent;
	border-color: var( --anea-border, #343945 );
}

.anea-btn--file {
	cursor: pointer;
	display: inline-block;
}

.anea-progress__label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0 0.35rem;
	text-transform: uppercase;
}

.anea-progress {
	background: var( --anea-border, #343945 );
	border-radius: 999px;
	height: 6px;
	margin: 0 0 1.25rem;
	overflow: hidden;
}

.anea-progress__bar {
	background: var( --anea-focus, #93c5fd );
	height: 100%;
	transition: width 0.25s ease;
}

.anea-live,
.anea-visually-hidden {
	border: 0;
	clip: rect( 0 0 0 0 );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.anea-err:empty {
	display: none;
}

.anea-err {
	background: #3a1416;
	border: 1px solid #8b2c31;
	border-radius: 6px;
	color: #fecaca !important;
	font-size: 0.9rem;
	margin: 0 0 1rem;
	padding: 0.6rem 0.8rem;
}

/* Answer buttons — the core interaction. 44px+ targets. */
.anea-grid {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: 1fr;
	margin: 0.25rem 0 1rem;
}

@media ( min-width: 481px ) {
	.anea-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.anea-opt {
	background: var( --anea-bg-input, #262a33 );
	border: 1px solid var( --anea-border, #343945 );
	border-radius: 8px;
	color: var( --anea-text, #f3f4f6 );
	cursor: pointer;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
	min-height: 48px;
	padding: 0.8rem 1rem;
	text-align: left;
	transition: border-color 0.12s ease, background 0.12s ease, transform 0.05s ease;
	width: 100%;
}

.anea-opt:hover {
	border-color: var( --anea-text-muted, #b3b9c6 );
	background: #2c313b;
}

.anea-opt:active {
	transform: translateY( 1px );
}

.anea-opt:focus-visible {
	outline: 2px solid var( --anea-focus, #93c5fd );
	outline-offset: 2px;
}

.anea-opt.is-selected {
	border-color: var( --anea-focus, #93c5fd );
	box-shadow: inset 0 0 0 1px var( --anea-focus, #93c5fd );
}

.anea-other {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.anea-other input {
	flex: 1;
}

.anea-nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: space-between;
	margin: 1.25rem 0 0.5rem;
}

.anea-nav .anea-btn--primary {
	margin-left: auto;
}

.anea-field--bad input,
.anea-field--bad textarea {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 2px rgba( 239, 68, 68, 0.25 );
}

.anea-card textarea {
	background: var( --anea-bg-input, #262a33 );
	border: 1px solid var( --anea-border, #343945 );
	border-radius: 6px;
	box-sizing: border-box;
	color: var( --anea-text, #f3f4f6 );
	font: inherit;
	font-size: 1rem;
	padding: 0.6rem 0.75rem;
	width: 100%;
}

.anea-tag-help,
.anea-privacy {
	background: rgba( 255, 255, 255, 0.04 );
	border-left: 3px solid var( --anea-focus, #93c5fd );
	border-radius: 4px;
	font-size: 0.9rem;
	line-height: 1.5;
	padding: 0.6rem 0.8rem;
}

.anea-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.5rem 0;
}

.anea-thumb {
	position: relative;
}

.anea-thumb img,
.anea-thumbs > a img {
	border: 1px solid var( --anea-border, #343945 );
	border-radius: 6px;
	height: 96px;
	object-fit: cover;
	width: 96px;
}

.anea-thumb__rm {
	background: #111827;
	border: 1px solid #343945;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	height: 26px;
	line-height: 1;
	position: absolute;
	right: -8px;
	top: -8px;
	width: 26px;
}

.anea-safety {
	background: #3a1416;
	border: 1px solid #8b2c31;
	border-radius: 8px;
	margin: 0 0 0.9rem;
	padding: 0.85rem 1rem;
}

body .anea-card .anea-safety,
body .anea-card .anea-safety p,
body .anea-card .anea-safety strong {
	color: #fecaca !important;
}

.anea-safety strong {
	display: block;
	font-size: 1.05rem;
	margin-bottom: 0.3rem;
}

.anea-rev {
	align-items: baseline;
	border-bottom: 1px solid var( --anea-border, #343945 );
	display: grid;
	gap: 0.25rem 0.75rem;
	grid-template-columns: 7rem 1fr auto;
	padding: 0.55rem 0;
}

.anea-rev__k {
	font-size: 0.85rem;
	font-weight: 600;
}

body .anea-card .anea-rev__k {
	color: var( --anea-text-muted ) !important;
}

.anea-rev__v {
	font-size: 0.95rem;
	overflow-wrap: anywhere;
	white-space: pre-line;
}

@media ( max-width: 480px ) {
	.anea-rev {
		grid-template-columns: 1fr auto;
	}
	.anea-rev__v {
		grid-column: 1 / -1;
	}
}

.anea-link-btn {
	background: none;
	border: 0;
	color: var( --anea-focus, #93c5fd );
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	padding: 0;
	text-decoration: underline;
}

.anea-terms {
	font-size: 0.8rem;
	line-height: 1.45;
	margin: 0.75rem 0;
}

body .anea-card .anea-terms {
	color: var( --anea-text-muted ) !important;
}

.anea-done {
	text-align: center;
}

.anea-done__mark {
	background: #0f2e22;
	border: 2px solid #1f6b4a;
	border-radius: 999px;
	color: #a7f3d0;
	font-size: 2rem;
	height: 64px;
	line-height: 60px;
	margin: 0 auto 0.75rem;
	width: 64px;
}

.anea-notice--warn {
	background: #3b2a08;
	border: 1px solid #8a6414;
	color: #fde68a;
}

.anea-inline-form {
	display: inline;
}

/* My Questions table */
.anea-table-wrap {
	overflow-x: auto;
}

.anea-table {
	border-collapse: collapse;
	font-size: 0.92rem;
	width: 100%;
}

.anea-table th,
.anea-table td {
	border-bottom: 1px solid var( --anea-border, #343945 );
	padding: 0.6rem 0.5rem;
	text-align: left;
	vertical-align: top;
}

body .anea-card .anea-table th {
	color: var( --anea-text-muted ) !important;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

body .anea-card .anea-badge--info {
	background: #1e2a3f;
	color: #bfdbfe !important;
}

.anea-answer {
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid var( --anea-border, #343945 );
	border-radius: 8px;
	margin: 1rem 0;
	padding: 1rem 1.1rem;
}

.anea-answer h4 {
	margin: 0 0 0.5rem;
}

.anea-answer--needs {
	border-color: #8a6414;
}