/* =====================================================================
   SovaHost brand layer for WHMCS Twenty-One (client area)
   Loads LAST in head.tpl (after all.min.css + theme.min.css), so these
   rules win the cascade. Tokens ported from the Hugo theme:
   systemfreaks/themes/sovahost/assets/css/main.css

   Pair with the admin Customise panel (Configuration > System Settings >
   General Settings > the active theme's "Customise"): set Primary Color
   = #810e54 and upload the SovaHost logo. That drives the dynamic
   .primary-* classes; everything below is the rest of the brand.

   A11y note: a few tokens are intentionally adjusted vs the Hugo site for
   WCAG AA in this context (dark text on the orange CTA; body text darkened
   from #777 to #666 on the #f5f5f5 surface). The brand hues are unchanged.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');

:root {
  /* SovaHost palette (from main.css @theme) */
  --sova-violet: #613cda;
  --sova-violet-600: #4f2dc4;
  --sova-wine: #810e54;
  --sova-wine-700: #6a0a45;
  --sova-orange: #ff8c1a;     /* primary action / CTA fill */
  --sova-orange-600: #f57c00; /* CTA fill hover */
  --sova-dark-ink: #1a0d4d;   /* dark text on orange fills — AA-safe (~6.5:1) */
  --sova-gold: #ffd06b;
  --sova-lilac: #efe2f0;
  --sova-bg: #f5f5f5;
  --sova-text: #666666;       /* darkened from brand #777 for AA on #f5f5f5 (4.1:1 -> 5.3:1) */
  --sova-heading: #333333;
  --sova-gradient: linear-gradient(45deg, #613cda 11%, #810e54 81%);

  /* Brand scale for token-aware (Nexus-style) components that read --primary*.
     NOTE: the stock Twenty-One Bootstrap-4 .btn-primary is NOT var-driven
     (its colour comes from the admin-set primary colour), so this map only
     affects components that consume these custom properties. */
  --primary: var(--sova-wine);
  --primary-lifted: var(--sova-wine-700);
  --primary-accented: var(--sova-violet-600);
  --primary-50:  #fdedf5;
  --primary-100: #facbe1;
  --primary-200: #f398c4;
  --primary-300: #e85c9d;
  --primary-400: #d12a78;
  --primary-500: #b01661;
  --primary-600: #810e54;
  --primary-700: #6a0a45;
  --primary-800: #530736;
  --primary-900: #3d0526;
}

/* ---- Typography: Montserrat headings, Roboto body --------------------- */
body,
body.primary-bg-color {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: var(--sova-bg);
  color: var(--sova-text);
}
h1, h2, h3, h4, h5, h6,
.navbar-nav .nav-link,
.section-title,
.card-title,
.btn {
  font-family: 'Montserrat', 'Roboto', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6 { color: var(--sova-heading); font-weight: 700; }

/* ---- Links & primary text accents ------------------------------------ */
a { color: var(--sova-wine); }
a:hover, a:focus { color: var(--sova-wine-700); }
.text-primary { color: var(--sova-wine) !important; }

/* ---- Buttons: SovaHost pill shape; primary action = orange ----------- */
.btn {
  border-radius: 50rem;        /* rounded-full pill, matches .btn-cta */
  font-weight: 600;
}
/* Primary action buttons (Order, Add to Cart, Checkout, Continue, Login,
   Submit) take the SovaHost orange CTA treatment. DARK text, not white:
   #fff on #ff8c1a is only 2.3:1 (fails WCAG AA); dark ink keeps the exact
   brand orange and clears AA. */
.btn-primary,
.modal-submit.btn-primary {
  background-color: var(--sova-orange);
  border-color: var(--sova-orange);
  color: var(--sova-dark-ink);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(255,140,26,.35);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--sova-orange-600) !important;
  border-color: var(--sova-orange-600) !important;
  color: var(--sova-dark-ink);
}
/* keep the resting elevation AND add the focus ring (single declaration) */
.btn-primary:focus {
  box-shadow: 0 2px 6px rgba(255,140,26,.35), 0 0 0 .2rem rgba(255,140,26,.45);
}

/* Secondary / outline actions use the wine brand */
.btn-secondary,
.btn-outline-primary {
  border-color: var(--sova-wine);
  color: var(--sova-wine);
  background-color: transparent;
}
.btn-secondary:hover,
.btn-outline-primary:hover {
  background-color: var(--sova-wine);
  border-color: var(--sova-wine);
  color: #fff;
}

/* ---- Navbar: keep light (matches the Hugo sticky nav), brand accents -- */
.navbar-brand .logo-img,
.navbar-brand img.logo-img { max-height: 44px; width: auto; }

.main-navbar-wrapper {
  border-bottom: 2px solid var(--sova-lilac);
}
.main-navbar-wrapper .navbar-nav .nav-link {
  text-transform: uppercase;
  font-size: .85rem;
  font-weight: 600;
  color: var(--sova-heading);
}
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .nav-item.active > .nav-link,
.main-navbar-wrapper .navbar-nav .show > .nav-link {
  color: var(--sova-wine);
}
/* dark number on the orange cart badge (white-on-orange fails contrast) */
.cart-btn .badge { background-color: var(--sova-orange); color: var(--sova-dark-ink); }

/* ---- Active / selected states, focus rings --------------------------- */
.nav-pills .nav-link.active,
.list-group-item.active {
  background-color: var(--sova-wine);
  border-color: var(--sova-wine);
}
.page-item.active .page-link {
  background-color: var(--sova-wine);
  border-color: var(--sova-wine);
}
.page-link { color: var(--sova-wine); }
.form-control:focus,
.custom-select:focus {
  border-color: var(--sova-violet);
  box-shadow: 0 0 0 .2rem rgba(97,60,218,.2);
}

/* ---- Cards / panels / tabs ------------------------------------------- */
.card { border-radius: .75rem; }
.card .card-header,
.panel-heading {
  font-family: 'Montserrat', sans-serif;
  color: var(--sova-heading);
}
.nav-tabs .nav-link.active {
  color: var(--sova-wine);
  border-bottom-color: var(--sova-wine);
}

/* ---- Badges / alerts / progress -------------------------------------- */
.badge-primary { background-color: var(--sova-wine); }
.badge-info { background-color: var(--sova-violet); }
.alert-info {
  background-color: var(--sova-lilac);
  border-color: #d7c2da;
  color: var(--sova-wine-700);
}
.progress-bar { background-color: var(--sova-violet); }

/* ---- Sidebar (client area left nav) ---------------------------------- */
.sidebar .list-group-item.active,
.sidebar .panel-sidebar .list-group-item.active {
  background-color: var(--sova-wine);
  border-color: var(--sova-wine);
  color: #fff;
}
.sidebar a { color: var(--sova-heading); }
.sidebar a:hover { color: var(--sova-wine); }

/* ---- Login / register / jumbotron gradient bands --------------------- */
.btn-active-client { border-color: var(--sova-wine); color: var(--sova-wine); }
.jumbotron,
.client-home-panels .panel-heading,
.brand-band {
  background-image: var(--sova-gradient);
  color: #fff;
}

/* ---- Footer: SovaHost gradient band (markup added in footer.tpl) ----- */
#footer.footer {
  background-image: var(--sova-gradient);
  color: rgba(255,255,255,.9);
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}
#footer.footer a,
#footer.footer .nav-link { color: rgba(255,255,255,.85); }
#footer.footer a:hover,
#footer.footer .nav-link:hover { color: #fff; }
.footer-logo { max-height: 40px; width: auto; margin-bottom: 1rem; }
.footer-trustpilot { color: var(--sova-gold) !important; font-weight: 600; }
.footer-trustpilot:hover { color: #fff !important; }