@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2');
}
.rz-img-wrapper{
  position:relative;
  overflow:hidden;
  border-radius:12px 12px 0 0;
}

.rz-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  border-radius:999px;
  text-transform:uppercase;
  color:#fff;
  background:#6c5ce7;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.rz-filter-tabs a.rz-tab{ text-decoration:none; }
/* ===== Game Badge Colors ===== */

.rz-badge-apex-legends{ background:#da292a; }

.rz-badge-valorant{ background:#ff4655; }

.rz-badge-league-of-legends{ background:#c89b3c; }

.rz-badge-genshin-impact{ background:#5a9bd4; }

.rz-badge-teamfight-tactics{ background:#2f8f83; }

.rz-badge-roblox{ background:#3c3c3c; }

.rz-badge-fortnite{ background:#9147ff; }

/* Reset & Base */
:root{
  --bs-body-font-family: "Inter", sans-serif;
  --rz-header-height: 112px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

/* Desktop active (keep) */
.navbar .nav-link { position: relative; }

.navbar .nav-link.active {
  color: #b91c1c !important;        /* was yellow */
  font-weight: 600;
}

/* underline on desktop only */
.navbar .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #b91c1c;              /* was yellow */
}

/* ✅ Mobile: make active link a pill and remove underline */
@media (max-width: 991.98px) {
  .navbar .nav-link {
    padding: 12px 14px;
    border-radius: 10px;
    display: inline-flex;      /* stops full-width underline vibe */
    align-items: center;
  }

  .navbar .nav-link.active {
    background: rgba(185, 28, 28, 0.14);   /* was yellow rgba */
    border: 1px solid rgba(185, 28, 28, 0.40);
  }

  .navbar .nav-link.active::after {
    content: none !important;  /* remove underline on mobile */
  }
}

body {
  background: #0b0b0f;    /* was #fafafa */
  color: #e5e7eb;         /* was #222 */
  line-height: 1.6;
}

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

/* Header */
.site-header {
  background: #050507;  /* deeper black */
  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: #b91c1c; /* was #ffc107 */
}

.main-nav {
  margin-top: 1rem;
}

.main-nav a {
  color: #9ca3af;  /* was #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: #0f1117;               /* was white */
  border: 1px solid #1f2430;         /* was #ddd */
  border-radius: 10px;
  overflow: hidden;
  padding: 1rem;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  transition: 0.3s ease;
}

.blog-card:hover {
  box-shadow: 0 0 18px rgba(185, 28, 28, 0.25); /* dark red glow */
  border-color: rgba(185, 28, 28, 0.35);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.blog-grid .blog-card h2 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  color: #f3f4f6;
}

.blog-grid .blog-card p {
  color: #cbd5e1;
  margin-bottom: 1rem;
}


.btn-read {
  background: #b91c1c; /* was yellow */
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  border: 1px solid rgba(255,255,255,0.08);
}

.btn-read:hover {
  background: #991b1b; /* darker red hover (was #e0a800) */
}
/* Bootstrap cards pages: neutralize old .blog-card box */
.row .blog-card{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}


/* =====================
   FOOTER – DARK / RED
   ===================== */

.site-footer{
  background:#050507;
  border-top:2px solid #b91c1c;
  box-shadow:0 -2px 14px rgba(185, 28, 28, 0.25);
}

/* TEXT */
.site-footer p{ color:#d1d5db; }
.site-footer h3,
.site-footer h6{
  color:#e5e7eb;
  letter-spacing:.04em;
}

/* LINKS */
.site-footer a{
  color:#e5e7eb;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s ease;
}
.site-footer a:hover{
  color:#ef4444;
  text-decoration:none;
}
.site-footer a[href^="mailto"]{ color:#ef4444; }

/* ICONS */
.site-footer i{ color:#b91c1c; }

/* DIVIDER */
.site-footer hr{ border-color:rgba(255,255,255,.12); }

/* BACK TO TOP */
#backToTopBtn{
  background:#7f1d1d !important;
  color:#fff !important;
}
#backToTopBtn:hover{ background:#b91c1c !important; }
/* Desktop: fix Quick Links spacing + center each mini-column */
@media (min-width: 768px){
  /* only the Quick Links column */
  .site-footer .col-md-4:nth-child(2) .row{
    justify-content: center;
    column-gap: 48px;          /* space between Explore & Legal */
  }

  .site-footer .col-md-4:nth-child(2) .col-6{
    flex: 0 0 auto;
    width: auto;              /* prevents weird squeeze */
    min-width: 160px;         /* keeps titles above list */
    text-align: center;       /* center title + links */
  }

  .site-footer .col-md-4:nth-child(2) ul li{
    margin-bottom: 10px;
  }
}

/* =====================
   DESKTOP ALIGNMENT FIX
   ===================== */
@media (min-width:768px){

  /* each column centers its OWN content */
  .site-footer .col-md-4{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  /* text blocks stay readable */
  .site-footer .col-md-4 p{
    max-width:300px;
    text-align:center;
  }

  /* logo */
  .site-footer .navbar-brand{
    display:flex;
    justify-content:center;
  }

  /* lists */
  .site-footer ul{
    text-align:center;
  }
}

/* =====================
   MOBILE (already good)
   ===================== */
@media (max-width:767px){
  .site-footer{ text-align:center; }
}



@media (max-width: 991.98px) {
  #mainNav .navbar-nav {
    text-align: center;
    align-items: center;
  }
}

/* Fix navbar height */
.navbar {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  min-height: 56px;
}

.navbar-brand img {
  max-height: 40px;
}

/* Social/inline icons filter — adjusted for red theme */
.site-footer .d-flex img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(3300%) hue-rotate(350deg) brightness(105%) contrast(115%);
  transition: transform .2s ease, opacity .2s ease;
}

.d-flex a:hover img {
  opacity: 0.8;
  transform: scale(1.1);
}

header.fixed-top .navbar .container{
  padding: 0 !important;
}

header.fixed-top .navbar{
  border-bottom: 2px solid #b91c1c;             /* was #ffc107 */
  box-shadow: 0 2px 14px rgba(185, 28, 28, 0.25);
}


/* theme toggle button */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: inherit;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

/* light mode base */
body.light-mode {
  background: #fafafa;
  color: #111;
}
/* buttons - force consistent in dark + light */
.btn-rz{
  background:#b91c1c !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  color:#fff !important;
}
.btn-rz:hover{ background:#991b1b !important; }

.btn-outline-rz{
  background:transparent !important;
  border:1px solid #b91c1c !important;
  color:#b91c1c !important;
}
.btn-outline-rz:hover{
  background:#b91c1c !important;
  color:#fff !important;
}

/* light mode: outline button text a bit darker */
body.light-mode .btn-outline-rz{ color:#7f1d1d !important; border-color:#7f1d1d !important; }
body.light-mode .btn-outline-rz:hover{ background:#7f1d1d !important; color:#fff !important; }
/* section separation */
.section-dark, .section-light{
  border-radius: 16px;
  padding-left: 18px;
  padding-right: 18px;
  margin-top: 22px;
  margin-bottom: 22px;
}

.section-dark{
  background:#0f1117;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.section-light{
  background:#0b0b0f; /* still dark, but different shade */
  border:1px solid rgba(255,255,255,0.04);
}

/* light mode variants */
body.light-mode .section-dark,
body.light-mode .section-light{
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
/* helpers used in pages */
.max-w-700{ max-width:700px; }
.rz-muted{ opacity: .82; }
.rz-accent{ color:#b91c1c; }

/* link */
.rz-link{
  color:#b91c1c;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rz-link:hover{ color:#991b1b; }

/* divider */
.section-divider{ border-bottom: 1px solid rgba(255,255,255,0.08); }
body.light-mode .section-divider{ border-bottom: 1px solid #e5e7eb; }

/* list group dark fix */
.rz-list .list-group-item{
  background: transparent;
  color: inherit;
  border-color: rgba(255,255,255,0.08);
}
body.light-mode .rz-list .list-group-item{
  border-color: #e5e7eb;
}
/* FAQ accordion dark */
.rz-accordion .accordion-item{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.rz-accordion .accordion-button{
  background:#0b0b0f;
  color:#e5e7eb;
  font-weight: 600;
}
.rz-accordion .accordion-button:not(.collapsed){
  background:#0b0b0f;
  box-shadow: none;
}
.rz-accordion .accordion-button:focus{
  border-color: rgba(185,28,28,0.7);
  box-shadow: 0 0 0 .2rem rgba(185,28,28,0.18);
}
.rz-accordion .accordion-body{
  background:#0f1117;
  color:#e5e7eb;
}

/* light mode */
body.light-mode .rz-accordion .accordion-item{ border-color:#e5e7eb; }
body.light-mode .rz-accordion .accordion-button,
body.light-mode .rz-accordion .accordion-body{
  background:#fff;
  color:#111;
}

/* small outline buttons (quick nav) */
.btn-outline-rz{
  border: 1px solid #b91c1c !important;
  color: #b91c1c !important;
  background: transparent !important;
}
.btn-outline-rz:hover{
  background:#b91c1c !important;
  color:#fff !important;
}

/* helpers if not already */
.max-w-720{ max-width:720px; }
.rz-muted{ opacity:.82; }
.section-pad{ border-radius:16px; margin:22px 0; padding-left:18px; padding-right:18px; }

/* search input accent */
.rz-search{
  border: 2px solid rgba(185,28,28,0.55) !important;
}
.rz-search:focus{
  border-color: rgba(185,28,28,0.85) !important;
  box-shadow: 0 0 0 .2rem rgba(185,28,28,0.18) !important;
}

/* card link */
.rz-card-link{ text-decoration:none; color:inherit; display:block; }

/* hover */
.rz-hover{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rz-hover:hover{
  transform: translateY(-4px);
  box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.35);
  border-color: rgba(185,28,28,0.28);
}

/* image ratio like old code */
.card-img-top{
  aspect-ratio: 2 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}
/* breadcrumb without bg-white */
.rz-breadcrumb{ background: transparent !important; }
.rz-breadcrumb .breadcrumb-item{ color: rgba(229,231,235,0.55); }
body.light-mode .rz-breadcrumb .breadcrumb-item{ color:#6b7280; }



/* Breadcrumb contrast (dark + light) */
.breadcrumb{
  background: transparent !important;
}

body:not(.light-mode) .breadcrumb .breadcrumb-item,
body:not(.light-mode) .breadcrumb .breadcrumb-item a{
  color: rgba(229,231,235,0.72) !important;
  text-decoration: none;
}

body:not(.light-mode) .breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  color: rgba(229,231,235,0.35) !important;  /* the "/" */
}

body:not(.light-mode) .breadcrumb .breadcrumb-item.active{
  color: rgba(229,231,235,0.55) !important;
}


/* blog header image */
.rz-img{
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
body.light-mode .rz-img{
  border-color:#e5e7eb;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
body{ overflow-x: hidden; }
@media (min-width: 992px){
  .blog-sidebar{
    position: sticky;
    top: calc(var(--rz-header-height, 112px) + 12px);
    align-self: flex-start;
  }
}
/* Limit blog layout width on ultra-wide screens */
.blog-page.container{
  max-width: 1140px !important;  /* try 1100 / 1180 / 1240 */
}
/* keep mobile exactly the same */
@media (max-width: 767.98px){
  .blog-page{
    max-width: 100%;
  }
}
/* =========================================
   Bootstrap cards inside .blog-card (themes)
   ========================================= */

/* DARK (default) */
body:not(.light-mode) .blog-card .card{
  background:#0f1117 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 .6rem 1.6rem rgba(0,0,0,.35);
}
body:not(.light-mode) .blog-card .card .card-title{
  color:#f3f4f6 !important;
}
body:not(.light-mode) .blog-card .card .card-text,
body:not(.light-mode) .blog-card .card small,
body:not(.light-mode) .blog-card .card .text-muted{
  color:#9ca3af !important;
}

/* LIGHT */
body.light-mode .blog-card .card{
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 .5rem 1.25rem rgba(0,0,0,.08);
}
body.light-mode .blog-card .card .card-title{
  color:#111827 !important;
}
body.light-mode .blog-card .card .card-text,
body.light-mode .blog-card .card small,
body.light-mode .blog-card .card .text-muted{
  color:#6b7280 !important;
}
/* ===== FIX: outline button contrast on dark sections ===== */
body:not(.light-mode) .btn-outline-rz{
  color:#ffffff !important;
  border:2px solid #ef4444 !important;
  background: transparent !important;
}

body:not(.light-mode) .btn-outline-rz:hover,
body:not(.light-mode) .btn-outline-rz:focus{
  background:#ef4444 !important;
  color:#0b0b0f !important;
  border-color:#ef4444 !important;
}
/* ===== RiftZone homepage redesign — new rules only, append to style.css ===== */

.rz-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.rz-muted{ color:#9ca3af; }

/* ===== self-contained post card — used by hero, on-deck, and the grid.
   Explicit color set everywhere so link-blue can never bleed through. ===== */
.rz-post-card{
  display:block;
  background:#0f1117;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  color:#e5e7eb;
  text-decoration:none;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rz-post-card:hover{
  transform:translateY(-3px);
  border-color:rgba(185,28,28,.35);
  box-shadow:0 .75rem 1.5rem rgba(0,0,0,.35);
  color:#e5e7eb;
}
.rz-post-card h2, .rz-post-card h3{ color:#f3f4f6; }
.rz-post-card p{ color:#cbd5e1; }
body.light-mode .rz-post-card{ background:#fff; border-color:#e5e7eb; color:#111; }
body.light-mode .rz-post-card h2, body.light-mode .rz-post-card h3{ color:#111827; }
body.light-mode .rz-post-card p{ color:#374151; }

.rz-hero-lead{ min-height:100%; }
.rz-hero-lead .rz-card-media{ aspect-ratio:16/8; border-radius:12px 12px 0 0; }

.rz-ondeck-media{ width:40%; flex-shrink:0; }
.rz-ondeck-media .rz-card-media{ height:100%; aspect-ratio:auto; border-radius:12px 0 0 12px; }
.rz-min-w-0{ min-width:0; }

/* game chip strip — replaces the old big per-game cards */
.rz-chips-strip{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  margin:22px 0;
}
.rz-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:#0f1117;
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
  font-weight:500;
  color:#e5e7eb;
  transition:border-color .2s ease, background .2s ease;
}
.rz-chip:hover{ border-color:rgba(185,28,28,.45); background:#151821; color:#fff; }
body.light-mode .rz-chip{ background:#fff; border-color:#e5e7eb; color:#111; }
body.light-mode .rz-chip:hover{ background:#fef2f2; }
.rz-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rz-chip-count{ color:#9ca3af; font-size:11.5px; }

/* sidebar */
.rz-sidebar{ position:sticky; top: calc(var(--rz-header-height, 112px) + 12px); }
.rz-widget{
  background:#0f1117;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:18px;
}
.rz-widget-scroll{
  max-height:280px;
  overflow-y:auto;
}
body.light-mode .rz-widget{ background:#fff; border-color:#e5e7eb; }
.rz-rank-item, .rz-browse-item{
  color:inherit;
  padding:8px 0;
  font-size:13.5px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
body.light-mode .rz-rank-item, body.light-mode .rz-browse-item{ border-color:#e5e7eb; }
.rz-rank-item:last-child, .rz-browse-item:last-child{ border-bottom:none; }
.rz-rank-num{
  font-weight:700;
  color:#b91c1c;
  font-size:16px;
  width:20px;
  display:inline-block;
  flex-shrink:0;
}

@media (max-width: 991.98px){
  .rz-sidebar{ position:static; margin-top:2rem; }
}

/* ===== navbar: black background + two-row layout (logo row, then links row) ===== */

/* .bg-dark was rendering Bootstrap's default gray, not your actual near-black */
header.fixed-top.bg-dark,
header.fixed-top .navbar.bg-dark{
  background:#050507 !important;
}

/* stack the two rows instead of Bootstrap's default single flex row */
.navbar > .container.rz-navbar-stack{
  flex-direction:column;
  align-items:stretch;
}

.rz-nav-row1{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:.5rem 0;
}
.rz-nav-row1 .navbar-toggler{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
}

.rz-nav-row2{
  padding-bottom:.5rem;
}
@media (min-width: 992px){
  .rz-nav-row2{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
  }
  .navbar-nav .nav-link{
    padding-left:.75rem;
    padding-right:.75rem;
  }
}

@media (max-width: 991.98px){
  .rz-nav-row1{
    justify-content:space-between;
  }
  .rz-nav-row1 .navbar-brand{
    margin:0 !important;
  }
  .rz-nav-row1 .navbar-toggler{
    position:static;
    transform:none;
  }
}

.rz-nav-divider{
  width:1px;
  height:20px;
  background:rgba(255,255,255,.14);
  margin:0 .4rem;
}

/* Blogs / About / Contact: still one click away, just visually quieter than the games */
.nav-link.rz-nav-secondary{
  color:#6b7280;
}
.nav-link.rz-nav-secondary:hover{ color:#e5e7eb; }
.nav-link.rz-nav-secondary.active{ color:#b91c1c !important; }

/* header is two rows tall now — logo row + links row */
body{ padding-top: 112px; }
@media (max-width: 991.98px){
  body{ padding-top: 64px; }
}


/* ===== card media: real photo if one exists, a branded tint if it doesn't — never a plain empty box ===== */
.rz-card-media{
  position:relative;
  aspect-ratio:2/1;
  overflow:hidden;
  border-radius:12px 12px 0 0;
  background:#0f1117;
}
.rz-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rz-card-media.rz-fallback::before{
  content:'';
  position:absolute;
  inset:0;
  opacity:.16;
}
.rz-card-media.rz-fallback::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px);
}
.rz-card-media .rz-badge{ position:absolute; top:12px; left:12px; z-index:2; }

.rz-card-media.rz-fallback.rz-tint-valorant::before{ background:#ff4655; }
.rz-card-media.rz-fallback.rz-tint-league-of-legends::before{ background:#c89b3c; }
.rz-card-media.rz-fallback.rz-tint-genshin-impact::before{ background:#5a9bd4; }
.rz-card-media.rz-fallback.rz-tint-teamfight-tactics::before{ background:#2f8f83; }
.rz-card-media.rz-fallback.rz-tint-roblox::before{ background:#3c3c3c; }
.rz-card-media.rz-fallback.rz-tint-fortnite::before{ background:#9147ff; }
.rz-card-media.rz-fallback.rz-tint-apex-legends::before{ background:#da292a; }
.rz-card-media.rz-fallback.rz-tint-news::before{ background:#6c5ce7; }

/* ===== hub pages: filter tabs + content-type badges (news/guide/event) =====
   These pages are single-game, so a game badge would be redundant — badging
   by content type instead. Replaces what used to be a duplicate inline
   <style> block per hub page with off-brand colors and no dark/light support. */
.rz-filter-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.12);
}
.rz-tab{
  border:0;
  padding:10px 16px;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  background:rgba(255,255,255,.06);
  color:inherit;
  transition:background .2s ease, color .2s ease;
}
.rz-tab.active{
  background:#b91c1c;
  color:#fff;
}
body.light-mode .rz-filter-tabs{ background:rgba(0,0,0,.04); border-color:#e5e7eb; }
body.light-mode .rz-tab{ background:rgba(0,0,0,.05); }

.rz-badge-news{ background:#3b82f6; }
.rz-badge-guide{ background:#b91c1c; }
.rz-badge-event{ background:#f59e0b; }

.rz-card-media.rz-fallback.rz-type-tint-news::before{ background:#3b82f6; }
.rz-card-media.rz-fallback.rz-type-tint-guide::before{ background:#b91c1c; }
.rz-card-media.rz-fallback.rz-type-tint-event::before{ background:#f59e0b; }

.rz-badge-codes{ background:#16a34a; }
.rz-card-media.rz-fallback.rz-type-tint-codes::before{ background:#16a34a; }

/* ===== ad slots — reserved dimensions to prevent layout shift (CLS) ===== */
.ad-slot { display:block; text-align:center; }
.ad-slot > ins { display:inline-block; }

@media (min-width: 992px){
  .ad-top > ins, .ad-mid > ins, .ad-bottom > ins { width:336px; height:280px; }
  .ad-top, .ad-mid, .ad-bottom { height:280px; }
  .ad-bottom { margin-top:24px; }
}
@media (min-width:576px) and (max-width:991.98px){
  .ad-top > ins, .ad-mid > ins, .ad-bottom > ins { width:300px; height:250px; }
  .ad-top, .ad-mid, .ad-bottom { height:250px; }
  .ad-bottom { margin-top:24px; }
}
@media (max-width:575.98px){
  .ad-top > ins, .ad-mid > ins, .ad-bottom > ins { width:100%; height:250px; }
  .ad-top, .ad-mid, .ad-bottom { height:250px; }
  .ad-bottom { margin-top:24px; }
}