/* ─── RGS Brand Fonts ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap');

/* ─── RGS Palette (mirrors main site CSS variables) ─────── */
:root {
  --rgs-dark:        #040d0b;
  --rgs-dark-2:      #0a1612;
  --rgs-dark-3:      #0d1c17;
  --rgs-cyan:        #00c9a0;
  --rgs-cyan-bright: #4de8c6;
  --rgs-cyan-glow:   rgba(0, 201, 160, 0.15);
  --rgs-text:        #e8f0ee;
  --rgs-text-dim:    #a8c8be;
  --rgs-gold:        #d4a843;
}

/* ─── Override Material slate theme tokens ───────────────── */
[data-md-color-scheme="slate"] {
  /* Backgrounds */
  --md-default-bg-color:              #040d0b;
  --md-default-bg-color--light:       #0a1612;
  --md-default-bg-color--lighter:     #0d1c17;
  --md-default-bg-color--lightest:    #0d1c17;

  /* Text */
  --md-default-fg-color:              #e8f0ee;
  --md-default-fg-color--light:       #a8c8be;
  --md-default-fg-color--lighter:     rgba(168, 200, 190, 0.55);
  --md-default-fg-color--lightest:    rgba(168, 200, 190, 0.28);

  /* Primary (header, active states) */
  --md-primary-fg-color:              #00c9a0;
  --md-primary-fg-color--light:       rgba(0, 201, 160, 0.15);
  --md-primary-bg-color:              #040d0b;
  --md-primary-bg-color--light:       rgba(4, 13, 11, 0.8);

  /* Accent (links, hover) */
  --md-accent-fg-color:               #00c9a0;
  --md-accent-fg-color--transparent:  rgba(0, 201, 160, 0.1);
  --md-accent-bg-color:               #040d0b;

  /* Code */
  --md-code-bg-color:                 #0a1612;
  --md-code-fg-color:                 #c9e8e0;

  /* Footer */
  --md-footer-bg-color:               #040d0b;
  --md-footer-bg-color--dark:         #040d0b;
  --md-footer-fg-color:               #a8c8be;
  --md-footer-fg-color--light:        rgba(168, 200, 190, 0.7);
  --md-footer-fg-color--lighter:      rgba(168, 200, 190, 0.45);
}

/* ─── Header ─────────────────────────────────────────────── */
.md-header {
  background: #040d0b;
  border-bottom: 1px solid rgba(0, 201, 160, 0.15);
  box-shadow: none;
}

.md-header__title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--rgs-text);
}

/* ─── Nav tabs (top) ─────────────────────────────────────── */
.md-tabs {
  background: #0a1612;
  border-bottom: 1px solid rgba(0, 201, 160, 0.1);
}

.md-tabs__link { color: #a8c8be; }
.md-tabs__link--active,
.md-tabs__link:hover,
.md-tabs__item .md-tabs__link--active { color: var(--rgs-cyan) !important; }

/* ─── Sidebar ────────────────────────────────────────────── */
.md-sidebar { background: #040d0b; }
.md-sidebar__scrollwrap { border-right: 1px solid rgba(0, 201, 160, 0.08); }

.md-nav__title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rgs-cyan);
  background: transparent;
}

.md-nav__link { color: #a8c8be; transition: color 0.2s; }
.md-nav__link:hover { color: var(--rgs-text); }
.md-nav__link--active { color: var(--rgs-cyan) !important; }

/* ─── Search ─────────────────────────────────────────────── */
.md-search__form {
  background: #0a1612;
  border: 1px solid rgba(0, 201, 160, 0.2);
  border-radius: 4px;
}

.md-search__input { color: var(--rgs-text); }
.md-search__input::placeholder { color: var(--rgs-text-dim); }

.md-search-result__article { background: #0a1612; }
.md-search-result__meta { background: #040d0b; color: var(--rgs-text-dim); }

/* ─── Content area ───────────────────────────────────────── */
.md-content { background: #040d0b; }
.md-main { background: #040d0b; }

/* ─── Typography ─────────────────────────────────────────── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.1;
  background: linear-gradient(
    180deg,
    #6b4c10 0%,
    #c9983a 25%,
    #f0d070 48%,
    #d4a843 62%,
    #7a5210 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.85))
          drop-shadow(0 0 20px rgba(180,130,30,0.15));
}

.md-typeset h1 {
  font-size: 2.2rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.25);
  padding-bottom: 0.4em;
}

.md-typeset h2 {
  font-size: 1.55rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
  padding-bottom: 0.25em;
}

.md-typeset h3 {
  font-size: 1.15rem;
}

.md-typeset a {
  color: var(--rgs-cyan);
  text-decoration: none;
}

.md-typeset a:hover { color: var(--rgs-cyan-bright); }

/* ─── Code blocks ────────────────────────────────────────── */
.md-typeset code {
  font-family: 'Share Tech Mono', monospace;
  background: #0a1612;
  color: var(--rgs-cyan-bright);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

.md-typeset pre {
  background: #0a1612;
  border: 1px solid rgba(0, 201, 160, 0.12);
  border-radius: 6px;
}

.md-typeset pre code {
  background: transparent;
  /* Let Pygments token colours show — do not set a flat color here */
  padding: 0;
}

/* ─── Syntax highlighting token colours (RGS palette) ───── */

/* Base text — readable off-white */
.highlight      { color: #dde8e4; }

/* Keywords: public, class, void, return, var, if, using … */
.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kr,
.highlight .kt  { color: #4de8c6; font-style: normal; }  /* cyan-bright */

/* Built-in types & names */
.highlight .nb  { color: #00c9a0; }  /* cyan */

/* Type / class names */
.highlight .nc,
.highlight .nn  { color: #7ef5d8; }  /* cyan lighter */

/* Attributes / decorators: [SerializeField], [CreateAssetMenu] */
.highlight .nd  { color: #d4a843; }  /* gold */

/* Strings */
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .si  { color: #f0c97a; }  /* gold-light */

/* Numbers */
.highlight .m,
.highlight .mi,
.highlight .mf  { color: #f0c97a; }  /* gold-light */

/* Booleans / constants */
.highlight .kc  { color: #d4a843; }  /* gold */

/* Comments */
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cs  { color: #5a8075; font-style: italic; }  /* muted teal */

/* Operators: =, +, -, ., ->, … */
.highlight .o,
.highlight .p   { color: #a8c8be; }  /* text-dim */

/* Function / method names */
.highlight .nf,
.highlight .nx  { color: #28e890; }  /* bright green */

/* Variables / identifiers */
.highlight .n,
.highlight .na,
.highlight .nv  { color: #dde8e4; }  /* base text */

/* Errors — keep visible */
.highlight .err { color: #ff6b6b; background: transparent; }

/* ─── Admonitions (note/warning boxes) ──────────────────── */
.md-typeset .admonition {
  background: #0a1612;
  border-color: var(--rgs-cyan);
  border-radius: 4px;
}

.md-typeset .admonition-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  background: rgba(0, 201, 160, 0.1);
  color: var(--rgs-cyan);
}

/* ─── Tables ─────────────────────────────────────────────── */
.md-typeset table:not([class]) th {
  background: #0a1612;
  color: var(--rgs-cyan);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

.md-typeset table:not([class]) tr:nth-child(even) td {
  background: rgba(10, 22, 18, 0.5);
}

.md-typeset table:not([class]) {
  border: 1px solid rgba(0, 201, 160, 0.12);
  border-radius: 4px;
  overflow: hidden;
}

/* ─── Footer ─────────────────────────────────────────────── */
.md-footer {
  background: #040d0b;
  border-top: 1px solid rgba(0, 201, 160, 0.12);
}

.md-footer-meta { background: #040d0b; }

/* ─── "Back to top" button ───────────────────────────────── */
.md-top {
  background: #0a1612;
  color: var(--rgs-cyan);
  border: 1px solid rgba(0, 201, 160, 0.2);
}

/* ─── Home page hero ─────────────────────────────────────── */
.rgs-hero {
  text-align: center;
  padding: 2rem 0 3rem;
}

.rgs-hero-crest {
  width: clamp(200px, 30vw, 320px);
  display: block;
  margin: 0 auto 1rem;
}

.rgs-hero-title {
  width: clamp(280px, 50vw, 520px);
  display: block;
  margin: 0 auto 1.5rem;
}

.rgs-hero-sub {
  color: var(--rgs-text-dim);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin: 0;
}

/* ─── Product selector grid ─────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.product-card {
  display: block;
  background: var(--rgs-dark-2);
  border: 1px solid rgba(0, 201, 160, 0.15);
  border-radius: 8px;
  padding: 1.5rem;
  text-decoration: none !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.product-card:hover {
  border-color: var(--rgs-cyan);
  box-shadow: 0 0 20px var(--rgs-cyan-glow);
}

.product-card h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}

.product-card p {
  color: var(--rgs-text-dim);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  margin: 0;
}

/* ─── Landing page: product feature section ─────────────── */
.product-feature {
  background: var(--rgs-dark-2);
  border: 1px solid rgba(0, 201, 160, 0.12);
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin: 1rem 0;
}

.feature-highlights {
  margin: 1.25rem 0;
}

.feature-highlights ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .feature-highlights ul {
    grid-template-columns: 1fr 1fr;
  }
}

.feature-highlights li {
  color: var(--rgs-text-dim);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  padding-left: 0;
}

.feature-highlights li strong {
  color: var(--rgs-cyan);
}

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* ─── Landing page: resource grid ────────────────────────── */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 1rem 0;
}

.resource-item {
  background: var(--rgs-dark-2);
  border: 1px solid rgba(0, 201, 160, 0.08);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

.resource-item h3 {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.resource-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.resource-item li {
  padding: 0.25rem 0;
  font-size: 0.92rem;
}

.resource-item li a {
  color: var(--rgs-cyan);
}

.resource-item li a:hover {
  color: var(--rgs-cyan-bright);
}