:root {
  /* Blues matched against westchesterta.org's actual computed styles
     (--accent-hsl: 224 94% 28% => #04288C, used for its links/buttons) —
     --wta-blue-deep is that value exactly; --wta-blue is the same hue
     lightened for secondary UI, not an arbitrary lighter blue. */
  --wta-blue:      #0536BC;
  --wta-blue-deep: #04288C;
  --wta-ink:       #10202B;
  --wta-ink-soft:  #5A6B79;
  --wta-paper:     #FFFFFF;
  --wta-mist:      #EEF1F5;
  --wta-rule:      #D8E0E8;
  --wta-go:        #1B7F4B;
  --wta-stop:      #B3341F;
  --wta-warm:      #B8730B;
  --wta-urgent:    #B3341F;

  /* westchesterta.org headings render in Oswald; body copy in Helvetica Neue. */
  --wta-font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wta-font-heading: "Oswald", var(--wta-font-body);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--wta-paper);
  color: var(--wta-ink);
  font-family: var(--wta-font-body);
  font-variant-numeric: tabular-nums;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---- Shared app header: WTA logo + the school's Hebrew mark ---- */
.wta-app-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 2px solid var(--wta-ink);
}
/* The logo PNG is white-on-transparent, so it needs a dark backing —
   the site's own primary blue, matching how it sits on westchesterta.org. */
.wta-app-header__logo {
  flex: none;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--wta-blue-deep);
}
.wta-app-header__logo img {
  display: block;
  height: 24px;
  width: auto;
}
.wta-app-header__mark {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wta-blue-deep);
}
.wta-app-header__nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.wta-app-header__nav a {
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--wta-ink-soft);
  text-decoration: none;
}
.wta-app-header__nav a:hover { background: var(--wta-mist); }
.wta-app-header__nav a.is-active { background: var(--wta-blue); color: #fff; }

.wta-app-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}