/*
 Theme Name:   SensForge Dark
 Theme URI:    https://valorantsensconverter.com/
 Description:  Professional dark theme for Valorant Sensitivity Converter — matches the SensForge design with red accents, clean dark panels, and full readability.
 Author:       SensForge
 Template:     generatepress
 Version:      3.0.0
 Text Domain:  sensforge-dark
*/

/* ═══════════════════════════════════════════════════════════════
   1. FONTS & DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* Background layers */
  --bg-base:      #0a0a0f;
  --bg-surface:   #111118;
  --bg-card:      #16161f;
  --bg-elevated:  #1c1c27;
  --bg-input:     #12121a;

  /* Borders */
  --border:       rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.16);
  --border-accent:rgba(255,70,85,0.5);

  /* Valorant Red */
  --red:          #ff4655;
  --red-dark:     #d93040;
  --red-dim:      rgba(255,70,85,0.15);
  --red-glow:     rgba(255,70,85,0.25);

  /* Text */
  --txt-primary:  #f0f0f8;
  --txt-secondary:#b0b0cc;
  --txt-muted:    #70708a;
  --txt-faint:    #44445a;

  /* Typography */
  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;

  /* Shadow */
  --shadow-card:  0 4px 24px rgba(0,0,0,0.4);
  --shadow-glow:  0 0 32px rgba(255,70,85,0.12);
}

/* ═══════════════════════════════════════════════════════════════
   2. BASE RESET
═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg-base) !important;
  color: var(--txt-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Universal text color safety net */
p, li, span, td, th, label, figcaption,
.entry-content *, .page-content *,
.widget *, .comment-body * {
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   3. HEADER / NAVBAR
═══════════════════════════════════════════════════════════════ */

.site-header,
.site-header.has-inline-mobile-toggle {
  background: rgba(10,10,15,0.96) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: sticky !important;
  top: 0;
  z-index: 9999;
  padding: 0 !important;
}

.inside-header {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 0 28px !important;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Logo / Site Title ── */
.site-branding { display: flex; align-items: center; gap: 10px; }

.site-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

.site-title a,
.site-title a:visited,
.site-title a:hover,
.site-title a:focus,
.site-title a:active {
  color: var(--txt-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  text-transform: uppercase;
}

.site-title a:hover { color: var(--red) !important; }

/* ◈ logo icon color fix */
.site-title a::before { color: var(--red); }

.site-description {
  color: var(--txt-muted) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.02em;
  margin: 0 !important;
}

/* Logo image */
.custom-logo-link img,
.site-logo img,
.custom-logo {
  max-height: 42px !important;
  width: auto !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. NAVIGATION
═══════════════════════════════════════════════════════════════ */

.main-navigation,
.nav-primary { background: transparent !important; }

.main-navigation ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent !important;
}

.main-navigation ul li a,
.main-navigation a {
  color: var(--txt-secondary) !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  padding: 7px 14px !important;
  border-radius: var(--r-sm);
  transition: color 0.2s, background 0.2s;
  display: block;
}

.main-navigation ul li a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-page-ancestor > a {
  color: var(--txt-primary) !important;
  background: var(--bg-elevated) !important;
}

/* Mobile toggle */
.menu-toggle, button.menu-toggle {
  color: var(--txt-primary) !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 16px !important;
  cursor: pointer;
  font-family: var(--font-body);
}

/* Mobile dropdown */
@media (max-width: 768px) {
  .main-navigation ul.menu,
  .main-navigation .main-nav ul {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card) !important;
    padding: 8px;
  }
  .main-navigation ul li a {
    color: var(--txt-primary) !important;
    padding: 9px 14px !important;
    border-radius: var(--r-sm);
  }
  .main-navigation ul li a:hover {
    background: var(--bg-elevated) !important;
    color: var(--red) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   5. PAGE STRUCTURE
═══════════════════════════════════════════════════════════════ */

.site-content, #content, #primary, .content-area {
  background: var(--bg-base) !important;
}

.site-main { padding: 32px 0 60px !important; }

/* Full-width overrides for homepage / tool page */
.no-sidebar .content-area,
.no-sidebar #primary,
.page-template-full-width .content-area,
.page-template-full-width .site-content .site-main {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. HEADINGS
═══════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  color: var(--txt-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }

/* Italic accent — used for VALORANT-style branded headings */
h1 em, h2 em, h3 em, h4 em,
.entry-title em,
h1 i, h2 i, h3 i {
  color: var(--red) !important;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════
   7. LINKS
═══════════════════════════════════════════════════════════════ */

a { color: var(--red); text-decoration: none; transition: opacity 0.15s; }
a:hover { opacity: 0.8; text-decoration: none; }

.entry-content a,
.page-content a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content a:hover { opacity: 0.75; }

/* ═══════════════════════════════════════════════════════════════
   8. BLOG — POST CARDS (archive / blog listing page)
═══════════════════════════════════════════════════════════════ */

.blog .hentry,
.archive .hentry,
article.post,
article.type-post {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  padding: 30px 34px !important;
  margin-bottom: 22px !important;
  box-shadow: var(--shadow-card) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.blog .hentry:hover,
article.post:hover,
article.type-post:hover {
  border-color: var(--border-accent) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Post title */
.entry-title,
.entry-title a,
.entry-title a:visited {
  color: var(--txt-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.03em;
  text-decoration: none !important;
}

.entry-title a:hover { color: var(--red) !important; }

/* Post meta — date, author, categories */
.entry-meta,
.entry-meta *,
.entry-meta a,
.posted-on, .posted-on a,
.byline, .byline a,
.cat-links, .cat-links a,
.author {
  color: var(--txt-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.entry-meta a:hover,
.cat-links a:hover {
  color: var(--red) !important;
}

/* Category pill badge */
.cat-links a {
  background: var(--red-dim) !important;
  color: var(--red) !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase !important;
}

.cat-links a:hover {
  background: var(--red) !important;
  color: #fff !important;
}

/* Excerpt */
.entry-summary p,
.entry-excerpt p {
  color: var(--txt-secondary) !important;
  font-size: 0.93rem;
  line-height: 1.75;
}

/* Read more */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--red) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  margin-top: 12px;
}
.more-link:hover { opacity: 0.75; }

/* Footer area of post */
.entry-footer,
.entry-footer a,
.tags-links,
.tags-links a {
  color: var(--txt-faint) !important;
  font-size: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   9. SINGLE POST / STATIC PAGE ARTICLE
═══════════════════════════════════════════════════════════════ */

.single article.post,
.single article.type-post,
.page article.page,
.page article.type-page {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  padding: 40px 48px !important;
  box-shadow: var(--shadow-card) !important;
}

@media (max-width: 768px) {
  .single article.post,
  .page article.page { padding: 24px 20px !important; }
}

/* Body text in single posts */
.single .entry-content p,
.page .entry-content p {
  color: var(--txt-secondary) !important;
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 1.2rem;
}

/* Headings inside content */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--txt-primary) !important;
  font-family: var(--font-display) !important;
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.entry-content h2 { font-size: 1.6rem !important; }
.entry-content h3 { font-size: 1.3rem !important; }
.entry-content h4 { font-size: 1.1rem !important; }

/* Lists */
.entry-content ul,
.entry-content ol {
  color: var(--txt-secondary) !important;
  padding-left: 1.6rem;
  margin-bottom: 1.2rem;
}

.entry-content li {
  color: var(--txt-secondary) !important;
  margin-bottom: 0.5rem;
}

/* Inline code */
.entry-content code, code {
  background: var(--bg-elevated) !important;
  color: var(--red) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.85em;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

/* Code block */
pre {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 22px 26px !important;
  overflow-x: auto;
  margin: 1.8rem 0;
}
pre code {
  background: transparent !important;
  color: #cdd6f4 !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.88rem;
  line-height: 1.65;
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--red) !important;
  background: var(--red-dim) !important;
  color: var(--txt-secondary) !important;
  padding: 18px 24px !important;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 1.8rem 0;
  font-style: normal;
}

blockquote p { color: var(--txt-secondary) !important; }

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

/* Tables */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8rem 0;
  font-size: 0.9rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.entry-content th {
  background: var(--bg-elevated) !important;
  color: var(--txt-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.entry-content td {
  color: var(--txt-secondary) !important;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
}

.entry-content tr:last-child td { border-bottom: none; }
.entry-content tr:hover td { background: var(--red-dim) !important; }

/* Horizontal rule */
.entry-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   10. SIDEBAR & WIDGETS
═══════════════════════════════════════════════════════════════ */

.widget-area aside,
.widget {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 22px 24px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-card) !important;
}

.widget-title {
  color: var(--txt-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--border) !important;
}

.widget ul li,
.widget ol li {
  color: var(--txt-secondary) !important;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  font-size: 0.88rem;
}

.widget ul li:last-child,
.widget ol li:last-child { border-bottom: none; }

.widget ul li a,
.widget ol li a {
  color: var(--txt-secondary) !important;
  font-weight: 500;
}

.widget ul li a:hover { color: var(--red) !important; text-decoration: none; }

.widget_recent_entries ul li a {
  color: var(--txt-primary) !important;
  font-weight: 600;
  font-size: 0.88rem;
}

.widget_recent_entries .post-date {
  display: block;
  color: var(--txt-muted) !important;
  font-size: 0.72rem;
  margin-top: 2px;
}

/* Search widget */
.widget_search input[type="search"] {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt-primary) !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem;
  width: 100%;
}

.widget_search input:focus {
  border-color: var(--red) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--red-dim) !important;
}

/* ═══════════════════════════════════════════════════════════════
   11. FORMS & INPUTS
═══════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: var(--bg-input) !important;
  color: var(--txt-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-dim) !important;
  outline: none !important;
}

::placeholder { color: var(--txt-faint) !important; }

label { color: var(--txt-secondary) !important; font-size: 0.85rem; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   12. BUTTONS
═══════════════════════════════════════════════════════════════ */

.wp-block-button__link,
.button,
button[type="submit"],
input[type="submit"],
.wp-element-button {
  background: var(--red) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 28px !important;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s !important;
  box-shadow: 0 4px 16px var(--red-glow) !important;
}

.wp-block-button__link:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--red-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--red-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════
   13. COMMENTS
═══════════════════════════════════════════════════════════════ */

#comments, .comments-area { margin-top: 36px; }

.comments-title,
.comment-reply-title {
  color: var(--txt-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-bottom: 20px;
}

.comment-body,
#respond {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 22px 26px !important;
  margin-bottom: 16px !important;
}

.comment-author .fn,
.comment-author .fn a {
  color: var(--txt-primary) !important;
  font-weight: 700;
  font-size: 0.92rem;
}

.comment-content p { color: var(--txt-secondary) !important; font-size: 0.94rem; }
.comment-metadata, .comment-metadata a { color: var(--txt-muted) !important; font-size: 0.75rem; }
.reply a { color: var(--red) !important; font-size: 0.78rem; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   14. PAGINATION
═══════════════════════════════════════════════════════════════ */

.pagination, .nav-links {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.pagination .page-numbers,
.nav-links a,
.nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 13px;
  background: var(--bg-card) !important;
  color: var(--txt-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.pagination .page-numbers.current {
  background: var(--red) !important;
  color: #ffffff !important;
  border-color: var(--red) !important;
}

.pagination .page-numbers:hover:not(.current),
.nav-links a:hover {
  background: var(--bg-elevated) !important;
  color: var(--red) !important;
  border-color: var(--border-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   15. ARCHIVE / CATEGORY HEADER
═══════════════════════════════════════════════════════════════ */

.page-header {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  padding: 30px 36px !important;
  margin-bottom: 28px !important;
}

.page-title,
.archive-title {
  color: var(--txt-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
}

.taxonomy-description,
.archive-description {
  color: var(--txt-muted) !important;
  font-size: 0.93rem;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   16. TAGS
═══════════════════════════════════════════════════════════════ */

.tags-links a,
.post-tags a {
  display: inline-block;
  background: var(--bg-elevated) !important;
  color: var(--txt-muted) !important;
  border: 1px solid var(--border) !important;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 0.74rem !important;
  font-weight: 600;
  margin: 2px 3px;
  text-decoration: none !important;
  letter-spacing: 0.04em;
  transition: all 0.15s;
}

.tags-links a:hover {
  background: var(--red-dim) !important;
  color: var(--red) !important;
  border-color: var(--border-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   17. BREADCRUMBS
═══════════════════════════════════════════════════════════════ */

.breadcrumb, .breadcrumbs, .rank-math-breadcrumb {
  font-size: 0.78rem;
  color: var(--txt-muted) !important;
  margin-bottom: 18px;
}

.breadcrumb a, .breadcrumbs a, .rank-math-breadcrumb a {
  color: var(--txt-muted) !important;
}

.breadcrumb a:hover, .breadcrumbs a:hover { color: var(--red) !important; }

/* ═══════════════════════════════════════════════════════════════
   18. SEARCH RESULTS
═══════════════════════════════════════════════════════════════ */

.search-results article.post { /* inherits from post cards above */ }

.search-no-results .page-content p,
.no-results .page-content p {
  color: var(--txt-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   19. 404 PAGE
═══════════════════════════════════════════════════════════════ */

.error-404, .not-found {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  padding: 60px 48px !important;
  text-align: center;
}

.error-404 .page-title { color: var(--txt-primary) !important; font-size: 2.5rem !important; }
.error-404 .page-content p { color: var(--txt-secondary) !important; }

/* ═══════════════════════════════════════════════════════════════
   20. FOOTER
═══════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--txt-muted) !important;
  text-align: center;
  padding: 22px 28px !important;
  font-size: 0.82rem;
  font-family: var(--font-body);
}

.site-footer p { color: var(--txt-muted) !important; margin: 0; }
.site-footer a { color: var(--txt-muted) !important; }
.site-footer a:hover { color: var(--red) !important; }

/* ═══════════════════════════════════════════════════════════════
   21. WP BLOCK EDITOR ELEMENTS
═══════════════════════════════════════════════════════════════ */

/* Cover block */
.wp-block-cover { border-radius: var(--r-xl); overflow: hidden; }

/* Separator */
.wp-block-separator { border-color: var(--border) !important; }

/* Pull quote */
.wp-block-pullquote {
  border-top: 2px solid var(--red) !important;
  border-bottom: 2px solid var(--red) !important;
  padding: 24px 0 !important;
}
.wp-block-pullquote blockquote {
  border-left: none !important;
  background: transparent !important;
}
.wp-block-pullquote p { color: var(--txt-primary) !important; font-size: 1.2rem; }

/* ═══════════════════════════════════════════════════════════════
   22. SCROLLBAR
═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   23. TEXT SELECTION
═══════════════════════════════════════════════════════════════ */

::selection { background: var(--red); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   24. FOCUS ACCESSIBILITY
═══════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid var(--red) !important;
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   25. RESPONSIVE TWEAKS
═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .inside-header { padding: 0 20px !important; }
  .site-main { padding: 24px 0 48px !important; }
}

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.55rem; }

  .blog .hentry,
  article.post {
    padding: 20px 22px !important;
    border-radius: var(--r-lg) !important;
  }

  .entry-title a { font-size: 1.2rem !important; }
}