/* Thoosie site chrome: the one header and footer every page shares (2026-10-17).

   Loaded by the new pages (with site.css) and by every older page, which keep their own
   styles for everything else. Two rules keep it from fighting those pages:
   - The markup uses divs with ARIA roles, never <nav>, <header> or <footer>, because the older
     pages style those elements directly (`nav { position: fixed; ... }`, `footer { ... }`).
   - Every property it depends on is set here explicitly under a .tz- class, so a page-level
     `a { ... }` or font rule cannot leak in.
   Colors come from the app: Thoosie orange #FF9516 (its AccentColor) everywhere, white button
   text (Ben, 2026-10-17). */

.tz-header, .tz-footer {
  --tz-orange: #FF9516; --tz-orange-text: #FF9516; --tz-ink: #1c1c1e; --tz-soft: #5f5f66;
  --tz-hair: #e3e3e8; --tz-bg: rgba(255,255,255,.86);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; box-sizing: border-box; line-height: 1.4; text-align: left;
}
.tz-header *, .tz-footer * { box-sizing: border-box; }

/* Header. Sticky on the new pages; .tz-fixed on older pages, whose content is already padded
   for a fixed bar of about this height. */
.tz-header { position: sticky; top: 0; z-index: 300; width: 100%; margin: 0; padding: 0;
  background: var(--tz-bg); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--tz-hair); }
.tz-header.tz-fixed { position: fixed; left: 0; right: 0; }
.tz-header .tz-in { max-width: 1120px; margin: 0 auto; padding: 0 20px; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* The wordmark in the app's orange, bold capitals, the way every older page set it. A logotype,
   so the text-contrast rule does not apply to it. */
.tz-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--tz-orange) !important; font-weight: 850; font-size: 17px; letter-spacing: 0.09em; text-transform: uppercase; }
.tz-brand img { width: 34px; height: 34px; border-radius: 9px; display: block; }
.tz-links { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; }
.tz-links a { color: var(--tz-soft); text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 6px 0; border: 0; background: none; }
.tz-links a:hover, .tz-links a[aria-current="page"] { color: var(--tz-orange-text); }
.tz-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  background: var(--tz-orange); color: #fff !important; font-weight: 750; font-size: 15px;
  padding: 9px 16px; border-radius: 999px; border: 0; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(255,149,22,.32); }
.tz-btn:hover { filter: brightness(1.04); color: #fff !important; }
/* Beats `.tz-links a` (background: none), which is more specific than .tz-btn alone. */
.tz-links a.tz-btn, .tz-panel a.tz-btn { background: var(--tz-orange); color: #fff; padding: 9px 16px; }
.tz-panel a.tz-btn { padding: 12px 14px; }
.tz-header a:focus-visible, .tz-footer a:focus-visible, .tz-menu summary:focus-visible {
  outline: 3px solid rgba(255,149,22,.6); outline-offset: 3px; border-radius: 8px; }

/* Phones: the inline links give way to a menu button. A <details> needs no script and works
   with the keyboard. */
.tz-menu { display: none; position: relative; margin: 0; }
.tz-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 15px; color: var(--tz-ink); padding: 8px 14px; border-radius: 999px;
  background: rgba(118,118,128,.12); }
.tz-menu summary::-webkit-details-marker { display: none; }
.tz-menu summary svg { width: 16px; height: 16px; }
.tz-menu .tz-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(280px, 86vw);
  background: #fff; border: 1px solid var(--tz-hair); border-radius: 18px; padding: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.14); display: flex; flex-direction: column; }
.tz-menu .tz-panel a { color: var(--tz-ink); text-decoration: none; font-weight: 600; font-size: 16px;
  padding: 12px 14px; border-radius: 12px; }
.tz-menu .tz-panel a:hover { background: rgba(255,149,22,.10); }
.tz-menu .tz-panel .tz-btn { margin-top: 6px; padding: 12px 14px; font-size: 16px; }
@media (max-width: 760px) {
  .tz-links { display: none; }
  .tz-menu { display: block; }
  .tz-header .tz-in { height: 56px; padding: 0 16px; }
  .tz-brand { font-size: 16px; }
  .tz-brand img { width: 30px; height: 30px; }
}

/* Footer */
.tz-footer { background: #f2f2f7; border-top: 1px solid var(--tz-hair); margin: 0; padding: 0; color: var(--tz-soft); }
.tz-footer .tz-in { max-width: 1120px; margin: 0 auto; padding: 34px 20px 28px;
  display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; }
.tz-footer .tz-brand { font-size: 15px; }
.tz-footer .tz-brand img { width: 28px; height: 28px; border-radius: 8px; }
.tz-footer .tz-flinks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.tz-footer .tz-flinks a { color: var(--tz-soft); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.tz-footer .tz-flinks a:hover { color: var(--tz-orange-text); }
.tz-footer .tz-fine { width: 100%; border-top: 1px solid var(--tz-hair); padding-top: 14px;
  font-size: 13px; color: var(--tz-soft); }
@media (max-width: 760px) { .tz-footer .tz-in { padding: 28px 16px 28px; } }