/*
 * Rocket Science London — Design Upgrade
 * A refined, modern layer on top of the Blogrift theme.
 * Author: Claude / Anthropic
 */

/* =========================================================
   1. DESIGN TOKENS — override the defaults with a sharper palette
   ========================================================= */
:root {
  /* Accent: electric indigo instead of warm tan */
  --rs-accent:        #5B4CF5;
  --rs-accent-dark:   #3d31d4;
  --rs-accent-light:  #ede9fe;

  /* Surface */
  --rs-bg:            #f8f8fb;
  --rs-surface:       #ffffff;
  --rs-border:        #e8e8f0;

  /* Type */
  --rs-ink:           #111827;
  --rs-ink-muted:     #6b7280;

  /* Nav */
  --rs-nav-bg:        #ffffff;
  --rs-nav-height:    64px;

  /* Topbar */
  --rs-topbar-bg:     #0f0e17;

  /* Radius & shadow */
  --rs-radius-sm:     6px;
  --rs-radius-md:     12px;
  --rs-radius-lg:     18px;
  --rs-shadow-card:   0 2px 12px rgba(91,76,245,0.07), 0 1px 3px rgba(0,0,0,0.06);
  --rs-shadow-hover:  0 8px 28px rgba(91,76,245,0.13), 0 2px 8px rgba(0,0,0,0.08);
}

/* =========================================================
   2. GLOBAL BASE
   ========================================================= */
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--rs-bg);
  color: var(--rs-ink-muted);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  color: var(--rs-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

a { color: var(--rs-accent); }
a:hover, a:focus { color: var(--rs-accent-dark); }

.wrapper {
  background-color: var(--rs-bg);
}

/* =========================================================
   3. TOPBAR (date/social strip)
   ========================================================= */
.bs-head-detail {
  background: var(--rs-topbar-bg);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 6px 0;
}

.bs-head-detail .top-date,
.bs-head-detail .top-date .time {
  background: var(--rs-accent);
  border-radius: var(--rs-radius-sm);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
}

/* =========================================================
   4. HEADER / BRANDING
   ========================================================= */
.bs-headfive {
  background: var(--rs-nav-bg);
  border-bottom: 1px solid var(--rs-border);
  box-shadow: 0 1px 0 var(--rs-border);
}

.bs-headfive .bs-header-main .inner {
  padding: 20px 0;
  min-height: var(--rs-nav-height);
}

/* Site title — display as a wordmark */
.site-title a {
  font-size: 44px !important;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--rs-ink) !important;
  text-decoration: none;
}
.site-title a:hover { color: var(--rs-accent) !important; }

.site-description {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rs-ink-muted) !important;
  opacity: 0.7;
}

/* =========================================================
   5. NAVIGATION
   ========================================================= */
.bs-headfive .navbar-wp {
  border-top: 1px solid var(--rs-border) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: var(--rs-nav-bg);
}

.bs-headfive .navbar-wp .navbar-nav > li > a {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 16px !important;
  color: var(--rs-ink) !important;
  transition: color 0.18s ease;
  position: relative;
}

.bs-headfive .navbar-wp .navbar-nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--rs-accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
  border-radius: 2px 2px 0 0;
}

.bs-headfive .navbar-wp .navbar-nav > li > a:hover::after,
.bs-headfive .navbar-wp .navbar-nav > li > a:focus::after {
  transform: scaleX(1);
}

.bs-headfive .navbar-wp .navbar-nav > li > a:hover,
.bs-headfive .navbar-wp .navbar-nav > li > a:focus {
  color: var(--rs-accent) !important;
}

/* Dropdown */
.navbar-wp .dropdown-menu {
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  box-shadow: var(--rs-shadow-hover);
  padding: 6px;
  margin-top: 6px;
  background: var(--rs-surface);
}

.navbar-wp .dropdown-menu > li > a {
  border-radius: var(--rs-radius-sm);
  font-size: 13px;
  padding: 8px 14px;
  color: var(--rs-ink-muted) !important;
  background: transparent !important;
  transition: background 0.15s, color 0.15s;
}

.navbar-wp .dropdown-menu > li > a:hover,
.navbar-wp .dropdown-menu > li > a:focus {
  background: var(--rs-accent-light) !important;
  color: var(--rs-accent) !important;
}

/* Search button */
.navbar-wp .dropdown-menu.searchinner [type=submit] {
  background: var(--rs-accent);
  border-color: var(--rs-accent);
  border-radius: var(--rs-radius-sm);
}

/* =========================================================
   6. CATEGORY PILLS / LABELS
   ========================================================= */
a.category-color-1 { color: var(--rs-accent) !important; }

.bs-blog-category a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rs-accent) !important;
  background: var(--rs-accent-light);
  padding: 3px 10px;
  border-radius: 99px;
  display: inline-block;
  line-height: 1.8;
  transition: background 0.15s, color 0.15s;
}

.bs-blog-category a:hover {
  background: var(--rs-accent) !important;
  color: #fff !important;
}

.bs-blog-category:before {
  background: var(--rs-accent);
}

/* =========================================================
   7. BLOG / POST CARDS
   ========================================================= */
.bs-blog-post {
  background: var(--rs-surface);
  border-radius: var(--rs-radius-lg);
  overflow: hidden;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
  box-shadow: var(--rs-shadow-card);
  margin-bottom: 2rem;
  padding: 0 !important;
}

.bs-blog-post:hover {
  box-shadow: var(--rs-shadow-hover) !important;
  transform: translateY(-3px);
}

/* Inner padding for list posts */
.list-blog.bs-blog-post {
  padding: 0 !important;
  gap: 0 !important;
}

.list-blog .bs-blog-thumb {
  border-radius: 0;
}

.list-blog .wd-back {
  padding: 1.5rem 1.75rem;
  background: var(--rs-surface);
}

/* Post thumbnail hover effect */
.bs-blog-thumb {
  overflow: hidden;
}

.bs-blog-thumb img {
  transition: transform 0.4s ease;
}

.bs-blog-post:hover .bs-blog-thumb img {
  transform: scale(1.04);
}

/* Post title */
.bs-blog-post .title a,
.bs-blog-post .title {
  color: var(--rs-ink) !important;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.bs-blog-post .title a:hover,
.bs-blog-post .title a:focus {
  color: var(--rs-accent) !important;
}

/* Post meta */
.bs-blog-meta,
.bs-blog-meta a,
.bs-blog-meta span {
  font-size: 12px;
  font-weight: 400;
  color: var(--rs-ink-muted) !important;
  letter-spacing: 0.01em;
}

.bs-blog-meta a:hover,
.bs-blog-meta a:focus {
  color: var(--rs-accent) !important;
}

/* =========================================================
   8. FEATURED / HERO CARD
   ========================================================= */
.mainfeatured .bs-blog-post .title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mainfeatured .bs-blog-post p {
  font-size: 1rem;
  color: var(--rs-ink-muted);
  line-height: 1.7;
}

/* =========================================================
   9. SIDEBAR
   ========================================================= */
.bs-sidebar .bs-widget {
  background: var(--rs-surface);
  border-radius: var(--rs-radius-lg);
  border: 1px solid var(--rs-border);
  box-shadow: var(--rs-shadow-card);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.bs-sidebar .bs-widget:hover {
  box-shadow: none !important;
}

.bs-widget-title {
  border-color: var(--rs-border) !important;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
}

.bs-widget-title .title {
  color: var(--rs-ink) !important;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bs-widget-title .title:before {
  background: var(--rs-accent);
  border-radius: 2px;
}

.bs-sidebar .bs-widget ul li a {
  color: var(--rs-ink-muted) !important;
  font-size: 13.5px;
  transition: color 0.15s;
}

.bs-sidebar .bs-widget ul li a:hover,
.bs-sidebar .bs-widget ul li a:focus {
  color: var(--rs-accent) !important;
}

/* Tags */
.bs-sidebar .bs-widget .bs-widget-tags a,
.bs-sidebar .bs-widget .tagcloud a {
  font-size: 11px;
  font-weight: 600;
  border-radius: 99px;
  padding: 4px 12px;
  background: var(--rs-bg) !important;
  border-color: var(--rs-border) !important;
  color: var(--rs-ink-muted) !important;
  transition: all 0.15s;
}

.bs-sidebar .bs-widget .bs-widget-tags a:hover,
.bs-sidebar .bs-widget .tagcloud a:hover,
.bs-sidebar .bs-widget .bs-widget-tags a:focus,
.bs-sidebar .bs-widget .tagcloud a:focus {
  background: var(--rs-accent) !important;
  border-color: var(--rs-accent) !important;
  color: #fff !important;
}

/* Search */
.bs-sidebar .bs-widget.widget_search .btn {
  background: var(--rs-accent) !important;
  border-color: var(--rs-accent) !important;
  border-radius: var(--rs-radius-sm);
}
.bs-sidebar .bs-widget.widget_search .btn:hover,
.bs-sidebar .bs-widget.widget_search .btn:focus {
  background: var(--rs-accent-dark) !important;
  border-color: var(--rs-accent-dark) !important;
}

/* =========================================================
   10. BUTTONS & INPUTS
   ========================================================= */
.btn-theme, .more-link,
input[type="submit"], button,
[type=button], [type=submit] {
  background-color: var(--rs-accent) !important;
  border-color: var(--rs-accent) !important;
  border-radius: var(--rs-radius-sm);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: background 0.17s ease, box-shadow 0.17s ease;
}

.btn-theme:hover, .btn-theme:focus,
.more-link:hover, .more-link:focus,
input[type="submit"]:hover, button:hover,
[type=button]:hover, [type=submit]:hover {
  background: var(--rs-accent-dark) !important;
  border-color: var(--rs-accent-dark) !important;
  box-shadow: 0 4px 12px rgba(91,76,245,0.35);
}

input:not([type]), input[type="email"],
input[type="text"], input[type="search"], textarea {
  border-radius: var(--rs-radius-sm);
  border-color: var(--rs-border) !important;
  transition: border-color 0.17s, box-shadow 0.17s;
}

input:not([type]):focus, input[type="email"]:focus,
input[type="text"]:focus, input[type="search"]:focus, textarea:focus {
  border-color: var(--rs-accent) !important;
  box-shadow: 0 0 0 3px rgba(91,76,245,0.12);
  outline: none;
}

/* =========================================================
   11. PAGINATION
   ========================================================= */
.navigation.pagination .nav-links .page-numbers.current,
.navigation.pagination .nav-links a:hover,
a.error-btn {
  background-color: var(--rs-accent) !important;
  border-color: var(--rs-accent) !important;
  color: #fff !important;
}

.page-item.active .page-link {
  background: var(--rs-accent) !important;
  border-color: var(--rs-accent) !important;
}

/* =========================================================
   12. BLOCKQUOTE
   ========================================================= */
blockquote {
  border-left: 4px solid var(--rs-accent) !important;
  background: var(--rs-accent-light);
  border-radius: 0 var(--rs-radius-sm) var(--rs-radius-sm) 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

blockquote::before { color: var(--rs-accent) !important; }
blockquote p { color: var(--rs-ink) !important; }

/* =========================================================
   13. SINGLE POST
   ========================================================= */
.bs-blog-post.single {
  border-radius: var(--rs-radius-lg);
  box-shadow: var(--rs-shadow-card);
  overflow: hidden;
}

.wd-back {
  background: var(--rs-surface) !important;
  border-radius: var(--rs-radius-lg);
}

/* =========================================================
   14. COMMENTS
   ========================================================= */
.comments-area .reply a {
  background: var(--rs-accent) !important;
  border-color: var(--rs-accent) !important;
  border-radius: var(--rs-radius-sm);
}
.comments-area .reply a:hover,
.comments-area .reply a:focus {
  background: var(--rs-accent-dark) !important;
  border-color: var(--rs-accent-dark) !important;
}

/* =========================================================
   15. FOOTER
   ========================================================= */
.bs-footer {
  background: var(--rs-topbar-bg) !important;
  border-top: 3px solid var(--rs-accent);
}

.bs-footer .bs-widget-title .title {
  color: #fff !important;
}

.bs-footer .bs-widget-title .title:before {
  background: var(--rs-accent);
}

.bs-footer .bs-widget ul li a {
  color: rgba(255,255,255,0.7) !important;
}

.bs-footer .bs-widget ul li a:hover {
  color: var(--rs-accent) !important;
}

.bs-copyright {
  background: rgba(0,0,0,0.3) !important;
}

/* =========================================================
   16. SELECTION & SCROLLBAR
   ========================================================= */
::selection {
  background: var(--rs-accent);
  color: #fff;
}

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--rs-bg); }
::-webkit-scrollbar-thumb {
  background: #c5c0f5;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rs-accent);
}

/* =========================================================
   17. SWIPER / SLIDER BUTTONS
   ========================================================= */
.bs .swiper-button-prev,
.bs .swiper-button-next {
  background: var(--rs-topbar-bg);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: background 0.17s;
}

.bs .swiper-button-prev:hover,
.bs .swiper-button-next:hover {
  background: var(--rs-accent);
}

/* =========================================================
   18. MOBILE TWEAKS
   ========================================================= */
@media (max-width: 767.98px) {
  .mainfeatured .bs-blog-post .title {
    font-size: 1.5rem;
  }
  .bs-blog-post {
    border-radius: var(--rs-radius-md);
  }
}