/*
Theme Name: Human Appeal
Theme URI: https://humanappeal.org.au
Description: Custom theme for Human Appeal Australia donation website.
Author: A&H Digital Solution
Version: 1.0.0
Text Domain: human-appeal
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	/* Brand */
	--green: #01aa01;
	--green-dark: #339e43;
	--green-light: #e8f5ec;
	--green-faint: #f3faf4;
	--pink: #d81473;
	--pink-dark: #b01060;
	/* Text */
	--text: #1d1d1b;
	--text-muted: #666;
	/* Borders */
	--border: #ccc;
	--border-light: #ececec;
	/* Background */
	--bg: #f5f5f5;
	--white: #fff;
	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
	--shadow-md: 0 6px 20px rgba(0, 0, 0, .12);
	--shadow-lg: 0 14px 40px rgba(0, 0, 0, .18);
	/* Campaign overrides (set via JS) */
	--campaign-accent: var(--green);
	--campaign-tint: transparent;
	--campaign-hero-wash: rgba(0, 0, 0, 0);
	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 80px;
	--space-10: 120px;
	--container-max: 1400px;
	--container-pad: 32px;
	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-pill: 999px;
	/* Transitions */
	--transition-fast: .15s ease;
	--transition-base: .2s ease;
	--transition-slow: .5s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html:not(:has(body.home-v3)) {
	scroll-behavior: smooth;
}

body {
	font-family: "Oakes Grotesk", "Inter", system-ui, sans-serif;
	color: var(--text);
	background: var(--bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background var(--transition-slow);
}

body.campaign-mode {
	background: linear-gradient(180deg, var(--campaign-tint) 0%, var(--bg) 600px);
}

h1, h2 {
	font-family: "Fields Display", "DM Serif Display", Georgia, serif;
	font-weight: 500;
	line-height: 1.2;
}

h3, h4, h5, h6 {
	font-family: "Oakes Grotesk", "Inter", sans-serif;
	font-weight: 700;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

input, textarea, select {
	font-family: inherit;
}

ul {
	list-style: none;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.section-pad {
	padding: 64px 0;
}

/* ============================================================
   GLOBAL BUTTONS
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 16px;
	padding: 12px 28px;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.btn-primary {
	background: var(--pink);
	color: var(--white);
}

.btn-primary:hover {
	transform: scale(1.05);
	box-shadow: 0 0 20px rgba(216, 20, 115, .5);
}

.btn-green {
	background: var(--green);
	color: var(--white);
}

.btn-green:hover {
	transform: scale(1.05);
	box-shadow: 0 0 20px rgba(1, 170, 1, .5);
}

.btn-outline {
	background: transparent;
	color: var(--green);
	border: 2px solid var(--green);
}

.btn-outline:hover {
	background: var(--green);
	color: var(--white);
}

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */
#ha-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(120px);
	background: var(--green-dark);
	color: white;
	padding: 14px 28px;
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	font-weight: 500;
	font-size: 15px;
	z-index: 1000;
	transition: transform .35s ease;
	max-width: 90vw;
	text-align: center;
	pointer-events: none;
}

#ha-toast.visible {
	transform: translateX(-50%) translateY(0);
}