/* Layout Defaults and Variables */
:root {
  --as-bg: #0b0b0d;
  --as-surface: #121216;
  --as-ink: #ffffff;
  --as-muted: #b7b7c3;
  --as-pink: #ff2e79;
  --as-pink-700: #e0266c;
  --as-border: #22222a;
  
  --bs-body-bg: var(--as-bg);
  --bs-body-color: var(--as-ink);
  --bs-border-color: var(--as-border);
  --bs-primary: var(--as-pink);
  --bs-link-color: var(--as-pink);
  --bs-link-hover-color: var(--as-pink-700);
}

/* Main */
body {
  background: var(--as-bg);
  color: var(--as-ink);
}
.page-wrap {
  min-height: 100vh;
  display:flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
footer {
  flex-shrink: 0;
  background: #0e0e12;
  border-top: 1px solid var(--as-border);
}

/* Page Header */
.mini-hero {
  background: linear-gradient(180deg, rgba(255,46,121,.09), rgba(255,46,121,0));
  border: 1px solid var(--as-border);
  border-radius: 1rem;
}

/* Cards */
.post-card, .widget {
  background: var(--as-surface);
  border: 1px solid var(--as-border);
  border-radius: 1rem;
}
.post-card:hover {
  border-color: var(--as-pink);
  transition: border-color .2s ease;
}
.post-card a {
  color: var(--as-pink);
  text-decoration: none;
}

/* Category Pills */
.category-badge {
  background: transparent;
  border: 1px solid var(--as-border);
  color: var(--as-muted);
  padding: .25rem .5rem;
  border-radius: 2rem;
  font-size: .8rem;
}

/* Social Media Brand Colors */
.btn-youtube {
  background: #FF0000;
  color: #fff;
}
.btn-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color:#fff;
}
.btn-tiktok {
  background: #000;
  color:#fff;
}
.btn-x {
  background: #000;
  color: #fff;
  border: 1px solid #333;
}
.btn-bluesky {
  background: #1185fe;
  color: #fff;
}
.btn-social {
  border-radius: .75rem;
  padding:.5rem .75rem;
  display: inline-flex;
  align-items: center;
  gap:.5rem;
}

/* Pagination */
.pagination .page-link {
  background: var(--as-surface);
  border-color: var(--as-border);
  color: var(--as-ink);
}
.pagination .page-item.active .page-link {
  background: var(--as-pink);
  border-color: var(--as-pink);
}

/* Accessibility */
.form-control:focus, .form-check-input:focus, .btn:focus, .page-link:focus {
  box-shadow: 0 0 0 .25rem rgba(255,46,121,.25);
  border-color: var(--as-pink);
}

/* Navbar */
.brand-mark {
  color: var(--as-ink);
  font-weight:800;
  letter-spacing: .5px;
}
.brand-moon {
  color: var(--as-pink);
}
.navbar {
  border-color: var(--as-border) !important;
  background: #0e0e12;
}
.navbar .dropdown-menu.as-menu {
  background: #0e0e12;
  border: 1px solid var(--as-border);
  border-radius: .75rem;
  padding: .5rem;
  min-width: 12rem;
}
.navbar .dropdown-menu.as-menu .dropdown-item {
  color: #fff;
  border-radius: .5rem;
}
.navbar .dropdown-menu.as-menu .dropdown-item:hover, .navbar .dropdown-menu.as-menu .dropdown-item:focus {
  color: #fff;
  background: transparent;
  filter: brightness(1.15);
  text-decoration: none;
}

/* Preview Images */
.ratio-thumb {
  background: #0a0a0a;
  border: 1px solid var(--as-border);
  border-radius: .75rem;
}

/* Muted Meta */
.meta {
  color: var(--as-muted);
  font-size: .9rem;
}

/* To Top Button */
#toTop {
  right: 1rem;
  bottom: 1rem;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  display: none;
  z-index: 1030;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  align-items: center;
  justify-content: center;
}
#toTop i {
  line-height: 1;
  pointer-events: none;
}
#toTop:focus {
  box-shadow: 0 0 0 .25rem rgba(255,46,121,.25);
}

/* Posts */
.post-content img {
  max-width: 100%;
  height: auto;
}
.post-content .table {
  --bs-table-bg: transparent;
}
mark.search-hit {
  background: rgba(255,46,121,.35);
  color: #fff;
  padding: 0 .15em;
  border-radius: .2rem;
}

/* Coming Soon Timer */
.timer-box {
  background: var(--as-surface);
  border: 1px solid var(--as-border);
  border-radius: .75rem;
  padding: 1rem;
  text-align: center;
}
.timer-box .value {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
}
.timer-box .label {
  color: var(--as-muted);
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}