/* ============================================================
   METRIVANT BLOG — DARK THEME v2
   Updated: April 2026

   FONT HIERARCHY:
   Orbitron     → Site logo / brand mark only
   Inter Tight  → All headings (H1–H4), card post titles
   Inter        → Body, nav, meta, excerpts, all UI text

   HOW TO INSTALL:
   WordPress Admin → Appearance → Customize → Additional CSS
   Paste this entire file, click Publish.
   OR: Kadence → General → Custom CSS (preferred)
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&display=swap');

/* --- Design Tokens --- */
:root {
  --mv-bg:          #080D1A;
  --mv-bg-card:     #0C1220;
  --mv-bg-hover:    #101828;
  --mv-border:      #1A2540;
  --mv-border-dim:  rgba(26,37,64,0.55);
  --mv-accent:      #00B4FF;
  --mv-accent-dim:  rgba(0,180,255,0.10);
  --mv-accent-glow: 0 0 28px rgba(0,180,255,0.14);
  --mv-white:       #EDF2FF;
  --mv-text:        #B8C5DA;
  --mv-muted:       #5E7087;
  --mv-radius:      6px;
  --mv-font-brand:  'Orbitron', monospace;
  --mv-font-head:   'Inter Tight', 'Inter', -apple-system, sans-serif;
  --mv-font-body:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mv-post-max:    760px;
}

/* ============================================================
   BASE
   ============================================================ */
html, body, .site, .site-content, #page {
  background-color: var(--mv-bg) !important;
  color: var(--mv-text) !important;
  font-family: var(--mv-font-body) !important;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

::-webkit-scrollbar { width: 5px; background: var(--mv-bg); }
::-webkit-scrollbar-thumb { background: var(--mv-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mv-accent); }
::selection { background: rgba(0,180,255,0.18); color: #fff; }

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
#masthead,
.site-header,
.header-wrap,
header.site-header {
  background-color: rgba(8,13,26,0.97) !important;
  border-bottom: 1px solid var(--mv-border) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

/* Site Title — Orbitron (logo only) */
.site-title,
.site-title a,
.site-branding .site-title,
.site-branding .site-title a {
  font-family: var(--mv-font-brand) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mv-white) !important;
  text-decoration: none !important;
}

/* Nav links — Inter */
.main-navigation a,
.site-header-row a,
#site-navigation a,
.header-navigation a,
.kadence-navigation a,
.primary-menu li a,
.nav-menu > li > a {
  font-family: var(--mv-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--mv-text) !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
}

.main-navigation a:hover,
.primary-menu li a:hover,
.nav-menu > li > a:hover {
  color: var(--mv-accent) !important;
}

/* Nav CTA */
.header-cta a,
.header-navigation .button a,
header .wp-block-button__link,
.site-header .button a {
  background: var(--mv-accent) !important;
  color: #000 !important;
  font-family: var(--mv-font-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  padding: 8px 18px !important;
  border-radius: var(--mv-radius) !important;
  border: none !important;
  text-decoration: none !important;
  transition: opacity 0.18s ease !important;
}

/* ============================================================
   BLOG INDEX — POST GRID
   ============================================================ */
.blog .site-main,
.archive .site-main,
.home .site-main,
main#main,
.content-area,
#content {
  background-color: var(--mv-bg) !important;
  padding: 48px 0 80px !important;
}

/* Archive/page label */
.page-title,
.archive-title,
.page-header .page-title {
  font-family: var(--mv-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--mv-accent) !important;
  margin-bottom: 36px !important;
}

/* Grid gap */
.posts-container,
.wp-block-post-template,
ul.wp-block-post-template,
.loop-container {
  gap: 24px !important;
}

/* === POST CARD === */
article.post,
article.type-post,
.wp-block-post,
.type-post {
  background-color: var(--mv-bg-card) !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: var(--mv-radius) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
  box-shadow: 0 1px 12px rgba(0,0,0,0.28) !important;
}

article.post:hover,
article.type-post:hover,
.wp-block-post:hover {
  border-color: rgba(0,180,255,0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 28px rgba(0,180,255,0.09) !important;
}

/* Featured image */
.post-thumbnail,
.wp-block-post-featured-image {
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.post-thumbnail img,
.wp-block-post-featured-image img {
  width: 100% !important;
  height: 192px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform 0.45s ease !important;
}

article:hover .post-thumbnail img,
article:hover .wp-block-post-featured-image img {
  transform: scale(1.04) !important;
}

/* Card text padding */
.entry-header,
.entry-summary,
.entry-footer,
.entry-meta,
.wp-block-post-title,
.wp-block-post-excerpt,
.wp-block-post-date {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* Category label */
.cat-links,
.entry-meta .cat-links,
.wp-block-post-terms {
  display: block !important;
  padding-top: 18px !important;
  padding-bottom: 4px !important;
  font-family: var(--mv-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--mv-accent) !important;
}

.cat-links a,
.wp-block-post-terms a {
  color: var(--mv-accent) !important;
  text-decoration: none !important;
}

/* Card post title — Inter Tight */
.entry-title,
.entry-title a,
.wp-block-post-title,
.wp-block-post-title a {
  font-family: var(--mv-font-head) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  color: var(--mv-white) !important;
  text-decoration: none !important;
  margin: 6px 0 10px !important;
  display: block !important;
  transition: color 0.18s ease !important;
}

.entry-title a:hover,
.wp-block-post-title a:hover {
  color: var(--mv-accent) !important;
}

/* Card excerpt — Inter */
.entry-summary p,
.wp-block-post-excerpt__excerpt,
.entry-summary {
  font-family: var(--mv-font-body) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--mv-muted) !important;
  margin: 0 0 14px !important;
}

/* Date */
.entry-date,
.posted-on,
.wp-block-post-date,
.wp-block-post-date time {
  font-family: var(--mv-font-body) !important;
  font-size: 11px !important;
  color: var(--mv-muted) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  padding-top: 12px !important;
  padding-bottom: 4px !important;
  display: block !important;
}

/* Read More */
.more-link,
.wp-block-read-more a,
.wp-block-post-excerpt__more-link {
  display: inline-block !important;
  font-family: var(--mv-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--mv-accent) !important;
  text-decoration: none !important;
  padding: 0 0 22px !important;
  transition: opacity 0.18s ease !important;
}

.more-link:hover,
.wp-block-read-more a:hover {
  opacity: 0.65 !important;
}

/* ============================================================
   SINGLE POST — TYPOGRAPHY
   ============================================================ */
.single .site-main,
.page .site-main {
  background-color: var(--mv-bg) !important;
}

.single article,
.page article {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: var(--mv-post-max) !important;
  margin: 0 auto !important;
  padding: 60px 24px 88px !important;
}

/* H1 Post Title — Inter Tight 800, large, tight tracking */
.single .entry-title,
.page .entry-title {
  font-family: var(--mv-font-head) !important;
  font-size: clamp(30px, 4vw, 48px) !important;
  font-weight: 800 !important;
  color: var(--mv-white) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 22px !important;
  padding: 0 !important;
}

/* Post meta bar */
.single .entry-meta {
  padding: 0 !important;
  font-family: var(--mv-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--mv-muted) !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 52px !important;
  padding-bottom: 28px !important;
  border-bottom: 1px solid var(--mv-border) !important;
}

/* Body text — Inter */
.entry-content p,
.entry-content li,
.entry-content dd {
  font-family: var(--mv-font-body) !important;
  color: var(--mv-text) !important;
  font-size: 16px !important;
  line-height: 1.88 !important;
}

/* Strong — white, not just bold */
.entry-content strong {
  color: var(--mv-white) !important;
  font-weight: 600 !important;
}

/* em / italic */
.entry-content em {
  color: var(--mv-text) !important;
  font-style: italic !important;
}

/* Article H2 — Inter Tight, clear heading hierarchy */
/* More space ABOVE than below — groups heading with its section */
.entry-content h2 {
  font-family: var(--mv-font-head) !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  color: var(--mv-white) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.018em !important;
  margin: 3.2rem 0 0.9rem !important;
  padding-bottom: 0.65rem !important;
  border-bottom: 1px solid var(--mv-border) !important;
}

/* H3 — Inter Tight */
.entry-content h3 {
  font-family: var(--mv-font-head) !important;
  font-size: 1.18rem !important;
  font-weight: 600 !important;
  color: var(--mv-white) !important;
  line-height: 1.28 !important;
  letter-spacing: -0.012em !important;
  margin: 2.4rem 0 0.7rem !important;
}

/* H4 — Inter Tight */
.entry-content h4 {
  font-family: var(--mv-font-head) !important;
  font-size: 1.03rem !important;
  font-weight: 600 !important;
  color: var(--mv-white) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.008em !important;
  margin: 2rem 0 0.6rem !important;
}

/* H5 */
.entry-content h5 {
  font-family: var(--mv-font-head) !important;
  font-size: 0.93rem !important;
  font-weight: 600 !important;
  color: var(--mv-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 1.8rem 0 0.5rem !important;
}

/* Content links */
.entry-content a:not([class]) {
  color: var(--mv-accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0,180,255,0.2) !important;
  transition: border-color 0.18s ease !important;
}

.entry-content a:not([class]):hover {
  border-color: var(--mv-accent) !important;
}

/* Blockquote — "Quick Answer" premium treatment */
.entry-content blockquote {
  border-left: 3px solid var(--mv-accent) !important;
  background: linear-gradient(135deg, rgba(0,180,255,0.06) 0%, rgba(12,18,32,0.95) 60%) !important;
  border-radius: 0 var(--mv-radius) var(--mv-radius) 0 !important;
  padding: 22px 28px !important;
  margin: 36px 0 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  position: relative !important;
}

.entry-content blockquote::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--mv-accent), transparent) !important;
  opacity: 0.35 !important;
}

.entry-content blockquote p {
  margin: 0 !important;
  font-family: var(--mv-font-body) !important;
  font-size: 15px !important;
  line-height: 1.78 !important;
  color: var(--mv-text) !important;
}

.entry-content blockquote p strong {
  font-family: var(--mv-font-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mv-accent) !important;
  display: block !important;
  margin-bottom: 10px !important;
}

/* Code inline */
.entry-content code {
  background-color: rgba(0,180,255,0.08) !important;
  border: 1px solid rgba(0,180,255,0.18) !important;
  color: var(--mv-accent) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  padding: 2px 7px !important;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace !important;
}

/* Code block */
.entry-content pre {
  background-color: var(--mv-bg-card) !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: var(--mv-radius) !important;
  padding: 20px 24px !important;
  overflow-x: auto !important;
  margin: 28px 0 !important;
}

.entry-content pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* HR */
.entry-content hr {
  border: none !important;
  border-top: 1px solid var(--mv-border) !important;
  margin: 52px 0 !important;
}

/* Tables */
.entry-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: var(--mv-radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--mv-border) !important;
  margin: 36px 0 !important;
  font-size: 14px !important;
}

.entry-content thead,
.entry-content thead tr {
  background-color: rgba(0,180,255,0.06) !important;
}

.entry-content th {
  font-family: var(--mv-font-body) !important;
  color: var(--mv-accent) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--mv-border) !important;
  text-align: left !important;
}

.entry-content td {
  font-family: var(--mv-font-body) !important;
  color: var(--mv-text) !important;
  padding: 13px 18px !important;
  border-bottom: 1px solid var(--mv-border-dim) !important;
  line-height: 1.5 !important;
  vertical-align: top !important;
}

.entry-content tr:last-child td {
  border-bottom: none !important;
}

.entry-content tbody tr:hover td {
  background-color: rgba(255,255,255,0.015) !important;
}

/* Lists */
.entry-content ul,
.entry-content ol {
  padding-left: 24px !important;
}

.entry-content li {
  margin-bottom: 6px !important;
}

.entry-content ul li::marker {
  color: var(--mv-accent) !important;
}

/* Images */
.entry-content img {
  border-radius: var(--mv-radius) !important;
  border: 1px solid var(--mv-border) !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ============================================================
   BUTTONS & CTAs (sitewide)
   ============================================================ */
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"],
.button,
a.button {
  font-family: var(--mv-font-body) !important;
  background-color: var(--mv-accent) !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  border: none !important;
  border-radius: var(--mv-radius) !important;
  padding: 12px 26px !important;
  cursor: pointer !important;
  transition: opacity 0.18s ease !important;
  text-decoration: none !important;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  opacity: 0.85 !important;
  color: #000 !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--mv-accent) !important;
  border: 1px solid var(--mv-accent) !important;
}

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select {
  background-color: var(--mv-bg-card) !important;
  border: 1px solid var(--mv-border) !important;
  color: var(--mv-text) !important;
  border-radius: var(--mv-radius) !important;
  padding: 11px 16px !important;
  font-family: var(--mv-font-body) !important;
  font-size: 14px !important;
  width: 100% !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--mv-accent) !important;
  box-shadow: 0 0 0 3px rgba(0,180,255,0.09) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--mv-muted) !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination,
.nav-links,
.posts-navigation,
.entry-navigation,
.wp-block-query-pagination {
  padding: 56px 0 !important;
  text-align: center !important;
}

.page-numbers,
.nav-links a,
.posts-navigation a {
  font-family: var(--mv-font-body) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  background-color: var(--mv-bg-card) !important;
  border: 1px solid var(--mv-border) !important;
  color: var(--mv-muted) !important;
  border-radius: var(--mv-radius) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  margin: 0 3px !important;
  transition: border-color 0.18s, color 0.18s !important;
}

.page-numbers.current {
  border-color: var(--mv-accent) !important;
  color: var(--mv-accent) !important;
  background-color: var(--mv-accent-dim) !important;
}

.page-numbers:hover,
.nav-links a:hover {
  border-color: var(--mv-accent) !important;
  color: var(--mv-accent) !important;
}

/* ============================================================
   SIDEBAR & WIDGETS
   ============================================================ */
.widget-area,
aside.widget-area,
.sidebar {
  background: transparent !important;
}

.widget {
  background-color: var(--mv-bg-card) !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: var(--mv-radius) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}

.widget-title,
.widgettitle {
  font-family: var(--mv-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--mv-accent) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--mv-border) !important;
}

.widget a,
.widget li a {
  font-family: var(--mv-font-body) !important;
  color: var(--mv-text) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: color 0.18s !important;
}

.widget a:hover {
  color: var(--mv-accent) !important;
}

/* ============================================================
   FOOTER — COMPREHENSIVE DARK FIX
   Forces all footer elements off royal blue
   ============================================================ */
.site-footer,
#colophon,
footer.site-footer,
footer,
.footer-wrap,
.footer-container,
.site-footer-wrap,
.footer-upper,
.footer-lower,
.footer-widget-area,
[class*="footer"],
[id*="footer"] {
  background-color: var(--mv-bg-card) !important;
  background: var(--mv-bg-card) !important;
  color: var(--mv-muted) !important;
}

.site-footer,
#colophon,
footer.site-footer {
  border-top: 1px solid var(--mv-border) !important;
  padding: 32px 24px !important;
  text-align: center !important;
}

.site-footer p,
.site-info,
.site-footer span,
[class*="footer"] p,
[class*="footer"] span {
  font-family: var(--mv-font-body) !important;
  font-size: 12px !important;
  color: var(--mv-muted) !important;
}

.site-footer a,
[class*="footer"] a,
[id*="footer"] a {
  color: var(--mv-muted) !important;
  text-decoration: none !important;
  transition: color 0.18s !important;
}

.site-footer a:hover,
[class*="footer"] a:hover {
  color: var(--mv-accent) !important;
}

/* Hide WordPress footer credit */
.powered-by,
.site-info a[href*="wordpress.org"],
.site-info a[href*="wordpress.com"] {
  display: none !important;
}

/* ============================================================
   SEARCH
   ============================================================ */
.search-form {
  display: flex !important;
  gap: 10px !important;
}

.search-form input[type="search"] {
  flex: 1 !important;
}

/* ============================================================
   404
   ============================================================ */
.error404 .site-main {
  text-align: center !important;
  padding: 120px 24px !important;
}

.error404 .page-title {
  font-family: var(--mv-font-brand) !important;
  font-size: 80px !important;
  color: var(--mv-accent) !important;
  letter-spacing: 0.1em !important;
}

/* ============================================================
   KADENCE OVERRIDES
   ============================================================ */
.kadence-theme .header-wrap,
.kadence-theme #masthead {
  background-color: rgba(8,13,26,0.97) !important;
}

.kadence-theme .entry-content-wrap,
.kadence-theme .content-bg,
.kadence-column,
.kadence-row-layout-inner {
  background-color: var(--mv-bg) !important;
}

.kb-row-layout-wrap,
.wp-block-kadence-rowlayout {
  background-color: var(--mv-bg) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .single article,
  .page article {
    padding: 40px 20px 60px !important;
  }

  .entry-content h2 {
    font-size: 1.3rem !important;
    margin-top: 2.4rem !important;
  }

  .entry-content h3 {
    font-size: 1.08rem !important;
  }

  .post-thumbnail img,
  .wp-block-post-featured-image img {
    height: 170px !important;
  }
}

@media (max-width: 480px) {
  .single .entry-title,
  .page .entry-title {
    font-size: 28px !important;
    letter-spacing: -0.018em !important;
  }

  .entry-content p,
  .entry-content li {
    font-size: 15px !important;
  }
}