/*
	Styles for scams.html only.
	The site chrome (header, nav, #subheader, #body, #footer) comes from
	main.css; this file styles the interactive scam-awareness widgets and
	keeps them visually consistent with the rest of the site
	(grey #333 accents, red #body h3 headings, #ccc borders, white cards).
	Some class/variable names (--ink, .verdict, .quiz-*, etc.) are referenced
	from the inline <script> in scams.html — do not rename them there only.
*/

:root {
	--ink: #222;
	--muted: #555;
	--line: #ccc;
	--chrome: #333;		/* matches the nav bar */
	--chrome-hover: #555;
	--safe: #1f7a3d;
	--safe-bg: #e6f4ea;
	--warn: #b3541e;
	--warn-bg: #fdf0e6;
	--danger: #b3261e;
	--danger-bg: #fde8e6;
}

/* ---------- Accessibility: text-size toggle (scales the body content) ---------- */
#body { font-size: 14px; }
body.text-large  #body { font-size: 17px; }
body.text-xlarge #body { font-size: 20px; }
#body p, #body li, #body label, #body textarea, #body .lead { font-size: 1em; }
#body .lead { color: var(--muted); margin-top: 0; }
#body .disclaimer { color: var(--warn); border-left: 3px solid var(--warn); padding-left: 10px; font-style: italic; }
#body .back-to-top { text-align: right; font-size: 0.85em; margin: 14px 0 0; }

/* ---------- Toolbar: text-size + language controls in the subheader ---------- */
.toolbar {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	margin-top: 12px; font-family: Verdana, sans-serif; font-size: 13px;
}
.toolbar .label { font-weight: bold; color: #333; }
.size-btn, .lang-btn {
	background: var(--chrome); color: #fff; border: 1px solid var(--chrome);
	padding: 5px 11px; cursor: pointer; font-weight: bold; line-height: 1;
}
.size-btn:hover, .lang-btn:hover { background: var(--chrome-hover); }
.size-btn.active, .lang-btn.active { background: #fff; color: #333; border-color: #333; }
.size-btn.s1 { font-size: 12px; }
.size-btn.s2 { font-size: 15px; }
.size-btn.s3 { font-size: 18px; }
.lang-btn { font-size: 13px; margin-left: 0; }

/* In-page section links, styled like the rest of the site's text links */
.section-nav { margin: 14px 0 0; }
.section-nav a { margin-right: 16px; white-space: nowrap; }

/* ---------- Cards ---------- */
#body .card {
	background: #fff; border: 1px solid var(--line);
	padding: 18px 20px; margin: 18px 0;
}
#body .scam-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { #body .scam-grid { grid-template-columns: 1fr 1fr; } }

#body .scam-card h3 {
	color: var(--ink); font-size: 18px; margin: 0 0 6px;
	padding-top: 0; border-top: 0;		/* override #body h3 */
}
#body .scam-card .flags { margin: 10px 0 0; padding-left: 0; }
#body .scam-card .flags li { margin: 6px 0; }
.tag {
	display: inline-block; font-family: Verdana, sans-serif; font-size: 10px;
	font-weight: bold; letter-spacing: .04em; text-transform: uppercase;
	color: #fff; background: var(--chrome); padding: 2px 8px; border-radius: 10px;
	vertical-align: middle; margin-left: 6px;
}

/* ---------- "Is this a scam?" checker ---------- */
#body textarea {
	width: 100%; min-height: 140px; font-family: Helvetica, Arial, sans-serif;
	padding: 12px; border: 1px solid var(--line); resize: vertical;
}
.btn {
	font-family: Verdana, sans-serif; font-weight: bold; font-size: 14px;
	border: 1px solid var(--chrome); padding: 10px 20px; cursor: pointer;
	margin: 14px 8px 0 0;
}
.btn-primary { background: var(--chrome); color: #fff; }
.btn-primary:hover { background: var(--chrome-hover); }
.btn-secondary { background: #eee; color: #333; }
.btn-secondary:hover { background: #ddd; }

#result { margin-top: 20px; }
.verdict { border: 2px solid; padding: 16px 20px; }
#body .verdict h3 {
	margin: 0 0 6px; font-size: 19px;
	padding-top: 0; border-top: 0;		/* override #body h3 */
}
.verdict.safe   { background: var(--safe-bg);   border-color: var(--safe); }
.verdict.warn   { background: var(--warn-bg);   border-color: var(--warn); }
.verdict.danger { background: var(--danger-bg); border-color: var(--danger); }
#body .verdict.safe h3   { color: var(--safe); }
#body .verdict.warn h3   { color: var(--warn); }
#body .verdict.danger h3 { color: var(--danger); }
.verdict .reasons { color: var(--ink); margin: 12px 0 0; padding-left: 22px; }
.verdict .reasons li { margin: 6px 0; }
.verdict .advice { color: var(--ink); margin: 12px 0 0; font-weight: bold; }

/* ---------- Quiz ---------- */
.quiz-q {
	background: #f4f4f4; border-left: 4px solid var(--chrome);
	padding: 12px 16px; margin: 0 0 14px; font-style: italic;
}
.quiz-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.quiz-buttons button {
	font-family: Verdana, sans-serif; font-weight: bold; font-size: 14px;
	padding: 10px 24px; border: 1px solid var(--chrome); background: #fff;
	color: #333; cursor: pointer;
}
.quiz-buttons button:hover { background: #eee; }
.quiz-buttons button:disabled { opacity: .55; cursor: default; }
.quiz-feedback { margin-top: 14px; padding: 14px 16px; border: 2px solid; }
.quiz-feedback.correct { background: var(--safe-bg); border-color: var(--safe); }
.quiz-feedback.wrong   { background: var(--danger-bg); border-color: var(--danger); }
.quiz-feedback .head { font-weight: bold; display: block; margin-bottom: 4px; }
.quiz-feedback.correct .head { color: var(--safe); }
.quiz-feedback.wrong .head   { color: var(--danger); }

/* ---------- Get help: reporting resources ---------- */
.country-toggle { display: flex; gap: 0; margin: 6px 0 16px; }
.country-toggle button {
	font-family: Verdana, sans-serif; font-weight: bold; font-size: 14px;
	padding: 10px 20px; border: 1px solid var(--chrome); background: #fff;
	color: #333; cursor: pointer;
}
.country-toggle button:last-child { border-left: none; }
.country-toggle button.active { background: var(--chrome); color: #fff; }
.country-panel { display: none; }
.country-panel.active { display: block; }

.resource {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
	padding: 14px 0; border-bottom: 1px solid var(--line);
}
.resource:last-child { border-bottom: none; }
.resource .name { font-weight: bold; min-width: 200px; }
.resource .phone { font-family: Verdana, sans-serif; font-weight: bold; color: #000; }
.resource .desc { color: var(--muted); flex-basis: 100%; }
.emergency { background: var(--danger-bg); border: 2px solid var(--danger); padding: 16px 20px; }
.emergency strong { color: var(--danger); }

/* ---------- Safety checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 10px 0; border-bottom: 1px solid var(--line); margin-left: 0;
}
.checklist li:last-child { border-bottom: none; }
.checklist .box {
	flex: 0 0 auto; width: 22px; height: 22px;
	border: 2px solid var(--chrome); margin-top: 2px;
}

/* ---------- The one gold rule ---------- */
.goldrule {
	background: var(--chrome); color: #fff; padding: 20px 22px;
	text-align: center; font-size: 17px; margin: 24px 0;
}
.goldrule u { text-underline-offset: 3px; }

@media print {
	#nav-wrapper, .no-print, .toolbar, .section-nav, .checker-tool { display: none; }
	body { background: #fff; }
	.card { border: 1px solid #999; }
	a[href^="#"] { display: none; }
}