@charset "utf-8";
/* CSS Document */
:root {
  --brand-blue:#18468b;
  --brand-blue-dark:#0b5ed7;
}

/* ================= HEADER ================= */
.top-bar {
  background:var(--brand-blue);
  color:#fff;
  position: relative;
}
.top-title {
  font-family: "Plus Jakarta Sans", sans-serif;    
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
}
.logo-space {
  width:140px;
  height:40px;
  background:rgba(255,255,255,.25);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Plus Jakarta Sans", sans-serif;
}
    
h6 {line-height: 25px;}
p {font-family: "Open Sans", sans-serif;}    
li {font-family: "Open Sans", sans-serif; }    
small {font-family: "Open Sans", sans-serif; }        
    
/* ================= DRAWERS ================= */
.drawer-link {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem 1rem;
  border-radius:12px;
  color:var(--bs-body-color);
  text-decoration:none;
  transition:.25s;
}
.drawer-link:hover {
  background:rgba(13,110,253,.1);
  color:var(--brand-blue);
  transform:translateX(4px);
}
.drawer-link.active {
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark));
  color:#fff;
}

/* ================= ACCORDION ================= */
.accordion-item {
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(13,110,253,.15);
  box-shadow:0 14px 35px rgba(0,0,0,.08);
  margin-bottom:1.5rem;
}
.accordion-button {
  background:linear-gradient(135deg,rgba(13,110,253,.12),rgba(13,110,253,.02));
  font-weight:600;
  transition:.35s;
}
.accordion-button:not(.collapsed) {
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark));
  color:#fff;
}
.accordion-body {
  animation:fadeSlide .35s ease;
}
@keyframes fadeSlide {
  from {opacity:0;transform:translateY(-8px);}
  to {opacity:1;transform:none;}
}

/* ================= LINK BOXES (LIST STYLE) ================= */
.link-box {
  display: block;
  background: var(--bs-body-bg);
  padding: 1rem;
  border-radius: 18px;
  text-decoration: none;
  color: var(--bs-body-color);
  box-shadow: 0 18px 45px rgba(0,0,0,.1);
  transition: .25s ease;
  height: 100%;
  border: 1px solid rgba(13,110,253,.15);
}

.link-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}

/* Header row */
.link-box-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
  font-family: "Plus Jakarta Sans", sans-serif;    
}

.link-box-header i {
  color: var(--brand-blue);
  flex-shrink: 0;
}

.link-box-header h5 {
  margin: 0;
  font-weight: 600;
}

/* Demo links list */
.link-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-box ul li {
  margin-bottom: .1rem;
}

.link-box ul li:last-child {
  margin-bottom: 0;
}

.link-box ul a {
  display: block;
  padding: .4rem .5rem .4rem .5rem;
  border-radius: 8px;
  font-size: .9rem;
  color: var(--bs-body-color);
  text-decoration: none;
  transition: all .2s ease;
}

/* Hover */
.link-box ul a:hover {
  background: rgba(13,110,253,.1);
  color: var(--brand-blue);
  padding-left: .75rem;
}

/* Active */
.link-box ul a.active {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  color: #fff;
  font-weight: 500;
}

.small_red {
    font-weight: bolder;
    color: #981b1e;
    font-size: .875em;  
        
    }
    
/* ================= CUSTOM PILLS ================= */    
    
 .pill-md {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.2rem 0.5rem;  
  font-size: 0.75rem;    
  font-weight: 500;

  color: #ffffff;
  background-color: #981b1e; 
  border-radius: 50rem;

  line-height: 1;
  white-space: nowrap;
}
/* Hover (optional) */
.pill-md:hover {
  opacity: 0.9;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .pill-md {
    background-color: #f24863; /* softer primary for dark UI */
    color: #ffffff;
  }
}   
.pill-success { background-color: #198754; }
.pill-danger  { background-color: #dc3545; }
.pill-dark    { background-color: #212529; }

@media (prefers-color-scheme: dark) {
  .pill-success { background-color: #2ea66f; }
  .pill-danger  { background-color: #e35d6a; }
  .pill-dark    { background-color: #343a40; }
}
/* ================= FOOTER ================= */
footer {
  background:var(--brand-blue);
  color:#fff;
}
footer a {
  color:#e6f0ff;
  margin:0 .75rem;
  text-decoration:none;
}
footer a:hover {
  color:#fff;
  text-decoration:underline;
}

/* ================= GO TOP ================= */
#toTop {
  position:fixed;
  bottom:20px;
  right:20px;
  display:none;
  z-index:999;
}

/* ================= HEATMAP ================= */
.heat-dot {
  position:absolute;
  width:18px;
  height:18px;
  background:rgba(255,255,255,.35);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
}
    
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-color: #dadada;
  font: "Open Sans", sans-serif;    
}

main {
  flex: 1 0 auto;
}

footer {
  margin-top: auto;
}

/* ================= DARK MODE OVERRIDES  ================= */

html[data-bs-theme="dark"] {

  /* -------- Core Colors -------- */
  --brand-blue: #4c8dff;
  --brand-blue-dark: #004280;
}

/* -------- Body -------- */
html[data-bs-theme="dark"] body {
  background-color: #0f172a;
  color: #e5e7eb;
}

/* -------- Header -------- */
html[data-bs-theme="dark"] .top-bar {
  background: linear-gradient(
    135deg,
    #1e3a8a,
    #1d4ed8
  );
}

/* -------- Drawers -------- */
html[data-bs-theme="dark"] .offcanvas {
  background-color: #020617;
  color: #e5e7eb;
}

html[data-bs-theme="dark"] .drawer-link {
  color: #e5e7eb;
}

html[data-bs-theme="dark"] .drawer-link:hover {
  background: rgba(76,141,255,.15);
  color: #93c5fd;
}

html[data-bs-theme="dark"] .drawer-link.active {
  background: linear-gradient(
    135deg,
    var(--brand-blue),
    var(--brand-blue-dark)
  );
  color: #fff;
}

/* -------- Accordions -------- */
html[data-bs-theme="dark"] .accordion-item {
  background-color: #020617;
  border-color: rgba(76,141,255,.25);
  box-shadow: 0 18px 45px rgba(0,0,0,.6);
}

html[data-bs-theme="dark"] .accordion-button {
  background: linear-gradient(
    135deg,
    rgba(76,141,255,.18),
    rgba(76,141,255,.05)
  );
  color: #e5e7eb;
}

html[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background: linear-gradient(
    135deg,
    var(--brand-blue),
    var(--brand-blue-dark)
  );
  color: #fff;
}

html[data-bs-theme="dark"] .accordion-body {
  background-color: #020617;
  color: #cbd5f5;
}

/* -------- Expandable Boxes -------- */
html[data-bs-theme="dark"] .expand-card {
  background-color: #020617;
  border-color: rgba(76,141,255,.25);
  box-shadow: 0 22px 60px rgba(0,0,0,.7);
}

html[data-bs-theme="dark"] .expand-body {
  background-color: #020617;
  color: #cbd5f5;
}

/* -------- Link Boxes -------- */
html[data-bs-theme="dark"] .link-box {
  background-color: #020617;
  border-color: rgba(76,141,255,.25);
  box-shadow: 0 22px 60px rgba(0,0,0,.7);
}

html[data-bs-theme="dark"] .link-box ul a {
  color: #e5e7eb;
}

html[data-bs-theme="dark"] .link-box ul a:hover {
  background: rgba(76,141,255,.18);
  color: #93c5fd;
}

html[data-bs-theme="dark"] .link-box ul a.active {
  background: linear-gradient(
    135deg,
    var(--brand-blue)
  
  );
  color: #fff;
}

/* -------- Footer -------- */
html[data-bs-theme="dark"] footer {
  background: linear-gradient(
    135deg,
    #1e3a8a,
    #1d4ed8
  );
}

html[data-bs-theme="dark"] footer a {
  color: #c7d2fe;
}

html[data-bs-theme="dark"] footer a:hover {
  color: #ffffff;
}

/* -------- Go To Top -------- */
html[data-bs-theme="dark"] #toTop {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue-dark);
}
    
    
/* ================= CONNECTED ALT ACCORDIONS ================= */

.alt-wrapper {
  border-radius: 16px;
  overflow: hidden;
}

/* Header button */
.alt-accordion {
  width: 100%;
  text-align: left;
  background: var(--bs-body-bg);
  border: 1px solid rgba(13,110,253,.15);
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 14px 35px rgba(0,0,0,.08);
  transition: all .25s ease;
}

.alt-accordion:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(0,0,0,.14);
}

/* Remove bottom radius when open */
.alt-accordion[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Header layout */
.alt-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.alt-header i.bi-bootstrap-fill {
  font-size: 2rem;
  color: var(--brand-blue);
}

.alt-header h5 {
  margin: 0;
  font-weight: 600;
}

.alt-header small {
  display: block;
  color: var(--bs-secondary-color);
}

.alt-header .bi-caret-down-fill {
  transition: transform .35s ease;
    color: #18468b;
}
.bi-caret-right-fill {
    color: #18468b;
    }
    
.alt-accordion[aria-expanded="true"] .bi-caret-down-fill {
  transform: rotate(180deg);
}
    
.hr-responsive {
  border: 0;
  height: 1px;
  width: 100%;
  margin: 1rem 0;

  background-color: #000; /* Bootstrap light border */
  opacity: .25;
}

/* Slightly thicker on larger screens */
@media (min-width: 768px) {
  .hr-responsive {
    height: 2px;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .hr-responsive {
    background-color: #FFFFFF;
  }
}    

/* Body */
.alt-body {
  background: var(--bs-gray-100);
  border: 1px solid rgba(13,110,253,.15);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 1.25rem 1.5rem;
  animation: altFade .35s ease;
}

/* Steps */
.alt-steps {
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: #f6f7ff;
  border-left: 4px solid var(--brand-blue);
  border-radius: 8px;
}

/* Platform buttons */
.platform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}

.platform-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  font-size: .85rem;
  border-radius: 999px;
  background: #def0ff;
  border: 1px solid #18468b;
  color: var(--bs-body-color);
  transition: all .2s ease;
  font-family: "Plus Jakarta Sans", sans-serif;    
 font-weight: 600;  
}

.platform-btn i {
  color: var(--brand-blue);
}

.platform-icon {
  width: 18px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* Hover / Active */
.platform-btn:hover {
  background: rgba(13,110,253,.1);
  color: var(--brand-blue);
}

.platform-btn:active {
  background: linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark));
  color: #fff;
}

@keyframes altFade {
  from { opacity:0; transform:translateY(-6px); }
  to { opacity:1; transform:none; }
}

/* ================= DARK MODE – CONNECTED ALT ACCORDIONS ================= */

html[data-bs-theme="dark"] .alt-accordion {
  background-color: #020617;
  border-color: rgba(76,141,255,.35);
  box-shadow: 0 22px 60px rgba(0,0,0,.75);
  color: #e5e7eb;
}

html[data-bs-theme="dark"] .alt-accordion:hover {
  box-shadow: 0 28px 70px rgba(0,0,0,.85);
}

html[data-bs-theme="dark"] .alt-header i.bi-bootstrap-fill {
  color: var(--brand-blue);
}

html[data-bs-theme="dark"] .alt-header small {
  color: #94a3b8;
}

/* Chevron */
html[data-bs-theme="dark"] .alt-header .bi-caret-down-fill {
  color: #c7d2fe;
}

/* Expanded body */
html[data-bs-theme="dark"] .alt-body {
  background-color: #020617;
  border-color: rgba(76,141,255,.35);
  color: #cbd5f5;
}

/* Steps box */
html[data-bs-theme="dark"] .alt-steps {
  background: rgba(76,141,255,.15);
  border-left-color: var(--brand-blue);
  color: #e5e7eb;
}

/* Platform buttons */
html[data-bs-theme="dark"] .platform-btn {
  background-color: #020617;
  border-color: rgba(76,141,255,.35);
  color: #e5e7eb;
}

html[data-bs-theme="dark"] .platform-btn i {
  color: #93c5fd;
}

/* Hover */
html[data-bs-theme="dark"] .platform-btn:hover {
  background: rgba(76,141,255,.18);
  color: #93c5fd;
}

/* Active */
html[data-bs-theme="dark"] .platform-btn:active {
  background: linear-gradient(
    135deg,
    var(--brand-blue),
    var(--brand-blue-dark)
  );
  color: #ffffff;
}

html[data-bs-theme="dark"] .platform-btn:active i {
  color: #ffffff;
}

/* Custom icon image */
html[data-bs-theme="dark"] .platform-icon {
  filter: brightness(1.15);
}
   
/* ===== DARK MODE – PLATFORM BUTTONS ===== */

html[data-bs-theme="dark"] .platform-btn {
  background-color: #020617;            /* very dark navy */
  border: 1px solid rgba(76,141,255,.35);
  color: #e5e7eb;
  transition: all .2s ease-in-out;
}

/* Icons in dark mode default */
html[data-bs-theme="dark"] .platform-btn i,
html[data-bs-theme="dark"] .platform-btn .platform-icon {
  color: #93c5fd;
  filter: brightness(1.1);
}

/* RED HOVER in dark mode */
html[data-bs-theme="dark"] .platform-btn:hover {
  background-color: #b20d35;
  border-color: #b20d35;
  color: #ffffff;
}

/* Make icons white on hover */
html[data-bs-theme="dark"] .platform-btn:hover i,
html[data-bs-theme="dark"] .platform-btn:hover .platform-icon {
  filter: brightness(0) invert(1);
}

/* Active / pressed state */
html[data-bs-theme="dark"] .platform-btn:active {
  background-color: #8f0a2a;
  border-color: #8f0a2a;
  color: #ffffff;
}    
    
/* Keep custom images crisp in dark mode too */
html[data-bs-theme="dark"] .platform-btn:hover img.platform-icon {
  filter: none !important;
  opacity: 1;
}    
/* ================= RESPONSIVE LOGO SAFETY ================= */

/* Default (desktop) */
.top-bar img {
  max-height: 40px;
  width: auto;
}

/* Tablets */
@media (max-width: 992px) {
  .top-bar img {
    max-height: 34px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .top-bar img {
    max-height: 25px;
  }

  .top-title {
    font-size: 1.1rem;
  }
}    

/* Custom navy color */
.bg-navy {
  background-color: #0b1f5c; /* deep navy */
}

/* Medium-sized pill */
.pill-md {
  padding: .55rem .95rem;
  font-size: .85rem;
  border-radius: 50rem; /* full pill shape */
  font-weight: 600;
}
    
/* ===== ALTERNATE RED HOVER FOR PLATFORM BUTTONS ===== */

.platform-btn {
  transition: all .2s ease-in-out;
}

/* Hover state */
.platform-btn:hover {
  background-color: #b20d35;
  border-color: #b20d35;
  color: #ffffff;
}

/* Keep icons readable on hover */
.platform-btn:hover i,
.platform-btn:hover img.platform-icon {
  filter: brightness(0) invert(1);
}

/* Active / pressed state */
.platform-btn:active {
  background-color: #8f0a2a;
  border-color: #8f0a2a;
  color: #ffffff;
}    
.platform-btn:hover img.platform-icon {
  filter: none !important;
  opacity: 1;
}
.platform-icon {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}    
/* ===== PDF NOTICE UNDER STEPS ===== */

.pdf-notice {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: rgba(11, 31, 92, 0.06); /* very soft navy wash */
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9rem;
}

.pdf-notice i {
  font-size: 1.1rem;
  color: #a31f34;
}

.pdf-link {
  font-weight: 600;
  text-decoration: underline;
  color: #0b1f5c;
}

.pdf-link:hover {
  color: #b20d35; /* matches your new red hover style */
}