/* ============================================================
   THEME: Delta — "COOL CASH"
   Delta Community teen camp savings-calculator branding.
   Colors taken from the Delta app source palette:
     teal  #009aa8  (totals, headings, info badges)
     green #5d9c42 / #6e9a35  (input borders / accents)
     orange #f47721  (primary button)
   Activate via <link rel="stylesheet" href="theme-delta.css">
   in index.html (before styles.css).
   ============================================================ */
:root {
  /* Colors */
  --brand-green: #5d9c42;        /* input borders, $ prefix */
  --brand-green-light: #009aa8;  /* info badge (teal in the COOL CASH design) */
  --accent-bg: #f47721;          /* primary button background */
  --accent-text: #ffffff;        /* primary button text */
  --page-bg: #eaeaea;            /* page + label background */
  --surface: #ffffff;            /* calculator card background */
  --text: #232c30;               /* default body text */

  /* Teal is the headline accent for totals & help headings */
  --brand-accent: #009aa8;

  /* Fonts */
  --font-body: 'Montserrat', sans-serif;
  --font-display: 'hoch', sans-serif;  /* big numbers / headings */

  /* Brand art — COOL CASH logo is a stacked lockup (384x270).
     The angled grey header/footer bands are drawn in CSS below
     (clip-path) rather than with background images, so no
     --header-bg / --footer-bg image is used. */
  --logo: url('img/logo-delta.png');
  --logo-width: 168px;
  --logo-height: 118px;          /* 168 * 270/384, preserves aspect ratio */
  --header-bg: none;
  --footer-bg: none;
}

/* The COOL CASH total and help heading are teal, not green. */
#result .total,
#help .heading {
  color: var(--brand-accent);
}

/* ---- Angled grey bands (matches the default Spark Money look) ----
   Page body is white; the header is a solid grey band that fully
   contains the logo, with its bottom edge angled UP from left to
   right. The footer mirrors the same angle direction.
   "Up from left to right" => left edge lower (larger %), right
   edge higher (smaller %). */
body {
  background-color: var(--surface);
}

#main-header {
  /* Tall enough that the full logo sits inside the solid grey,
     above the angled strip. */
  height: 168px;
  background-color: var(--page-bg);
  /* Top is square; bottom edge rises from left (100%) to right (88%). */
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

/* Center the logo in the solid upper zone. Anchored from the top
   so it can never overflow/clip against the page top. The solid
   region on the right is ~88% of 168px ≈ 148px; an 118px logo
   centered near the top sits clear of the slope. */
#logo-container {
  top: 18px;
  bottom: auto;
}

#main-footer {
  background-color: var(--page-bg);
  /* Bottom band; top edge rises from left (35%) to right (8%),
     same up-left-to-right slope as the header. */
  -webkit-clip-path: polygon(0 35%, 100% 8%, 100% 100%, 0 100%);
  clip-path: polygon(0 35%, 100% 8%, 100% 100%, 0 100%);
}