/* Giving Tree / Canopy / Release 1.0
   Keep this file next to fonts/ and assets/ when deploying to /brand/. */
@font-face { font-family: 'Space Grotesk'; src: url('./fonts/SpaceGrotesk-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('./fonts/SpaceGrotesk-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('./fonts/SpaceGrotesk-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('./fonts/SpaceGrotesk-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --gt-charcoal: #202824;
  --gt-ivory: #F4F1E8;
  --gt-green: #B6CE35;
  --gt-graphite: #171D1B;
  --gt-stone: #BCC4BB;
  --gt-moss: #65715B;
  --gt-heading-font: 'Space Grotesk', Arial, sans-serif;
  --gt-body-font: 'Inter', Arial, sans-serif;
  --gt-space-1: .5rem;
  --gt-space-2: 1rem;
  --gt-space-3: 1.5rem;
  --gt-space-4: 2rem;
  --gt-space-6: 3rem;
  --gt-space-8: 4rem;
  --gt-content-width: 75rem;
}

/* Classes are scoped so this file can be introduced into an existing website. */
.gt { box-sizing: border-box; color: var(--gt-charcoal); background: var(--gt-ivory); font: 400 1rem/1.6 var(--gt-body-font); }
.gt *, .gt *::before, .gt *::after { box-sizing: inherit; }
.gt h1, .gt h2, .gt h3 { font-family: var(--gt-heading-font); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; }
.gt h1 { font-size: clamp(2.5rem, 5.5vw, 5.25rem); }
.gt h2 { font-size: clamp(2rem, 3.5vw, 3.25rem); }
.gt h3 { font-size: clamp(1.375rem, 2.25vw, 2rem); }
.gt p { max-width: 65ch; }
.gt a { color: inherit; text-underline-offset: .2em; }
.gt a:focus-visible, .gt button:focus-visible, .gt input:focus-visible, .gt textarea:focus-visible, .gt select:focus-visible {
  outline: 3px solid var(--gt-charcoal); outline-offset: 3px; box-shadow: 0 0 0 7px var(--gt-ivory);
}
.gt-shell { max-width: var(--gt-content-width); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.gt-section { padding-block: clamp(3rem, 7vw, 6rem); }
.gt-dark { background: var(--gt-charcoal); color: var(--gt-ivory); }
.gt-deep { background: var(--gt-graphite); color: var(--gt-ivory); }
.gt-signal { background: var(--gt-green); color: var(--gt-charcoal); }
.gt-muted { color: var(--gt-moss); }
.gt-dark .gt-muted, .gt-deep .gt-muted { color: var(--gt-stone); }
.gt-logo { display: block; width: 17rem; max-width: 100%; height: auto; }
.gt-logo-link { display: inline-block; padding: 1rem; margin: -1rem; }
.gt-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .875rem 1.5rem; background: var(--gt-green); color: var(--gt-charcoal) !important; border: 1px solid var(--gt-green); border-radius: 0; font: 600 1rem/1.3 var(--gt-body-font); text-decoration: none; cursor: pointer; }
.gt-button:hover { background: var(--gt-charcoal); color: var(--gt-ivory) !important; border-color: currentColor; }
.gt-button-secondary { background: transparent; color: inherit !important; border-color: currentColor; }
.gt-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.gt-input { display: block; width: 100%; min-height: 2.75rem; padding: .75rem 1rem; border: 1px solid var(--gt-moss); border-radius: 0; color: var(--gt-charcoal); background: var(--gt-ivory); font: inherit; }
.gt-input::placeholder { color: var(--gt-moss); opacity: 1; }
.gt-label { display: block; font-weight: 600; margin-bottom: .5rem; }
.gt-divider { border: 0; border-top: 1px solid var(--gt-stone); margin-block: 2rem; }
.gt-table { width: 100%; border-collapse: collapse; }
.gt-table th, .gt-table td { text-align: left; border-bottom: 1px solid var(--gt-stone); padding: 1rem; }
.gt-table th { font-weight: 600; }
.gt-numeric { font-variant-numeric: tabular-nums; text-align: right !important; }
@media (prefers-reduced-motion: reduce) { .gt *, .gt *::before, .gt *::after { scroll-behavior: auto !important; } }
