/* ═══════════════════════════════════════════════════════
   site-fixes.css — startbuddi site-wide polish
   Load AFTER main.css, front-page.css, pages.css.
   Contains:
     1. On-brand button hover & focus states
     2. Global link hover style
     3. Footer text colour fixes (dark bg)
     4. Paystack inline badge icon
     5. Input / form focus ring consistency
     6. Misc utility additions
═══════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   1. BUTTONS — complete on-brand hover & focus
   Brand palette: --blue (#1A56DB), --blue-mid (#2563EB),
   --gold (#F59E0B), --mint (#059669), --navy (#0C1A35)
════════════════════════════════════════════════════ */

/* Base lift on every .btn */
.btn { transition: background .18s, color .18s, box-shadow .18s, border-color .18s, transform .15s; }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: none; box-shadow: none !important; }

/* Primary — blue */
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover {
  background: var(--blue-mid);
  box-shadow: 0 6px 28px rgba(26,86,219,.40);
  color: #fff;
}
.btn-primary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  box-shadow: none;
}

/* Gold / amber CTA */
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover {
  background: #D97706;
  box-shadow: 0 6px 28px rgba(245,158,11,.45);
  color: var(--navy);
}
.btn-gold:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Outline — cream background */
.btn-outline {
  background: transparent;
  border: 2px solid var(--border-dk);
  color: var(--text-2);
}
.btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-l);
  box-shadow: 0 0 0 3px var(--blue-dim);
}
.btn-outline:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* Outline white — for dark backgrounds */
.btn-outline-white {
  background: transparent;
  border: 2px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.5);
  color: #fff;
  box-shadow: none;
}
.btn-outline-white:focus-visible {
  outline: 3px solid rgba(255,255,255,.5);
  outline-offset: 3px;
}

/* Dark / navy */
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover {
  background: var(--navy-2);
  box-shadow: 0 6px 24px rgba(10,15,30,.32);
  color: #fff;
}
.btn-dark:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* Ghost — subtle */
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover {
  background: var(--cream-2);
  color: var(--text);
}
.btn-ghost:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* Mint / success */
.btn-mint { background: var(--mint); color: #fff; }
.btn-mint:hover {
  background: #047857;
  box-shadow: 0 6px 24px rgba(5,150,105,.35);
  color: #fff;
}
.btn-mint:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════
   2. GLOBAL LINK HOVER
   Body copy links should become --blue on hover.
   Navigation links are excluded (they have their own
   rules). Only applies to <a> inside content zones.
════════════════════════════════════════════════════ */
.sb-wrap a:not(.btn):not([class*="sb-nav"]):not([class*="sb-footer"]):not([class*="sb-industry-pill"]):not([class*="sb-bento__link"]):not([class*="sb-tcard"]) {
  transition: color .15s;
}
.sb-wrap a:not(.btn):not([class*="sb-nav"]):not([class*="sb-footer"]):not([class*="sb-industry-pill"]):not([class*="sb-bento__link"]):not([class*="sb-tcard"]):hover {
  color: var(--blue);
}

/* ════════════════════════════════════════════════════
   3. FOOTER — fix grey text on near-black background
   The footer bg is #030912. #444 / #4a4a4a are too
   low-contrast against it — bump to a readable mid-tone.
════════════════════════════════════════════════════ */
.sb-footer__desc {
  color: rgba(255,255,255,.45);
}
.sb-footer__col h6 {
  color: rgba(255,255,255,.35);
}
.sb-footer__col a {
  color: rgba(255,255,255,.50);
}
.sb-footer__col a:hover {
  color: #fff;
}
.sb-footer__bottom {
  color: rgba(255,255,255,.3);
}
.sb-footer__bottom a {
  color: rgba(255,255,255,.4);
}
.sb-footer__bottom a:hover {
  color: #fff;
}

/* Social icons on footer — better default visibility */
.sb-footer__social {
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.sb-footer__social:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ════════════════════════════════════════════════════
   4. PAYSTACK INLINE ICON BADGE
   Replaces the non-existent fa-circle-p icon.
   Usage: <span class="sb-paystack-icon">P</span>
════════════════════════════════════════════════════ */
.sb-paystack-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: #00C3F7;
  color: #fff;
  font-size: .7em;
  font-weight: 900;
  font-family: var(--f-head);
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Slightly larger version in the marquee context */
.sb-marquee-item .sb-paystack-icon {
  width: 1.25em;
  height: 1.25em;
  font-size: .75em;
  margin-right: 2px;
}

/* ════════════════════════════════════════════════════
   5. FORM INPUT FOCUS RINGS — consistent brand style
   Every text/email/select/textarea across the site
   gets the same --blue focus ring.
════════════════════════════════════════════════════ */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px var(--blue-dim) !important;
}

/* Waitlist form input — ensure contrast on dark backgrounds */
.sb-waitlist-form input[type="email"] {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: #fff;
}
.sb-waitlist-form input[type="email"]::placeholder {
  color: rgba(255,255,255,.4);
}
.sb-waitlist-form input[type="email"]:focus {
  background: rgba(255,255,255,.12);
  border-color: var(--blue) !important;
}

/* ════════════════════════════════════════════════════
   6. CARD HOVER — consistent across modules
   All card types should lift 2–3 px and add a
   soft shadow. No off-brand colour shifts.
════════════════════════════════════════════════════ */

/* Help category cards */
.pg-help-cat-card:hover,
.sb-help-cat-card:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
  transform: translateY(-2px);
}

/* Blog cards */
.sb-blog-card:hover,
.pg-blog-card:hover {
  box-shadow: 0 8px 32px rgba(26,86,219,.10);
  transform: translateY(-3px);
}
.sb-blog-card:hover .sb-blog-card__title a,
.pg-blog-card:hover .pg-blog-card__title {
  color: var(--blue);
}

/* Marketing / feature item cards */
.pg-feat-item:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════
   7. NAV LINK ACTIVE STATE — current page indicator
════════════════════════════════════════════════════ */
.sb-nav__link.current-menu-item,
.sb-nav__link[aria-current="page"] {
  color: var(--blue);
  background: var(--blue-l);
}
.sb-nav__link.current-menu-item::after,
.sb-nav__link[aria-current="page"]::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════
   8. BADGES — missing --red variant
════════════════════════════════════════════════════ */
.sb-badge--red    { background: #FEE2E2; color: #991B1B; }
.sb-badge--purple { background: #EDE9FE; color: #5B21B6; }
.sb-badge--navy   { background: var(--navy-3); color: rgba(255,255,255,.7); border: 1px solid var(--navy-4); }

/* ════════════════════════════════════════════════════
   9. SCROLL BAR — subtle brand tint (webkit)
════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb {
  background: var(--border-dk);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ════════════════════════════════════════════════════
   10. TEXT SELECTION — brand blue tint
════════════════════════════════════════════════════ */
::selection {
  background: rgba(26,86,219,.15);
  color: var(--text);
}