/*
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:   #666666;

  /* Borders */
  --border:       #CCCCCC;
  --border-light: #ececec;

  /* Background */
  --bg:           #F5F5F5;
  --white:        #FFFFFF;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 6px 20px rgba(0,0,0,0.12);
  --shadow-lg:  0 14px 40px rgba(0,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: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.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, 0.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, 0.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 0.35s ease;
  max-width: 90vw;
  text-align: center;
  pointer-events: none;
}
#ha-toast.visible {
  transform: translateX(-50%) translateY(0);
}