/* Kryptoca site.css */

/* Base */
:root{--blue:#1d4ed8;--ink:#0f172a;--muted:#64748b;--card:#ffffff;--line:#e5e7eb;--bg:#f8fafc}
*{box-sizing:border-box}
body{font-family:system-ui,Arial,sans-serif;margin:0;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit}

/* Header */
header{
  background:var(--bg);
  border-bottom:1px solid #e2e8f0;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.header-wrap{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;min-width:0;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo{height:28px;display:block}

/* Nav */
.main-nav{
  display:flex;align-items:center;gap:14px;
  background:#e0f2fe;
  padding:8px 14px;border-radius:10px;
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;min-width:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{
  font-weight:500;padding:6px 10px;border-radius:6px;
  color:#0f172a;transition:background .2s,color .2s;
  white-space:nowrap;flex:0 0 auto;
}
.main-nav a:hover,
.main-nav a:focus{
  background:#ffffff;
  color:var(--blue);
  outline:none;
}

/* Layout */
.container{max-width:1180px;margin:0 auto;padding:18px}
.grid{display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
h1,h2{margin:8px 0 10px 0}

/* Section colors */
.coins{background:#e8f2ff;border:1px solid #cfe2ff;border-radius:12px;padding:14px}
.articles{background:#f6f7fb;border:1px solid #e6e8f0;border-radius:12px;padding:14px}
.ideas{background:#e9fbe9;border:1px solid #cceccc;border-radius:12px;padding:14px}
.news{background:#fff9d8;border:1px solid #f0e5a6;border-radius:12px;padding:14px}
.pred{background:#efe8ff;border:1px solid #d7cdfc;border-radius:12px;padding:14px}

/* Coins grid */
.coin-box{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.badge{padding:2px 6px;border-radius:6px;font-size:12px}
.up{color:#137333}.down{color:#c5221f}

/* Ads */
.ad-slot{border:1px dashed #cbd5e1;border-radius:12px;background:#fff;text-align:center;margin:12px 0}
.ad-label{font:12px/1 system-ui;color:#64748b;text-align:left;padding:6px 8px}
.ad-header{min-height:90px}.ad-sidebar_top{min-height:250px}.ad-sidebar_mid{min-height:250px}
.ad-inline_top{min-height:120px}.ad-inline_mid{min-height:280px}.ad-inline_bottom{min-height:120px}.ad-footer{min-height:90px}

/* Footer */
footer{margin-top:40px;border-top:1px solid var(--line);background:#fff}
footer .container{padding:18px}

/* Utilities */
.nowrap{white-space:nowrap}
.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}

/* Responsive */
@media (max-width:1024px){
  .coin-box{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .container{padding:14px}
  .grid-2c{grid-template-columns:1fr!important}
  .coin-box{grid-template-columns:repeat(2,1fr)}
  .main-nav{gap:10px;padding:8px 10px}
}
@media (max-width:480px){
  .coin-box{grid-template-columns:1fr}
}


/* Keep layout width stable across pages with or without scrollbars */
html {
  scrollbar-gutter: stable both-edges;  /* modern fix */
  overflow-y: auto;                     /* fallback */
}

/* Block any horizontal push */
html, body { overflow-x: hidden; }

/* Ensure flex children don't overflow */
.header-wrap, .main-nav { min-width: 0; }

/* Containers stay centered and never exceed viewport */
header, .header-wrap, .container { max-width: 100vw; }

/* Guard wide children */
img, .card, .ad-slot { max-width: 100%; height: auto; }

/* Nav: no wrap or shrink, allow horizontal scroll instead */
.main-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.main-nav a { white-space: nowrap; flex: 0 0 auto; }