/* 1. IMPORTS & VARIABLES */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=Space+Grotesk:wght@300;700&display=swap");

:root {
  --primary-teal: #1d7989;
  --surface-dark: #0f172a;
  --surface-light: #fcf9f8;
  --font-technical: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 2. BASE & TYPOGRAPHY */
body {
  font: 400 1rem/1.6 var(--font-body);
  color: #1e293b;
  background-color: #020617;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 40px 70px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 50px 160px, #fff, transparent), radial-gradient(1px 1px at 80px 120px, #fff, transparent),
    radial-gradient(1px 1px at 110px 10px, #fff, transparent), radial-gradient(1.5px 1.5px at 150px 50px, #fff, transparent),
    radial-gradient(1px 1px at 190px 90px, #fff, transparent);
  background-size: 200px 200px;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.module-title {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
label,
.field-entry-label,
input,
select,
textarea {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
}

/* 3. LAYOUT & CONTAINERS */
.container-component,
.container-sidebar-right,
.container-sidebar-left {
  background: var(--surface-light);
  border: 1px solid #e2e8f0;
  padding: 2rem;
}
.container-sidebar-right,
.container-sidebar-left {
  align-self: start !important;
}

.card,
.module {
  border: 1px solid #cbd5e1 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--primary-teal);
  border-left: 2px solid var(--primary-teal);
}

/* 4. HEADER & LOGO */
.header {
  background: var(--surface-dark) !important;
  border-bottom: 2px solid var(--primary-teal) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
}
.container-nav {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  min-height: 90px !important;
}
#mod-custom127 p {
  margin: 0 !important;
}
#mod-custom127 img {
  max-width: 100%;
  height: 50px !important;
  filter: invert(1) brightness(200%);
  border-left: 4px solid var(--primary-teal);
  padding-left: 10px;
  display: block;
  transform: translateY(2px);
}

/* 5. METISMENU DROPDOWN (DESKTOP) */
.header .mod-menu ul.mm-collapse {
  background: var(--primary-teal) !important;
  border: 1px solid #000 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 100% !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1000 !important;
}
.header .mod-menu li.parent,
.header .mod-menu li.metismenu-item.level-1 {
  position: relative !important;
}
.header .mod-menu ul.mm-collapse > li.metismenu-item {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}
.header .mod-menu ul.mm-collapse > li.metismenu-item > a {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 10px 15px !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
  font: 700 0.75rem var(--font-technical) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  height: auto !important;
}
.header .mod-menu ul.mm-collapse > li.metismenu-item:last-child > a {
  border-bottom: none !important;
}
.header .mod-menu ul.mm-collapse > li.metismenu-item > a:hover {
  background: var(--surface-dark) !important;
  color: var(--primary-teal) !important;
  box-shadow: none !important;
}

/* 6. DESKTOP CLUSTER (1400px+) */
@media (min-width: 1400px) {
  .container-nav {
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
  }
  .container-nav > *,
  .header .mod-menu li {
    margin: 0 !important;
    padding: 0 !important;
  }
  .container-nav > * {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .header .mod-menu {
    display: flex !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header .mod-menu li {
    background: none !important;
  }
  .header .mod-menu li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font: 700 0.75rem var(--font-technical) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 8px 15px !important;
    height: 35px !important;
    color: #fff !important;
    background: var(--primary-teal) !important;
    border: 1px solid var(--primary-teal) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }
  .header .mod-menu li.parent > a {
    padding-right: 32px !important;
    background: var(--primary-teal)
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
      no-repeat right 12px center !important;
    background-size: 10px !important;
  }
  .header .mod-menu li.parent > a::after,
  .header .mod-menu li.parent > a::before,
  .header .mod-menu .caret,
  .header .mod-menu .mm-toggler::after,
  .header .mod-menu .mm-toggler::before,
  .header .mod-menu li.parent button * {
    display: none !important;
    content: none !important;
  }
  .header .mod-menu li.parent button.mm-toggler {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 40px !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    z-index: 10 !important;
    cursor: pointer !important;
    outline: none !important;
  }
}

/* 7. BUTTONS & HOVERS */
.btn-primary:hover,
.header .mod-menu li a:hover,
.header .mod-menu li.active > a {
  filter: brightness(1.1);
  box-shadow: 0 0 15px rgba(29, 121, 137, 0.4);
}
.header .mod-menu li a:hover,
.header .mod-menu li.active > a {
  background: var(--primary-teal) !important;
  color: #fff !important;
  border-color: var(--primary-teal) !important;
}
.btn-primary {
  background: var(--primary-teal) !important;
  border: none !important;
  border-radius: 0 !important;
  font: 700 1rem var(--font-technical);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.8rem 2rem !important;
  color: #fff;
}

/* 8. STAT GRID */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #e9ecef;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  margin: 15px 0;
  padding: 8px 0;
  text-align: center;
  gap: 12px 0;
}
.stat-box {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ccc;
}
.stat-box:nth-child(3n) {
  border-right: none;
}
.stat-box-label {
  font: 700 0.8em var(--font-body);
  color: #555;
  text-transform: uppercase;
}
.stat-box-value {
  font: 800 1.15em var(--font-body);
  color: #111;
}
.field-entry {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
.field-entry:last-of-type {
  border-bottom: none;
}

/* 9. MOBILE OVERRIDES (Max 1399px) */
@media (max-width: 1399px) {
  .header .container-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 15px !important;
    min-height: 70px !important;
  }
  #mod-custom127 {
    order: 1 !important;
    margin: 0 !important;
  }
  #mod-custom127 img {
    height: 40px !important;
    width: auto !important;
    border-left: 3px solid var(--primary-teal);
    transform: none !important;
  }
  .navbar {
    order: 2 !important;
    margin: 0 !important;
  }

  .navbar-collapse:not(.show) {
    display: none !important;
  }
  .navbar-toggler {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px !important;
    position: relative !important;
    z-index: 1100 !important;
  }
  .navbar-toggler-icon {
    filter: invert(1) brightness(200%) !important;
  }
  .header:has(.navbar-collapse.show) .navbar-toggler {
    position: fixed !important;
    top: 15px !important;
    right: 15px !important;
  }
  .header .container-search {
    display: none !important;
  }
  .header:has(.navbar-collapse.show) .container-search {
    display: block !important;
    position: fixed !important;
    top: 20px !important;
    right: 60px !important;
    width: calc(80vw - 80px) !important;
    max-width: 240px !important;
    z-index: 1100 !important;
  }
  .header:has(.navbar-collapse.show) .container-search button.btn-primary {
    display: none !important;
  }
  .header:has(.navbar-collapse.show) .container-search .awesomplete {
    width: 100% !important;
  }
  .mod-finder__search.input-group {
    background: #fff !important;
    border: 1px solid var(--primary-teal) !important;
  }
  .navbar-collapse.collapse.show {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 80vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: var(--surface-dark) !important;
    z-index: 1000 !important;
    padding: 90px 0 20px 0 !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
    overflow-y: auto !important;
  }
  .header .mod-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .header .mod-menu li {
    width: 100% !important;
    position: relative !important;
  }
  .header .mod-menu li a {
    display: block !important;
    width: 100% !important;
    padding: 15px 20px !important;
    background: var(--primary-teal) !important;
    color: #fff !important;
    font: 700 0.9rem var(--font-technical) !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    text-align: left !important;
    text-decoration: none !important;
  }
  .header .mod-menu li.parent > a {
    padding-right: 60px !important;
    background: var(--primary-teal)
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
      no-repeat right 20px center !important;
    background-size: 16px !important;
  }
  .header .mod-menu li.parent button.mm-toggler {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 60px !important;
    height: 54px !important;
    background: transparent !important;
    border: none !important;
    z-index: 10 !important;
  }
  .header .mod-menu ul.mm-collapse {
    position: static !important;
    background: rgba(0, 0, 0, 0.2) !important;
    width: 100% !important;
    border: none !important;
  }
  .header .mod-menu ul.mm-collapse li a {
    padding-left: 40px !important;
    font-size: 0.8rem !important;
    background: transparent !important;
  }
}

/* 10. FOOTER */
.footer {
  padding: 0 !important;
  background: var(--surface-dark) !important;
  border-top: 2px solid var(--primary-teal);
}
.footer-stack {
  text-align: center;
  padding: 15px 20px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px !important;
}
.footer-status {
  font: 700 1rem var(--font-technical);
  color: var(--primary-teal);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.footer-legal {
  font: 400 0.75rem/1.5 var(--font-body);
  color: #cbd5e1;
  max-width: 950px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 0 !important;
  margin: 5px 0 !important;
}
.footer-utility {
  font: 400 0.8rem var(--font-technical);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}
.footer-utility a {
  color: var(--primary-teal) !important;
  font-weight: 700;
  text-decoration: underline !important;
}
.f-sep {
  margin: 0 10px;
  opacity: 0.3;
}

/* --- 11. VENDOR DIRECTORY FULL-WIDTH OVERRIDE --- */

@media (min-width: 1400px) {
  /* 1. Define a precise custom grid */
  body.itemid-191 .site-grid {
    /* 4 Columns: Left Edge (2vw) | Main Area (5 parts) | Sidebar (1 part) | Right Edge (2vw) */
    grid-template-columns: 2vw 5fr minmax(260px, 1fr) 2vw !important;
  }

  /* 2. Assign the Component to the massive 2nd column */
  body.itemid-191 .container-component {
    grid-column: 2 / 3 !important;
  }

  /* 3. Assign the Sidebar to the tight 3rd column */
  body.itemid-191 .container-sidebar-right {
    grid-column: 3 / 4 !important;
  }
}

/* --- 12. SIDEBAR SOCIAL LINKS --- */
.social-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
}

.social-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: var(--surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff !important;
  text-decoration: none !important;
  font: 700 0.8rem var(--font-technical);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.2s ease-in-out;
}

.social-item::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Encoded SVG Icons */
.si-discord::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.198.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z'/%3E%3C/svg%3E");
}
.si-reddit::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.056 1.597.04.282.063.567.063.856 0 2.83-3.885 5.128-8.678 5.128-4.792 0-8.677-2.298-8.677-5.128 0-.285.022-.566.06-.843a1.752 1.752 0 0 1-1.043-1.61c0-.968.786-1.754 1.754-1.754.463 0 .875.18 1.179.465 1.185-.826 2.805-1.378 4.595-1.465l.794-3.714 3.12.658c-.015.07-.024.14-.024.212zm-8.87 8.924c-.61 0-1.1.49-1.1 1.1 0 .61.49 1.1 1.1 1.1.61 0 1.1-.49 1.1-1.1 0-.61-.49-1.1-1.1-1.1zm8.12 0c-.61 0-1.1.49-1.1 1.1 0 .61.49 1.1 1.1 1.1.61 0 1.1-.49 1.1-1.1 0-.61-.49-1.1-1.1-1.1zm-8.243 4.14c-.05.05-.05.132 0 .182.89.89 2.502 1.01 3.013 1.01.51 0 2.122-.12 3.012-1.01a.128.128 0 0 0 0-.182.128.128 0 0 0-.182 0c-.71.71-2.03.83-2.83.83-.8 0-2.12-.12-2.83-.83a.128.128 0 0 0-.183 0z'/%3E%3C/svg%3E");
}
.si-facebook::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}
.si-thingi::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3.328 0A3.328 3.328 0 0 0 0 3.328v17.344A3.328 3.328 0 0 0 3.328 24h17.344A3.328 3.328 0 0 0 24 20.672V3.328A3.328 3.328 0 0 0 20.672 0H3.328zM7.17 6.125h9.616l.04 2.266h-3.414v9.484h-2.833V8.391H7.17V6.125z'/%3E%3C/svg%3E");
}
.si-cults::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11.327.512c-3.806.034-7.447 3.19-7.181 7.75.102 1.547.88 3.382 2.981 5.733a.365.365 0 0 0 .635-.23l.053-2.266a.36.36 0 0 0-.1-.255 5.047 5.047 0 0 1 3.407-8.502c2.27-.104 4.011 1.236 4.753 2.744.34.693.527 1.45.55 2.222a.357.357 0 0 0 .343.344c.482.015.962.064 1.437.147a.359.359 0 0 0 .424-.344 7.237 7.237 0 0 0-2.769-5.788C15.02 1.404 13.564.52 11.327.512zm4.94 8.362a14.8 14.8 0 0 0-2.515.26.364.364 0 0 0-.17.635l1.695 1.435a.36.36 0 0 0 .316.073 5.026 5.026 0 0 1 3.123.281c1.78.787 2.92 2.414 3.042 4.304.208 3.187-2.48 5.539-5.277 5.37a5.032 5.032 0 0 1-1.751-.412.365.365 0 0 0-.443.115c-.289.385-.603.75-.94 1.094a.367.367 0 0 0 .09.573c1.887 1.073 3.936 1.16 6.014.32 3.303-1.304 4.63-4.523 4.545-6.847-.096-2.641-1.48-5.072-4.085-6.402-.921-.47-2.04-.812-3.643-.799zm-12.931 1.2a.364.364 0 0 0-.152.052c-1.41.827-2.216 2.057-2.798 3.777-.285.892-.386 1.51-.386 2.436a7.276 7.276 0 0 0 7.157 7.141c1.129.017 2.104-.235 2.962-.583 1.45-.62 3.142-1.597 4.65-4.912a.363.363 0 0 0-.459-.489l-2.365.867a.357.357 0 0 0-.195.174 5.03 5.03 0 0 1-2.268 2.224C6 22.428 2.473 19.784 2.235 16.74c-.145-1.741.494-3.053 1.37-3.982.293-.308.41-.477.663-.662a.36.36 0 0 0 .098-.471 9.173 9.173 0 0 1-.653-1.326.366.366 0 0 0-.377-.225z'/%3E%3C/svg%3E");
}
.si-youtube::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}
.si-tiktok::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}
.si-patreon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M22.957 7.21c-.004-3.064-2.391-5.576-5.191-6.482-3.478-1.125-8.064-.962-11.384.604C2.357 3.231 1.093 7.391 1.046 11.54c-.039 3.411.302 12.396 5.369 12.46 3.765.047 4.326-4.804 6.068-7.141 1.24-1.662 2.836-2.132 4.801-2.618 3.376-.836 5.678-3.501 5.673-7.031Z'/%3E%3C/svg%3E");
}

/* Hover State */
.social-item:hover {
  background: var(--primary-teal);
  border-color: var(--primary-teal);
  box-shadow: 0 0 15px rgba(29, 121, 137, 0.4);
  transform: translateX(4px);
}

/* --- 13. HOMEPAGE ABOUT SECTION --- */
.home-about-section {
  text-align: center;
  padding: 1rem 1rem 3rem 1rem;
  border-bottom: 2px solid var(--primary-teal);
}

.home-about-logo {
  max-width: 500px;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.home-about-section p {
  max-width: 1000px;
  margin: 0 auto;
  font: 400 1.1rem/1.6 var(--font-body);
  color: #334155;
}

/* --- 14. WIKI DASHBOARD --- */
.wiki-dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Tactical Panel (Quick Start Placeholder) */
.panel-tactical {
  background: var(--surface-dark);
  border: 1px solid #cbd5e1;
  border-top: 3px solid var(--primary-teal);
  color: #fff;
}

.panel-tactical .panel-header {
  background: rgba(255, 255, 255, 0.05);
  margin: 0;
  padding: 10px 15px;
  font: 700 1.2rem var(--font-technical);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-tactical .panel-body {
  padding: 20px 15px;
  color: #e2e8f0;
}

/* Section Title */
.section-title {
  border-bottom: 2px solid var(--surface-dark);
  padding-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--surface-dark);
}

/* Category Grid */
.wiki-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* Interactive Cards */
.wiki-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #cbd5e1;
  padding: 20px;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
}

.wiki-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--primary-teal);
  transition: width 0.2s ease;
}

.wiki-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-teal);
}

.wiki-card:hover::before {
  width: 100%;
  opacity: 0.05; /* Creates a subtle teal wash over the card on hover */
}

/* Card Content */
.card-icon {
  font-size: 2rem;
  color: var(--primary-teal);
  margin-bottom: 15px;
}

.card-title {
  font: 700 1.1rem var(--font-technical) !important;
  color: var(--surface-dark) !important;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.card-desc {
  font: 400 0.9rem/1.5 var(--font-body);
  color: #64748b;
  margin: 0;
}

/* --- 15. QUICK-START GRID --- */
.quickstart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Forces 3 columns on desktop */
  gap: 20px;
}

/* Tablet View: 2 Columns, 3rd Step Centered */
@media (max-width: 1399px) {
  .quickstart-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quickstart-step:last-child {
    grid-column: 1 / -1; /* Spans across both columns */
    max-width: calc(50% - 10px); /* Keeps it the exact same width as the top cards */
    justify-self: center; /* Centers it perfectly */
    width: 100%;
  }
}

/* Mobile View: 1 Column */
@media (max-width: 767px) {
  .quickstart-grid {
    grid-template-columns: 1fr;
  }

  .quickstart-step:last-child {
    max-width: 100%; /* Allows it to fill the screen on phones */
  }
}

.quickstart-step {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-number {
  background: var(--primary-teal);
  color: #fff;
  font: 700 1.2rem var(--font-technical);
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.step-title {
  font: 700 1.1rem var(--font-technical) !important;
  color: #fff !important;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.step-desc {
  font: 400 0.9rem/1.5 var(--font-body);
  color: #cbd5e1;
  margin: 0 0 20px 0;
  flex-grow: 1;
}

.quickstart-step .btn-primary {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.6rem 1rem !important;
}

/* Stacked buttons container */
.step-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.step-buttons .btn-primary {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.6rem 1rem !important;
}

/* Small divider between Quick-Start and Categories */
.wiki-divider {
  border: none;
  border-top: 2px solid #cbd5e1;
  margin: 1.5rem 0;
  width: 100%;
}

/* --- 16. AD PLACEHOLDERS FOR TESTING --- */
.ad-test-container {
  width: 100%;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ad-label {
  font: 700 0.65rem var(--font-technical);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b; /* Muted grey */
  margin-bottom: 5px;
  width: 100%;
  text-align: center;
}

.ad-content-box {
  background: #f1f5f9; /* Light grey box */
  border: 1px dashed #cbd5e1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Simulate a tall skyscraper ad for the left sidebar */
.sidebar-left .ad-content-box {
  min-height: 600px;
}

/* Simulate a rectangle ad for the bottom of the right sidebar */
.sidebar-right .ad-content-box {
  min-height: 250px;
}

.ad-fallback-graphic::before {
  content: "Ad Unit Placeholder";
  font: 600 0.8rem var(--font-technical);
  color: #94a3b8;
  text-transform: uppercase;
}

/* --- 17. GUTTER AD POSITIONING (LEFT SIDEBAR) --- */

/* Remove the white box styling from the left sidebar so the ad floats */
.container-sidebar-left {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Ensure placeholder text is visible against the dark background */
.container-sidebar-left .ad-label {
  color: #fff;
}

/* Large Screens: Push the left sidebar into the empty left margin */
@media (min-width: 1400px) {
  .site-grid > .container-sidebar-left {
    grid-column: full-start / main-start !important;
    justify-self: end; /* Push it up against the main content */
    margin-top: -15px;
    margin-right: 0px; /* Give it a little breathing room */
    width: 400px; /* Lock width for standard vertical AdSense units */
  }

  /* Force the main component to reclaim its lost width */
  .site-grid > .container-component {
    grid-column: main-start / span 3 !important;
  }
}

/* Medium Screens (Laptops up to 1399px): Force Cassiopeia into Mobile Layout */
@media (max-width: 1399px) {
  .site-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .site-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 2rem 0 !important;
  }

  /* Establish visual order: Main Content -> Right Sidebar -> Left Sidebar (Ads) */
  .site-grid > .container-component {
    order: 1 !important;
  }
  .site-grid > .container-sidebar-right {
    order: 2 !important;
  }
  .site-grid > .container-sidebar-left {
    order: 3 !important;
  }
}