/* ==========================================================================
   NEW REALITY WEBHOSTING — brand skin for WHMCS (child of Twenty-One)
   --------------------------------------------------------------------------
   Palette sampled from the official logo:
     Indigo #262261 · Amber #FAAF40
   All tokens live in :root below. Nothing further down needs touching.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  /* ---- BRAND ---- */
  --nra-ink: #262261;         /* logo indigo: nav, footer, headings, button text */
  --nra-ink-soft: #37327e;    /* lighter indigo: hovers, gradient end */
  --nra-amber: #faaf40;       /* logo amber: buttons, highlights on dark */
  --nra-amber-hover: #f5a324; /* button hover */
  --nra-amber-deep: #96650b;  /* amber dark enough for text on white (5:1) */

  /* ---- SEMANTIC ---- */
  --nra-status-ok: #1fa971;   /* operational green — status only, not brand */

  /* ---- SURFACES & TEXT ---- */
  --nra-surface: #f7f7fa;
  --nra-card: #ffffff;
  --nra-text: #2b2a3d;
  --nra-text-soft: #5f5e75;
  --nra-line: #e5e4ee;

  /* ---- TYPE ---- */
  --nra-display: 'Sora', -apple-system, sans-serif;
  --nra-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --nra-mono: 'IBM Plex Mono', monospace;

  /* ---- SHAPE ---- */
  --nra-radius: 10px;
  --nra-shadow: 0 1px 2px rgba(38, 34, 97, .06), 0 8px 24px rgba(38, 34, 97, .08);
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
  font-family: var(--nra-body);
  background-color: var(--nra-surface);
  color: var(--nra-text);
}

h1, h2, h3, .h1, .h2, .h3,
.card-title, .panel-title {
  font-family: var(--nra-display);
  color: var(--nra-ink);
  letter-spacing: -0.015em;
}

a { color: var(--nra-amber-deep); }
a:hover { color: var(--nra-ink); }

/* ==========================================================================
   TOP NAVIGATION — logo indigo, quiet and confident
   ========================================================================== */

#header, .navbar-main, nav.navbar {
  background: var(--nra-ink) !important;
  border-bottom: 0;
}

#header .navbar-nav > li > a,
nav.navbar .navbar-nav .nav-link,
#header .navbar-brand {
  color: rgba(255, 255, 255, .85) !important;
  font-weight: 500;
}

#header .navbar-nav > li > a:hover,
nav.navbar .navbar-nav .nav-link:hover,
#header .navbar-nav > li.active > a {
  color: var(--nra-amber) !important;
}

/* secondary strip under main nav (Twenty-One) */
#main-menu, .navbar-secondary {
  background: var(--nra-ink-soft) !important;
}

/* ==========================================================================
   BUTTONS — amber with indigo text, exactly like the wordmark
   ========================================================================== */

.btn-primary,
.btn-styled-blue,
.marketing-splash .btn {
  background-color: var(--nra-amber) !important;
  border-color: var(--nra-amber) !important;
  color: var(--nra-ink) !important;
  font-weight: 600;
  border-radius: calc(var(--nra-radius) - 2px);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--nra-amber-hover) !important;
  border-color: var(--nra-amber-hover) !important;
  color: var(--nra-ink) !important;
}

.btn-default, .btn-secondary {
  border-radius: calc(var(--nra-radius) - 2px);
}

/* ==========================================================================
   CARDS, PANELS, TABLES
   ========================================================================== */

.card, .panel {
  border: 1px solid var(--nra-line);
  border-radius: var(--nra-radius);
  box-shadow: var(--nra-shadow);
}

.card-header, .panel-heading {
  background: var(--nra-card);
  border-bottom: 1px solid var(--nra-line);
  font-family: var(--nra-display);
  font-weight: 600;
  color: var(--nra-ink);
}

.table thead th {
  font-family: var(--nra-mono);
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--nra-text-soft);
  border-bottom: 2px solid var(--nra-line);
}

.label, .badge, .status {
  font-family: var(--nra-mono);
  font-size: .7rem;
  letter-spacing: .05em;
  border-radius: 4px;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-control {
  border: 1px solid var(--nra-line);
  border-radius: calc(var(--nra-radius) - 2px);
}

.form-control:focus {
  border-color: var(--nra-amber);
  box-shadow: 0 0 0 3px rgba(250, 175, 64, .25);
}

/* ==========================================================================
   NRA HOMEPAGE COMPONENTS (used by homepage.tpl)
   ========================================================================== */

.nra-hero {
  background: linear-gradient(150deg, var(--nra-ink) 0%, var(--nra-ink-soft) 100%);
  border-radius: var(--nra-radius);
  padding: 64px 48px 56px;
  margin: 24px 0 20px;
  color: #fff;
}

.nra-hero__eyebrow {
  font-family: var(--nra-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nra-amber);
  margin-bottom: 14px;
}

.nra-hero h1 {
  font-family: var(--nra-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  color: #fff;
  margin-bottom: 12px;
  max-width: 22ch;
}

.nra-hero p {
  color: rgba(255, 255, 255, .78);
  font-size: 1.05rem;
  max-width: 52ch;
  margin-bottom: 26px;
}

.nra-hero .btn { margin-right: 10px; margin-bottom: 8px; }

.nra-hero .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff !important;
  font-weight: 600;
  border-radius: calc(var(--nra-radius) - 2px);
}
.nra-hero .btn-ghost:hover { border-color: var(--nra-amber); color: var(--nra-amber) !important; background: rgba(255,255,255,.06); }

/* ---- SIGNATURE: the status readout strip ---- */

.nra-status {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--nra-card);
  border: 1px solid var(--nra-line);
  border-radius: var(--nra-radius);
  padding: 14px 20px;
  margin-bottom: 28px;
  font-family: var(--nra-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--nra-text-soft);
  text-decoration: none;
  transition: border-color .15s ease;
}

.nra-status:hover { border-color: var(--nra-amber); text-decoration: none; color: var(--nra-text-soft); }

.nra-status__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nra-status-ok);
  box-shadow: 0 0 0 4px rgba(31, 169, 113, .16);
  flex-shrink: 0;
}

.nra-status__label { text-transform: uppercase; color: var(--nra-ink); font-weight: 500; }
.nra-status__link { margin-left: auto; color: var(--nra-amber-deep); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .nra-status__dot { animation: nra-pulse 2.4s ease-in-out infinite; }
  @keyframes nra-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(31, 169, 113, .16); }
    50%      { box-shadow: 0 0 0 7px rgba(31, 169, 113, .06); }
  }
}

/* ---- action tiles ---- */

.nra-tiles { margin-bottom: 8px; }

.nra-tile {
  display: block;
  background: var(--nra-card);
  border: 1px solid var(--nra-line);
  border-radius: var(--nra-radius);
  box-shadow: var(--nra-shadow);
  padding: 26px 24px 24px;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}

.nra-tile:hover {
  transform: translateY(-2px);
  border-color: var(--nra-amber);
  color: inherit;
  text-decoration: none;
}

.nra-tile__eyebrow {
  font-family: var(--nra-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nra-amber-deep);
  margin-bottom: 10px;
}

.nra-tile h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.nra-tile p {
  font-size: .9rem;
  color: var(--nra-text-soft);
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .nra-hero { padding: 40px 26px 36px; }
  .nra-tile { margin-bottom: 16px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer, footer.footer {
  background: var(--nra-ink) !important;
  color: rgba(255, 255, 255, .6);
  border-top: 0;
}

#footer a, footer.footer a { color: rgba(255, 255, 255, .8); }
#footer a:hover, footer.footer a:hover { color: var(--nra-amber); }