html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
}

/* Main page wrapper */
.pageWrap {
  margin: 6px 40px 10px;
  padding: 2px 6px 10px;
  box-sizing: border-box;
  flex: 1;
}

/* Demo / map layout */
.demo-area {
  max-width: 600px;
  margin-bottom: 40px;
}

.mapSection {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.map-area {
  max-width: 1000px;
  margin-left: 0;
  padding-left: 0;
  height: 520px;
  position: relative;
  overflow: hidden;
  display: block;
  contain: layout paint;
}

.sidePanel {
  flex: 1 1 280px;
  min-width: 260px;
  padding: 6px 12px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
}

/* Side panel content */
#sidePanelTitle {
  font-weight: bold;
  margin-bottom: 6px;
}

#sidePanelBlurb {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
}

#sidePanelLocations {
  font-size: 13px;
  line-height: 1.5;
}

#sidePanelLocations div {
  padding: 4px 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

/* Header */
.siteHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 24px;
  letter-spacing: 1px;
  margin-bottom: 0;
  width: 100%;
  font-family: "Courier New", Courier, monospace;
}

.subtitle {
  padding: 3px 2px 3px;
  margin-top: 0;
  font-size: 14px;
  font-style: italic;
  font-family: "Courier New", Courier, monospace;
  transition: opacity 0.8s ease;
}

#mapColumn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.survivalBlurb {
  margin-top: 10px;
  text-align: left;
  border-radius: 7px;
  padding: 6px 3px;
}

/* ---------- Mobile text scaling ---------- */
@media (max-width: 600px) {
  body {
    font-size: 20px;
  }

  .survivalBlurb {
    margin-top: 10px;
    text-align: left;
    border-radius: 7px;
    padding: 6px 3px;
    font-size: 14px;
  }

  .pageWrap {
    margin: 7px 9px;
    padding: 0 5px 6px;
    box-sizing: border-box;
  }

  .subtitle {
    font-size: 17px;
    min-height: calc(1.25em * 2);
    display: flex;
    align-items: flex-start;
  }

  .map-area {
    height: auto;
    aspect-ratio: auto;
  }

  #mapMount svg {
    width: 100%;
    height: auto;
    display: block;
  }

  #mapMount {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  #mapColumn {
    margin-bottom: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .sidePanel {
    font-size: 16px;
    height: auto;
  }

  #sidePanelTitle {
    font-size: 18px;
  }

  #sidePanelBlurb {
    font-size: 16px;
    line-height: 1.5;
  }

  #sidePanelLocations {
    font-size: 18px;
  }

  #sidePanelLocations div:last-child {
    border-bottom: none;
  }

  .mapSection {
    gap: 4px;
  }

  .navbar {
    max-height: 46px;
  }
}

/* Content pages */
.contentWrap {
  margin-top: 24px;
  max-width: 1000px;
}

.contentWrap h1 {
  font-family: "Courier New", Courier, monospace;
  font-size: 26px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-bottom: 6px;
}

.contentWrap p {
  line-height: 1.6;
  font-size: 15px;
}

.stickerGrid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.stickerGrid img {
  width: 100%;
  height: auto;
  border-width: 1px;
  border-style: solid;
}

.aboutWrap {
  margin-top: 24px;
  max-width: 800px;
}

.aboutWrap h1 {
  font-family: "Courier New", Courier, monospace;
  font-size: 26px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-bottom: 6px;
}

.aboutWrap p {
  line-height: 1.6;
  font-size: 15px;
}

.sectionHeader {
  font-family: "Courier New", Courier, monospace;
}

.list {
  margin: 10px 0 14px;
  padding-left: 18px;
  font-size: 15px;
}

.list li {
  margin: 6px 0;
}

.resourceBox {
  margin-top: 20px;
  padding: 12px;
  border-width: 1px;
  border-style: solid;
}

.resourceBox h2 {
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  margin: 0 0 8px 0;
}

.resourceBox a {
  display: block;
  margin: 6px 0;
  text-decoration: none;
}

.resourceBox a:hover {
  text-decoration: underline;
}

.checklist {
  margin: 14px 0;
  padding-left: 18px;
  font-size: 15px;
}

.checklist li {
  margin: 6px 0;
}

/* Footer layout */
.siteFooter {
  margin-top: 0;
  padding: 12px 4px;
  border-top-width: 1px;
  border-top-style: solid;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
}

.footerRight {
  margin-left: auto;
}

.footerLink {
  text-decoration: none;
}

.footerLink:hover {
  text-decoration: underline;
}

/* Month divider */
.bw-blog-month-divider {
  text-align: center;
  margin: 0 0 8px;
  font-size: 14px;
  position: relative;
}

.bw-blog-month-divider-line {
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: -1;
}

.bw-blog-month-divider-label {
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  padding: 2px 12px;
}

/* Pager layout */
#blogPagerMount {
  text-align: center;
  margin: 8px 0;
}

#blogPagerMount span,
#blogPagerMount button,
#blogPagerMount a {
  margin: 0 4px;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  padding: 2px 7px;
  font: inherit;
  text-decoration: none;
}

#blogPagerMount .active,
#blogPagerMount .bw-blog-pager-active {
  font-weight: bold;
}

/* Main blog body wrapper */
.blog-body,
.bw-blog-body {
  position: relative;
  line-height: 1.25;
  font-size: 14px;
  overflow: auto;
}

.blog-body::after,
.bw-blog-body::after {
  content: "";
  display: block;
  clear: both;
}

/* Loading animation */
.blog-loading-dot {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  animation: blogLoadingBlink 1.2s infinite;
}

@keyframes blogLoadingBlink {
  0% {
    opacity: 0.2;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px);
  }

  100% {
    opacity: 0.2;
    transform: translateY(0);
  }
}

/* Blog card layout */
.bw-blog-card,
.bw-blog-post-card {
  border-width: 1px;
  border-style: solid;
  padding: 0;
  margin: 0 0 8px;
}

.bw-blog-card-inner,
.bw-blog-inner {
  border-width: 1px;
  border-style: solid;
  padding: 8px;
}

.bw-blog-header,
.bw-blog-header-row {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
}

.bw-blog-header-text {
  font-size: 15px;
  font-weight: 600;
}

.bw-blog-title {
  font-size: 15px;
  font-weight: 600;
}

.bw-blog-divider {
  height: 1px;
  margin: 4px 0;
}

.bw-blog-rating {
  font-size: 16px;
  margin: 2px 0 4px;
}

.bw-blog-date {
  font-size: 11px;
  text-decoration: underline;
  margin-bottom: 6px;
}

.bw-blog-content,
.bw-blog-content.bw-blog-editable,
.bw-blog-content[contenteditable="true"] {
  white-space: pre-line;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25;
  min-height: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Embed positioning */
.embed-left,
.embed-right {
  width: 340px;
}

.embed-left {
  float: left;
  margin: 4px 14px 8px 0;
}

.embed-right {
  float: right;
  margin: 4px 0 8px 14px;
}

.embed-left iframe,
.embed-left .instagram-media,
.embed-right iframe,
.embed-right .instagram-media {
  width: 340px !important;
  max-width: 290px !important;
  display: block;
}

.embed-above,
.embed-below {
  display: block;
  width: 100%;
  clear: both;
  overflow: hidden;
}

.embed-above {
  padding: 0;
  margin: 0;
}

.embed-below {
  padding-bottom: 0 !important;
}

.embed-above img,
.embed-below img {
  width: 100%;
  max-height: 350px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.embed-below iframe,
.embed-below .instagram-media {
  margin: 0 auto !important;
  display: block;
}

.instagram-media {
  margin: 0 !important;
  padding: 0 !important;
}

.twitter-tweet {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.embed-above .twitter-tweet,
.embed-below .twitter-tweet {
  margin: 0 auto !important;
  display: block;
}

/* Centered media stage */
.embed-bodytop {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  clear: both;
  margin: 6px 0 10px;
}

.embed-bodytop iframe {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  aspect-ratio: 16 / 10;
  display: block;
}

.embed-bodytop img {
  max-width: min(100%, 900px);
  max-height: 460px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* More posts link layout */
.bw-blog-more-link-wrap {
  text-align: center;
  margin: 0 12px;
}

.bw-blog-more-link-wrap a,
.bw-blog-more-link {
  font-size: 13px;
  text-decoration: none;
}

.bw-blog-more-link-wrap a:hover,
.bw-blog-more-link:hover {
  text-decoration: underline;
}

/* Mobile embed layout */
@media (max-width: 700px) {
  .embed-left,
  .embed-right,
  .embed-bodytop {
    float: none;
    width: 100%;
    margin: 6px 0 10px;
  }

  .embed-left iframe,
  .embed-right iframe,
  .embed-below iframe,
  .embed-above iframe,
  .embed-bodytop iframe {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 10;
  }
}

/* Admin / likes layout */
.bw-blog-edit-mount,
.bw-blog-admin-authorized,
.bw-blog-like-mount,
[data-likes-mount] {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
}

.bw-blog-card .likesWrap,
.bw-blog-post-card .likesWrap {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Compact post layout used by homepage and full blog feed */
.bw-blog-card-compact .bw-blog-card-inner,
.bw-blog-card-compact .blog-body {
  padding: 0;
}

.bw-blog-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 !important;
  padding: 3px 10px 8px !important;
}

.bw-blog-footer-date {
  color: #777;
  font-size: 11px;
  font-style: italic;
}

/* Remove extra feed spacing without changing normal card spacing elsewhere */
#homeBlogPostMount,
#blogPostsMount,
#homeBlogPostMount .bw-blog-card,
#blogPostsMount .bw-blog-card {
  margin-top: 0 !important;
}

#homeBlogPostMount .bw-blog-card:last-child,
#blogPostsMount .bw-blog-card:last-child {
  margin-bottom: 0 !important;
}

#homeBlogPostMount .bw-blog-card-inner,
#homeBlogPostMount .blog-body,
#homeBlogPostMount .embed-block,
#blogPostsMount .bw-blog-card-inner,
#blogPostsMount .blog-body,
#blogPostsMount .embed-block {
  margin: 0 !important;
  padding: 0 !important;
}

#homeBlogPostMount .blog-like-mount,
#blogPostsMount .blog-like-mount {
  margin-top: 4px !important;
}

/* Homepage-only Instagram scaling */
@media (min-width: 701px) {
  #homeBlogPostMount .instagram-media {
    zoom: .55;
    margin: 0 auto !important;
  }
}

/* Keep embed/content/footer order stable on narrow screens */
@media (max-width: 800px) {
  #homeBlogPostMount .bw-blog-card-compact .blog-body,
  #blogPostsMount .bw-blog-card-compact .blog-body {
    display: flex !important;
    flex-direction: column !important;
  }

  #homeBlogPostMount .embed-block,
  #blogPostsMount .embed-block {
    order: 1 !important;
  }

  #homeBlogPostMount .bw-blog-content,
  #blogPostsMount .bw-blog-content {
    order: 2 !important;
  }

  #homeBlogPostMount .bw-blog-footer-row,
  #blogPostsMount .bw-blog-footer-row {
    order: 3 !important;
  }
}

/* Homepage more-posts link */
#homeBlogPostMount .bw-blog-more-link-wrap {
  text-align: center;
  margin: 8px 0 4px;
}

#homeBlogPostMount .bw-blog-more-link {
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}