/* ═══════════════════════════════════════════════════════════════════════════
   WebJIVE client portal — brand styles
   Child theme of twenty-one. Loaded AFTER the parent's styles.css.

   The parent is Bootstrap 4.5.3. BS4 declares --primary/--orange etc. on :root
   but does NOT consume them in component rules (that is a BS5 behaviour), so
   overriding the custom properties alone changes nothing. Real selectors are
   targeted below.

   ⚠ TWO ELEMENTS ARE LOAD-BEARING FOR THE AI SITE EDITOR. Do not restructure:
     1. .client-home-cards (and its .col-md-6 children) — the AI Site Editor
        panel is appended into it by the aisitemanager addon's
        ClientAreaFooterOutput hook. Style it; never change its structure, and
        never display:none it.
     2. a.btn on the service details page whose label is "Email MX Changer" or
        "Visit Website" — the "AI Editor" button inserts itself after that
        anchor and CLONES ITS className. Restyling .btn-default therefore
        restyles the AI Editor button automatically, which is what we want.
   Removing either anchor silently removes the AISE surface. There is no error.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');


/* ── Brand tokens ────────────────────────────────────────────────────────────
   CONTRAST NOTE — this is why there are two oranges.
   #EF5B00 on white measures 3.38:1. That satisfies WCAG AA for large text and
   for UI component boundaries (3:1), but FAILS the 4.5:1 required for
   body-size text. #c94d00 measures 4.60:1 and passes.

   So: #EF5B00 is the graphic/display orange — big headings, rules, icons,
   borders, active indicators. #c94d00 is the text/fill orange — anything
   carrying body-size words, including button labels on an orange ground.
   Do not swap them to "make it brighter"; the darker one is load-bearing. */
:root {
    --wj-orange:       #EF5B00;   /* display / graphic only  — 3.38:1 on white */
    --wj-orange-text:  #c94d00;   /* text + button fills     — 4.60:1 on white */
    --wj-orange-deep:  #a63f00;   /* hover / active on fills */
    --wj-navy:         #020617;   /* primary dark surface */
    --wj-navy-soft:    #0f172a;   /* raised dark surface */
    --wj-navy-line:    #1e293b;   /* hairline on dark */
    --wj-ink:          #1f2937;   /* body text */
    --wj-muted:        #6b7280;
    --wj-hairline:     #e5e7eb;
    --wj-canvas:       #f7f8fa;

    --wj-font-display: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
    --wj-font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* ── Typography ───────────────────────────────────────────────────────────── */
/* :not(.btn-social) keeps the sign-in providers out of the child theme
   entirely — see the SIGN-IN PROVIDERS note below. */
body,
.form-control,
.btn:not(.btn-social),
.dropdown-item {
    font-family: var(--wj-font-body);
}


/* ── SIGN-IN PROVIDERS — DELIBERATELY UNSTYLED ────────────────────────────
   Facebook, Google and Twitter sign-in are used exactly as WHMCS ships them
   (Eric, 2026-08-07). Do NOT brand them.

   Google in particular cannot be branded from here even if you wanted to:
   `<div id="btnGoogleSignin1" class="g_id_signin btn btn-social btn-google">`
   ships EMPTY and is filled at runtime by https://accounts.google.com/gsi/client,
   which renders into its own iframe. CSS here cannot reach inside it, and the
   script only draws at all on an origin registered to the data-client_id —
   which is why the button is absent from any saved-off-domain snapshot but
   present on the live site.

   KNOWN, ACCEPTED: "Sign in with Twitter" is white on Twitter blue = 2.67:1,
   below the 4.5:1 WCAG AA needs. It is stock WHMCS + Twitter brand colour, not
   something this theme introduced, and it is staying. Do not "fix" it.

   Usage as of 2026-08-07 (tblauthn_account_links): google_signin 8 linked
   clients, facebook_signin 2, twitter 0.
   ───────────────────────────────────────────────────────────────────────── */

body {
    color: var(--wj-ink);
    background: var(--wj-canvas);
}

h1, h2, h3,
.page-header h1,
.card-title,
legend {
    font-family: var(--wj-font-display);
    letter-spacing: .02em;
    color: var(--wj-navy);
}

/* Bebas is uppercase-only and sits small at a given px — compensate so headings
   do not shrink visually against the previous stack. */
h1, .page-header h1 { font-size: 2.35rem; }
h2                  { font-size: 1.9rem; }
h3                  { font-size: 1.55rem; }

h4, h5, h6 {
    font-family: var(--wj-font-body);
    font-weight: 700;
    color: var(--wj-navy);
}


/* ── Links ────────────────────────────────────────────────────────────────── */
a {
    color: var(--wj-orange-text);
}
a:hover,
a:focus {
    color: var(--wj-orange-deep);
}


/* ── Masthead ─────────────────────────────────────────────────────────────── */
#header.header {
    background: var(--wj-navy);
    border-bottom: 3px solid var(--wj-orange);
}

/* Every link inside the navy masthead must be light.

   ⚠ READ THE MARKUP BEFORE CHANGING THESE SELECTORS.
   The primary nav links are NOT `.nav-link`. WHMCS's native navbar renders
   them as bare `<a class="pr-4">` inside `ul#nav` AND `ul.navbar-nav.ml-auto` (Secondary_Navbar),
   wrapped in `.main-navbar-wrapper`. Two earlier attempts scoped to
   `.navbar-light .nav-link` and to `.nav-link` — both matched nothing, and the
   whole primary nav silently stayed at the parent theme's #444 on navy:
   measured 2.07:1, a hard WCAG AA failure that looks merely "dim".

   The `> li > a` child combinator is deliberate: it must NOT reach
   `.dropdown-menu` items, which sit on a white ground and have to stay dark. */
#header .navbar-brand,
#header .nav-link,
#header .navbar-nav .nav-link,
#header .main-navbar-wrapper .navbar-nav > li > a,
#header .main-navbar-wrapper .navbar-nav > li > a.dropdown-toggle {
    color: #e2e8f0;
}
#header .nav-link:hover,
#header .nav-link:focus,
#header .main-navbar-wrapper .navbar-nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav > li > a:focus,
#header .main-navbar-wrapper .navbar-nav > li.active > a {
    color: var(--wj-orange);
}

/* Active/hover underline on the primary nav */
#header .main-navbar-wrapper .navbar-nav > li > a {
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}
#header .main-navbar-wrapper .navbar-nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav > li.active > a {
    border-bottom-color: var(--wj-orange);
}
#header .logo-img {
    max-height: 42px;
    width: auto;
}

/* Knowledgebase search — sits on the navy masthead, so invert it. */
#header .input-group.search .form-control {
    background: var(--wj-navy-soft);
    border-color: var(--wj-navy-line);
    color: #fff;
}
#header .input-group.search .form-control::placeholder {
    color: #94a3b8;
}
#header .input-group.search .form-control:focus {
    background: var(--wj-navy-soft);
    border-color: var(--wj-orange);
    box-shadow: none;
    color: #fff;
}
#header .input-group-prepend .btn-default {
    background: var(--wj-navy-soft);
    border-color: var(--wj-navy-line);
    color: #cbd5e1;
}
#header .input-group-prepend .btn-default:hover {
    background: var(--wj-orange-text);
    border-color: var(--wj-orange-text);
    color: #fff;
}

/* Cart count badge */
#header .badge-info,
.badge-info {
    background: var(--wj-orange-text);
    color: #fff;
}


/* ── Primary navigation ───────────────────────────────────────────────────── */
.navbar-nav .nav-link {
    font-weight: 500;
}
#mainNavbar .nav-item .nav-link {
    border-bottom: 2px solid transparent;
}
#mainNavbar .nav-item .nav-link:hover,
#mainNavbar .nav-item.active .nav-link,
#mainNavbar .nav-item .nav-link.active {
    border-bottom-color: var(--wj-orange);
    color: var(--wj-orange-text);
}

.dropdown-item:active,
.dropdown-item.active {
    background: var(--wj-orange-text);
    color: #fff;
}
.dropdown-item:hover {
    background: rgba(239, 91, 0, .08);
    color: var(--wj-orange-deep);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON SYSTEM — one brand colour, every variant, every size

   WHMCS's templates reach for Bootstrap's semantic button classes as if they
   were a palette, not a meaning: .btn-success is the submit button on
   affiliate signup, bulk domain management, domain addons and registrar lock;
   .btn-primary, .btn-default and .btn-info turn up interchangeably for the
   same kind of action on different pages. Left alone that renders as green,
   blue and grey buttons scattered through one portal.

   So this collapses them to TWO roles in one colour, at every size:

     FILLED   — the action you want taken.  orange ground, white label.
     OUTLINE  — the alternative action.     white ground, orange label.

   Sizes (.btn-xs/.btn-sm/.btn-lg) only change geometry; they inherit colour
   from the role, so a small Manage button matches a large Submit button.

   TWO DELIBERATE EXCEPTIONS
     .btn-danger stays red. Destructive actions must not look like every other
     button — that is a safety property, not a styling preference.
     Status classes (.label-success, .badge-success, .alert-success,
     .text-success) are NOT touched. An Active service and a Paid invoice must
     stay green; those genuinely encode state.

   COLOUR: --wj-orange-text (#c94d00), never the display orange. Button labels
   are body-size text on a filled ground and need 4.5:1; #EF5B00 gives 3.38:1
   and fails. See the token block at the top.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FILLED ───────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-success,
.btn-info {
    background-color: var(--wj-orange-text);
    border-color: var(--wj-orange-text);
    color: #fff;
    font-weight: 500;
}
.btn-primary:hover,     .btn-primary:focus,     .btn-primary:not(:disabled):not(.disabled):active,
.btn-success:hover,     .btn-success:focus,     .btn-success:not(:disabled):not(.disabled):active,
.btn-info:hover,        .btn-info:focus,        .btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--wj-orange-deep);
    border-color: var(--wj-orange-deep);
    color: #fff;
}
.btn-primary:focus, .btn-primary.focus,
.btn-success:focus, .btn-success.focus,
.btn-info:focus,    .btn-info.focus {
    box-shadow: 0 0 0 .2rem rgba(239, 91, 0, .35);
}

/* ── OUTLINE ──────────────────────────────────────────────────────────────
   .btn-default is in here on purpose: it is also the class the AI Site Editor
   button clones from the "Email MX Changer" / "Visit Website" anchor on the
   service details page, so styling it well styles that button for free. */
.btn-default,
.btn-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary {
    background-color: #fff;
    border-color: var(--wj-orange-text);
    color: var(--wj-orange-text);
    font-weight: 500;
}
.btn-default:hover,            .btn-default:focus,
.btn-secondary:hover,          .btn-secondary:focus,
.btn-outline-primary:hover,    .btn-outline-primary:focus,
.btn-outline-success:hover,    .btn-outline-success:focus,
.btn-outline-secondary:hover,  .btn-outline-secondary:focus {
    background-color: var(--wj-orange-text);
    border-color: var(--wj-orange-text);
    color: #fff;
}
.btn-default:focus,
.btn-secondary:focus,
.btn-outline-primary:focus,
.btn-outline-success:focus,
.btn-outline-secondary:focus {
    box-shadow: 0 0 0 .2rem rgba(239, 91, 0, .25);
}

/* Link-style buttons ship Bootstrap blue.
   Uses orange-DEEP, not orange-text: .btn-link has no fill, so it sits on the
   page canvas (#f7f8fa) rather than white. Measured there, #c94d00 gives
   4.35:1 — just under AA. #a63f00 gives 5.95:1. A background you didn't
   choose still counts. */
.btn-link {
    color: var(--wj-orange-deep);
}
.btn-link:hover,
.btn-link:focus {
    color: var(--wj-orange-deep);
}

/* ── Sizes: geometry only, colour inherited from the role above ──────────── */
.btn-xs {
    padding: .15rem .5rem;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: 3px;
}
.btn-sm  { font-weight: 500; }
.btn-lg  { font-weight: 500; }

/* ── Disabled ─────────────────────────────────────────────────────────────
   ⚠ The disabled state needs its own selectors, and it is easy to miss.
   The parent theme ships `.btn-primary.disabled` / `.btn-primary:disabled`
   with the brand-blue background. That is TWO simple selectors (0,2,0) versus
   the one (0,1,0) in the role rules above, so it wins on specificity and a
   disabled button silently reverted to #336699 — orange everywhere except the
   one state nobody thinks to screenshot. Measured, not guessed.

   Opacity alone would not have fixed it: it was still blue, just fainter. */
.btn-primary.disabled,   .btn-primary:disabled,
.btn-success.disabled,   .btn-success:disabled,
.btn-info.disabled,      .btn-info:disabled {
    background-color: var(--wj-orange-text);
    border-color: var(--wj-orange-text);
    color: #fff;
}
.btn-default.disabled,            .btn-default:disabled,
.btn-secondary.disabled,          .btn-secondary:disabled,
.btn-outline-primary.disabled,    .btn-outline-primary:disabled,
.btn-outline-success.disabled,    .btn-outline-success:disabled,
.btn-outline-secondary.disabled,  .btn-outline-secondary:disabled {
    background-color: #fff;
    border-color: var(--wj-orange-text);
    color: var(--wj-orange-text);
}

/* Disabled must not read as available, at any size or role. */
.btn.disabled,
.btn:disabled {
    opacity: .5;
    box-shadow: none;
    cursor: not-allowed;
}

/* ── The one non-brand button: destructive ───────────────────────────────── */
.btn-danger,
.btn-danger:hover,
.btn-danger:focus {
    /* left to Bootstrap on purpose — see the exceptions note above */
}


/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-control:focus {
    border-color: var(--wj-orange);
    box-shadow: 0 0 0 .2rem rgba(239, 91, 0, .2);
}

/* Visible keyboard focus everywhere — the default BS4 ring is easy to lose. */
a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--wj-orange);
    outline-offset: 2px;
}


/* ── Cards & panels ───────────────────────────────────────────────────────── */
/* ⚠ .client-home-cards is an AISE anchor — visual only below, no structure. */
.card {
    border: 1px solid var(--wj-hairline);
    border-radius: 6px;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--wj-hairline);
    font-family: var(--wj-font-display);
    letter-spacing: .03em;
    font-size: 1.15rem;
    color: var(--wj-navy);
}
.client-home-cards .card {
    border-top: 3px solid var(--wj-orange);
}

/* ── Dashboard panel footers: "View More..." as a real button ──────────────
   The parent renders `<div class="card-footer">{$item->getFooterHtml()}</div>`
   and core fills it with a bare <a> carrying no button class. It therefore
   inherited only the global link colour and read as a scrap of small orange
   text — easy to miss on an account with a long services list, which is
   exactly when it matters most.

   :not(.btn) so anything core already styles as a button is left alone.

   ⚠ Scoped to .card-footer deliberately. The AI Site Editor panel that the
   aisitemanager addon injects into .client-home-cards builds its "Start
   Editing" link into the card BODY, not the footer, so this cannot reach it.
   Do not widen this to `.client-home-cards a`. */
.client-home-cards .card-footer a:not(.btn) {
    display: inline-block;
    padding: .25rem .8rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--wj-orange-text);
    background: #fff;
    border: 1px solid var(--wj-orange-text);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.client-home-cards .card-footer a:not(.btn):hover,
.client-home-cards .card-footer a:not(.btn):focus {
    background: var(--wj-orange-text);
    border-color: var(--wj-orange-text);
    color: #fff;
    text-decoration: none;
}
.client-home-cards .card-footer a:not(.btn):focus-visible {
    outline: 2px solid var(--wj-orange);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .client-home-cards .card-footer a:not(.btn) { transition: none; }
}


/* ── Portal home card grid ────────────────────────────────────────────────
   Replaces Bootstrap's .card-columns, which the parent homepage.tpl used.
   .card-columns is CSS multi-column masonry: cards flow down-then-across, so
   they render ragged, unequal in height, and out of source order — with two
   or three cards it reads as broken rather than deliberate.

   Flex row instead: equal heights, source order, honest wrapping.
   Paired with the child homepage.tpl, which emits .wj-card-grid. */
.wj-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin: 0 0 2.5rem;
}
.wj-card-grid > .card {
    flex: 1 1 280px;
    max-width: 360px;
    margin-bottom: 0 !important;   /* the parent markup carries .mb-3 */
    border: 1px solid var(--wj-hairline);
    border-top: 3px solid var(--wj-orange);
    border-radius: 6px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.wj-card-grid > .card:hover {
    box-shadow: 0 6px 18px rgba(2, 6, 23, .10);
    transform: translateY(-2px);
}
/* Push the CTA to the bottom so buttons line up across cards of differing
   copy length — the thing masonry could never do. */
.wj-card-grid > .card > .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wj-card-grid > .card .card-title {
    font-family: var(--wj-font-display);
    letter-spacing: .03em;
    color: var(--wj-navy);
}
.wj-card-grid > .card p {
    color: var(--wj-muted);
    flex: 1 1 auto;
}
.wj-card-grid > .card .btn {
    margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
    .wj-card-grid > .card { transition: none; }
    .wj-card-grid > .card:hover { transform: none; }
}

.panel-heading,
.table thead th {
    color: var(--wj-navy);
}


/* ═══════════════════════════════════════════════════════════════════════════
   STATUS LABELS — legibility first, colour second

   Stock WHMCS puts white on Bootstrap's pale fills. Measured, ALL FIVE fail
   WCAG AA: Active 2.48:1, Pending 2.09, Suspended 1.95, Terminated 3.96,
   Cancelled 4.48 — against the 4.5 required. Deeper fills below; every one
   now passes (5.87 – 7.56:1).

   ⚠ THE COLOUR IS NOT WHAT MAKES THIS ACCESSIBLE — read this before "improving"
   the palette. Simulating protanopia and deuteranopia over these five hues,
   Active and Cancelled land ~5 units apart: indistinguishable. That is not a
   flaw in this particular palette. FIVE hues cannot be made reliably distinct
   for a dichromat at pill size — a laddered-lightness variant was tried and
   collided too. Do not spend time hunting for a palette that fixes it.

   What fixes it is WCAG 1.4.1: colour must not be the ONLY channel. Each pill
   already carries its status as a WORD. The bug was that nobody could read it —
   the parent clamps `.div-service-status .label:not(.label-placeholder)` to
   `width: 3rem` with `text-overflow: ellipsis`, which at 12px truncates
   "Suspended", "Cancelled" and "Terminated" to "Suspen…", "Cancel…",
   "Termin…". Three of five statuses were unreadable, so colour WAS the only
   channel for exactly the users who cannot use it.

   Freeing the width is therefore the accessibility fix. The colours are
   reinforcement for everyone else.
   ═══════════════════════════════════════════════════════════════════════════ */

.label-success { background-color: #157347; color: #fff; }   /* 5.87:1 */
.label-info    { background-color: #0b6a83; color: #fff; }   /* 6.17:1 */
.label-warning { background-color: #8a5a00; color: #fff; }   /* 5.93:1 */
.label-default { background-color: #4b5563; color: #fff; }   /* 7.56:1 */
.label-danger  { background-color: #b02a37; color: #fff; }   /* 6.50:1 */

/* Let the status word be read in full. */
.div-service-status .label:not(.label-placeholder) {
    width: auto;
    min-width: 3rem;
    overflow: visible;
    text-overflow: clip;
    padding: 3px 9px;
    border-radius: 11px;
    font-weight: 600;
}
.div-service-status {
    flex: 0 0 auto;
    min-width: 6.25rem;
}

.alert-info {
    border-left: 3px solid var(--wj-orange);
}


/* ═══════════════ MIGRATED VERBATIM from templates/twenty-one/css/custom.css
   Rescued 2026-08-07 — it was living in a directory WHMCS overwrites on update.
   Behaviour deliberately unchanged. ═══════════════════════════════════════ */

div.minimalistBlack {
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #E0E0E0;
  background-color: #FFFFFF;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
.divTable.minimalistBlack .divTableCell, .divTable.minimalistBlack .divTableHead {
  border: 0px solid #E0E0E0;
  padding: 10px 10px;
}
.divTable.minimalistBlack .divTableBody .divTableCell {
  font-size: 16px;
}
.divTable.minimalistBlack .divTableHeading {
  background: #CF6624;
  background: -moz-linear-gradient(top, #db8c5b 0%, #d3753a 66%, #CF6624 100%);
  background: -webkit-linear-gradient(top, #db8c5b 0%, #d3753a 66%, #CF6624 100%);
  background: linear-gradient(to bottom, #db8c5b 0%, #d3753a 66%, #CF6624 100%);
}
.divTable.minimalistBlack .divTableHeading .divTableHead {
  font-size: 18px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: left;
}
.minimalistBlack .tableFootStyle {
  font-size: 14px;
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

/* ── Footer: compact, and both lines CENTRED ───────────────────────────────
   Originally (WebJIVE, 2026-07-07) this collapsed twenty-one's 3 stacked
   footer blocks with their big mb-7 margins into ONE row — links left,
   copyright right — purely to reclaim vertical space on every page.

   Updated 2026-08-07 (Eric): keep the compactness, but centre both lines
   rather than pushing them to opposite edges. So it stays a flex container —
   the space saving is in the killed margins and the hidden .list-inline, not
   in the horizontal split — but switches to a centred column.

   flex-direction: column + align-items: center gives two centred lines.
   justify-content: center on a row would instead butt them together on one
   line, which is not what "centre both lines" means. */
#footer                           { padding-top: 10px !important; padding-bottom: 10px !important; }
#footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    row-gap: 2px;
}
#footer .container > .list-inline { display: none; }
#footer .container > .nav         { margin-bottom: 0 !important; flex-wrap: wrap; justify-content: center; }

/* Tighten the two lines together. Measured 32px apart before this; the gap was
   NOT the flex row-gap — it came from two places the earlier override missed:
     • .copyright ships `margin: 30px 0 0`, and the old rule only zeroed
       margin-BOTTOM, so the 30px top margin survived untouched;
     • the footer .nav-link carries Bootstrap's 8px vertical padding.
   Both are killed here rather than papered over with a negative margin. */
#footer .container > .copyright   { margin: 0 !important; }
#footer .container > .nav .nav-link {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* ═══════════════════════ END MIGRATED BLOCK ═══════════════════════════════ */


/* ── Footer, branded (additive — the collapse above still governs layout) ─── */
#footer {
    background: var(--wj-navy);
    border-top: 3px solid var(--wj-orange);
}
#footer,
#footer .copyright,
#footer .nav-link {
    color: #cbd5e1;
}
#footer a:hover,
#footer .nav-link:hover {
    color: var(--wj-orange);
}