/* ==========================================================================
   Boral Foundation — Page-level compositions
   ========================================================================== */

/* ---------- Legal / policy pages (Privacy, Terms, Accessibility) ---------- */
.legal-shell {
	max-width: 860px;
	margin: 0 auto;
}
.legal-card { padding: var(--space-12) 40px; }
@media (max-width: 600px) {
	.legal-card { padding: var(--space-8) 20px; }
}
.legal-updated {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-muted);
	font-size: var(--fs-small);
	background: var(--color-surface-alt);
	border-radius: var(--radius-full);
	padding: 6px 16px;
	margin-bottom: var(--space-8);
}
.legal-content h2 {
	font-size: 1.3125rem;
	line-height: 1.3;
	margin-top: 40px;
	margin-bottom: var(--space-3);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}
.legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-content p { color: var(--color-text-secondary, var(--color-text)); margin-bottom: var(--space-4); }
.legal-content ul { margin: 0 0 var(--space-4); padding-left: 1.35rem; }
.legal-content li { margin-bottom: var(--space-2); color: var(--color-text); }
.legal-content li:last-child { margin-bottom: 0; }
.legal-content strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.legal-toc {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: 40px;
}
.legal-toc a {
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	color: var(--color-primary);
	background: var(--color-success-bg);
	border-radius: var(--radius-full);
	padding: 8px 16px;
	text-decoration: none;
	transition: background var(--duration-base) var(--ease-standard);
}
.legal-toc a:hover { background: var(--color-primary); color: #fff; }

/* ---------- Hero ---------- */
.hero {
	background-image:
		radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(155deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	background-size: 4px 4px, auto;
	border-radius: var(--radius-xl);
	padding: var(--space-20) var(--space-12);
	margin-top: var(--space-12);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	right: -120px;
	bottom: -160px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232,173,47,0.16), transparent 70%);
	pointer-events: none;
}
.hero::after {
	content: "";
	position: absolute;
	left: -160px;
	top: -180px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(14,138,79,0.35), transparent 72%);
	pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: var(--space-4); }
.hero-sub { color: rgba(255,255,255,0.85); font-size: var(--fs-body-lg); max-width: 540px; margin-bottom: var(--space-8); }
.hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }

@media (max-width: 780px) {
	.hero { padding: var(--space-12) var(--space-5, 20px); border-radius: var(--radius-lg); }
}
@media (max-width: 600px) {
	.hero-cta { flex-wrap: nowrap; gap: var(--space-2); }
	.hero-cta .btn {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: var(--space-3);
		font-size: var(--fs-small);
	}
}

/* Page hero (non-homepage) — simpler banner */
.page-hero {
	padding: var(--space-16) 0 var(--space-8);
	text-align: center;
}
.page-hero .eyebrow { justify-content: center; display: inline-flex; }
.page-hero h1 { margin-bottom: var(--space-4); }
.page-hero .lead { max-width: 640px; margin-inline: auto; }

.page-hero.on-primary {
	background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: #fff;
	border-radius: var(--radius-xl);
	margin: var(--space-8) auto 0;
	max-width: var(--container-max);
	padding: var(--space-16) var(--container-pad);
}
.page-hero.on-primary h1 { color: #fff; }
.page-hero.on-primary .lead { color: rgba(255,255,255,0.85); }

@media (max-width: 600px) {
	.page-hero { padding: var(--space-8) 0 var(--space-6); }
	.page-hero.on-primary { padding: 40px var(--container-pad); margin-top: var(--space-4); border-radius: var(--radius-lg); }
}

/* Section variants */
.section-alt { background: var(--color-surface); }
.section-primary-soft { background: var(--color-surface-alt); }

/* How we help */
.help-card { text-align: left; padding: var(--space-6); }
.help-icon {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-md);
	background: var(--color-success-bg);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-4);
}
.help-icon svg { width: 26px; height: 26px; }

/* CTA banners */
.cta-banner {
	border-radius: var(--radius-xl);
	padding: var(--space-12);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	flex-wrap: wrap;
}
.cta-banner.green { background: var(--color-primary); color: #fff; }
.cta-banner.gold { background: linear-gradient(135deg, #FBEBC5, #F6DA9E); color: var(--color-text); }
.cta-banner h2, .cta-banner.green h2 { color: inherit; margin-bottom: var(--space-2); }
.cta-banner p { color: inherit; opacity: 0.85; margin: 0; }
.cta-banner-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 780px) {
	.cta-banner { padding: var(--space-8) var(--space-5, 20px); }
}
@media (max-width: 600px) {
	.cta-banner-actions { flex-wrap: nowrap; gap: var(--space-2); width: 100%; }
	.cta-banner-actions .btn {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: var(--space-3);
		font-size: var(--fs-small);
	}
}

/* Board / leadership */
.leader-card { text-align: center; padding: var(--space-6); }
.leader-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--space-4); background: var(--color-surface-alt); }
.leader-name { font-weight: var(--fw-bold); margin-bottom: 2px; }
.leader-role { color: var(--color-primary); font-size: var(--fs-small); font-weight: var(--fw-medium); }

/* Transparency document card */
.doc-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5, 20px); }
.doc-icon {
	width: 48px; height: 48px; border-radius: var(--radius-md);
	background: var(--color-success-bg); color: var(--color-primary);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.doc-icon svg { width: 24px; height: 24px; }
.doc-meta { flex: 1; min-width: 0; }
.doc-title { font-weight: var(--fw-semibold); margin-bottom: 2px; }
.doc-sub { font-size: var(--fs-xsmall); color: var(--color-muted); }
.doc-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* ---------- Auth pages (login/register) — clean centered card ---------- */
.auth-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-8) var(--container-pad);
	background: var(--color-background);
	background-image: radial-gradient(rgba(8, 107, 61, 0.05) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
}

.auth-card {
	width: 100%;
	max-width: 380px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	box-shadow: var(--shadow-md);
	position: relative;
	z-index: 1;
}
.auth-logo { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.auth-logo .site-brand-mark { transform: scale(0.9); }
.auth-logo .site-brand-name { font-size: var(--fs-small); letter-spacing: 0.02em; }
.auth-title {
	text-align: center;
	margin-bottom: 4px;
	font-size: 1.25rem;
	line-height: 1.3;
}
.auth-sub { text-align: center; color: var(--color-muted); font-size: var(--fs-small); margin-bottom: var(--space-6); }
.auth-card .form-group { margin-bottom: var(--space-4); }
.auth-card .form-label { font-size: var(--fs-xsmall); margin-bottom: 6px; }
.auth-card .form-control {
	min-height: 36px !important;
	padding: 7px 12px !important;
	font-size: var(--fs-small) !important;
}
.auth-card .input-icon-group .form-control { padding-left: 38px !important; }
.auth-card .input-icon-group.has-toggle .form-control { padding-right: 38px !important; }
.auth-card .input-icon-group .input-icon { left: 12px; }
.auth-card .input-icon-group .input-icon-btn { right: 4px; width: 28px; height: 28px; }
.auth-card .btn-primary {
	box-shadow: 0 2px 8px rgba(8, 107, 61, 0.18);
}
.auth-card .btn-primary:hover {
	box-shadow: 0 6px 16px rgba(8, 107, 61, 0.28);
	transform: translateY(-1px);
}
.auth-card .btn-lg { min-height: 38px; padding: 8px 24px; font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.auth-footer { text-align: center; margin-top: var(--space-4); font-size: var(--fs-small); color: var(--color-muted); display: flex; flex-direction: column; gap: var(--space-2); }
.auth-footer .btn { min-height: 40px; padding: 9px 20px; font-size: var(--fs-small); }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-muted); font-size: var(--fs-xsmall); margin: var(--space-4) 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.form-shell {
	max-width: 760px;
	margin: 0 auto;
}
.form-section-title { font-size: 1.125rem; margin-bottom: var(--space-1); padding-top: var(--space-6); }
.form-section-title:first-child { padding-top: 0; }
.form-section-sub { color: var(--color-muted); margin-bottom: var(--space-6); }

/* Compact, premium inputs for the registration forms (matches auth pages) */
.form-shell .form-group { margin-bottom: var(--space-4); }
.form-shell .form-label { font-size: var(--fs-xsmall); margin-bottom: 6px; }
.form-shell .form-control {
	min-height: 36px !important;
	padding: 7px 12px !important;
	font-size: var(--fs-small) !important;
}
.form-shell textarea.form-control { min-height: 90px !important; padding: 10px 12px !important; }
.form-shell .input-icon-group .form-control { padding-left: 38px !important; }
.form-shell .input-icon-group.has-toggle .form-control { padding-right: 38px !important; }
.form-shell .input-icon-group .input-icon { left: 12px; }
.form-shell .input-icon-group .input-icon-btn { right: 4px; width: 28px; height: 28px; }
.form-shell .form-section-title { padding-top: var(--space-4); margin-bottom: var(--space-3); font-size: 1rem; }
.form-shell .form-section-title:first-child { padding-top: 0; }
.form-shell .btn-lg { min-height: 42px; padding: 10px 24px; font-size: var(--fs-small); }
.form-shell .btn-primary { box-shadow: 0 2px 8px rgba(8, 107, 61, 0.18); }
.form-shell .btn-primary:hover { box-shadow: 0 6px 16px rgba(8, 107, 61, 0.28); transform: translateY(-1px); }

/* ---------- Donation page ---------- */
.give-embed-wrap { width: 100%; }
.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 480px) { .amount-grid { grid-template-columns: repeat(2, 1fr); } }
.amount-option {
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	text-align: center;
	font-weight: var(--fw-bold);
	font-size: 1.0625rem;
	cursor: pointer;
	background: var(--color-surface);
	transition: border-color var(--duration-base), background-color var(--duration-base);
}
.amount-option:hover { border-color: var(--color-border-strong); }
.amount-option.is-selected { border-color: var(--color-primary); background: var(--color-success-bg); color: var(--color-primary); }

.payment-method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 480px) { .payment-method-grid { grid-template-columns: 1fr; } }
.payment-method {
	display: flex; align-items: center; gap: var(--space-3);
	border: 2px solid var(--color-border); border-radius: var(--radius-md);
	padding: var(--space-4); cursor: pointer; background: var(--color-surface);
}
.payment-method.is-selected { border-color: var(--color-primary); background: var(--color-success-bg); }
.payment-method-logo { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-surface-alt); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xsmall); font-weight: var(--fw-bold); color: var(--color-primary); flex-shrink: 0; }

.secure-note { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface-alt); border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--fs-small); }
.secure-note svg { width: 22px; height: 22px; color: var(--color-primary); flex-shrink: 0; }

.receipt-card { max-width: 520px; margin: 0 auto; text-align: center; padding: var(--space-12) var(--space-8); }
.receipt-check { width: 64px; height: 64px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-6); }
.receipt-check svg { width: 32px; height: 32px; }
.receipt-details { text-align: left; background: var(--color-surface-alt); border-radius: var(--radius-md); padding: var(--space-6); margin: var(--space-8) 0; }
.receipt-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; font-size: var(--fs-small); }
.receipt-row + .receipt-row { border-top: 1px solid var(--color-border); }
.receipt-row .label { color: var(--color-muted); }
.receipt-row .value { font-weight: var(--fw-semibold); }

/* ---------- Election ---------- */
.election-status-bar {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	justify-content: center;
	margin-bottom: var(--space-4);
}
.election-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); max-width: 720px; margin: var(--space-8) auto 0; }
@media (max-width: 600px) { .election-stats { grid-template-columns: 1fr; } }

.notice-banner {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	background: var(--color-warning-bg);
	border: 1px solid #EED9A0;
	color: #7A5D00;
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5, 20px);
	max-width: 720px;
	margin: var(--space-6) auto 0;
}
.notice-banner svg { width: 20px; height: 20px; flex-shrink: 0; }

.ballot-section { max-width: 640px; margin: 0 auto var(--space-8); }
.ballot-section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-2); }
.ballot-section-sub { color: var(--color-muted); font-size: var(--fs-small); margin-bottom: var(--space-4); }
.ballot-options { display: flex; flex-direction: column; gap: var(--space-3); }

.otp-inputs { display: flex; gap: var(--space-3); justify-content: center; margin: var(--space-6) 0; }
.otp-inputs input {
	width: 52px; height: 60px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: var(--fw-bold);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.otp-inputs input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }

@media (max-width: 400px) {
	.otp-inputs { gap: var(--space-1); }
	.otp-inputs input { width: 40px; height: 48px; font-size: 1.125rem; }
}
@media (max-width: 340px) {
	.otp-inputs input { width: 34px; height: 44px; font-size: 1rem; }
}

.review-summary { max-width: 560px; margin: 0 auto; }
.review-block { padding: var(--space-5, 20px) 0; border-bottom: 1px solid var(--color-border); }
.review-block:last-child { border-bottom: none; }
.review-block-label { font-size: var(--fs-xsmall); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.review-block-value { font-weight: var(--fw-semibold); }

.results-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.results-row:last-child { border-bottom: none; }
.results-rank { width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface-alt); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-small); flex-shrink: 0; color: var(--color-muted); }
.results-row.is-winner .results-rank { background: var(--color-accent); color: var(--color-on-accent); }
.results-name { flex: 1; min-width: 0; }
.results-name-text { font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--space-2); }
.results-bar-wrap { flex: 2; }
.results-votes { min-width: 96px; text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

.audit-log-entry { display: grid; grid-template-columns: 180px 1fr 160px 140px; gap: var(--space-4); padding: var(--space-4); font-size: var(--fs-small); border-bottom: 1px solid var(--color-border); align-items: center; }
.audit-log-entry:last-child { border-bottom: none; }
@media (max-width: 780px) { .audit-log-entry { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4) var(--space-4); } }

/* ---------- Admin ---------- */
.admin-topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-8); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.admin-filter-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-6); }
.admin-filter-bar .form-control { min-height: 42px !important; padding: 9px 14px !important; width: auto; }
.admin-search { position: relative; flex: 1; min-width: 220px; }
.admin-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-muted); }
.admin-search input { padding-left: 42px; }

.action-row { display: flex; gap: var(--space-2); }

.chart-placeholder {
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-muted);
	font-size: var(--fs-small);
	background: var(--color-surface-alt);
	gap: var(--space-2);
}
.chart-placeholder svg { width: 20px; height: 20px; }

/* Skill/interest chips */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { padding: 6px 14px; border-radius: var(--radius-full); background: var(--color-surface-alt); font-size: var(--fs-xsmall); font-weight: var(--fw-medium); color: var(--color-text); border: 1px solid var(--color-border); }

/* Certificate card */
.certificate-card { padding: var(--space-6); text-align: center; border: 2px solid var(--color-accent); position: relative; }
.certificate-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md); pointer-events: none; }

/* Demo data notice used across dashboard/admin/election templates */
.demo-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-xsmall);
	color: var(--color-muted);
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	padding: 4px 12px;
	margin-bottom: var(--space-6);
}
.demo-note svg { width: 13px; height: 13px; }

/* ---------- Single news article ---------- */
.news-article-title { font-size: 2rem; }
@media (max-width: 600px) {
	.news-article-title { font-size: 1.375rem; }
}

/* ---------- Single project hero ---------- */
.project-hero-title { font-size: 2rem; color: #fff; margin-bottom: var(--space-2); }
@media (max-width: 600px) {
	.project-hero-title { font-size: 1.5rem; }
}