/*
 * Maira brand styles for the static surrounding pages (landing, legal docs).
 * Mirrors the app palette in client/src/index.css so the marketing/legal
 * surfaces stay visually consistent with the in-app experience.
 *
 * Authoritative palette (MAIRA_brand identity / MAIRA_COLOURS):
 *   Money Green  #083027   Power Orange #FF4A21
 *   Snow White   #FFFFFF   Urban Grey   #E6E6E6
 */

@font-face {
  font-family: "PP Neue Corp Compact";
  src: url("/fonts/pp-neue-corp/PPNeueCorp-CompactMedium.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Corp Compact";
  src: url("/fonts/pp-neue-corp/PPNeueCorp-CompactUltrabold.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --money-green: #083027;
  --money-green-700: #0d4034;
  --power-orange: #ff4a21;
  --power-orange-600: #e23d18;
  --snow-white: #ffffff;
  --urban-grey: #e6e6e6;
  --bg: #fafafa;
  --muted-fg: #5b6b64;
  --border: #e2e6e4;
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--money-green);
  font-family:
    "PP Neue Corp Compact", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--power-orange-600);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Wordmark ---- */
.wordmark {
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--power-orange);
  color: #fff;
}

.btn-primary:hover {
  background: var(--power-orange-600);
}

.btn-ghost {
  background: transparent;
  color: var(--snow-white);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.8);
}

/* ---- Top bar ---- */
.site-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--money-green);
  color: var(--snow-white);
}

.site-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.site-topbar .brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.site-topbar .brand .title {
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.site-topbar .brand .by {
  font-size: 0.75rem;
  opacity: 0.7;
}

.site-topbar nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-topbar nav a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.site-topbar nav a:hover {
  color: #fff;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--money-green);
  color: rgba(255, 255, 255, 0.8);
  padding: 40px 0;
  margin-top: 64px;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer .links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* ---- Legal / document pages ---- */
.doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 24px;
}

.doc h1 {
  font-size: 2.2rem;
  margin-bottom: 4px;
}

.doc .updated {
  color: var(--muted-fg);
  font-size: 0.9rem;
  margin-bottom: 32px;
}

.doc h2 {
  font-size: 1.3rem;
  margin-top: 36px;
}

.doc .placeholder-note {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--power-orange);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 24px 0;
  color: var(--muted-fg);
  font-size: 0.92rem;
}

@media (max-width: 640px) {
  .site-topbar nav a.nav-hide-sm {
    display: none;
  }
}