/* Shared site chrome — header and footer, identical on every page.
   Depends only on the Ubuntu font and the palette below, so it can sit alongside either
   theme.css (sub-pages) or home.css (the root page) without fighting them. */

:root {
  --site-green: #1B9E3E;
  --site-text: #fff;
  --site-dim: #999;
  --site-faint: #666;
  --site-line: #1a1a1a;
  --site-line-bright: #333;
  --site-gutter: 24px;
  --site-max: 1060px;
}

/* theme.css doesn't set this; home.css did, so only the root page was smoothed. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* theme.css's `* { color: white }` lands directly on these spans, beating the colour they'd
   otherwise inherit from .footer — which is why sub-page footers rendered white and the root
   page's grey. The old markup used .footer-item { color: inherit } for the same reason. */
.footer span {
  color: inherit;
}

/* home.css resets box-sizing globally; theme.css doesn't, so scope it to the chrome
   rather than changing the box model of pages that already lay out fine without it. */
.brand,
.brand *,
.footer,
.footer * {
  box-sizing: border-box;
}

/* The root page resets links globally; sub-pages don't, so scope it here. */
.brand a,
.footer a {
  text-decoration: none;
}

/* ── header ─────────────────────────────────────────────────────────── */

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--site-max);
  width: 100%;
  margin: 0 auto;
  padding: 22px var(--site-gutter);
}

.brand-mark {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.brand-mark img {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: block;
}

.brand-text {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.6px;
}

.brand-text span {
  color: var(--site-faint);
  font-weight: 400;
}

.brand-nav {
  display: flex;
  align-items: center;
  column-gap: 26px;
  font-size: 14px;
}

.brand-nav a {
  color: var(--site-dim);
  transition: color 140ms ease;
}

.brand-nav a:hover {
  color: var(--site-text);
}

.brand-cta {
  border: 1px solid var(--site-line-bright);
  border-radius: 6px;
  padding: 8px 16px;
  color: var(--site-text) !important;
  font-weight: 500;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.brand-cta:hover {
  border-color: var(--site-green);
  background: rgba(27, 158, 62, 0.08);
}

/* ── footer ─────────────────────────────────────────────────────────── */

.footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  max-width: var(--site-max);
  width: 100%;
  margin: 0 auto;
  padding: 20px var(--site-gutter) 28px;
  border-top: 1px solid var(--site-line);
  font-size: 14px;
  color: var(--site-faint);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
  row-gap: 4px;
}

.footer-links a {
  color: var(--site-faint);
  transition: color 140ms ease;
}

.footer-links a:hover {
  color: var(--site-green);
}


@media (max-width: 820px) {
  .brand-nav a:not(.brand-cta) {
    display: none;
  }
}

@media (max-width: 520px) {
  .footer {
    justify-content: center;
    text-align: center;
  }
}