/* =============================================================
   Custom properties
   ============================================================= */

:root {
  /* Colours */
  --color-bg:                  #3A2E2A;
  --color-text:                #D0C5BA;
  --color-text-muted:          #B8A89C;

  --color-btn-primary:         #D0C5BA;
  --color-btn-primary-text:    #3A2E2A;

  --color-btn-secondary:       #BFA99A;

  --color-focus:               #F03080;

  /* Typography */
  --font-heading: "Cactus Classical Serif", "DM Serif Display", Georgia, serif;
  --font-body:    "DM Sans", system-ui, -apple-system, sans-serif;
}

/* =============================================================
   Reset
   ============================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* =============================================================
   Base
   ============================================================= */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.5;
  overflow-x: hidden;
}

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

/* =============================================================
   Layout
   ============================================================= */

main {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 24px 28px;
}

/* =============================================================
   Logo section
   Targets 75–90px total height on 390px screens.
   TSC logo (502×138) at 120px wide → ~33px tall.
   Ikhaya logo (328×236) at 62px wide → ~45px tall.
   Gap 8px. Total ≈ 86px.
   ============================================================= */

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}

.logo-tsc {
  width: 120px;
}

.logo-ikhaya {
  width: 62px;
}

/* =============================================================
   Content
   ============================================================= */

.content {
  text-align: center;
}

h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 32px;
}

/* =============================================================
   Action navigation
   ============================================================= */

nav[aria-label="Actions"],
nav[aria-label="Donation amounts"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =============================================================
   Buttons
   ============================================================= */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 13px 20px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
}

.btn:active {
  background-color: var(--color-btn-secondary);
  color: var(--color-btn-primary-text);
}

.btn:focus-visible {
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn-primary {
  min-height: 56px;
  padding: 16px 20px;
}

/* Stacked button: label above amount (donation page) */
.btn-stack {
  flex-direction: column;
  gap: 5px;
  min-height: 62px;
  line-height: 1.25;
}

.btn-label {
  font-size: 0.9375rem;
  font-weight: 300;
}

.btn-amount {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.btn-stack:hover .btn-amount,
.btn-stack:active .btn-amount,
.btn-stack:focus-visible .btn-amount {
  color: var(--color-btn-primary-text);
}

/* =============================================================
   Page link
   ============================================================= */

.page-link {
  display: block;
  text-align: center;
  min-height: 44px;
  padding: 10px 8px;
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 168, 156, 0.6);
}

.page-link:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-text);
}

.page-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =============================================================
   Responsive
   ============================================================= */

@media (min-width: 560px) {
  main {
    padding-top: 44px;
    padding-bottom: 36px;
  }

  h1 {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  main {
    padding: 56px 32px 44px;
  }

  h1 {
    font-size: 2.25rem;
  }
}

/* =============================================================
   Reduced motion
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}