/* Pro4x Lab - Joomla Cassiopeia user.css */
:root {
  --pro4x-bg: #050b12;
  --pro4x-bg-soft: #081522;
  --pro4x-panel: #0b1826;
  --pro4x-panel-2: #102235;
  --pro4x-blue: #159cff;
  --pro4x-blue-bright: #35b9ff;
  --pro4x-blue-deep: #0b5db3;
  --pro4x-orange: #ff7a00;
  --pro4x-orange-bright: #ff9d2e;
  --pro4x-white: #f4f8fb;
  --pro4x-gray: #aab7c4;
  --pro4x-radius: 12px;
  --pro4x-shadow: 0 10px 30px rgba(0,0,0,.35);
}

html { background: var(--pro4x-bg); }

body.site {
  color: var(--pro4x-white);
  background:
    radial-gradient(circle at 15% 5%, rgba(21,156,255,.08), transparent 30%),
    radial-gradient(circle at 90% 15%, rgba(255,122,0,.06), transparent 25%),
    linear-gradient(180deg, #06101a 0%, #081522 42%, #050b12 100%);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.65;
}

body.site::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .24;
  background-image:
    linear-gradient(rgba(21,156,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,156,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
}

.container-header {
  background: linear-gradient(90deg, rgba(4,11,18,.98), rgba(8,24,39,.98));
  border-bottom: 1px solid rgba(21,156,255,.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}

.container-header .container-nav {
  padding-top: .4rem;
  padding-bottom: .4rem;
}

.container-header .navbar-brand { margin-inline-end: 1.5rem; }

.container-header .navbar-brand img,
.container-header .site-logo img,
.container-header .brand-logo img {
  max-height: 78px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.45));
}

.container-header .navbar-brand .site-title,
.container-header .site-description {
  color: var(--pro4x-white);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.container-header .mod-menu { gap: .3rem; }

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  color: #dbe7f0;
  font-weight: 600;
  letter-spacing: .035em;
  padding: .75rem .9rem;
  border-radius: 7px;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  color: #fff;
  background: rgba(21,156,255,.10);
  box-shadow: inset 0 -2px 0 var(--pro4x-blue);
  text-decoration: none;
}

.metismenu.mod-menu .mm-collapse {
  background: rgba(6,17,28,.98);
  border: 1px solid rgba(21,156,255,.25);
  border-radius: 8px;
  box-shadow: var(--pro4x-shadow);
}

.metismenu.mod-menu .mm-collapse > li > a { color: #dce8f2; }
.metismenu.mod-menu .mm-collapse > li > a:hover {
  color: #fff;
  background: rgba(21,156,255,.10);
}

.container-banner {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2,8,14,.78), rgba(2,8,14,.22)),
    url("/images/pro4x-background.jpg") center center / cover no-repeat;
  min-height: clamp(360px, 56vh, 680px);
  border-bottom: 1px solid rgba(21,156,255,.28);
}

.container-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5,11,18,.93) 100%);
  pointer-events: none;
}

.container-banner > * { position: relative; z-index: 2; }
.container-banner .banner-overlay {
  background: rgba(5,14,23,.60);
  backdrop-filter: blur(2px);
}

.container-banner h1,
.container-banner h2,
.container-banner .display-1,
.container-banner .display-2 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-shadow: 0 3px 14px rgba(0,0,0,.75);
}

.container-banner p,
.container-banner .lead {
  color: #d7e4ed;
  max-width: 760px;
}

.site-grid { gap: 1.75rem; }
.grid-child.container-component,
.container-component {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

main { color: var(--pro4x-white); }
main a { color: var(--pro4x-blue-bright); }
main a:hover,
main a:focus { color: var(--pro4x-orange-bright); }

h1, h2, h3, h4, h5, h6 {
  color: #f7fbff;
  font-weight: 700;
  letter-spacing: .015em;
}

h1 {
  text-transform: uppercase;
  letter-spacing: .035em;
}

h2 { position: relative; padding-bottom: .5rem; }
h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: .5rem;
  background: linear-gradient(90deg, var(--pro4x-blue), var(--pro4x-orange));
  border-radius: 3px;
}

.text-muted,
.small,
small { color: var(--pro4x-gray) !important; }

.card,
.moduletable,
.card-body,
.sidebar-left .moduletable,
.sidebar-right .moduletable {
  background: linear-gradient(180deg, rgba(14,31,48,.96), rgba(8,20,32,.96));
  border: 1px solid rgba(21,156,255,.20);
  border-radius: var(--pro4x-radius);
  color: var(--pro4x-white);
  box-shadow: var(--pro4x-shadow);
}

.card {
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(21,156,255,.50);
  box-shadow: 0 14px 32px rgba(0,0,0,.42);
}

.card-header {
  color: #fff;
  background: linear-gradient(90deg, #10263a, #0a1724);
  border-bottom: 1px solid rgba(21,156,255,.20);
  font-weight: 700;
}

.card-title a { color: #fff; }
.card-title a:hover { color: var(--pro4x-blue-bright); }

.pro4x-card { position: relative; overflow: hidden; }
.pro4x-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--pro4x-blue), var(--pro4x-orange));
}

.btn {
  border-radius: 7px;
  font-weight: 700;
  letter-spacing: .025em;
  transition: all .2s ease;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #0877d1, var(--pro4x-blue));
  border-color: var(--pro4x-blue);
  box-shadow: 0 4px 14px rgba(21,156,255,.24);
}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  background: linear-gradient(135deg, var(--pro4x-blue), var(--pro4x-blue-bright));
  border-color: var(--pro4x-blue-bright);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(21,156,255,.34);
}

.btn-secondary,
.btn-outline-secondary {
  color: var(--pro4x-orange-bright);
  border-color: var(--pro4x-orange);
  background: transparent;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  color: #111;
  background: var(--pro4x-orange);
  border-color: var(--pro4x-orange);
}

.btn-pro4x-orange {
  color: #111;
  background: linear-gradient(135deg, var(--pro4x-orange), var(--pro4x-orange-bright));
  border: 1px solid var(--pro4x-orange-bright);
  font-weight: 800;
}

.form-control,
.form-select,
.input-group-text {
  color: #eef5fa;
  background-color: #0b1826;
  border: 1px solid #28445c;
  border-radius: 7px;
}

.form-control:focus,
.form-select:focus {
  color: #fff;
  background-color: #0d1e2e;
  border-color: var(--pro4x-blue);
  box-shadow: 0 0 0 .18rem rgba(21,156,255,.18);
}

.form-control::placeholder { color: #74889a; }
label,
.form-label { color: #dfeaf1; }

.table {
  color: #e8f0f6;
  border-color: #263b4d;
}

.table > :not(caption) > * > * {
  color: #e8f0f6;
  background: rgba(10,24,38,.80);
  border-bottom-color: #263b4d;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(15,35,54,.88);
}

.alert { border-radius: 8px; border-left-width: 4px; }
.alert-info {
  color: #d9f1ff;
  background: rgba(13,92,145,.22);
  border-color: var(--pro4x-blue);
}
.alert-warning {
  color: #ffe2bd;
  background: rgba(160,83,8,.20);
  border-color: var(--pro4x-orange);
}

.breadcrumb {
  padding: .7rem 1rem;
  background: rgba(9,23,36,.78);
  border: 1px solid rgba(21,156,255,.15);
  border-radius: 8px;
}

.breadcrumb-item,
.breadcrumb-item.active { color: var(--pro4x-gray); }
.breadcrumb-item a { color: var(--pro4x-blue-bright); }

.page-link {
  color: var(--pro4x-blue-bright);
  background: #0b1826;
  border-color: #28445c;
}
.page-link:hover {
  color: #fff;
  background: #10263a;
  border-color: var(--pro4x-blue);
}
.page-item.active .page-link {
  color: #fff;
  background: var(--pro4x-blue-deep);
  border-color: var(--pro4x-blue);
}

.article-info { color: #899aaa; }
.tags .badge {
  color: #dff2ff;
  background: rgba(21,156,255,.14);
  border: 1px solid rgba(21,156,255,.25);
}

.container-footer {
  margin-top: 3rem;
  color: #a9b9c6;
  background: linear-gradient(180deg, #07121c 0%, #03070c 100%);
  border-top: 1px solid rgba(21,156,255,.30);
  box-shadow: 0 -8px 24px rgba(0,0,0,.20);
}

.container-footer a { color: var(--pro4x-blue-bright); }
.container-footer a:hover { color: var(--pro4x-orange-bright); }
.container-footer .grid-child {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.back-to-top-link {
  color: #fff;
  background: rgba(8,119,209,.94);
  border: 1px solid var(--pro4x-blue-bright);
}
.back-to-top-link:hover {
  color: #111;
  background: var(--pro4x-orange);
  border-color: var(--pro4x-orange-bright);
}

hr {
  opacity: 1;
  border-color: rgba(21,156,255,.22);
}

::selection {
  color: #fff;
  background: #0b6fbf;
}

.pro4x-accent-blue { color: var(--pro4x-blue-bright) !important; }
.pro4x-accent-orange { color: var(--pro4x-orange-bright) !important; }
.pro4x-panel {
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(14,31,48,.95), rgba(8,20,32,.95));
  border: 1px solid rgba(21,156,255,.22);
  border-radius: var(--pro4x-radius);
  box-shadow: var(--pro4x-shadow);
}
.pro4x-tech-border {
  border-left: 4px solid var(--pro4x-blue);
  border-right: 1px solid rgba(255,122,0,.35);
}
.pro4x-section-title {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.pro4x-section-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  margin-top: .6rem;
  background: linear-gradient(90deg, var(--pro4x-blue), var(--pro4x-orange));
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--pro4x-blue-bright);
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .container-header .navbar-brand img,
  .container-header .site-logo img,
  .container-header .brand-logo img {
    max-height: 64px;
  }

  .container-header .navbar-toggler {
    color: #fff;
    border-color: rgba(21,156,255,.35);
  }

  .container-header .navbar-collapse {
    margin-top: .75rem;
    padding: .75rem;
    background: rgba(5,15,25,.98);
    border: 1px solid rgba(21,156,255,.18);
    border-radius: 8px;
  }

  .container-banner {
    min-height: 420px;
    background-position: center center;
  }
}

@media (max-width: 575.98px) {
  .container-header .navbar-brand img,
  .container-header .site-logo img,
  .container-header .brand-logo img {
    max-height: 54px;
    max-width: 210px;
  }

  .container-banner { min-height: 360px; }
  h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
}

Optional one-color white header logo:
.container-header .navbar-brand img {
  content: url("https://pro4xlab.org/images/pro4x-logo-white.png");
}

/* Optional mobile banner:
@media (max-width: 767.98px) {
  .container-banner {
    background-image:
      linear-gradient(180deg, rgba(2,8,14,.60), rgba(2,8,14,.78)),
      url("/images/pro4x-background-mobile.jpg");
  }
}
*/