/* ==========================================================================
   ParJenn Technologies - client area theme
   templates/parjenn/css/custom.css        child of twenty-one (WHMCS 9.0.9)

   DESIGN CONSTRAINT - this is the defining one, not an afterthought:
   The site owner has achromatopsia (full colour blindness). Hue carries zero
   information for him. So:
     - every meaningful pair separates on LUMINANCE, verified numerically
     - state is never signalled by hue alone - weight, border, size, icon and
       label always carry it too
     - surfaces are muted rather than pure white (achromatopsia usually comes
       with light sensitivity); base type is 16px with generous leading
     - light scheme only (see the colour scheme note near the end)
   Colour still does real work for sighted visitors. It is simply never the
   only thing doing the work.

   Grayscale values (0-255) of the palette, measured:
     ink 35 - navy 48 - slate 117 - cyan-deep 117 - coral 142
     cyan 178 - paper 241 - mist 245 - white 255
   Known trap: cyan(178) vs coral(142) differ by only 36 - they are NEVER
   used as the sole distinction between two controls.
   ========================================================================== */

:root {
  --pj-ink:        #231834;   /* gray  35 */
  --pj-navy:       #0E2B5C;   /* gray  48 */
  --pj-navy-deep:  #0A1F44;
  --pj-slate:      #627792;   /* gray 117 */
  --pj-cyan-deep:  #0E7FA3;   /* gray 117 - cyan that is safe as text on light */
  --pj-coral:      #FC5546;   /* gray 142 */
  --pj-cyan:       #1DC2EF;   /* gray 178 - accent on dark only */
  --pj-paper:      #EEF2F7;   /* gray 241 - page surface, not pure white */
  --pj-surface:    #FFFFFF;
  --pj-body:       #37455A;
  --pj-line:       #D3DCE7;
  --pj-line-soft:  #E3E9F1;

  --pj-r:      12px;
  --pj-r-sm:   8px;
  --pj-sh-1:   0 1px 2px rgba(14,43,92,.05), 0 4px 12px rgba(14,43,92,.05);
  --pj-sh-2:   0 2px 6px rgba(14,43,92,.07), 0 18px 44px rgba(14,43,92,.12);
  --pj-sans:   'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pj-disp:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------------------------------------------------------- base ---- */

body, body.primary-bg-color {
  font-family: var(--pj-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--pj-body);
  background-color: var(--pj-paper);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--pj-disp);
  color: var(--pj-ink);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}
h1,.h1{font-size:2.25rem} h2,.h2{font-size:1.7rem}
h3,.h3{font-size:1.25rem} h4,.h4{font-size:1.05rem}

a { color: var(--pj-navy); text-decoration: none; }
a:hover { color: var(--pj-navy-deep); text-decoration: underline; text-underline-offset: 3px; }
p a, .primary-content p a { text-decoration: underline; text-underline-offset: 3px; }

hr { border-color: var(--pj-line-soft); }
::selection { background: var(--pj-navy); color:#fff; }

/* Focus: 3px ring plus offset. Never removed anywhere in this file. */
:focus-visible {
  outline: 3px solid var(--pj-cyan-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.pj-eyebrow {
  font-family: var(--pj-disp);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pj-cyan);
  margin-bottom: .75rem;
}

/* -------------------------------------------------------------- header ---- */

header.header { background: var(--pj-surface); border-bottom: 1px solid var(--pj-line); }
header.header .navbar-light { padding: 1rem 0; }
header.header .logo-img { max-height: 48px; width: auto; }

header.header .search .form-control,
header.header .search .btn {
  border: 1px solid var(--pj-line);
  background: var(--pj-paper);
  color: var(--pj-body);
}
header.header .search .form-control:focus {
  background: var(--pj-surface);
  border-color: var(--pj-navy);
  box-shadow: 0 0 0 3px rgba(14,43,92,.18);
}
header.header .toolbar .nav-link {
  color: var(--pj-navy);
  border: 1px solid var(--pj-line);
  background: var(--pj-paper);
  font-weight: 500;
}
header.header .toolbar .nav-link:hover { color:#fff; background: var(--pj-navy); border-color: var(--pj-navy); }
header.header .badge-info { background: var(--pj-ink); color:#fff; font-weight:600; }

/* ------------------------------------------------------------ main nav ----
   Twenty-One emits <li class="d-block no-collapse"><a class="pr-4"> - there is
   no .nav-link class here. Target the real markup.                          */

.main-navbar-wrapper {
  background: var(--pj-navy);
  padding: 0;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.10);
}
.main-navbar-wrapper #nav > li > a,
.main-navbar-wrapper .navbar-nav > li > a {
  color: #D7E2F0;                       /* 11.2:1 on navy, gray gap 165 */
  font-family: var(--pj-disp);
  font-weight: 500;
  font-size: .95rem;
  display: inline-block;
  padding: 1rem .25rem;
  margin-right: 1.75rem;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.main-navbar-wrapper #nav > li > a:hover,
.main-navbar-wrapper #nav > li > a:focus,
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li > a:focus {
  color:#fff; border-bottom-color: var(--pj-cyan); text-decoration:none;
}
.main-navbar-wrapper #nav > li.active > a { color:#fff; border-bottom-color: var(--pj-cyan); }
.main-navbar-wrapper .dropdown-toggle::after { color: var(--pj-cyan); }

.main-navbar-wrapper .dropdown-menu {
  background: var(--pj-surface);
  border: 1px solid var(--pj-line);
  border-radius: 0 0 var(--pj-r-sm) var(--pj-r-sm);
  box-shadow: var(--pj-sh-2);
  margin-top: 0; padding: .35rem 0;
}
.main-navbar-wrapper .dropdown-menu a { color: var(--pj-body); padding: .45rem 1rem; }
.main-navbar-wrapper .dropdown-menu a:hover { color: var(--pj-navy); background: var(--pj-paper); }
.dropdown-divider { border-color: var(--pj-line-soft); }

/* ----------------------------------------------------------- breadcrumb --- */

.master-breadcrumb { background: var(--pj-surface); border-bottom: 1px solid var(--pj-line); }
.master-breadcrumb .breadcrumb { margin:0; padding:.7rem 0; font-size:.85rem; background:transparent; }
.breadcrumb a { color: var(--pj-slate); }
.breadcrumb .active { color: var(--pj-ink); font-weight:600; }

/* ----------------------------------------------------------------- hero --- */

.home-domain-search, .home-domain-search.bg-white {
  /* .bg-white is a Bootstrap !important utility; this is the only override
     in this file that must match it. */
  background:
    radial-gradient(1100px 380px at 78% -12%, rgba(29,194,239,.24), transparent 62%),
    linear-gradient(158deg, #133566 0%, var(--pj-navy) 46%, #081B3D 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
}
.home-domain-search::after {           /* thin luminance rule, reads in grayscale */
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background: linear-gradient(90deg, var(--pj-cyan), rgba(29,194,239,0));
}
.pj-hero-inner { padding: 4.5rem 1rem 3.5rem; text-align: center; position: relative; z-index: 1; }
.pj-hero-title {
  color:#fff; font-size: 3rem; font-weight: 700;
  letter-spacing:-.03em; margin: 0 0 .6rem;
}
.pj-hero-sub { color:#BCD0E6; font-size:1.1rem; margin:0 auto 2rem; max-width: 560px; }

.home-domain-search .input-group-wrapper { max-width: 720px; margin: 0 auto; }
.home-domain-search .form-control {
  min-height: 58px; border:0; font-size:1.05rem; padding-left:1.15rem;
  border-radius: var(--pj-r-sm) 0 0 var(--pj-r-sm);
}
.home-domain-search .form-control:focus { box-shadow: 0 0 0 4px rgba(29,194,239,.45); }
.home-domain-search .btn-primary {
  min-height:58px; padding:0 2.25rem; font-size:1rem; font-weight:600;
  background: var(--pj-cyan); border-color: var(--pj-cyan); color: var(--pj-navy);
  border-radius: 0 var(--pj-r-sm) var(--pj-r-sm) 0;
}
.home-domain-search .btn-primary:hover { background:#3ACEF5; border-color:#3ACEF5; color: var(--pj-navy-deep); }

.pj-hero-links { margin-top:1.75rem; display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.pj-hero-link { color:#BCD0E6; font-size:.95rem; font-weight:500; }
.pj-hero-link:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.pj-hero-link i { color: var(--pj-cyan); margin-right:.4rem; }

.tld-logos {
  list-style:none; padding:0; margin:2.5rem auto 0; display:flex;
  gap:.75rem; justify-content:center; flex-wrap:wrap; max-width:720px;
}
.tld-logos li {
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius: var(--pj-r-sm);
  padding:.6rem 1rem; color:#DCE7F4; font-size:.9rem;
}
.pj-tld { font-family: var(--pj-disp); font-weight:600; color:#fff; margin-right:.4rem; }
.pj-tld-price { color:#BCD0E6; }

/* ------------------------------------------------------------- sections --- */

#main-body { padding-bottom: 4rem; }
.primary-content { padding-top: 0; }

.pj-section-title { margin: 3.5rem 0 .35rem; font-size: 1.85rem; text-align:center; }
.pj-section-lede { text-align:center; color: var(--pj-slate); max-width:640px; margin:0 auto 2rem; }

/* value strip */
.pj-valueprops {
  background: var(--pj-surface);
  border:1px solid var(--pj-line);
  border-radius: var(--pj-r);
  box-shadow: var(--pj-sh-2);
  padding: 2.5rem 2rem 1.5rem;
  margin: -3.25rem 0 1rem;
  position: relative; z-index: 3;
}
.pj-valueprops h3 { font-size:1.05rem; margin-bottom:.4rem; }
.pj-valueprops p  { font-size:.94rem; }
.pj-vp-icon {
  width:54px; height:54px; border-radius:14px;
  background: var(--pj-navy); color: var(--pj-cyan);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:1rem;
}

/* product grid */
.pj-product-grid .card {
  border:1px solid var(--pj-line); border-radius: var(--pj-r);
  box-shadow: var(--pj-sh-1); overflow:hidden; position:relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pj-product-grid .card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg, var(--pj-navy), var(--pj-cyan));
}
.pj-product-grid .card:hover {
  transform: translateY(-4px); box-shadow: var(--pj-sh-2); border-color: var(--pj-slate);
}
.pj-product-grid .card-body { padding: 2rem 1.5rem 1.5rem; }
.pj-product-grid .pricing-card-title { font-size:1.15rem; margin-bottom:.5rem; }
.pj-product-grid p { font-size:.92rem; min-height:3.4em; color: var(--pj-body); }

/* CTA band */
.pj-cta {
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(29,194,239,.16), transparent 60%),
    var(--pj-ink);
  border-radius: var(--pj-r);
  margin: 3.5rem 0; padding: 3rem 1.5rem; text-align:center;
}
.pj-cta h2 { color:#fff; font-size:1.75rem; margin-bottom:.5rem; }
.pj-cta p { color:#C4CEDC; max-width:620px; margin:0 auto 1.75rem; }

/* icon action cards */
.action-icon-btns a {
  display:block; background: var(--pj-surface);
  border:1px solid var(--pj-line); border-radius: var(--pj-r);
  padding:1.5rem .75rem; text-align:center; color: var(--pj-ink);
  font-family: var(--pj-disp); font-weight:500; font-size:.9rem;
  box-shadow: var(--pj-sh-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.action-icon-btns a:hover {
  transform: translateY(-4px); border-color: var(--pj-slate);
  box-shadow: var(--pj-sh-2); text-decoration:none; color: var(--pj-navy);
}
.action-icon-btns .ico-container { font-size:2rem; color: var(--pj-navy); margin-bottom:.5rem; }

/* ---------------------------------------------------------------- cards --- */

.card, .panel {
  border:1px solid var(--pj-line); border-radius: var(--pj-r);
  box-shadow: var(--pj-sh-1); background: var(--pj-surface);
}
.card-header, .panel-heading {
  background: var(--pj-surface); border-bottom:1px solid var(--pj-line);
  font-family: var(--pj-disp); font-weight:600; color: var(--pj-ink);
  padding:1rem 1.25rem;
}

/* -------------------------------------------------------------- buttons ---
   Hierarchy is carried by FILL vs OUTLINE vs WEIGHT, never by hue alone.    */

.btn {
  font-family: var(--pj-disp); font-weight:500;
  border-radius: var(--pj-r-sm); padding:.6rem 1.3rem;
  border-width:2px;
  transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible { outline:3px solid var(--pj-cyan-deep); outline-offset:3px; box-shadow:none; }

.btn-primary { background: var(--pj-navy); border-color: var(--pj-navy); color:#fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--pj-navy-deep); border-color: var(--pj-navy-deep); color:#fff;
}

.btn-outline-primary, .btn-default, .btn-secondary {
  background: transparent; border:2px solid var(--pj-navy); color: var(--pj-navy); font-weight:600;
}
.btn-outline-primary:hover, .btn-default:hover, .btn-secondary:hover {
  background: var(--pj-navy); border-color: var(--pj-navy); color:#fff;
}

/* CTA: filled coral, INK label (5.21:1, gray gap 107), plus a dark border and
   heavier weight so it still reads as the strongest control in grayscale. */
.btn-cta, .btn-success {
  background: var(--pj-coral); border:2px solid var(--pj-ink); color: var(--pj-ink);
  font-weight:700; padding:.7rem 2rem;
}
.btn-cta:hover, .btn-success:hover { background:#FF6D60; border-color: var(--pj-ink); color: var(--pj-ink); }

.btn-info { background: var(--pj-cyan-deep); border-color: var(--pj-cyan-deep); color:#fff; }
.btn-link { color: var(--pj-navy); }

/* ---------------------------------------------------------------- forms --- */

.form-control, .custom-select {
  border:1px solid var(--pj-line); border-radius: var(--pj-r-sm);
  min-height:46px; color: var(--pj-ink); background: var(--pj-surface);
  font-size:1rem;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--pj-navy); box-shadow: 0 0 0 3px rgba(14,43,92,.18);
}
label { font-weight:600; color: var(--pj-ink); font-size:.92rem; }
.form-control::placeholder { color: var(--pj-slate); }
.text-muted, .help-block, small.form-text { color:#51617A !important; }

/* --------------------------------------------------------------- tables --- */

.table { color: var(--pj-body); background: var(--pj-surface); }
.table thead th {
  background: var(--pj-paper); color: var(--pj-ink);
  font-family: var(--pj-disp); font-weight:600;
  font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
  border-bottom:2px solid var(--pj-line);
}
.table td, .table th { border-color: var(--pj-line-soft); vertical-align:middle; }
.table-hover tbody tr:hover { background: var(--pj-paper); }

.list-group-item { border-color: var(--pj-line); color: var(--pj-body); }
.list-group-item.active, .list-group-item-action.active {
  background: var(--pj-navy); border-color: var(--pj-navy); color:#fff;
}
.list-group-item-action:hover { background: var(--pj-paper); color: var(--pj-navy); }

/* --------------------------------------------------------------- alerts ---
   Severity is carried by THREE non-hue signals: left-bar width, border style,
   and background luminance. Hue is a fourth signal for sighted visitors.    */

.alert { border-radius: var(--pj-r-sm); border:1px solid var(--pj-line); padding:1rem 1.15rem; }
.alert-info    { background:#F2F6FA; border-left:5px solid var(--pj-cyan-deep); color: var(--pj-ink); }
.alert-success { background:#EEF3EE; border-left:5px double #1E7B34;            color:#14331D; }
.alert-warning { background:#F7F2E8; border-left:7px solid #7A4600;             color:#3D2400; }
.alert-danger  { background:#F6ECEB; border-left:9px solid #5E120C;             color:#410E0B; font-weight:500; }

.badge-info    { background: var(--pj-cyan-deep); color:#fff; }
.badge-success { background:#1E7B34; color:#fff; }
.badge-danger  { background:#5E120C; color:#fff; }

/* --------------------------------------------------------------- footer --- */

footer.footer {
  background: var(--pj-ink); color:#C4CEDC;
  border-top:3px solid var(--pj-cyan);
  padding-top:3rem; padding-bottom:2rem;
}
footer.footer a, footer.footer .nav-link { color:#DCE7F4; }
footer.footer a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
footer.footer h1,footer.footer h2,footer.footer h3,footer.footer h4,footer.footer h5 { color:#fff; }

/* ---------------------------------------------------------------- misc ---- */

img { max-width:100%; height:auto; }
.modal-content { border:0; border-radius: var(--pj-r); box-shadow: var(--pj-sh-2); }
.modal-header { border-bottom:1px solid var(--pj-line); }
.modal-footer { border-top:1px solid var(--pj-line); }

/* --------------------------------------------------------- small screens -- */

@media (max-width: 767.98px) {
  body { font-size:15.5px; }
  .pj-hero-inner { padding:2.75rem 1rem 2.25rem; }
  .pj-hero-title { font-size:1.9rem; }
  .pj-hero-sub { font-size:1rem; margin-bottom:1.5rem; }
  .home-domain-search .form-control { border-radius: var(--pj-r-sm); }
  .pj-valueprops { margin:-1.5rem 0 1rem; padding:1.75rem 1.25rem .75rem; }
  .pj-vp-icon { width:46px; height:46px; font-size:1.2rem; }
  .pj-section-title { font-size:1.4rem; margin-top:2.5rem; }
  .pj-cta { padding:2rem 1.15rem; }
  .pj-hero-links { gap:1.25rem; }
  .main-navbar-wrapper #nav > li > a { display:block; margin-right:0; padding:.6rem 0; }
  h1,.h1{font-size:1.7rem} h2,.h2{font-size:1.35rem}
}

/* ------------------------------------------------------ colour scheme ----
   Light scheme only. A prefers-color-scheme: dark block used to live here and
   was removed 2026-10-05: it flipped text to near-white while WHMCS's own
   order-form, MarketConnect and store panels keep hard-coded white
   backgrounds, leaving pale text on white across the cart (reported
   unreadable by the owner and a sighted user). A real dark theme would have to
   restyle every stock order-form surface and be re-checked on every update.  */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ==========================================================================
   STOCK HERO SUPPORT - added after reverting includes/domain-search.tpl to
   the parent. WHMCS's own markup uses <h2 class="text-center">, a .btn-link
   pricing link and a .btn-success transfer button, all sitting on the navy
   gradient. Without these rules they inherit dark ink and vanish.
   ========================================================================== */

.home-domain-search .p-5 { padding: 4rem 1rem 3.25rem !important; }

.home-domain-search h2 {
  color: #fff;
  font-family: var(--pj-disp);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 0 auto 1.75rem;
  max-width: 18ch;
  line-height: 1.15;
}

/* Search = filled cyan on navy (gray gap 130). Transfer = outlined white.
   The two actions differ by FILL, not hue - cyan and coral sit only 36 grey
   levels apart and must never be the sole distinction between controls. */
.home-domain-search .btn-success {
  background: transparent;
  border: 2px solid rgba(255,255,255,.75);
  color: #fff;
  font-weight: 600;
  min-height: 58px;
  padding: 0 1.75rem;
}
.home-domain-search .btn-success:hover {
  background: #fff;
  border-color: #fff;
  color: var(--pj-navy);
}

.home-domain-search .btn-link {
  color: #BCD0E6;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-domain-search .btn-link:hover { color: #fff; }

.home-domain-search .row.d-sm-none .btn { min-height: 50px; }

@media (max-width: 767.98px) {
  .home-domain-search .p-5 { padding: 2.5rem 1rem 2rem !important; }
  .home-domain-search h2 { font-size: 1.75rem; max-width: none; }
  .home-domain-search .btn-success { min-height: 50px; }
}