/* Shared styling for the /guides content section — matches the app's dark
   theme (Barlow Condensed + Outfit) so guides feel native to MyNRL.tips. */
:root {
  --bg-base:        #0a0d14;
  --bg-card:        #12161f;
  --bg-elevated:    #1a2030;
  --border:         #1e2636;
  --green:          #22c55e;
  --green-light:    #4ade80;
  --green-dim:      rgba(34,197,94,0.12);
  --gold:           #f5c842;
  --blue:           #3b82f6;
  --text-primary:   #f0f4ff;
  --text-secondary: #a7b6d8;
  --text-dim:       #6a7aa0;
  --radius:         12px;
  --radius-sm:      8px;
  --maxw:           760px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34,197,94,0.06), transparent),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(59,130,246,0.04), transparent);
}

/* ── Nav ─────────────────────────────────────────────── */
.nav {
  background: rgba(10,13,20,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 12px 18px;
  display: flex; align-items: center; gap: 22px;
}
.brand {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 21px; letter-spacing: 0.02em;
  color: var(--text-primary); text-decoration: none; white-space: nowrap;
}
.brand span { color: var(--green); }
.nav-links { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.nav-links a {
  color: var(--text-secondary); text-decoration: none; font-size: 14.5px;
  font-weight: 500; transition: color .15s ease; white-space: nowrap;
}
.nav-links a:hover { color: var(--green-light); }
.nav-links a.cta {
  color: #0a0d14; background: var(--green); padding: 7px 15px;
  border-radius: var(--radius-sm); font-weight: 700;
}
.nav-links a.cta:hover { background: var(--green-light); color: #0a0d14; }

/* ── Layout ──────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
main { padding: 40px 0 72px; }

.crumbs { font-size: 13px; color: var(--text-dim); margin-bottom: 22px; }
.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--green-light); }

.eyebrow {
  font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 700; font-size: 13px; color: var(--green);
  margin-bottom: 10px;
}
h1 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(30px, 6vw, 46px); line-height: 1.05; letter-spacing: -0.01em;
  margin-bottom: 14px; text-wrap: balance;
}
.lede { font-size: 18px; color: var(--text-secondary); margin-bottom: 28px; }
h2 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: clamp(22px, 4vw, 28px); margin: 40px 0 12px; letter-spacing: 0.01em;
  padding-top: 8px;
}
h3 { font-size: 18px; font-weight: 600; margin: 26px 0 8px; color: var(--text-primary); }
p { margin-bottom: 16px; color: #d6ddef; }
main a { color: var(--green-light); text-decoration: underline; text-underline-offset: 2px; }
ul, ol { margin: 0 0 18px 22px; color: #d6ddef; }
li { margin-bottom: 8px; }
strong { color: var(--text-primary); font-weight: 600; }

.callout {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--green); border-radius: var(--radius-sm);
  padding: 16px 18px; margin: 24px 0; font-size: 15.5px; color: var(--text-secondary);
}
.callout strong { color: var(--green-light); }

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.table-scroll { overflow-x: auto; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
     letter-spacing: 0.05em; font-size: 13px; color: var(--green); font-weight: 700; }
td { color: #d6ddef; vertical-align: top; }

/* ── Guide index cards ───────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 28px 0; }
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; text-decoration: none;
  display: block; transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: rgba(34,197,94,0.4); transform: translateY(-2px); }
.card h3 { margin: 0 0 6px; color: var(--text-primary); }
.card p { margin: 0; font-size: 14px; color: var(--text-dim); }

/* ── Glossary ────────────────────────────────────────── */
.gloss { border-top: 1px solid var(--border); }
.gloss dt {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px;
  color: var(--green-light); margin-top: 22px; letter-spacing: 0.01em;
}
.gloss dd { margin: 4px 0 0; color: #d6ddef; }

/* ── Footer ──────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--border); margin-top: 48px;
  padding: 28px 0; color: var(--text-dim); font-size: 13.5px;
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.foot a { color: var(--text-secondary); text-decoration: none; }
.foot a:hover { color: var(--green-light); }
.foot .sep { color: var(--border); }
.disclaimer { margin-top: 12px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }

.next-guides { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
.next-guides h2 { margin-top: 0; }