/* Minimal, modern card UI for StoryTerra news */
:root{
  --bg:#051e3d; /* dark blue */
  --card:#0b2b55;
  --muted:#9fb0c8;
  --accent:#1fa2ff;
}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:white;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  position:relative;
}

/* Full-page background image (map) with blur and a dark-blue overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  /* use the news images copy so this works when viewing /news/index.html */
  background-image: url('/home/news/newsimages/mapimg.png');
  background-size: cover;
  background-position: center;
  filter: blur(2.5px) brightness(.6); /* less blur for more visible map */
  transform: scale(1.02);
  pointer-events:none;
  transition: filter 0.3s cubic-bezier(.4,1.6,.6,1), transform 0.3s cubic-bezier(.4,1.6,.6,1);
}

body.bg-zoom::before{
  filter: blur(2.5px) brightness(.6);
  transform: scale(1.12);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background: linear-gradient(180deg, rgba(5,30,61,0.58), rgba(2,14,28,0.78));
  pointer-events:none;
}
.site-header{position:fixed;left:18px;top:12px;z-index:20}
.site-header{background:white;padding:6px 8px;border-radius:10px;box-shadow:0 6px 18px rgba(2,9,20,0.45)}
.logo{height:44px;display:block}
.hero{
  min-height:220px;
  display:flex;align-items:center;justify-content:center;
  background:transparent; /* page background shows through */
}
.hero-overlay{position:relative;text-align:center;padding:48px 16px}
.hero-overlay h2{font-size:28px;margin:0 0 6px;color:var(--accent)}
.hero-overlay p{margin:0;color:var(--muted)}

.container{max-width:1100px;margin:28px auto;padding:0 16px}
.section-title{font-size:20px;margin:0 0 12px;color:var(--accent)}

.news-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}
/* Footer styles */
.site-footer{
  background:rgba(5,30,61,0.92);
  color:#b8c6e0;
  text-align:center;
  padding:24px 0 12px 0;
  font-size:15px;
  margin-top:48px;
  border-top:1px solid rgba(80,120,180,0.13);
}
.site-footer .container{max-width:700px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(3,12,30,0.6);cursor:default;transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(3,12,30,0.7)}
.card .cover{height:140px;background-size:cover;background-position:center}
.card .body{padding:12px}
.card .title{font-size:16px;margin:0 0 6px;color:#eaf6ff}
.card .desc{font-size:13px;color:var(--muted);margin:0 0 10px;min-height:40px}
.card .meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.card .date{font-style:italic}

@media (max-width:520px){
  .hero{min-height:160px}
  .logo{height:38px}
}

/* Mobile & small-tablet optimizations for article pages and cards */
@media (max-width:768px){
  :root{ --container-gap:12px }
  .container{padding:0 12px}

  /* Make cards fill available width with comfortable gutters */
  .card{max-width:calc(100% - 24px);margin:18px 12px;border-radius:10px}
  .card{padding:10px}
  .card .body{padding:6px;font-size:1rem;line-height:1.6}
  .card .title{font-size:18px}
  .card .desc{font-size:14px}

  /* Article specific tweaks */
  .article-back{display:block;margin-bottom:10px;color:var(--muted)}

  /* header/logo adjustments */
  .site-header{left:10px;top:8px;padding:5px 6px}
  .logo{height:34px}

  /* make large article images responsive */
  img{max-width:100%;height:auto}

  /* slightly reduce background contrast on small screens to keep text readable */
  body::after{background: linear-gradient(180deg, rgba(5,30,61,0.66), rgba(2,14,28,0.86));}
}

/* small helper */

/* Color accent styling - applied when data-accent-color attribute is set */
.card[data-accent-color] {
  position: relative;
}

/* Orange accent */
.card[data-accent-color="orange"] {
  border-left: 4px solid #ff8c42;
  background: linear-gradient(135deg, rgba(255, 140, 66, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.card[data-accent-color="orange"]:hover {
  border-color: #ff8c42;
  box-shadow: 0 18px 36px rgba(255, 140, 66, 0.25), 0 0 0 1px rgba(255, 140, 66, 0.15);
}

.card[data-accent-color="orange"] .title {
  color: #ffb380;
}

/* Blue accent */
.card[data-accent-color="blue"] {
  border-left: 4px solid #42a5ff;
  background: linear-gradient(135deg, rgba(66, 165, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.card[data-accent-color="blue"]:hover {
  border-color: #42a5ff;
  box-shadow: 0 18px 36px rgba(66, 165, 255, 0.25), 0 0 0 1px rgba(66, 165, 255, 0.15);
}

.card[data-accent-color="blue"] .title {
  color: #80c7ff;
}

/* Green accent */
.card[data-accent-color="green"] {
  border-left: 4px solid #42ff8c;
  background: linear-gradient(135deg, rgba(66, 255, 140, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.card[data-accent-color="green"]:hover {
  border-color: #42ff8c;
  box-shadow: 0 18px 36px rgba(66, 255, 140, 0.25), 0 0 0 1px rgba(66, 255, 140, 0.15);
}

.card[data-accent-color="green"] .title {
  color: #80ffb3;
}

/* Purple accent */
.card[data-accent-color="purple"] {
  border-left: 4px solid #a542ff;
  background: linear-gradient(135deg, rgba(165, 66, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.card[data-accent-color="purple"]:hover {
  border-color: #a542ff;
  box-shadow: 0 18px 36px rgba(165, 66, 255, 0.25), 0 0 0 1px rgba(165, 66, 255, 0.15);
}

.card[data-accent-color="purple"] .title {
  color: #c780ff;
}

/* Red accent */
.card[data-accent-color="red"] {
  border-left: 4px solid #ff4242;
  background: linear-gradient(135deg, rgba(255, 66, 66, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.card[data-accent-color="red"]:hover {
  border-color: #ff4242;
  box-shadow: 0 18px 36px rgba(255, 66, 66, 0.25), 0 0 0 1px rgba(255, 66, 66, 0.15);
}

.card[data-accent-color="red"] .title {
  color: #ff8080;
}

/* Footer social / support styling */
.site-footer .footer-row{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.site-footer .footer-right{ display:flex; align-items:center; gap:10px }
.site-footer .kofi-link img{ height:32px; display:block }
.site-footer .social-link{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background: rgba(255,255,255,0.03); color:#e8f4ff; text-decoration:none; border:1px solid rgba(6,30,73,0.7) }
.site-footer .social-link i{ font-size:1.05em }
.site-footer .social-link:hover{ background: rgba(255,255,255,0.055); transform: translateY(-2px); box-shadow:0 8px 18px rgba(2,8,20,0.45) }

/* Glassy button utility for news/home CTA consistency */
.button{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight:700;
  text-decoration: none;
  color: #eaf6ff;
  background: rgba(255,255,255,0.035);
  border: 1.2px solid rgba(6,30,73,0.9);
  box-shadow: 0 8px 24px rgba(2,8,20,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .14s ease, box-shadow .14s ease, background .12s ease;
}
.button:hover{ transform: translateY(-3px); box-shadow:0 20px 40px rgba(2,8,20,0.62); background: rgba(255,255,255,0.055) }