/* =========================================================
   Design tokens (from your modern_reviews.html design)
   ========================================================= */
:root {
  --brand-50:  #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-900: #0c4a6e;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-500: #3d455c;
  --slate-600: #222;
  --slate-900: #0f172a;

}

body {
  background-color: var(--slate-50);
  color: var(--slate-600);
  font-family: 'Inter', sans-serif;
}
.parent-container {
    max-width: 1320px;
    margin: 0 auto;
    /* overflow: hidden; */
}

.font-serif {
  font-family: 'Playfair Display', serif;
}
body a {
    color: #1074b7;
    text-decoration: none;
}
/* -------- Brand color utilities (Bootstrap-style naming so they slot
   in next to bg-primary / text-primary etc.) -------- */
.bg-brand        { background-color: var(--brand-600) !important; }
.bg-brand-50     { background-color: var(--brand-50) !important; }
.text-brand      { color: var(--brand-600) !important; }
.border-brand    { border-color: var(--brand-100) !important; }
.btn-brand {
background-color: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff !important;
}
.btn-brand:hover {
    background-color: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
    color: #fff !important;
}
.btn-dark-pill {
  background-color: var(--slate-900);
  color: #fff;
  border-radius: 999px;
}
.btn-dark-pill:hover {
  background-color: var(--brand-600);
  color: #fff;
}

/* -------- Category badge colors (extend as you add categories) -------- */
.cat-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.cat-software    { color: var(--brand-600); }
.cat-casinos     { color: #9333ea; }
.cat-gadgets     { color: #d97706; }
.cat-developer   { color: #0d9488; }
.cat-earning     { color: #059669; }
.cat-technology  { color: #2563eb; }
.cat-cryptos     { color: #4f46e5; }
.cat-default     { color: var(--slate-600); }

/* -------- Rating badge on card thumbnails -------- */
.rating-badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  padding: .25rem .5rem;
  border-radius: .375rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  font-size: .75rem;
  font-weight: 700;
  color: var(--slate-900);
}
.rating-badge .star { color: #facc15; }

/* -------- Review cards -------- */
.review-card {
  transition: transform .25s ease, box-shadow .25s ease;
  border-color: var(--slate-200);
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.06);
}
.review-card .card-img-top {
  height: 12rem;
  object-fit: cover;
}

/* -------- Pure-CSS tooltips for author / fact-checker -------- */
.tooltip-trigger {
  position: relative;
  cursor: help;
  text-decoration: underline dotted var(--slate-500);
  text-underline-offset: 3px;
}
.tooltip-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) scale(.95);
  background: var(--slate-900);
  color: #fff;
  padding: .35rem .65rem;
  border-radius: .375rem;
  font-size: .68rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease;
  z-index: 20;
  pointer-events: none;
}
.tooltip-trigger:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* -------- Bento featured grid overlay/hover -------- */
.bento-tile {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  display: block;
  color: #fff;
  text-decoration: none;
}
.bento-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.bento-tile:hover img { transform: scale(1.05); }
.bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,.85) 0%, rgba(15,23,42,0) 65%);
}
.bento-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1.25rem;
  z-index: 2;
}
.breadcrumbs span span a {
    font-size: 14px;
    text-decoration: none;
    color: #475467;
}

.breadcrumbs span span a:hover {
    color: #1074b7 !important;
}

span.breadcrumb_last {
    font-size: 14px;
    text-decoration: none;
    color: #475467;
    opacity: 0.8;
}

.breadcrumbs {
    font-size: 14px;
    text-decoration: none;
    color: #475467;
    margin: 30px 0px 20px;
    font-style: italic;
}
.bento-tall  { min-height: 20rem; }
.bento-short { min-height: 11rem; }

/* -------- Sticky, translucent navbar -------- */
.site-navbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--slate-100);
}
.site-navbar .nav-link {
  color: var(--slate-600);
  font-weight: 500;
  font-size: .875rem;
}
.site-navbar .nav-link:hover { color: var(--brand-600); }

/* -------- Excerpt clamp (Bootstrap has no built-in line-clamp) -------- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------- Footer -------- */
.site-footer { border-top: 1px solid var(--slate-200); background: #fff; }
.site-footer a { color: var(--slate-500); text-decoration: none; }
.site-footer a:hover { color: var(--brand-600); }
.loadmore:hover, .methodolody-btn:hover {
    background: #fff !important;
    color: #222 !important;
    border-color: #222 !important;
}
.loadmore , .methodolody-btn{
    color: #3d455c;
    border: 1px solid #3d455c;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
}
.review-card a {
    text-decoration: none;
}