/* Xeople Glossary — pixel-style recreation from JPG
   Notes:
   - No inline styles.
   - Bootstrap handles layout; we override to match the design.
*/

:root{
  --xe-bg-0:#0d0421;         /* deep purple */
  --xe-bg-1:#1a1630;         /* header strip */
  --xe-text:#ffffff;
  --xe-muted:rgba(255,255,255,.72);
  --xe-soft:rgba(255,255,255,.12);
  --xe-border:rgba(255,255,255,.16);
  --xe-accent:#cc1997;       /* magenta from JPG */
  --xe-accent-2:#cc1997;     /* orange highlight from JPG */
  --xe-chip-bg:rgba(255,255,255,.06);
}

*{ box-sizing:border-box; }

body {
        /* Use dynamic viewport units for better mobile behavior */
        min-height: 100svh; /* small viewport height */
        min-height: 100dvh; /* dynamic viewport height (modern) */
        min-height: 100vh;  /* fallback */

        /* Background image */
        background-image: url("../images/glossarybg-image.webp");
        background-repeat: no-repeat;
        background-position:initial;
        background-size: cover; /* fills screen, crops if needed, no distortion */
        background-attachment: scroll; /* better on mobile than fixed */

        /* Optional: set a fallback background color while image loads */
        background-color: #0e0522;
      }


.xe-container{
  max-width: 1280px;
  margin-top: 125px;
}

.xe-bg{
  position:relative;
  overflow-x:hidden;
}

/* background glows (matches the JPG “aurora” blobs) */
.xe-bg::before,
.xe-bg::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  filter: blur(60px);
  opacity:.85;
  z-index:0;
  pointer-events:none;
}
.xe-bg::before{
  left:-220px;
  top:820px;
  background: radial-gradient(circle at 40% 40%, rgba(204,25,151,.95) 0%, rgba(204,25,151,0) 65%);
}
.xe-bg::after{
  right:-240px;
  top:1020px;
  background: radial-gradient(circle at 50% 50%, rgba(180,100,255,.7) 0%, rgba(180,100,255,0) 66%);
}

.xe-meta > a {color: #fff; text-decoration: none;}
.xe-meta > a:hover {color: #cc1997; text-decoration: none;}

/* ensure content above glows */
.xe-header, main, .xe-footer{ position:relative; z-index:1; }

/* Header / nav */
.xe-header{
  background: rgba(26,22,48,.75);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.glossary-search__status {
  color: #c5168c;
}

.glossary-card {
  margin-bottom: 40px;
}

#glossary-search-results {
  max-width: 1024px;
  margin: 0px auto;
  padding-top: 50px;
}

.xe-navlink{
  color: rgba(255,255,255,.80) !important;
  font-weight:500;
  font-size: 12px;
  letter-spacing:.2px;
  padding-top: .35rem;
  padding-bottom: .35rem;
}
.xe-navlink:hover,
.xe-navlink:focus{
  color: #fff !important;
}

.xe-toggler{
  border: 1px solid rgba(255,255,255,.15);
}
.navbar-toggler-icon{
  filter: invert(1);
  opacity:.9;
}

.xe-btn-outline{
  color:#fff;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  padding: .45rem .95rem;
  font-weight:600;
  font-size: 12px;
}
.xe-btn-outline:hover,
.xe-btn-outline:focus{
  background: rgba(255,255,255,.10);
  color:#fff;
  border-color: rgba(255,255,255,.40);
}

.xe-social{
  display:flex;
  gap: .55rem;
  align-items:center;
}
.xe-social-link{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.xe-social-link svg{
  width:14px;
  height:14px;
  fill: rgba(255,255,255,.88);
}
.xe-social-link:hover,
.xe-social-link:focus{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}

/* Hero */
.xe-hero{
  padding: 58px 0 30px;
  text-align:center;
}
.xe-hero-inner{
  max-width: 700px;
  margin: 0 auto 80px;
}
.xe-hero-inner h1{
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 0 10px;
    font-size: 50px;
}
.xe-hero-inner p{
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
  margin: 15px auto 0;
  max-width: 640px;
}
.glg-4 {
  margin-bottom: 100px;
}

.xe-legislation{
  margin-top: 18px;
}

.xe-container-1 {
  max-width: 1280px;
  margin-top: 10px;
}

.col-12-col-md {
  flex: 0 0 auto;
  width: 20%;
}

.xe-legislation h3{
  margin-top: 35px;
  font-weight: bold;
  margin: 50px 0 50px 0;
}

.xe-eyebrow{
  color: rgba(255,255,255,.86);
  font-weight: 600;
  font-size: 17px;
}

.xe-chip{
  display:block;
  align-items:center;
  justify-content:space-between;
  padding: 30px 14px;
  border-radius: 14px;
  background: #19142a;
  border: 1px solid #a9a8ad;
  text-decoration:none;
  color:#fff;
  min-height: 180px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.xe-chip > h5 {
    font-size: 16px;
    font-weight: bold;
    padding: 0 20px;
    height: 64px;
    margin-bottom: 24px;
}

.btncommon-pert {
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 5px 20px;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-size: 14px;
    border-radius: 8px;
}

.xe-chip span:first-child{
  font-weight: 600;
  font-size: 12px;
}
.xe-chip-cta{
  font-size: 11px;
  font-weight: 700;
  color: var(--xe-accent);
}
.xe-chip:hover,
.xe-chip:focus{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
  color:#fff;
}

.xe-search{
  max-width: 560px;
  margin: 0 auto;
}
.xe-search-input{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: 15px !important;
  height: 50px;
}
.xe-search-input::placeholder{
  color: rgba(255,255,255,.55);
}
.xe-search-input:focus{
  background: rgba(255,255,255,.09);
  border-color: rgba(204,25,151,.55);
  box-shadow: 0 0 0 .25rem rgba(204,25,151,.18);
  color:#fff;
}

.xe-btn-primary{
  background: var(--xe-accent);
  border-color: var(--xe-accent);
  color: #fff;
  border-radius: 0 14px 14px 0;
  font-weight: 700;
  letter-spacing: .2px;
}
.xe-btn-primary:hover,
.xe-btn-primary:focus{
  background: #b41683;
  border-color: #b41683;
  color:#fff;
}

.xe-search-hint{
  font-size: 11px;
  color: rgba(255,255,255,.60);
}

/* Tabs */
.xe-content{
  padding: 18px 0 42px;
}

.xe-tabs{
  margin-top: 6px;
  gap: 28px;
  border-bottom: 2px solid rgb(124 124 124 / 46%);
}
.xe-tabs .nav-link{
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.80);
  font-weight: 700;
  font-size: 28px;
  padding: 14px 0 12px;
  position: relative;
  border-radius: 0;
  letter-spacing: 1px;
}
.xe-tabs .nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:6px;
  border-radius: 0px;
  background: transparent;
}
.xe-tabs .nav-link.active{
  color:#cc1997;
}
.xe-tabs .nav-link.active::after{
  background: var(--xe-accent-2);
}
.xe-tabs .nav-link:focus-visible{
  outline: 3px solid rgba(204,25,151,.35);
  outline-offset: 4px;
}

/* Tab content list */
.xe-tabpanes{
  padding-top: 22px;
}
.xe-items{
  max-width: 1024px;
  margin: 0 auto;
}
.xe-item{
  padding: 25px 0 30px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.xe-item:last-child{
  border-bottom: 0;
}

.xe-item-title{
  font-size: 25px;
  font-weight: 600;
  margin: 0 0 16px;
}
.xe-item-body{
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.80);
}
.xe-meta{
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255,255,255,.70);
}
.xe-meta strong{
  color: #fff;
  font-weight: 700;
}

.xe-empty-state{
  padding: 22px 0;
  text-align:center;
  color: rgba(255,255,255,.75);
  font-size: 12px;
}

/* Footer */
.xe-footer{
  background: rgba(26,22,48,.70);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 32px 0;
}
.xe-foottext{
  color: rgba(255,255,255,.70);
  font-size: 12px;
  line-height: 1.6;
  max-width: 330px;
}
.xe-foothead{
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 10px;
}
.xe-footlinks a{
  color: rgba(255,255,255,.72);
  text-decoration:none;
  font-size: 12px;
  line-height: 2.0;
}
.xe-footlinks a:hover,
.xe-footlinks a:focus{
  color:#fff;
  text-decoration: underline;
}
.xe-footer-cta{
  border-radius: 999px;
  padding: .6rem 1.1rem;
}
.xe-foot-divider{
  border-color: rgba(255,255,255,.10);
  opacity:1;
}
.xe-footnote{
  color: rgba(255,255,255,.62);
  font-size: 11px;
}
.xe-footnote a{
  color: rgba(255,255,255,.72);
  text-decoration:none;
}
.xe-footnote a:hover,
.xe-footnote a:focus{
  color:#fff;
  text-decoration: underline;
}

.xe-legislation h3 {
 color: #fff;
}
.xe-item > p {
  color: #fff;
  margin-top: 15px;
}
.xe-item-title {
  color: #fff;
}
.glossary-card > p {
  color: #fff;
}

/* Responsive tweaks (match the JPG density) */

@media only screen and (min-width: 320px) and (max-width: 551px){
.navbar-toggler-icon{filter: none !important;}
.navbar-dark .navbar-toggler{margin-right: -3px !important;}
.xe-hero-inner {margin: 0 auto 40px;}
.xe-hero-inner h1{font-size: 40px;}
.xe-hero-inner p{line-height: inherit;}
.xe-container {margin-top: 70px;}
.xe-legislation h3{margin: 0px 0 30px 0;color: #fff;font-size: 25px;}
.lom-5{width: 100%;}
.xe-chip{min-height: 130px;}
.xe-chip > h5{height: 15px;}
.xe-hero{padding: 58px 0 0px;}
.glg-4 {margin-bottom: 30px;}
.xe-tabs .nav-link{font-size: 18px;max-width: 140px;}
.xe-tabs{gap: 0px;}
.xe-item-title{font-size: 22px; color: #fff;line-height: inherit;}
.xe-item > p {color: #fff;} .glossary-card > p{color: #fff;}
.xe-container-1{padding-left: 0px;padding-right: 0px;}
.nav-item{margin: 5px 0px !important;}
.col-12-col-md {width: 100%;}
}

@media only screen and (min-width:552px) and (max-width:767px) {
.navbar-toggler-icon{filter: none !important;}
.navbar-dark .navbar-toggler{margin-right: -3px !important;}
.xe-hero-inner {margin: 0 auto 40px;}
.xe-hero-inner h1{font-size: 40px;}
.xe-hero-inner p{line-height: inherit;}
.xe-container {margin-top: 70px;}
.xe-legislation h3{margin: 0px 0 30px 0;color: #fff;font-size: 25px;}
.lom-5{width: 100%;}
.xe-chip{min-height: 130px;}
.xe-chip > h5{height: 15px;}
.xe-hero{padding: 58px 0 0px;}
.glg-4 {margin-bottom: 30px;}
.xe-tabs .nav-link{font-size: 18px;max-width: 140px;}
.xe-tabs{gap: 0px;}
.xe-item-title{font-size: 22px; color: #fff;line-height: inherit;}
.xe-item > p {color: #fff;} .glossary-card > p{color: #fff;}
.xe-container-1{padding-left: 0px;padding-right: 0px;}
.nav-item{margin: 5px 0px !important;}
}

@media only screen and (min-width:768px) and (max-width:1300px) {
.xe-hero-inner h1{font-size: 40px;}
.xe-container{margin-top: 60px;}
.xe-legislation h3{font-size: 25px; color: #fff;}
.xe-hero-inner{margin: 0 auto 40px;}
.xe-chip > h5{padding:0 0px;height:50px;margin-bottom:24px;}
.xe-chip{padding: 30px 14px 20px;min-height: 170px;}
.glg-4 {margin-bottom: 20px;}
.xe-tabs{gap: 10px;}
.xe-tabs .nav-link{font-size: 25px !important;}
.xe-container-1{padding-left: 0px; padding-right: 0px;}
.xe-item-title{color: #fff;}
.xe-item > p {color: #fff;}
.glossary-card > p {color: #fff;}

}