/*
 * main.css — GLOBAL / common styles only (mobile-first).
 * Page-specific styles live in their own page-named file (e.g. home.css).
 */

:root {
  --wg-color: #0eaf4c;          /* brand green (sampled from logo) */
  --wg-color-dark: #0b8f3e;
  --wg-accent-red: #f6272a;     /* logo accent */
  --wg-accent-yellow: #fcc00c;  /* logo accent */
  --wg-text: #1a1a1a;
  --wg-muted: #666;
  --wg-bg: #ffffff;
  --wg-border: #e4e4e4;
  --wg-max-width: 720px;
  --wg-space: 16px;
  --wg-radius: 10px;
}

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

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--wg-text);
  background: var(--wg-bg);
  line-height: 1.5;
}

a { color: var(--wg-color); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* Layout */
.wg-main {
  max-width: var(--wg-max-width);
  margin: 0 auto;
  padding: var(--wg-space);
}

/* Header / nav */
.wg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wg-space);
  padding: 12px var(--wg-space);
  border-bottom: 1px solid var(--wg-border);
  position: sticky;
  top: 0;
  background: var(--wg-bg);
  z-index: 10;
}
.wg-logo {
  display: inline-flex;
  align-items: center;
}
.wg-logo img {
  height: 40px;
  width: auto;
  display: block;
}
.wg-logo:hover { text-decoration: none; }
.wg-nav { display: flex; gap: var(--wg-space); }

/* Footer */
.wg-footer {
  max-width: var(--wg-max-width);
  margin: 0 auto;
  padding: var(--wg-space);
  color: var(--wg-muted);
  font-size: 0.875rem;
  border-top: 1px solid var(--wg-border);
}