/* =========================
   Reset & Base
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

/* ===== Brand Palette (Clash Royale) ===== */
:root{
  --clash-blue:  #1e90ff;    /* royal/bright blue */
  --clash-blue-d:#1b6fd4;    /* darker blue for bars/nav */
  --clash-gold:  #ffcc00;    /* gold */
  --clash-gold-d:#eab308;    /* gold hover/deeper */
  --clash-orange:#ff9900;    /* accent for focus/glow */
  --ink:         #0f172a;    /* heading ink */
  --muted:       #4b5563;    /* body muted */
  --bg:          #fafafa;    /* page bg */
  --card:        #ffffff;    /* card bg */
  --border:      rgba(2,6,23,.08);
}

/* active pill */
.navbar-dark .navbar-nav .nav-link.active {
  background-color: var(--clash-gold) !important;
  color: #000 !important;
  border-radius: 6px;
  font-weight: 700;
}
.nav-link.active {
  color: #000 !important;
  background-color: #facc15 !important;
  font-weight: 700;
}

body {
  background: var(--bg);
  color: #222;
  line-height: 1.6;
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
  padding: 2rem 0;
}

/* Blog Grid spacing */
#blogGrid .col { display: flex; }
#blogGrid .pro-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
#blogGrid .pro-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(2,6,23,.12);
}

/* Images inside cards */
#blogGrid .card-img-top {
  aspect-ratio: 16/9;
  object-fit: cover;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
#blogGrid .card-body { padding: 1rem 1rem 1.25rem; }
#blogGrid .card small { color:#6b7280 !important; }

/* Clamp excerpts */
.clamp-3 {
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Buttons (brand gold) */
.btn-warning {
  --bs-btn-bg: var(--clash-gold) !important;
  --bs-btn-border-color: var(--clash-gold) !important;
  --bs-btn-color: #111 !important;
  --bs-btn-hover-bg: var(--clash-gold-d) !important;
  --bs-btn-hover-border-color: var(--clash-gold-d) !important;
  --bs-btn-active-bg: #cfa60a !important;
  --bs-btn-active-border-color: #cfa60a !important;
  --bs-btn-focus-shadow-rgb: 255,204,0 !important;
}

/* ===== Brand blue for NAV ONLY (removed footer here to fix contrast) ===== */
/* ===== Unified Dark (Navbar + Header) ===== */
header.bg-dark,
.navbar.bg-dark {
  background: #0b1220 !important;        /* dark navy */
  background-color: #0b1220 !important;
  color: #e5e7eb !important;              /* readable text */
}


/* Navbar link styles */
/* Navbar link styles — do NOT target .active here */
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:visited {
  color:#e5e7eb !important;
  font-weight:700 !important;
}

/* Active pill: gold background with BLACK text (passes) */
.navbar-dark .navbar-nav .nav-link.active {
  background:#facc15 !important;
  color:#000 !important;      /* keep this black */
  border-radius:12px;         /* your style */
  font-weight:800;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff !important;
  opacity: 1;
}

/* --- Navbar --- */
.navbar {
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
  min-height: 56px;
  /* Gold glow shadow */
  box-shadow: 0 4px 0 var(--clash-gold), 0 6px 14px rgba(255,204,0,.35) !important;
  z-index: 1030;
}

/* Remove extra padding inside container */
.navbar > .container,
.navbar > .container-fluid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Logo size (controls overall height) */
.navbar-brand .navbar-logo {
  height: 46px !important;
  width: auto !important;
}
@media (min-width: 992px){
  .navbar-brand .navbar-logo { height: 50px !important; }
}

/* Nav links padding */
.navbar .nav-link {
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
  line-height: 1.2 !important;
}

/* Button inside navbar */
.navbar .btn {
  padding-top: .25rem !important;
  padding-bottom: .25rem !important;
}

/* --- Site Header (not navbar) --- */
.site-header {
  background: #0b1220;
  padding: 1rem 0;
  color: #fff;
}
.site-header .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}
.site-header .logo span { color: var(--clash-gold); }
.main-nav { margin-top: 1rem; }
.main-nav a {
  color: #ccc;
  margin-right: 1rem;
  text-decoration: none;
}
.main-nav a:hover { color: #fff; }

/* Blog Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.blog-card {
  background: var(--card);
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  padding: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
}
.blog-card:hover { box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); }
.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.blog-card h2 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.blog-card p {
  color: var(--muted);
  margin-bottom: 1rem;
}
.btn-read {
  background: var(--clash-gold);
  color: #111;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}
.btn-read:hover { background: var(--clash-gold-d); }

/* =========================
   Footer (WCAG AA Contrast)
========================= */
.site-footer {
  background:#0b1220;           /* dark navy */
  color:#0b1220;                /* high-contrast text */
  text-align:center;
  padding:1rem;
  margin-top:0;
  font-size:.9rem;
}

/* kill low-contrast grays inside footer */
.site-footer small,
.site-footer .text-muted,
.site-footer .text-secondary {
  color:#0b1220 !important;
}

/* footer links default to readable light + underline */
.site-footer a { 
  color:#e5e7eb;
  text-decoration: underline;
}
.site-footer a:hover,
.site-footer a:focus { color:#ffffff; }

/* accent links (mailto/tel/yellow) still pass on dark */
.site-footer a.text-warning,
.site-footer a[href^="mailto:"],
.site-footer a[href^="tel:"] { color: var(--clash-gold); }

/* avoid UA purple on visited */
.site-footer a:visited { color:#e5e7eb; }

/* icons visible on dark */
.site-footer .fab,
.site-footer .fas { color:#e5e7eb; }

/* divider contrast */
.site-footer hr { border-color:#334155 !important; }

/* keyboard focus ring */
.site-footer a:focus-visible,
#backToTopBtn:focus-visible {
  outline:2px dashed var(--clash-gold);
  outline-offset:3px;
}

/* Navbar collapsed view */
@media (max-width: 991.98px) {
  #mainNav .navbar-nav {
    text-align: right;
    margin-right: 10px;
  }
  #mainNav .nav-item { padding-right: 10px; }
  .cta-freecoins { width: 100%; text-align: center; }
}

/* Blog thumbnails fix */
#blogGrid .blog-card img.card-img-top {
  height: 200px;
  object-fit: contain;
  object-position: center;
  background: #f8f9fa;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* Blog grid gutters */
#blogGrid {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}
#blogGrid > .col { padding-bottom: 1.5rem; }

/* High-CTR navbar CTA */
.cta-freecoins {
  border-radius: 9999px;
  box-shadow: 0 10px 24px rgba(255,204,0,.25);
  letter-spacing:.2px;
  transform: translateZ(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  animation: ctaPulse 2.2s ease-in-out infinite;
}
.cta-freecoins:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(255,204,0,.35);
  filter: brightness(0.98);
}
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,204,0,.28); }
  50%     { box-shadow: 0 0 0 10px rgba(255,204,0,.10); }
}

/* offset content so the fixed navbar doesn't cover it */
body { padding-top: 72px; }
@media (max-width: 991.98px){ body { padding-top: 64px; } }

/* Mobile navbar: center items + gold active pill */
@media (max-width: 991.98px) {
  #mainNav .navbar-nav {
    align-items: center !important;
    text-align: center !important;
  }

  #mainNav .nav-link {
    display: block;
    padding: .6rem 1rem;
    margin: .15rem 0;
    border-radius: 10px;
    color: #fff !important;
  }
  #mainNav .nav-link:hover {
    background: rgba(255,255,255,.08);
  }

  #mainNav .nav-link.active {
    background: var(--clash-gold) !important;
    color: #000 !important;
    border-radius: 12px;
    width: 90%;
    margin: .25rem auto;
    font-weight: 800;
  }

  #mainNav .btn.btn-warning {
    width: 90%;
    margin: .5rem auto 0;
    display: block;
    text-align: center;
    border-radius: 12px;
  }
}
/* High-contrast links inside article/blog content */
.blog-content a,
.post-body a,
.article a {
  color:#2563eb;                /* blue-600 */
  text-decoration:underline;
  font-weight:600;
}
.blog-content a:hover,
.post-body a:hover,
.article a:hover,
.blog-content a:focus,
.post-body a:focus,
.article a:focus {
  color:#1d4ed8;                /* blue-700 */
  outline:none;
}
.blog-content a:visited,
.post-body a:visited,
.article a:visited {
  color:#1e3a8a;                /* blue-800 so visited still passes */
}