/* ============================================================
   Ricky Bobby Talent header and footer for the blog pages.
   The blog keeps the Ricky Bobby Music stylesheet (rbm.css) for its
   content, and that file owns .nav, .btn, .footer and friends. So the
   talent chrome is copied here from styles.css under a tz- prefix,
   with its own variables, and cannot collide. Keep in step with the
   nav, button and footer rules in styles.css.
   ============================================================ */

.tz-nav, .tz-footer {
  --tz-red-glint: #e04a5c;
  --tz-blue-mid: #5b84c4;
  --tz-blue-light: #e0e7f1;
  --tz-action: #b91f32;
  --tz-action-hover: #941829;
  --tz-asphalt: #1a1b1e;
  --tz-paper: #f2f4f3;
  --tz-white: #ffffff;
  --tz-ink: #1a1b1e;
  --tz-ink-dark-soft: #c6cacd;
  --tz-display: "Racing Sans One", "Arial Black", sans-serif;
  --tz-body: "Rubik", "Barlow", "Helvetica Neue", Arial, sans-serif;
  --tz-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --tz-gutter: clamp(1rem, 4vw, 3rem);
  line-height: 1.6;
}
.tz-nav *, .tz-footer * { box-sizing: border-box; }

.tz-nav {
  position: sticky; top: 0; z-index: 50;
  padding: 0.65rem var(--tz-gutter);
  background: var(--tz-asphalt); color: var(--tz-paper);
  border-bottom: 3px solid var(--tz-action);
  font-family: var(--tz-body);
}
.tz-nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  width: 100%; max-width: 1320px; margin-inline: auto;
}

.tz-nav-brand { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--tz-paper); line-height: 1.1; }
.tz-nav-brand-name { font-family: var(--tz-display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.03em; }
.tz-brand-red { color: var(--tz-red-glint); }
.tz-brand-blue { color: var(--tz-blue-mid); }
.tz-nav-brand-tag { font-family: var(--tz-label); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tz-ink-dark-soft); }

.tz-nav-links { display: flex; align-items: center; gap: 0.25rem 1.25rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.tz-nav-links li { margin: 0; padding: 0; }
.tz-nav-links a:not(.tz-btn) {
  color: var(--tz-paper); text-decoration: none; font-family: var(--tz-label);
  font-weight: 600; font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 2px solid transparent; padding: 0.2rem 0;
}
.tz-nav-links a:not(.tz-btn):hover, .tz-nav-links a:not(.tz-btn):focus-visible,
.tz-nav-links a[aria-current="page"]:not(.tz-btn) { border-bottom-color: var(--tz-action); }

.tz-btn {
  display: inline-block; font-family: var(--tz-label); font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding: 0.5rem 1.1rem; line-height: 1.6;
  border: 3px solid var(--tz-paper); color: var(--tz-paper); background: transparent;
  cursor: pointer; transform: skewX(-8deg);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tz-btn > * { display: inline-block; transform: skewX(8deg); }
.tz-btn-line:hover { background: var(--tz-blue-light); color: var(--tz-ink); border-color: var(--tz-blue-light); }
.tz-btn-solid { background: var(--tz-action); border-color: var(--tz-action); color: var(--tz-white); }
.tz-btn-solid:hover { background: var(--tz-action-hover); border-color: var(--tz-action-hover); }

.tz-footer { background: var(--tz-asphalt); color: var(--tz-paper); font-family: var(--tz-body); }
.tz-checker {
  height: 26px;
  background: repeating-conic-gradient(var(--tz-asphalt) 0% 25%, var(--tz-white) 0% 50%) 0 0 / 26px 26px;
}
@media (prefers-reduced-motion: no-preference) { .tz-footer .tz-checker { animation: tz-checker-roll 1.5s linear infinite; } }
@keyframes tz-checker-roll { from { background-position: 0 0; } to { background-position: 52px 0; } }
.tz-footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 1320px; margin-inline: auto; padding: 1.75rem var(--tz-gutter); font-size: 0.95rem; color: #b9bec2;
}
.tz-footer-brand { font-family: var(--tz-display); font-size: 1.15rem; text-transform: uppercase; color: var(--tz-paper); }
.tz-footer-inner a { color: var(--tz-blue-light); }

@media (max-width: 1100px) {
  .tz-nav-links a:not(.tz-btn) { display: none; }
}
@media (max-width: 600px) {
  .tz-nav-brand-tag { display: none; }
  .tz-nav-links { gap: 0.5rem; }
  .tz-nav-links .tz-btn { padding: 0.45rem 0.8rem; font-size: 0.8rem; }
}