/* Shared ZODI page skin — the subpage counterpart to the hub (/index.html).
   Include on every tool page AFTER that page's own stylesheets:
     <link rel="stylesheet" href="/zodi-page.css">

   The hub uses the Around theme (css/theme.min.css); the tool pages don't
   (they'd fight it), so this file re-creates the hub's visual language with
   the tokens already declared in /style.css: #766df4 primary, Inter, the
   #f7f7fc page wash (identical to Around's .bg-secondary), 16px radii and
   soft lavender shadows.

   It is deliberately a *skin*: it restyles the header/footer/card shells the
   tool pages already ship, and never changes their layout or controls. */

:root {
  --zodi-primary: #766df4;
  --zodi-primary-dark: #5b52d9;
  --zodi-primary-tint: rgba(118, 109, 244, .1);
  --zodi-ink: #37384e;
  --zodi-muted: #737491;
  --zodi-band: #f7f7fc;
  --zodi-line: #ececf6;
  --zodi-shadow: 0 .25rem .75rem rgba(55, 56, 78, .06);
}

/* ---------------------------------------------------------------------
   1. Page header band
   Every tool page ships its own header class — .page-head (donate,
   retirement), .tv-head (travel), .act-head (activities), .pet-head (pets),
   .page-header (school tracker), .topbar (maid). They get one shared type
   scale and rhythm here so the pages read as one product.
   --------------------------------------------------------------------- */
.page-head,
.tv-head,
.act-head,
.pet-head {
  padding-top: 26px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--zodi-line);
}

/* Titles: one size everywhere. The tool pages set font-size inline on some
   of these h1s, so those inline styles are removed in the markup instead of
   being fought with !important here. */
.page-head h1,
.tv-head h1,
.act-head h1,
.pet-head h1,
.page-header h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--zodi-ink);
  line-height: 1.25;
  margin: 0 0 6px;
}

/* Subtitles: the muted lead under the title, matching the hub's .fs-lg lead. */
.page-head p,
.tv-head p,
.act-head .sub,
.pet-head .sub,
.page-header .sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--zodi-muted);
  margin: 0;
}

/* The centred pages (donate, retirement, travel) keep their centred layout;
   the calendar pages keep title-left / auth-widget-right. */
.page-head,
.tv-head { text-align: center; }

/* Emoji sizing so the icon in each title reads like the hub's tool badges. */
.page-head h1,
.tv-head h1 { font-size: 26px; }

/* School-tracker header sits in its own white bar — keep that, just align
   the type and give it the same breathing room as the rest. */
.page-header { padding: 20px 24px; }

/* ---------------------------------------------------------------------
   2. Cards
   Match the hub's elevated, generously rounded cards.
   --------------------------------------------------------------------- */
.card,
.note-card,
.prog-card,
.prog-summary,
.tl-body {
  border-radius: 16px;
  box-shadow: var(--zodi-shadow);
}

/* ---------------------------------------------------------------------
   3. Shared footer (injected by /nav.js on pages that don't have one)
   Same dark footer as the hub, so every page ends the same way.
   --------------------------------------------------------------------- */
/* One footer band colour for the whole site.
   It is deliberately a shade deeper than any page background: the tool pages
   sit on #f7f7fc / #f4f5fb and the hub sits on white, so the old #f7f7fc
   footer was invisible on the tool pages while reading as a clear band on the
   hub. #eef0f8 reads as the same band on both.
   The hub can't load this file (it uses the Around theme, whose body rules
   this file overrides), so it repeats these two values in its own <style> —
   keep them in sync. */
.zodi-footer,
.login-footer {
  background: #eef0f8;
  border-top: 1px solid #e4e6f2;
}
.zodi-footer {
  text-align: center;
  padding: 26px 16px;
  margin-top: 40px;
}
/* The login page ships its own footer markup, so it only needs the band. */
.login-footer { margin-top: auto; }
.zodi-footer .zodi-footer-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
}
.zodi-footer img { height: 24px; width: auto; display: block; }
.zodi-footer .zodi-footer-by {
  font-size: 9px;
  color: var(--zodi-muted);
  white-space: nowrap;
  margin-top: 2px;
}
.zodi-footer a {
  color: var(--zodi-muted);
  font-size: 12px;
  text-decoration: none;
}
.zodi-footer a:hover { color: var(--zodi-primary); }
.zodi-footer .zodi-footer-copy {
  font-size: 12px;
  color: var(--zodi-muted);
  margin: 4px 0 0;
}

/* The tool pages wrap content in a fixed-width .wrap/.container; the footer
   is injected as a body-level sibling, so it must span the full width. */
body > .zodi-footer { width: 100%; }

/* Keep the footer at the bottom on short pages instead of leaving a strip of
   page background under it.
   Safe here (unlike on the hub) because these pages do NOT load the Around
   theme, so nothing sets `html,body{height:100%}` — body's height stays auto
   and `min-height` only ever grows it. `flex-shrink:0` on the children is
   belt-and-braces so no section can be squashed the way the hub's were. */
/* Some pages (travel, donate) carry `body{padding:0 0 4rem}` — breathing room
   from back when there was no footer. The footer now ends the page, and that
   padding would strand it 4rem above the bottom edge. `!important` because
   donate declares its body rule in an inline <style> after this file. */
body { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 0 !important; }
/* `width:100%` matters: these wrappers use `margin: 0 auto`, and an auto
   cross-axis margin cancels a flex item's default stretch — without it the
   containers would shrink to fit their content instead of filling the page
   (their own max-width still centres them). */
body > * { flex-shrink: 0; width: 100%; }
body > .zodi-footer { margin-top: auto; }

@media (max-width: 640px) {
  .page-head h1,
  .tv-head h1 { font-size: 22px; }
  .act-head h1,
  .pet-head h1,
  .page-header h1 { font-size: 20px; }
  .page-head,
  .tv-head,
  .act-head,
  .pet-head { padding-top: 20px; padding-bottom: 14px; margin-bottom: 16px; }
}