@charset "utf-8";
/* CSS Document */

:root{
      --marker-size: 26px;
      --marker-bg: #ffd400;
      --marker-text: #111;
      --marker-border: rgba(0,0,0,.55);
      --found-bg: #2ecc71;
      --found-text: #0b2b14;

      --bg: #0b0c10;
      --card: rgba(255,255,255,.06);
      --border: rgba(255,255,255,.12);
      --text: #000925;
      --muted: #aab3c2;
    }

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

html{
  scroll-behavior: smooth;
}

    .wrap{
      max-width: 1100px;
      margin: 0 auto;
      padding: 18px 14px 26px;
    }

    .topbar{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
      padding: 12px 12px;
      border: 1px solid var(--border);
      background: var(--card);
      border-radius: 14px;
      margin-bottom: 14px;
    }

    .title{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .title h1{
      font-size: 22px;
      margin:0;
      line-height:1.2;
    }
    .title .sub{
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
    }

    .spacer{ flex:1; }

    .btn{
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      color: #fff;
      padding: 8px 10px;
      border-radius: 10px;
      cursor:pointer;
      font-size: 13px;
      white-space:nowrap;
    }
    .btn:hover{ background: rgba(255,255,255,.12); }

    .pill{
      font-size: 12px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      padding: 7px 10px;
      border-radius: 999px;
      white-space:nowrap;
    }

    .map-wrap{
      display:flex;
      justify-content:center;
      align-items:flex-start;
    }
    .map{
      position: relative;
      width: min(900px, 100%);
      user-select:none;
    }
    .map img{
      width:100%;
      height:auto;
      display:block;
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      -webkit-user-drag:none;
    }

    .marker{
      position:absolute;
      width: var(--marker-size);
      height: var(--marker-size);
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: var(--marker-bg);
      color: var(--marker-text);
      border: 1px solid var(--marker-border);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 800;
      font-size: 12px;
      cursor:pointer;
      box-shadow: 0 6px 16px rgba(0,0,0,.35);
      user-select:none;
    }
    .marker:hover{ transform: translate(-50%, -50%) scale(1.06); }
    .marker.found{
      background: var(--found-bg);
  color: var(--found-text);
  opacity: .92;
    }


    /* Optional collapsible list (hidden by default) */
    .drawer{
      margin-top: 12px;
      border: 1px solid var(--border);
      background: var(--card);
      border-radius: 14px;
      overflow:hidden;
      display:none;
    }
    .drawer.open{ display:block; }

    .drawer-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      font-size: 13px;
    }
    .drawer-body{
      max-height: 280px;
      overflow:auto;
      padding: 10px 12px 12px;
    }
    .list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
    .item{
      display:flex; align-items:center; gap:10px;
      padding: 10px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      cursor:pointer;
    }
    .item input{ width: 18px; height:18px; accent-color: var(--found-bg); cursor:pointer; }
    .item .label{ font-size:13px; color: var(--text); }
    .item.found{ border-color: rgba(46,204,113,.35); background: rgba(46,204,113,.12); }

    @media (max-width: 520px){
      :root{ --marker-size: 24px; }
      .title .sub{ display:none; }
    }




.pl-45 {
	padding-left: 45px;
}

a.bluelink{
  color: #FFD400;          /* cornflower blue */
  text-decoration: none;
  font-weight: 500;
}

a.bluelink:hover{
  color: #4a79d8;
  text-decoration: underline;
}

a.bluelink:visited{
  color: #5b7fcf;
}

a.bluelink:focus,
a.bluelink:active{
  color: #3f6fc4;
  outline: none;
}

.custom-list li{
  font-size: 14px;
  color: #aab3c2;
  list-style: disc;
  margin-left: 0px;
}
.custom-list li a{
  color:#34C46E;
  text-decoration:none;
}

.custom-list li a:hover{
  text-decoration:underline;
}

.jump-link{
  color:#3f6fc4;
  font-size:12px;
  text-decoration:none;
}

.jump-link:hover{
  text-decoration:underline;
}

#intel-videos{
  scroll-margin-top: 80px; /* adjust to header height */
}

hr{
  border: none;
  border-top: 1px dashed #efefef;
}

/* Checklist + Clear Found buttons */
#toggleListBtn,
#resetFoundBtn {
  background-color: #DDB724;
  color: #292D32;
  border: none;
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover / focus */
#toggleListBtn:hover,
#resetFoundBtn:hover,
#toggleListBtn:focus,
#resetFoundBtn:focus {
  background-color: #FFE281;
  color: #292D32;
  outline: none;
}

/* Optional: active click state */
#toggleListBtn:active,
#resetFoundBtn:active {
  background-color: #DDB724;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}
.pill#stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 32px;               /* matches button height */
  padding: 6px 14px;

  border: 1px solid #DDB724;
  border-radius: 4px;

  background: transparent;
  color: #292D32;
  font-size: 14px;
  font-weight: 500;

  margin-left: 6px;
  box-sizing: border-box;
}

.text-small {
  font-size: 14px;
  line-height: 1.4;
}
.heart {
  color: #EE1A47;
}
.vial {
  color: #2868d9;
}

.hide-mobile {
  display: block;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}
.hide-desktop {
  display: none;
}

@media (max-width: 768px) {
  .hide-desktop {
    display: block;
  }
}

/* Base checklist item (NOT found) */
.drawer .list .item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  margin-bottom: 8px;

  background-color: #F7F7F7;     /* parchment color */
  border-radius: 8px;

  border: 1px solid #d6caa7;     /* slightly darker edge */
}

/* Found (checked) items */
.drawer .list .item.found {
  background-color: #E8F9EE;     /* your green */
  border-color: #9fe0b6;
}

/* Checkbox alignment */
.drawer .list .item input[type="checkbox"] {
  margin: 0;
}

/* Label text */
.drawer .list .item .label {
  font-size: 14px;
  color: #292D32;
}

/* Optional hover for not-found */
.drawer .list .item:not(.found):hover {
  background-color: #EFE7CF;
}






/* Bottom section with Banner Ad */

.two-col-horizontal {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.two-col-horizontal .col {
  flex: 1;
}

/* Right column acts like an ad slot */
.image-col {
  display: flex;
  justify-content: center;   /* centers ad container */
}

/* Banner/ad wrapper */
.ad-wrapper {
  max-width: 336px;          /* banner width */
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Image safety */
.ad-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mobile stacking */
@media (max-width: 768px) {
  .two-col-horizontal {
    flex-direction: column;
  }

  .image-col {
    margin-top: 20px;
  }
}














/* Fixed header bar */
.site-header-fixed{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 92px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5; /* light line at top */
  box-shadow: none;
  z-index: 99999;
  transition: box-shadow 0.25s ease, border-bottom 0.25s ease;
}
.site-header-fixed.is-scrolled{
  border-bottom: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* Centered inner container */
.site-header-inner{
  max-width: 1200px;
  margin: 0 auto;
  height: 92px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Left logo column */
.site-header-left{
  width: 260px;
  display: flex;
  align-items: center;
}

.site-logo-link{
  display: inline-block;
}

.site-logo-img{
  max-height: 58px;
  width: auto;
  display: block;
}

/* Right ad column */
.site-header-right{
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Ad box */
.site-ad-slot{
  width: 728px;
  height: 90px;
}

/* Push content below fixed header */
.page-wrap{
  padding-top: 92px;
}

/* Mobile layout */
@media (max-width: 768px){
  .site-header-fixed{
    height: auto;
  }

  .site-header-inner{
    height: auto;
    flex-direction: column;
    padding: 10px 12px;
    gap: 10px;
  }

  .site-header-left,
  .site-header-right{
    width: 100%;
    justify-content: center;
  }
	
  .site-logo-img{
    max-height: 36px;
  }

  .site-ad-slot{
    width: 100%;
    max-width: 320px;
    height: 50px;
  }

  .page-wrap{
    padding-top: 90px;
  }
}










/* Make checklist horizontal */

/* Each intel item */
.drawer-body .item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 10px;
  white-space: nowrap;
}

/* Checkbox alignment */
.drawer-body .item input[type="checkbox"] {
  flex-shrink: 0;
}

/* Optional: highlight found */
.drawer-body .item.found {
  background: rgba(63, 111, 196, 0.15);
  border-radius: 6px;
}


.drawer-body .list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px 8px;
}

@media (max-width: 900px) {
  .drawer-body .list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .drawer-body .list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.video-link {
  margin-left: 6px;
  font-size: 11px;
  color: #3f6fc4;
  text-decoration: none;
}

.video-link:hover {
  text-decoration: underline;
}


.label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}



/* Force checklist section to always be visible */
#video-checklist {
  display: block;
}

/* Disable drawer behavior */
.drawer {
  position: relative;
  transform: none !important;
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent;
  box-shadow: none;
}

/* Optional: hide the Close button since it's no longer needed */
#closeDrawerBtn {
  display: none;
}








.site-footer {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #797979;
}

/* Top disclaimer section */
.footer-top {
  background: #2b2b2b;
  padding: 22px 0;
}

.footer-top p {
  margin: 0 0 14px 0;
}

.footer-top p:last-child {
  margin-bottom: 0;
}

/* Bottom bar */
.footer-bottom {
  background: #1c1c1c;
  border-top: 1px solid #333;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
}

/* Left side */
.footer-left {
  font-size: 12px;
}

/* Right side links */
.footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-right a {
  color: #9a9a9a;
  text-decoration: none;
  font-size: 12px;
}

.footer-right a:hover {
  text-decoration: underline;
}

.footer-sep {
  color: #666;
}

/* Mobile stacking */
@media (max-width: 575px) {
  .footer-bottom-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}







.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container,
  .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container,
  .container-sm,
  .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1320px;
  }
}