/* Shared header and footer for every ValueOddsAPI subpage (same look as the homepage).
   The pages themselves are dark Tailwind pages recoloured by theme.css; this file only styles
   .site-header and .footer, so every rule is scoped to them. Built by chrome-src/inject_chrome.py. */
:root {
  --on-mint: #0b0c0e;
  --on-inverse: #ffffff;
  --shadow-glow: 0 20px 80px 0 rgba(71,250,190,0.18);
  --radius-sm: 10px;
  --radius-md: 12px;
}

.site-header { position: sticky; top: 0; z-index: 50; padding: 16px 16px 0; }
.site-header .wrap, .footer .wrap { max-width: 1200px; margin: 0 auto; }
.site-header .nav { display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 8px 0 20px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 9999px; box-shadow: var(--shadow-lg); }
.site-header .nav-links { display: flex; gap: 4px; }
.site-header .nav-links a { padding: 8px 12px; border-radius: var(--radius-md); font: 500 14px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.site-header .nav-links a:hover, .site-header .nav-links a[aria-current] { color: var(--ink); background: var(--surface-sunken); }

.site-header .brand, .footer .brand { display: flex; align-items: center; gap: 10px; font: 700 17px/1 var(--font-sans); color: var(--ink); text-decoration: none; margin-right: auto; }
.site-header .brand:hover, .footer .brand:hover { color: var(--ink); }
.site-header .brand img { width: 28px; height: 28px; }
.site-header .brand b, .footer .brand b { color: var(--mint-ink); }

.site-header .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-md); border: 1px solid transparent; font: 600 14px/24px var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, transform .15s, box-shadow .15s; }
.site-header .btn-primary { background: var(--mint); color: var(--on-mint); }
.site-header .btn-primary:hover { color: var(--on-mint); transform: translateY(-1px); box-shadow: var(--shadow-glow); }

.footer { border-top: 1px solid var(--border); padding: 32px 24px; margin-top: 48px; font-family: var(--font-sans); }
.footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
.footer .footer-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.footer .brand { margin-right: 0; font-size: 16px; }
.footer .brand img { width: 24px; height: 24px; }
.footer nav { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 20px; }
.footer nav a { color: var(--ink-muted); text-decoration: none; }
.footer nav a:hover { color: var(--ink); }
.footer .eyebrow { font: 600 12px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 4px; }
.footer .body-sm { font-size: 14px; line-height: 20px; margin: 0; }
.footer .muted { color: var(--ink-muted); }
.footer .caption { font-size: 12px; line-height: 16px; font-weight: 500; margin: 0; }
.footer .subtle { color: var(--ink-subtle); }
.footer .lang { display: flex; flex-direction: column; gap: 6px; }
.footer .lang select { min-height: 44px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--ink); font: 500 14px/20px var(--font-sans); }
.footer .link-button { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); text-decoration: underline; cursor: pointer; }
.footer .link-button:hover { color: var(--ink); }
.footer .footer-base { display: block; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) { .site-header .btn:hover { transform: none; } }
@media (max-width: 860px) { .site-header .nav-links { display: none; } }
@media (max-width: 760px) { .footer .footer-grid { grid-template-columns: 1fr 1fr; } .footer .footer-brand { grid-column: 1 / -1; } }