html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  background: #01074b; /* fallback */
}

/* Paint background on a fixed layer that always covers the viewport */
body{
  position: relative;
}

.bg-sand{ background: #ebe2dc; }

.article-body p{
  line-height: 22px;
  font-size: 16px;
}

@media screen and (max-width:767px) {
  .article-body{ word-break: break-word; }
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.otf");
}

/* ✅ FIX 1: `.body` -> `body` so it actually applies */
body {
  background: #01074b;

  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  margin: 0;
  padding: 0;
  color: #ffffff; /* readable default on dark bg */
}

/* make box-sizing consistent and improve responsive defaults */
*, *:before, *:after { box-sizing: border-box; }

.header {
  align-items: center;
  border-bottom: 1px solid #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 24px; /* remove top/bottom padding to eliminate top gap */
}

/* allow header contents to wrap on small screens */
.header { flex-wrap: wrap; gap: 12px; }

.logo {
  color: #FFCB40;
  font-size: 40px;
}

.logo-img {
  width: 144px;
  max-width: 100%;
  height: auto;
  display: block;
}

.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

.search input {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  color: #858585;
  font-size: 16px;
  outline: none;
  padding: 10px 16px;
  width: 240px;
  max-width: 100%;
}

.nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  margin: 0 20px 0 40px; /* remove top margin */
}

.nav a, .privacy{
  background: #222;
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  padding: 4px 16px;
  text-decoration: none;
}

.privacy {
  font-size: 10px;
  color: #51a2ff;
  background: transparent
}

.nav a.active,
.nav a:hover {
  background: #fff;
  color: #222;
}

.nav::-webkit-scrollbar { display: none; }

.footer {
  padding: 60px 0;
  text-align: center;
}

.footer ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  list-style: none;
  margin: 60px auto;
  max-width: 400px;
  padding: 0;
}

.footer ul li a {
  background: url("/img/twitch.png") no-repeat left top;
  background-size: 24px 24px;
  display: block;
  height: 24px;
  opacity: 0.8;
  width: 24px;
}

.footer ul li a:hover { opacity: 1; }
.footer ul li#tiktok a { background-image: url("/img/tiktok.png"); }
.footer ul li#discord a { background-image: url("/img/discord.png"); }
.footer ul li#threads a { background-image: url("/img/threads.png"); }
.footer ul li#snapchat a { background-image: url("/img/snapchat.png"); }
.footer ul li#linkedin a { background-image: url("/img/linkedin.png"); }
.footer ul li#instagram a { background-image: url("/img/instagram.png"); }
.footer ul li#twitter a { background-image: url("/img/twitter.png"); }
.footer ul li#facebook a { background-image: url("/img/facebook.png"); }

.footer #copyright {
  color: #ffffff50;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

@media screen and (max-width: 640px) {
  .search input { width: 100px; }
  .nav { margin: 0 10px 0 20px; } /* remove top margin on mobile */

  /* Stronger mobile readability adjustments */
  html, body { font-size: 18px; }

  /* Remove top padding and enlarge base text for articles on mobile */
  #rstm-app { margin-top: 20px; padding: 0 14px 72px; }
  #rstm-app .rstm-article {
    max-width: 100%;
    padding: 0 12px;
    font-size: 16px;
    line-height: 1.5;
  }

  /* Paragraphs and article body text larger and more legible */
  #rstm-app .rstm-article p,
  .article-body p {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Headings scale up on mobile for better hierarchy */
  #rstm-app .rstm-article h1 { font-size: 22px; line-height: 1.5; }
  #rstm-app .rstm-article h2 { font-size: 16px; line-height: 1.5;}

  /* Lists render as block-level for proper wrapping */
  #rstm-app .rstm-article ul,
  #rstm-app .rstm-article ol {
    display: block;
    margin: 14px 0;
    padding-left: 1.25em;
  }

  /* Make images fill width and scale naturally */
  #main img,
  #rstm-app .rstm-article img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
  }

  /* Header/logo spacing for small screens: remove top padding */
  .header { padding: 0 14px; }
  .logo { font-size: 30px; }

  /* Slightly reduce card padding for mobile density */
  .result-card { padding: 0.6rem; }
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ----------------------------
   ✅ RSTM container changes
   (matches the mockup)
   ---------------------------- */

/* This assumes your template uses <main id="rstm-app"> ... */
#rstm-app{
  min-height: 100vh;
  margin-top: 20px; /* add 20px top margin */
  padding: 0 16px 80px; /* remove top padding to eliminate top gap */
}

/* Center the column, keep content LEFT aligned */
#rstm-app .rstm-article{
  width: 100%;
  max-width: 720px;      /* adjust: 720 / 840 / 960 */
  margin: 0 auto;        /* centers container */
  text-align: left;      /* IMPORTANT: left align everything */
}

/* Keep text readable on dark bg (optional) */
#rstm-app .rstm-article{
  color: #ffffff;
}

/* ✅ Fix “distorted” lists when content is centered */
#rstm-app .rstm-article ul,
#rstm-app .rstm-article ol{
  display: inline-block;
  text-align: left;
  margin: 12px auto;
  padding-left: 1.2em;
  color: rgba(255,255,255,.85);
}

/* Optional: links */
#rstm-app .rstm-article a{
  color: #b7f7ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------
   Your #main rules (kept)
   but scoped to not fight RSTM
   ---------------------------- */

/* If you still use #main elsewhere, leave as-is. If RSTM uses #main,
   you can change #main to #rstm-app to apply these styles there. */

.w-3xl {
  max-width: 768px;
  width: 100%;
  box-sizing: border-box;
}

#main > div {
  width: 100%;
  padding: 1.5rem;
}

#main > div > div {
  margin-left: auto;
  margin-right: auto;
  max-width: 64rem;
}

#main img {
  height: 24rem;
  width: 100%;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  object-fit: cover;
}




.search-container {
    padding: 0.5rem;
    margin: 0 auto;
  }
  
.search-header {
  color: #ffffff;
  font-size: 1.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #2a4365;
}

.search-results {
  display: flex;
  flex-direction: column;
}

.result-card {
  padding: 1rem;
}

.result-title {
  color: #515151;
  font-size: 1.1rem;
}

.result-date {
  color: #515151;
  font-size: 0.8rem;
  display: inline-block;
}

.result-snippet {
  color: #515151;
  font-size: 0.9rem;
  line-height: 1.4;
}

.result-link {
  color: #515151;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-block;
  transition: color 0.2s;
}

.result-link:hover {
  color: #515151;
  text-decoration: underline;
}

/* Stronger specificity to ensure result links keep intended color
   even when a broader anchor rule matches. Placed at end to win. */
#rstm-app .rstm-article a.result-link,
#rstm-app .rstm-article .search-results .result-card a.result-link {
  color: #515151;
  text-decoration: none;
}
#rstm-app .rstm-article a.result-link:hover,
#rstm-app .rstm-article .search-results .result-card a.result-link:hover {
  color: #515151;
}