/*
Theme Name: Vyrian Blog
Theme URI: https://vyrian.com
Description: Semiconductor & supply chain intelligence blog theme for Vyrian.com
Author: Vyrian
Version: 1.0.0
License: GPL-2.0+
Text Domain: vyrian-blog
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

:root {
  --orange: #FE6331;
  --gray: #5C5C5C;
  --blue: #56719D;
  --light: #DDDDDD;
  --dark: #1a1a1a;
  --white: #ffffff;
  --border-light: #e8e8e8;
  --border-dark: #d0d0d0;
  --success: #27ae60;
  --danger: #e74c3c;
  --warning: #f39c12;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--dark);
}

h1 {
  font-size: 3.5rem;
  font-weight: 900;
}

h2 {
  font-size: 2.5rem;
  font-weight: 700;
}

h3 {
  font-size: 2rem;
  font-weight: 700;
}

h4 {
  font-size: 1.5rem;
  font-weight: 700;
}

h5 {
  font-size: 1.25rem;
  font-weight: 700;
}

h6 {
  font-size: 1rem;
  font-weight: 700;
}

p {
  margin-bottom: 1.5rem;
  color: var(--dark);
}

strong, b {
  font-weight: 700;
}

em, i {
  font-style: italic;
}

/* Links */
a {
  color: var(--blue);
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.3s ease;
}

a:hover {
  color: var(--orange);
}

a:active {
  opacity: 0.8;
}

a:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Lists */
ul, ol {
  margin-bottom: 1.5rem;
  margin-left: 2rem;
}

li {
  margin-bottom: 0.5rem;
}

dl {
  margin-bottom: 1.5rem;
}

dt {
  font-weight: 700;
  margin-top: 1rem;
}

dd {
  margin-left: 2rem;
  margin-bottom: 0.5rem;
}

/* Code */
code, pre {
  font-family: 'Courier New', monospace;
  background-color: #f5f5f5;
  color: #333;
}

code {
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}

pre {
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

pre code {
  padding: 0;
  background-color: transparent;
  color: #333;
}

/* Blockquote */
blockquote {
  border-left: 4px solid var(--blue);
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 1.5rem;
  color: var(--gray);
  font-style: italic;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

figure {
  margin-bottom: 1.5rem;
}

figcaption {
  font-size: 0.875rem;
  color: var(--gray);
  margin-top: 0.5rem;
  text-align: center;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

table thead {
  background-color: #f5f5f5;
}

table th {
  padding: 0.75rem;
  text-align: left;
  font-weight: 700;
  border-bottom: 2px solid var(--border-light);
}

table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

table tbody tr:hover {
  background-color: #fafafa;
}

/* Forms */
form {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 400;
  color: var(--dark);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background-color: var(--white);
  color: var(--dark);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(86, 113, 157, 0.1);
}

textarea {
  resize: vertical;
  min-height: 150px;
}

/* Buttons */
button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-align: center;
}

button:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: #e55a1f;
  transform: translateY(-2px);
}

button:active,
.button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  transform: translateY(0);
}

.button-secondary {
  background-color: var(--blue);
}

.button-secondary:hover {
  background-color: #445373;
}

/* Utility classes */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.no-margin {
  margin: 0;
}

.no-padding {
  padding: 0;
}

/* Grid */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-cols-1 {
  grid-template-columns: 1fr;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Flex */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

/* Spacing */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.5rem; }
.mt-6 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 2.5rem; }
.mb-6 { margin-bottom: 3rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 1.5rem; }
.pt-4 { padding-top: 2rem; }
.pt-5 { padding-top: 2.5rem; }
.pt-6 { padding-top: 3rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 1.5rem; }
.pb-4 { padding-bottom: 2rem; }
.pb-5 { padding-bottom: 2.5rem; }
.pb-6 { padding-bottom: 3rem; }

/* WordPress Core Classes */
.wp-caption {
  text-align: center;
  margin-bottom: 1.5rem;
}

.wp-caption img {
  display: block;
}

.alignleft {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.alignright {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  text-align: center;
}

.wp-block-image {
  margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 1024px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }

  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.1rem; }

  body {
    font-size: 15px;
  }

  .container {
    padding: 0 1rem;
  }

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }

  .alignleft,
  .alignright {
    float: none;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }

  body {
    font-size: 14px;
    line-height: 1.5;
  }

  .container {
    padding: 0 0.75rem;
  }
}

/* ============================================================
   VYRIAN BLOG — COMPONENT STYLES
   ============================================================ */

/* --- Padding Utility Classes (py / px) -------------------- */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2 { padding-top: 1rem; padding-bottom: 1rem; }
.py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-4 { padding-top: 2rem; padding-bottom: 2rem; }
.py-5 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2 { padding-left: 1rem; padding-right: 1rem; }
.px-3 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-4 { padding-left: 2rem; padding-right: 2rem; }

/* --- Announcement Bar ------------------------------------- */
.announcement-bar {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.announcement-bar a,
.announcement-bar a:hover {
  color: inherit !important;
}
@media (max-width: 600px) {
  .announcement-bar .flex-between {
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
  }
}

/* --- Site Header ------------------------------------------ */
.site-header {
  background-color: var(--white);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.site-header-inner {
  padding: 0.85rem 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-logo {
  flex-shrink: 0;
}
.site-logo h1,
.site-logo h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--dark);
}
.site-logo a {
  text-decoration: none;
  color: var(--dark);
}
.header-cta {
  flex-shrink: 0;
}

/* --- PRIMARY NAVIGATION — force horizontal inline --------- */
#site-navigation,
.site-navigation {
  flex: 1;
  margin: 0 1.5rem;
  display: flex;
  align-items: center;
}

/* Both wp_nav_menu and wp_page_menu fallback targets */
#site-navigation ul,
.site-navigation ul,
#site-navigation .menu,
.site-navigation .menu {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
  background: none !important;
}

#site-navigation ul li,
.site-navigation ul li,
#site-navigation .page_item,
.site-navigation .page_item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

#site-navigation ul li a,
.site-navigation ul li a,
#site-navigation .page_item a,
.site-navigation .page_item a {
  display: block !important;
  padding: 0.5rem 0.9rem !important;
  color: var(--dark) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  white-space: nowrap;
}

#site-navigation ul li a span,
.site-navigation ul li a span {
  padding: 0 !important;
  display: inline !important;
  color: inherit !important;
}

#site-navigation ul li a:hover,
.site-navigation ul li a:hover,
#site-navigation .page_item a:hover,
.site-navigation .page_item a:hover {
  color: var(--orange) !important;
  background: none !important;
}

#site-navigation ul li.current-menu-item > a,
#site-navigation ul li.current_page_item > a {
  color: var(--orange) !important;
  border-bottom: 2px solid var(--orange);
}

/* Sub-menus */
#site-navigation ul ul,
.site-navigation ul ul {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  display: none !important;
  flex-direction: column !important;
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  min-width: 200px !important;
  z-index: 100 !important;
}
#site-navigation ul li:hover > ul,
.site-navigation ul li:hover > ul {
  display: flex !important;
}

/* wp_page_menu wraps in <div class="page_item"> — override */
.site-navigation > div {
  display: flex;
  align-items: center;
  width: 100%;
}
.menu-primary-navigation-container,
.menu-main-menu-container,
.menu-navigation-container {
  width: 100%;
}

@media (max-width: 900px) {
  #site-navigation,
  .site-navigation {
    margin: 0 0.75rem;
  }
  #site-navigation ul li a,
  .site-navigation ul li a {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.82rem !important;
  }
}

/* --- Part Search Section ---------------------------------- */
.part-search-section {
  position: relative;
}
.part-pill {
  transition: all 0.3s ease;
  font-size: 0.85rem;
  cursor: pointer;
}
.part-pill:hover {
  background-color: rgba(255,255,255,0.35) !important;
  border-color: rgba(255,255,255,0.9) !important;
}

/* --- Category Badge (rounded pill) ----------------------- */
.category-tag {
  display: inline-block;
  background-color: var(--orange);
  color: var(--white) !important;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.65rem;
  text-decoration: none !important;
  line-height: 1.4;
}
.category-tag:hover {
  background-color: #e55a1f;
  color: var(--white) !important;
}

/* --- Category Filter Tabs (homepage) --------------------- */
.category-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 2.5rem;
  overflow-x: auto;
  border-bottom: 2px solid var(--border-light);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs a {
  padding: 0.65rem 1.1rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: var(--gray);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.category-tabs a:hover,
.category-tabs a.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.category-tabs a:first-child {
  border-bottom-color: var(--orange);
  color: var(--dark);
}

/* --- Section Header --------------------------------------- */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border-light);
}
.section-header h2 {
  margin: 0;
  font-size: 1.5rem;
}
.section-header a {
  color: var(--blue);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.section-header a:hover { color: var(--orange); }

/* --- Post Card (grid) ------------------------------------- */
.post-card {
  background-color: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--border-light);
}
.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.post-card .card-image {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.post-card .card-image img,
.post-card .card-image .featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.post-card .card-body {
  padding: 1.25rem;
}
.post-card .card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.post-card .card-excerpt {
  color: var(--gray);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}
.post-card .card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--gray);
}

/* --- Featured Post Hero ----------------------------------- */
.featured-post-hero {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  border: 1px solid var(--border-light);
}
.featured-post-hero .hero-image {
  border-radius: 8px;
  overflow: hidden;
  height: 320px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--dark) 100%);
}
.featured-post-hero .hero-image img,
.featured-post-hero .hero-image .featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
@media (max-width: 768px) {
  .featured-post-hero {
    grid-template-columns: 1fr !important;
  }
  .featured-post-hero .hero-image {
    height: 220px;
  }
}

/* --- Post List Item (index bottom section) ---------------- */
.post-list-item {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
}
.post-list-item:last-child {
  border-bottom: none;
}
.post-list-thumb {
  border-radius: 6px;
  overflow: hidden;
  height: 130px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--dark) 100%);
}
.post-list-thumb img,
.post-list-thumb .featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* --- Sidebar Widgets ------------------------------------- */
.primary-sidebar .widget {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-light);
}
.primary-sidebar .widget-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--orange);
  color: var(--dark);
}

/* Style default WordPress widgets to match theme */
.widget_search,
.widget_recent_entries,
.widget_recent_comments,
.widget_categories,
.widget_archive,
.widget_meta {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-light);
}
.widget_search .widget-title,
.widget_recent_entries .widget-title,
.widget_recent_comments .widget-title,
.widget_categories .widget-title,
.widget_archive .widget-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--orange);
  color: var(--dark);
}
.widget_search .search-form {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}
.widget_search .search-field {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: 0.875rem;
  margin: 0;
  width: auto;
}
.widget_search .search-submit {
  padding: 0.5rem 0.85rem;
  background-color: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  margin: 0;
  width: auto;
}
.widget_recent_entries ul,
.widget_recent_comments ul,
.widget_categories ul,
.widget_archive ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.widget_recent_entries ul li,
.widget_recent_comments ul li,
.widget_categories ul li,
.widget_archive ul li {
  padding: 0.5rem 0;
  margin: 0 !important;
  font-size: 0.875rem;
  line-height: 1.4;
}
.widget_recent_entries ul li:last-child,
.widget_recent_comments ul li:last-child,
.widget_categories ul li:last-child,
.widget_archive ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.widget_recent_entries a,
.widget_recent_comments a,
.widget_categories a,
.widget_archive a {
  color: var(--dark);
  font-weight: 500;
  text-decoration: none;
  font-size: 0.875rem;
}
.widget_recent_entries a:hover,
.widget_recent_comments a:hover,
.widget_categories a:hover,
.widget_archive a:hover {
  color: var(--orange);
}

/* Market Pulse status badges */
.status-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.status-tight   { background-color: #fff3cd; color: #856404; }
.status-stable  { background-color: #d4edda; color: #155724; }
.status-good    { background-color: #d4edda; color: #155724; }
.status-critical{ background-color: #f8d7da; color: #721c24; }

/* --- Inline Banners (homepage / category) ---------------- */
.inline-banner {
  border-radius: 8px;
  padding: 1.75rem 2rem;
  text-align: center;
  margin: 2rem 0;
}
.inline-banner h3 {
  color: var(--white);
  margin-bottom: 0.4rem;
}
.inline-banner p {
  color: rgba(255,255,255,0.9);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/* --- Post Tags ------------------------------------------- */
.post-tags {
  margin: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.post-tags .tag-label {
  font-weight: 700;
  color: var(--dark);
  font-size: 0.9rem;
}
.post-tag {
  display: inline-block;
  background-color: var(--light);
  color: var(--gray);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid var(--border-dark);
}
.post-tag:hover {
  background-color: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

/* --- Author Bio Box -------------------------------------- */
.author-bio-box {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 2rem;
  margin: 3rem 0;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--orange);
}
.author-bio-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue) 0%, var(--dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
}
.author-bio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* --- Breadcrumb ------------------------------------------ */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 1.5rem;
  padding: 0.6rem 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.breadcrumb a {
  color: var(--blue);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--orange); }

/* --- Content Layout (2-col) ------------------------------ */
.content-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
}
@media (max-width: 1024px) {
  .content-layout {
    grid-template-columns: 1fr 300px;
  }
}
@media (max-width: 768px) {
  .content-layout {
    grid-template-columns: 1fr !important;
  }
  .primary-sidebar {
    max-width: 100% !important;
  }
}

/* --- Newsletter Section (footer) ------------------------- */
.newsletter-section {
  background-color: var(--blue);
  color: var(--white);
  padding: 3rem 0;
}
@media (max-width: 768px) {
  .newsletter-section .grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
}

/* --- Footer ---------------------------------------------- */
.site-footer {
  background-color: var(--dark);
  color: rgba(255,255,255,0.85);
  padding: 3rem 0 1rem;
}
.site-footer h3,
.site-footer h4 {
  color: var(--white);
}
.site-footer ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.site-footer a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}
.site-footer a:hover {
  color: var(--orange) !important;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
}
.footer-social {
  display: flex;
  gap: 1rem;
}
.footer-social a {
  color: rgba(255,255,255,0.75);
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}
.footer-social a:hover {
  color: var(--orange) !important;
}
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* --- Category Hero (category.php) ----------------------- */
.category-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, var(--blue) 100%);
  color: var(--white);
  padding: 3rem 0;
  margin-bottom: 2.5rem;
}
.category-hero h1 {
  color: var(--white);
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}
.category-hero p {
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  margin-bottom: 0;
}

/* --- Author Hero (author.php) --------------------------- */
.author-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, var(--blue) 100%);
  color: var(--white);
  padding: 3rem 0;
  margin-bottom: 2.5rem;
}
.author-hero h1 {
  color: var(--white);
  margin-bottom: 0.25rem;
}
.author-hero .author-stats {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.author-hero .stat {
  text-align: center;
}
.author-hero .stat-number {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--orange);
  display: block;
}
.author-hero .stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Related Articles ------------------------------------ */
.related-articles {
  padding-top: 3rem;
  border-top: 2px solid var(--border-light);
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.related-articles h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

/* --- Post Navigation (prev/next) ------------------------ */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin: 2rem 0;
}
.nav-previous a,
.nav-next a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}
.nav-previous a:hover,
.nav-next a:hover { color: var(--orange); }
.nav-next { text-align: right; }
.nav-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin-bottom: 0.25rem;
}

/* --- Pagination ----------------------------------------- */
.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 0;
  flex-wrap: wrap;
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--dark);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.25s ease;
}
.page-numbers:hover,
.page-numbers.current {
  background-color: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

/* --- Search Results ------------------------------------- */
.search-no-results {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--gray);
}

/* --- 404 Page ------------------------------------------- */
.error-404 {
  text-align: center;
  padding: 5rem 2rem;
}
.error-404 .error-code {
  font-size: 8rem;
  font-weight: 900;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 1rem;
}

/* --- Single Post Article Body --------------------------- */
.entry-content {
  line-height: 1.85;
  color: var(--dark);
}
.entry-content h2 {
  font-size: 1.75rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}
.entry-content h3 {
  font-size: 1.35rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.entry-content p { margin-bottom: 1.4rem; }
.entry-content ul,
.entry-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1.4rem;
}
.entry-content li { margin-bottom: 0.4rem; }
.entry-content a { color: var(--blue); text-decoration: underline; }
.entry-content a:hover { color: var(--orange); }

/* Author byline at end of post */
.post-author-byline {
  font-size: 0.95rem;
  color: var(--gray);
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}
.post-author-byline a { color: var(--dark); font-weight: 700; text-decoration: none; }
.post-author-byline a:hover { color: var(--orange); }

.entry-content strong { color: var(--dark); font-weight: 700; }
.entry-content blockquote {
  border-left: 4px solid var(--orange);
  padding: 1rem 1.5rem;
  background-color: #f8f8f8;
  border-radius: 0 4px 4px 0;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--gray);
}

/* --- Placeholder for missing featured images ------------ */
.post-no-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--blue) 0%, #2d3f5e 50%, var(--dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-no-image-icon {
  width: 48px;
  height: 48px;
  opacity: 0.3;
}

/* --- Forms --------------------------------------------- */
.newsletter-form,
.newsletter-mini-form,
.part-search-form {
  margin: 0;
}

/* --- Smooth hover transitions --------------------------- */
a, button, .post-card, .button {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* =====================================================
   VYRIAN v3 PROTOTYPE — EXACT MATCH CSS
   ===================================================== */

/* ── RESET overrides for WordPress defaults ── */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg: #f9f9f9;
  --purple: #7a5fa0;
  --green:  #2a8a5c;
}

body { background: var(--white); color: var(--gray); }

/* ── ANNOUNCEMENT BAR ── */
.announcement-bar {
  background: var(--orange);
  color: var(--white);
  text-align: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
}
.announcement-bar a {
  color: inherit;
  text-decoration: underline;
  margin-left: 8px;
}

/* ── HEADER ── */
.site-header {
  background: var(--white);
  border-bottom: 2px solid var(--light);
  position: sticky;
  top: 0;
  z-index: 200;
}
.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* ── LOGO ── */
.logo {
  font-size: 22px;
  font-weight: 900;
  color: var(--dark);
  letter-spacing: -0.5px;
  text-decoration: none;
}
.logo-dot, .logo span { color: var(--orange); }
/* Footer logo */
.footer-brand .logo {
  display: block;
  color: var(--white);
  font-size: 24px;
  margin-bottom: 14px;
}
.footer-logo-img {
  max-height: 40px;
  width: auto;
  margin-bottom: 14px;
}

/* ── NAVIGATION ── */
#site-navigation,
.site-navigation {
  display: flex !important;
  align-items: center;
  gap: 0;
  flex: 1;
  margin: 0 1.5rem;
}
#site-navigation a,
.site-navigation a,
#site-navigation ul li a,
.site-navigation ul li a {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gray) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 0.5rem 0.85rem !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  display: block !important;
}
#site-navigation a:hover,
.site-navigation a:hover {
  color: var(--orange) !important;
}
#site-navigation ul,
.site-navigation ul {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}
#site-navigation ul li,
.site-navigation ul li { list-style: none !important; }

#site-navigation ul.sub-menu,
.site-navigation ul.sub-menu {
  align-items: stretch !important;
}
#site-navigation ul.sub-menu li,
.site-navigation ul.sub-menu li {
  width: 100% !important;
}
#site-navigation ul.sub-menu li a,
.site-navigation ul.sub-menu li a {
  text-align: left !important;
  text-transform: none !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding: 0.65rem 1rem !important;
  border-bottom: 1px solid var(--border-light) !important;
}
#site-navigation ul.sub-menu li:last-child a,
.site-navigation ul.sub-menu li:last-child a {
  border-bottom: none !important;
}

/* CTA subscribe button in nav */
.header-cta,
#site-navigation .header-cta,
.site-navigation .header-cta,
#site-navigation ul .menu-item a.header-cta {
  background: var(--orange) !important;
  color: var(--white) !important;
  padding: 9px 20px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-left: 8px;
}
.header-cta:hover,
#site-navigation .header-cta:hover {
  background: #e5501e !important;
  color: var(--white) !important;
}

/* ── PART SEARCH SECTION ── */
.part-search-section {
  background: var(--dark);
  padding: 36px 24px;
}
.part-search-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.part-search-inner h2 {
  font-size: 20px;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 6px;
}
.part-search-inner p {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}
.part-search-wrap {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}
.part-search-box {
  display: flex;
  border-radius: 6px;
  overflow: visible;
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.part-search-input {
  flex: 1;
  border: none;
  padding: 16px 20px;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: var(--dark);
  outline: none;
  border-radius: 6px 0 0 6px;
  margin: 0;
  height: auto;
}
.part-search-btn {
  background: var(--orange);
  color: var(--white);
  border: none;
  padding: 16px 28px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 0 6px 6px 0;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  margin: 0;
  height: auto;
  transform: none;
}
.part-search-btn:hover { background: #e5501e; transform: none; }

.search-results-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  z-index: 300;
  overflow: hidden;
  border: 1px solid var(--light);
  text-align: left;
}
.search-results-dropdown.visible { display: block; }
.search-loading { display: none; padding: 24px; text-align: center; font-size: 14px; color: var(--gray); }
.search-loading.visible { display: block; }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--light); border-top-color: var(--orange); border-radius: 50%; animation: spin .7s linear infinite; margin-right: 8px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.search-empty { display: none; padding: 24px 16px; text-align: center; }
.search-empty.visible { display: block; }
.results-footer { padding: 12px 16px; background: var(--bg); border-top: 1px solid var(--light); font-size: 13px; text-align: center; }
.results-footer a { color: var(--orange); font-weight: 700; }

.popular-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.popular-parts span {
  font-size: 12px;
  color: #999;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 28px;
  flex-shrink: 0;
}
.part-pill {
  background: rgba(255,255,255,.08);
  color: #ccc;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.part-pill:hover { background: var(--orange); color: white; border-color: var(--orange); }

/* ── MAIN CONTENT ── */
.site-content { background: var(--white); }

/* ── HERO ── */
.hero {
  max-width: 1400px;
  margin: 48px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
.hero .hero-image {
  border-radius: 10px;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-img-ph { text-align: center; }
.hero-img-ph svg { opacity: .4; }
.hero-img-ph p { font-size: 12px; font-weight: 700; margin-top: 8px; opacity: .6; }
.hero-title {
  font-size: 32px;
  font-weight: 900;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}
.hero-title a { color: var(--dark); text-decoration: none; }
.hero-title a:hover { color: var(--orange); }
.hero-excerpt {
  font-size: 16px;
  color: var(--gray);
  margin-bottom: 20px;
  line-height: 1.65;
}
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--orange);
  font-weight: 700;
  font-size: 14px;
  margin-top: 18px;
  transition: gap .2s;
  text-decoration: none;
}
.read-more:hover { gap: 10px; color: var(--orange); }
.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--gray);
  flex-wrap: wrap;
}
.post-meta strong { color: var(--dark); }

/* ── AUTHOR AVATAR ── */
.author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}

/* ── CATEGORIES BAR ── */
.categories-bar {
  max-width: 1400px;
  margin: 48px auto 0;
  padding: 0 24px;
  border-bottom: 2px solid var(--light);
  display: flex;
  gap: 0;
  overflow-x: auto;
}
.cat-btn {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: all .2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  text-decoration: none;
  display: inline-block;
}
.cat-btn:hover { color: var(--orange); }
.cat-btn.active { color: var(--orange); border-bottom-color: var(--orange); }

/* ── SECTION HEADER ── */
.section-header {
  max-width: 1400px;
  margin: 40px auto 24px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-header h2 {
  font-size: 22px;
  font-weight: 900;
  color: var(--dark);
  letter-spacing: -0.3px;
  margin: 0;
}
.section-header h2 span { color: var(--orange); }
.section-header a {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
}

/* ── POST GRID ── */
.post-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ── POST CARD ── */
.post-card {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--light);
  transition: transform .2s, box-shadow .2s;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}
.card-image {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}
/* CI card color classes (no gradient) */
.ci-blue, .ci-orange, .ci-gray, .ci-purple, .ci-green, .ci-teal {
  background: #f0f0f0;
}

.card-body { padding: 20px; }
.card-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--dark);
  line-height: 1.3;
  margin: 8px 0 10px;
  letter-spacing: -0.2px;
}
.card-title a { color: var(--dark); text-decoration: none; }
.card-title a:hover { color: var(--orange); }
.card-excerpt {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--gray);
  padding-top: 14px;
  border-top: 1px solid var(--light);
}
.card-meta .author-avatar { width: 28px; height: 28px; font-size: 11px; }
.card-meta strong { color: var(--dark); }

/* ── CATEGORY TAG ── */
.category-tag {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 8px;
  text-decoration: none;
}
.category-tag a { color: var(--white); text-decoration: none; }
.category-tag.blue   { background: var(--blue); }
.category-tag.gray   { background: var(--gray); }
.category-tag.purple { background: var(--purple); }
.category-tag.green  { background: var(--green); }
.category-tag.teal   { background: #1a8a8a; }

/* ── INTERNAL BANNERS ── */
.internal-banner {
  max-width: 1400px;
  margin: 48px auto;
  padding: 0 24px;
}
.banner-card {
  border-radius: 10px;
  padding: 36px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
.banner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .07;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.banner-manufacturer { background: linear-gradient(135deg, #FE6331 0%, #c94b1f 100%); }
.banner-contact      { background: linear-gradient(135deg, #56719D 0%, #3a5280 100%); }
.banner-supplier     { background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%); border: 1px solid rgba(255,255,255,.08); }

.banner-text { position: relative; z-index: 1; }
.banner-eyebrow {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.65);
  margin-bottom: 8px;
}
.banner-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.banner-desc {
  font-size: 15px;
  color: rgba(255,255,255,.8);
  line-height: 1.5;
  max-width: 560px;
}
.banner-action { position: relative; z-index: 1; flex-shrink: 0; }
.banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  text-decoration: none;
}
.btn-white      { background: var(--white); color: var(--orange); }
.btn-white:hover { background: #fff3ef; }
.btn-white-blue { background: var(--white); color: var(--blue); }
.btn-white-blue:hover { background: #f0f4f9; }
.btn-orange     { background: var(--orange); color: var(--white); border: none; }
.btn-orange:hover { background: #e5501e; }
.banner-icon {
  font-size: 64px;
  opacity: .15;
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ── NEWSLETTER SECTION ── */
.newsletter-section {
  background: var(--blue);
  margin: 64px 0 0;
  padding: 64px 24px;
  text-align: center;
}
.newsletter-inner { max-width: 560px; margin: 0 auto; }
.newsletter-section h2 {
  font-size: 30px;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.newsletter-section p {
  font-size: 16px;
  color: rgba(255,255,255,.8);
  margin-bottom: 28px;
}
.newsletter-form {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.newsletter-form input {
  flex: 1;
  border: none;
  padding: 14px 18px;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  outline: none;
  margin: 0;
  height: auto;
  border-radius: 0;
}
.newsletter-form button {
  background: var(--orange);
  color: var(--white);
  border: none;
  padding: 14px 24px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background .2s;
  white-space: nowrap;
  margin: 0;
  height: auto;
  border-radius: 0;
  transform: none;
}
.newsletter-form button:hover { background: #e5501e; }

/* ── TWO COLUMN WRAP ── */
.two-col-wrap {
  max-width: 1400px;
  margin: 64px auto 0;
  padding: 0 24px 64px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
}
.main-col { min-width: 0; }

/* ── Blog Search Form (More From Blog) ── */
.blog-search-form {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 2px solid var(--light);
  margin-bottom: 24px;
  transition: border-color 0.2s;
  background: var(--white);
  padding: 0 16px;
}
.blog-search-form:focus-within { border-color: var(--blue); }
.blog-search-icon { color: var(--gray); flex-shrink: 0; }
.blog-search-form input {
  flex: 1;
  border: none;
  padding: 14px 12px;
  font-size: 15px;
  outline: none;
  margin: 0;
  height: auto;
  border-radius: 0;
  background: transparent;
}
.blog-search-form input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}
.blog-search-spinner { flex-shrink: 0; }
.blog-search-spinner .spinner { width: 18px; height: 18px; margin: 0; }
.blog-search-status {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 20px;
}
.blog-search-clear {
  margin-left: 8px;
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
}

/* ── POST LIST ITEMS ── */
.post-list-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--light);
  align-items: start;
}
.post-list-item:first-of-type { border-top: 1px solid var(--light); }
.list-image {
  aspect-ratio: 16/10;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
}
.list-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--dark);
  line-height: 1.3;
  margin: 6px 0 8px;
  letter-spacing: -0.2px;
}
.list-title a { color: var(--dark); text-decoration: none; }
.list-title a:hover { color: var(--orange); }
.list-excerpt {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gray);
  margin-top: 10px;
  flex-wrap: wrap;
}
.dot { color: var(--light); }

/* ── SIDEBAR ── */
.sidebar { min-width: 0; }
.widget {
  background: var(--bg);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 28px;
}
.widget-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--orange);
  display: inline-block;
}

/* Market Pulse */
.pulse-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--light);
  font-size: 13px;
}
.pulse-row:last-child { border-bottom: none; padding-bottom: 0; }
.pulse-label { font-weight: 700; color: var(--dark); }
.pulse-sub { font-size: 11px; color: var(--gray); }
.pulse-badge {
  font-size: 11px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}
.tight     { background: #fdecea; color: #c0392b; }
.stable    { background: #e6f7ee; color: #1a8a45; }
.improving { background: #e8f4fd; color: #1a5c8a; }
.watch     { background: #fff4e0; color: #c07800; }

/* Most Popular */
.popular-post {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--light);
  align-items: flex-start;
}
.popular-post:last-child { border-bottom: none; padding-bottom: 0; }
.pop-num {
  font-size: 22px;
  font-weight: 900;
  color: var(--light);
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
}
.pop-title { font-size: 14px; font-weight: 700; color: var(--dark); line-height: 1.4; }
.pop-title a { color: var(--dark); text-decoration: none; }
.pop-title a:hover { color: var(--orange); }
.pop-date { font-size: 12px; color: var(--gray); margin-top: 3px; }

/* Browse Topics Tag Cloud */
.widget-tags { display: flex; flex-wrap: wrap; gap: 8px; }
a.tag,
.widget-tags .tag,
.post-tags .tag {
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--light);
  font-size: 12px;
  font-weight: 700;
  color: var(--gray);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
  display: inline-block;
}
a.tag:hover,
.widget-tags .tag:hover,
.post-tags .tag:hover { background: var(--orange); color: var(--white); border-color: var(--orange); }

/* Quick Links Widget */
.quick-links-widget {
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--light);
  background: var(--white) !important;
}
.quick-link-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--light);
  text-decoration: none;
  transition: background .15s;
  color: inherit;
}
.quick-link-item:last-child { border-bottom: none; }
.quick-link-item:hover { background: #fff8f5; }
.quick-link-icon { font-size: 22px; flex-shrink: 0; }
.quick-link-title { font-size: 14px; font-weight: 900; color: var(--dark); }
.quick-link-sub { font-size: 12px; color: var(--gray); }

/* Sidebar Mini Newsletter (Orange) */
.sidebar-newsletter {
  background: var(--orange) !important;
  padding: 28px !important;
  margin-top: 0;
}
.sidebar-newsletter-eyebrow {
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.sidebar-newsletter-title {
  font-size: 16px;
  font-weight: 900;
  color: white;
  line-height: 1.4;
  margin-bottom: 16px;
}
.sidebar-newsletter-input {
  width: 100%;
  border: none;
  border-radius: 4px;
  padding: 10px 14px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  margin-bottom: 10px;
  outline: none;
  display: block;
}
.sidebar-newsletter-btn {
  width: 100%;
  background: var(--dark);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 11px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.sidebar-newsletter-btn:hover { background: #333; }

/* ── FOOTER ── */
.site-footer {
  background: var(--dark);
  color: #aaa;
  margin-top: 0;
  padding: 56px 24px 32px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand p { font-size: 14px; line-height: 1.7; color: #888; margin: 0; }
.site-footer .widget {
  background: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  border: none;
}
.site-footer .widget-title {
  font-size: 12px;
  color: var(--white);
  border-bottom: none;
  padding-bottom: 0;
}
.site-footer .widget a {
  color: #888;
}
.site-footer .widget a:hover {
  color: var(--orange);
}
.footer-col h4 {
  font-size: 12px;
  font-weight: 900;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col ul li a { font-size: 14px; color: #888; transition: color .2s; text-decoration: none; }
.footer-col ul li a:hover { color: var(--orange); }
.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #666;
}
.footer-bottom a { color: #666; transition: color .2s; text-decoration: none; }
.footer-bottom a:hover { color: var(--orange); }
.social-links { display: flex; gap: 16px; }
.social-link {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 13px;
  font-weight: 900;
  transition: background .2s, color .2s;
  text-decoration: none;
}
.social-link:hover { background: var(--orange); color: var(--white); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .banner-card { flex-direction: column; padding: 28px; text-align: center; }
  .banner-icon { display: none; }
  .header-inner { padding: 0 16px; }
}
@media (max-width: 600px) {
  .post-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 24px; }
  #site-navigation, .site-navigation { display: none !important; }
  .post-list-item { grid-template-columns: 1fr; }
  .banner-title { font-size: 20px; }
  .two-col-wrap { grid-template-columns: 1fr; gap: 32px; }
}

/* =====================================================
   CATEGORY & AUTHOR PAGE CSS
   ===================================================== */

/* ── CATEGORY HERO ── */
.cat-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 60%, #56719D 100%);
  padding: 64px 24px 0;
  position: relative;
  overflow: hidden;
}
.cat-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cat-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }

.cat-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.cat-breadcrumb a { color: rgba(255,255,255,.5); transition: color .2s; text-decoration: none; }
.cat-breadcrumb a:hover { color: var(--white); }
.cat-breadcrumb .sep { color: rgba(255,255,255,.25); }
.cat-breadcrumb .current { color: rgba(255,255,255,.85); font-weight: 700; }

.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  padding: 6px 14px;
  margin-bottom: 16px;
}
.cat-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.cat-badge span { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.7); }

.cat-hero-title {
  font-size: 48px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 16px;
}
.cat-hero-desc {
  font-size: 17px;
  color: rgba(255,255,255,.7);
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 32px;
}
.cat-hero-stats { display: flex; gap: 40px; margin-bottom: 48px; flex-wrap: wrap; }
.cat-stat-num { font-size: 28px; font-weight: 900; color: var(--white); line-height: 1; }
.cat-stat-label { font-size: 12px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .8px; margin-top: 4px; }

/* Category tab bar inside hero */
.cat-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-top: 1px solid rgba(255,255,255,.1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: all .2s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
  display: inline-block;
}
.cat-tab:hover { color: rgba(255,255,255,.85); }
.cat-tab.active { color: var(--white); border-bottom-color: var(--orange); }

/* ── CATEGORY CONTENT LAYOUT ── */
.cat-content-wrap {
  max-width: 1400px;
  margin: 48px auto 0;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}

/* ── FILTER BAR ── */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.filter-bar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-label { font-size: 13px; font-weight: 700; color: var(--dark); text-transform: uppercase; letter-spacing: .5px; }
.filter-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--light);
  background: var(--white);
  font-size: 12px;
  font-weight: 700;
  color: var(--gray);
  cursor: pointer;
  transition: all .2s;
}
.filter-chip:hover, .filter-chip.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
.sort-select {
  padding: 7px 12px;
  border: 1.5px solid var(--light);
  border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray);
  outline: none;
  cursor: pointer;
  background: var(--white);
  transition: border-color .2s;
}
.sort-select:focus { border-color: var(--orange); }

/* ── SORT BAR (author page) ── */
.sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.sort-bar-left { font-size: 14px; color: var(--gray); }
.sort-bar-left strong { color: var(--dark); }

/* ── FEATURED POST (category page) ── */
.cat-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--light);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 36px;
  transition: box-shadow .2s;
}
.cat-featured:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.cf-image-link { display: block; height: 100%; }
.cf-image {
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  min-height: 240px;
  overflow: hidden;
}
.cf-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.cf-body { padding: 28px 28px 28px 0; }
.cf-featured-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--orange);
  margin-bottom: 10px;
}
.cf-featured-label::before { content: ''; width: 20px; height: 2px; background: var(--orange); border-radius: 1px; }
.cf-title { font-size: 22px; font-weight: 900; color: var(--dark); line-height: 1.3; letter-spacing: -.3px; margin-bottom: 12px; }
.cf-title a { color: var(--dark); text-decoration: none; }
.cf-title a:hover { color: var(--orange); }
.cf-excerpt { font-size: 14px; color: var(--gray); line-height: 1.7; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cf-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--gray); }
.cf-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 900; font-size: 10px; flex-shrink: 0; }
.cf-meta strong { color: var(--dark); }
.cf-dot { color: var(--light); }

/* ── AUTHOR FEATURED ── */
.author-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--light);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 36px;
  transition: box-shadow .2s;
}
.author-featured:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.af-image {
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  min-height: 220px;
  overflow: hidden;
}
.af-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.af-body { padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.af-featured-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--orange);
  margin-bottom: 10px;
}
.af-featured-label::before { content: ''; width: 20px; height: 2px; background: var(--orange); border-radius: 1px; }
.af-title { font-size: 20px; font-weight: 900; color: var(--dark); line-height: 1.3; letter-spacing: -.2px; margin-bottom: 10px; }
.af-title a { color: var(--dark); text-decoration: none; }
.af-title a:hover { color: var(--orange); }
.af-excerpt { font-size: 14px; color: var(--gray); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
.af-meta { font-size: 12px; color: var(--gray); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.af-meta strong { color: var(--dark); }
.af-dot { color: var(--light); }

/* ── POST LIST ITEMS (category/author) ── */
.pli-cat {
  display: grid;
  grid-template-columns: 188px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--light);
  align-items: start;
}
.pli-cat:first-of-type { border-top: 1px solid var(--light); }
.pli-image {
  aspect-ratio: 16/10;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
}
.pli-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.pli-content { }
.pli-title { font-size: 18px; font-weight: 900; color: var(--dark); line-height: 1.3; margin-bottom: 8px; letter-spacing: -.2px; }
.pli-title a { color: var(--dark); text-decoration: none; }
.pli-title a:hover { color: var(--orange); }
.pli-excerpt { font-size: 14px; color: var(--gray); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; }
.pli-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray); flex-wrap: wrap; }
.pli-meta strong { color: var(--dark); }
.pli-dot { color: var(--light); }

/* ── INLINE FEED BANNERS ── */
.feed-banner { border-radius: 10px; overflow: hidden; margin: 8px 0; }
.fb-inner {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.fb-inner.orange { background: linear-gradient(135deg, #FE6331, #c94b1f); }
.fb-inner.dark   { background: linear-gradient(135deg, #2a2a3e, #1a1a2e); }
.fb-inner.blue   { background: linear-gradient(135deg, #56719D, #3a5280); }
.fb-inner::before { content: ''; position: absolute; inset: 0; opacity: .05; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
.fb-text { flex: 1; position: relative; }
.fb-eyebrow { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.6); margin-bottom: 4px; }
.fb-title { font-size: 16px; font-weight: 900; color: var(--white); line-height: 1.3; margin-bottom: 3px; }
.fb-desc { font-size: 13px; color: rgba(255,255,255,.7); }
.fb-btn {
  flex-shrink: 0;
  position: relative;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  color: var(--white);
  padding: 9px 18px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: all .2s;
  white-space: nowrap;
  text-decoration: none;
}
.fb-btn:hover { background: rgba(255,255,255,.25); }
.fb-icon { font-size: 40px; opacity: .12; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* ── PAGINATION ── */
.vyrian-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 48px; flex-wrap: wrap; }
.vyrian-pagination .nav-links { display: flex; align-items: center; gap: 6px; }
.vyrian-pagination a,
.vyrian-pagination span {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray);
  border: 1.5px solid var(--light);
  background: var(--white);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.vyrian-pagination a:hover { border-color: var(--orange); color: var(--orange); }
.vyrian-pagination .current { background: var(--orange); color: var(--white) !important; border-color: var(--orange); }
.vyrian-pagination .dots { border: none; cursor: default; }

/* ── CAT SIDEBAR WIDGETS ── */
.cat-sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.cat-widget {
  background: var(--bg);
  border: 1px solid var(--light);
  border-radius: 10px;
  overflow: hidden;
}
.cat-widget-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--light);
}
.cat-widget-title {
  font-size: 12px;
  font-weight: 900;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: .8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.cat-widget-title svg { color: var(--orange); flex-shrink: 0; }
.cat-widget-body { padding: 16px 20px; }

/* Part search in sidebar */
.sb-search-wrap {
  display: flex;
  border: 1.5px solid var(--light);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .2s;
}
.sb-search-wrap:focus-within { border-color: var(--orange); }
.sb-search-input {
  flex: 1;
  border: none;
  padding: 10px 14px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: var(--dark);
  outline: none;
  background: var(--white);
  min-width: 0;
}
.sb-search-input::placeholder { color: #bbb; }
.sb-search-btn {
  background: var(--orange);
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background .2s;
}
.sb-search-btn:hover { background: #e5501e; }
.sb-loading { text-align: center; padding: 10px; font-size: 12px; color: var(--gray); display: none; }
.sb-loading.visible { display: block; }
.sb-results { margin-top: 10px; display: none; }
.sb-results.visible { display: block; }
.sb-result-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--light); cursor: pointer; text-decoration: none; }
.sb-result-item:last-child { border-bottom: none; }
.sb-chip { font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; color: var(--white); }
.sb-chip.ic  { background: var(--orange); }
.sb-chip.mcu { background: var(--green); }
.sb-chip.mem { background: var(--purple); }
.sb-chip.def { background: var(--blue); }
.sb-info { flex: 1; min-width: 0; }
.sb-pn { font-size: 13px; font-weight: 900; color: var(--dark); transition: color .2s; }
.sb-desc { font-size: 11px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-status { font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; }
.sa { background: #e6f7ee; color: #1a8a45; }
.sl { background: #fff4e0; color: #c07800; }
.sb-view-all {
  display: block;
  text-align: center;
  padding: 9px;
  background: var(--white);
  border-top: 1px solid var(--light);
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  transition: background .2s;
  margin-top: 4px;
  text-decoration: none;
}
.sb-view-all:hover { background: #fff8f5; }
.sb-empty { text-align: center; padding: 10px; font-size: 12px; color: var(--gray); display: none; }
.sb-empty.visible { display: block; }

/* Categories list widget */
.cat-list { display: flex; flex-direction: column; gap: 2px; }
.cat-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.cat-list-item:hover { background: var(--white); }
.cat-list-item.active { background: var(--white); }
.cat-list-left { display: flex; align-items: center; gap: 10px; }
.cat-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cat-list-name { font-size: 14px; font-weight: 700; color: var(--dark); }
.cat-list-item.active .cat-list-name { color: var(--orange); }
.cat-list-count { font-size: 12px; font-weight: 700; color: var(--gray); background: var(--light); padding: 2px 8px; border-radius: 20px; }
.cat-list-item.active .cat-list-count { background: rgba(254,99,49,.12); color: var(--orange); }

/* Sidebar banners */
.sidebar-banner { border-radius: 10px; overflow: hidden; display: block; text-decoration: none; }
.sbb { padding: 22px; position: relative; overflow: hidden; }
.sbb::before { content: ''; position: absolute; inset: 0; opacity: .05; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
.sbb.orange-g { background: linear-gradient(135deg, #FE6331, #c94b1f); }
.sbb.dark-g   { background: linear-gradient(135deg, #2a2a3e, #1a1a2e); }
.sbb.blue-g   { background: linear-gradient(135deg, #56719D, #3a5280); }
.sbb-eyebrow { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.6); margin-bottom: 5px; position: relative; }
.sbb-title { font-size: 16px; font-weight: 900; color: var(--white); line-height: 1.35; margin-bottom: 7px; position: relative; }
.sbb-desc { font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.6; margin-bottom: 14px; position: relative; }
.sbb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: all .2s;
  position: relative;
}
.sbb-btn:hover { background: rgba(255,255,255,.25); }
.sbb-icon { font-size: 44px; position: absolute; right: 14px; bottom: -4px; opacity: .12; pointer-events: none; }

/* Market pulse (p-* variants for category/author pages) */
.p-tight     { background: #fdecea; color: #c0392b; }
.p-stable    { background: #e6f7ee; color: #1a8a45; }
.p-improving { background: #e8f4fd; color: #1a5c8a; }
.p-watch     { background: #fff4e0; color: #c07800; }

/* Newsletter sidebar widget */
.newsletter-widget {
  background: var(--blue);
  border-radius: 10px;
  padding: 22px;
}
.nw-eyebrow { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.nw-title { font-size: 17px; font-weight: 900; color: var(--white); line-height: 1.35; margin-bottom: 6px; }
.nw-desc { font-size: 13px; color: rgba(255,255,255,.72); margin-bottom: 14px; }
.nw-input {
  width: 100%;
  border: none;
  border-radius: 5px;
  padding: 10px 13px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  color: var(--dark);
  outline: none;
  margin-bottom: 8px;
  display: block;
}
.nw-btn {
  width: 100%;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 5px;
  padding: 10px;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: background .2s;
}
.nw-btn:hover { background: #e5501e; }

/* ── AUTHOR HERO ── */
.author-hero {
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 56px 24px 0;
  position: relative;
  overflow: hidden;
}
.author-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(86,113,157,.25) 0%, transparent 70%);
}
.author-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .04;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='1'%3E%3Cpath d='M54 44v6h-6v-6h6zm-12 0v6h-6v-6h6zm-12 0v6h-6v-6h6zm-12 0v6H6v-6h12zm36-12v6h-6v-6h6zm-12 0v6h-6v-6h6zm-12 0v6h-6v-6h6zm-12 0v6H6v-6h12z'/%3E%3C/g%3E%3C/svg%3E");
}
.author-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.45);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,.45); transition: color .2s; text-decoration: none; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb .sep { color: rgba(255,255,255,.2); }
.breadcrumb .current { color: rgba(255,255,255,.8); font-weight: 700; }

/* Author profile card */
.author-profile { display: flex; align-items: flex-start; gap: 36px; margin-bottom: 48px; }
.author-avatar-wrap { flex-shrink: 0; position: relative; }
.author-avatar-xl {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #3a5280);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 36px;
  font-weight: 900;
  border: 4px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.author-verified {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.author-info { flex: 1; min-width: 0; }
.author-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(254,99,49,.15);
  border: 1px solid rgba(254,99,49,.3);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
.author-badge span { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: var(--orange); }
.author-name-xl { font-size: 38px; font-weight: 900; color: var(--white); letter-spacing: -1px; line-height: 1.1; margin-bottom: 6px; }
.author-title-xl { font-size: 16px; color: rgba(255,255,255,.6); margin-bottom: 16px; font-weight: 400; }
.author-bio-xl { font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.75; max-width: 640px; margin-bottom: 20px; }

.expertise-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.expertise-label { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.4); }
.exp-tag { padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.65); }

.author-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,.2);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  transition: all .2s;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
}
.social-btn:hover { border-color: rgba(255,255,255,.5); color: var(--white); background: rgba(255,255,255,.08); }
.social-btn.follow { background: var(--orange); border-color: var(--orange); color: var(--white); }
.social-btn.follow:hover { background: #e5501e; border-color: #e5501e; }

/* Author stats strip */
.author-stats-strip {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.author-stat-item {
  flex: 1;
  padding: 20px 0;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.07);
}
.author-stat-item:last-child { border-right: none; }
.author-stat-item:first-child { text-align: left; }
.as-num { font-size: 26px; font-weight: 900; color: var(--white); line-height: 1; margin-bottom: 4px; }
.as-label { font-size: 11px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .8px; }

/* Author content tabs */
.author-tabs {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.author-tab {
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: all .2s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
  display: inline-block;
}
.author-tab:hover { color: rgba(255,255,255,.8); }
.author-tab.active { color: var(--white); border-bottom-color: var(--orange); }

/* Author sidebar – About card */
.author-card-widget .cat-widget-body { text-align: center; }
.author-card-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #3a5280);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 22px;
  font-weight: 900;
  margin: 0 auto 12px;
}
.author-card-btn {
  display: block;
  background: var(--orange);
  color: var(--white);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: background .2s;
  margin-top: 12px;
  text-align: center;
}
.author-card-btn:hover { background: #e5501e; }

/* Other authors widget */
.other-author-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--light);
  text-decoration: none;
  transition: opacity .15s;
}
.other-author-item:last-child { border-bottom: none; }
.other-author-item:hover { opacity: .8; }
.oa-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}
.oa-name { font-size: 14px; font-weight: 700; color: var(--dark); }
.oa-count { font-size: 12px; color: var(--gray); }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .cat-content-wrap { grid-template-columns: 1fr; }
  .cat-sidebar { position: static; }
  .author-profile { flex-direction: column; align-items: center; text-align: center; }
  .author-socials { justify-content: center; }
  .author-bio-xl { margin: 0 auto 20px; }
  .cat-hero-title { font-size: 36px; }
  .author-stats-strip { flex-wrap: wrap; }
  .author-stat-item:first-child { text-align: center; }
}
@media (max-width: 640px) {
  .cat-hero-title { font-size: 28px; }
  .cat-featured { grid-template-columns: 1fr; }
  .cf-body { padding: 20px; }
  .author-featured { grid-template-columns: 1fr; }
  .pli-cat { grid-template-columns: 1fr; }
  .author-name-xl { font-size: 28px; }
  .author-stats-strip { flex-direction: column; }
}

/* =============================================
   RESPONSIVE MOBILE FIXES — v4.1
   ============================================= */

/* Single post two-column layout */
.single-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

/* Post navigation */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--light);
}

/* ── TABLET (≤ 1024px) ── */
@media (max-width: 1024px) {
  .single-layout {
    grid-template-columns: 1fr 300px;
  }
  .cat-content-wrap,
  .content-wrap {
    grid-template-columns: 1fr 280px !important;
    gap: 32px !important;
  }
}

/* ── MOBILE (≤ 768px) ── */
@media (max-width: 768px) {
  /* Single post: stack sidebar below article */
  .single-layout {
    grid-template-columns: 1fr !important;
    gap: 40px;
    padding: 0 16px 48px;
  }

  /* Move sidebar below main content on mobile */
  .single-layout .widget-area,
  .single-layout aside {
    order: 2;
  }
  .single-layout article {
    order: 1;
  }

  /* Category & author pages: stack sidebar below */
  .cat-content-wrap,
  .content-wrap {
    grid-template-columns: 1fr !important;
    padding: 0 16px 48px !important;
  }
  .cat-sidebar,
  .sidebar {
    order: 2;
  }
  .main-col {
    order: 1;
  }

  /* Post navigation stack */
  .post-navigation {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .post-navigation > div:last-child {
    text-align: left !important;
  }

  /* Two col wrap (index.php "More from blog") */
  .two-col-wrap {
    grid-template-columns: 1fr !important;
    padding: 0 16px 48px !important;
    gap: 40px !important;
  }

  /* Cat & author featured post: stack on mobile */
  .cat-featured,
  .author-featured {
    grid-template-columns: 1fr !important;
  }

  /* Post list items: stack thumbnail above text */
  .pli-cat,
  .post-list-item {
    grid-template-columns: 1fr !important;
  }
  .pli-cat .pli-img,
  .post-list-item .list-image {
    width: 100% !important;
    height: 180px;
  }

  /* Hero adjustments */
  .cat-hero,
  .author-hero {
    padding: 40px 16px 0 !important;
  }
  .cat-hero-title,
  .author-name {
    font-size: 1.6rem !important;
  }
  .author-stats-strip {
    flex-wrap: wrap !important;
  }
  .author-stat {
    flex: 1 1 33% !important;
    min-width: 80px;
  }

  /* Author profile on mobile */
  .author-profile {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Hide sticky on mobile */
  .cat-sidebar,
  .sidebar,
  .widget-area {
    position: static !important;
  }

  /* Related posts: 1 column */
  .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Feed banners full width */
  .feed-banner {
    margin: 20px 0 !important;
  }
}

/* ── SMALL MOBILE (≤ 480px) ── */
@media (max-width: 480px) {
  .single-layout,
  .two-col-wrap,
  .cat-content-wrap {
    padding: 0 12px 40px !important;
  }
  .cat-hero,
  .author-hero {
    padding: 32px 12px 0 !important;
  }
  .cat-tabs,
  .author-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .cat-tabs::-webkit-scrollbar,
  .author-tabs::-webkit-scrollbar { display: none; }

  .author-stat {
    flex: 1 1 50% !important;
  }
  .expertise-row {
    flex-wrap: wrap !important;
  }
  .cat-hero-stats {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}

/* ============================================================
   VYRIAN BLOG — PRODUCTION TEMPLATE STYLES
   ============================================================ */

/* ── MOBILE MENU TOGGLE ── */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
  z-index: 201;
}
.menu-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-toggle.is-active .menu-toggle-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-toggle.is-active .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .menu-toggle-bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 1024px) {
  .menu-toggle { display: flex; }
  .header-inner {
    position: relative;
  }
  .logo { flex: 1; min-width: 0; }
  .header-cta {
    margin-left: auto !important;
    margin-right: 8px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
  }
  #site-navigation,
  .site-navigation {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    flex-direction: column;
    padding: 1rem;
    z-index: 200;
  }
  #site-navigation.is-open,
  .site-navigation.is-open {
    display: flex !important;
  }
  #site-navigation ul,
  .site-navigation ul {
    flex-direction: column !important;
    width: 100%;
  }
  #site-navigation ul li,
  .site-navigation ul li {
    width: 100%;
    text-align: center;
  }
  #site-navigation ul li a,
  .site-navigation ul li a {
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
    width: 100% !important;
  }
}

/* ── POST CARD LINK (no decoration) ── */
.post-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ── SECTION HEADER FLUSH (no margin/padding) ── */
.section-header--flush {
  margin: 0 0 8px;
  padding: 0;
}

/* ── NO POSTS MESSAGE ── */
.no-posts-message {
  text-align: center;
  color: var(--gray);
  padding: 2rem 0;
}

/* ── SINGLE POST LAYOUT ── */
.single-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 1024px) {
  .single-layout { grid-template-columns: 1fr 280px; gap: 32px; }
}
@media (max-width: 768px) {
  .single-layout { grid-template-columns: 1fr !important; }
}

/* ── POST HERO (single.php) ── */
.post-hero { margin-bottom: 3rem; }
.post-hero-category { margin-bottom: 1.5rem; }
.post-hero-title { color: var(--dark); margin-bottom: 1.5rem; }
.post-hero-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
  align-items: center;
}
.post-author-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.post-author-avatar { border-radius: 50%; }
.post-author-name { font-weight: 600; color: var(--dark); }
.post-author-role { font-size: 0.9rem; color: var(--gray); }
.post-hero-stats {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--gray);
  align-items: center;
  flex-wrap: wrap;
}
.meta-sep { color: var(--gray); }

/* ── Read Aloud Button ── */
.post-hero-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.read-aloud-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--white);
  color: var(--blue);
  border: 1.5px solid var(--blue);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  transform: none;
  margin: 0;
  height: auto;
}
.read-aloud-btn:hover,
.read-aloud-btn.is-active {
  background: var(--blue);
  color: var(--white);
  transform: none;
}

.post-hero-image { border-radius: 4px; overflow: hidden; margin-bottom: 2rem; }

/* ── AUTHOR BIO (single.php) ── */
.author-bio-heading { font-size: 1.1rem; margin-bottom: 1rem; }
.author-bio-name { margin-bottom: 0.25rem; }
.author-bio-text { margin: 0; color: var(--gray); font-size: 0.9rem; }
.author-bio-links { display: flex; gap: 1rem; margin-top: 0.75rem; }
.author-bio-links a { color: var(--blue); font-size: 0.9rem; }
.author-bio-links a:hover { color: var(--orange); }

/* ── PAGE TEMPLATE ── */
.page-content-wrap { max-width: 800px; margin: 0 auto; }
.page-hero { margin-bottom: 3rem; }
.page-hero-title { color: var(--dark); margin-bottom: 1.5rem; }
.page-hero-image { border-radius: 4px; overflow: hidden; margin-bottom: 2rem; }
.page-entry-content { line-height: 1.8; font-size: 1.05rem; }

/* ── ARCHIVE POST ITEM ── */
.archive-post-item {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
}
.archive-post-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.archive-post-thumb {
  border-radius: 4px;
  overflow: hidden;
  height: 150px;
  display: block;
}
.archive-post-thumb img,
.archive-post-thumb .post-no-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.archive-post-title { margin-bottom: 0.5rem; }
.archive-post-title a { color: var(--dark); text-decoration: none; }
.archive-post-title a:hover { color: var(--orange); }
.archive-post-excerpt { color: var(--gray); margin-bottom: 1rem; font-size: 0.95rem; }
.archive-post-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--gray);
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 600px) {
  .archive-post-grid { grid-template-columns: 1fr; }
  .archive-post-thumb { height: 200px; }
}

/* ── SEARCH HERO ── */
.search-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--blue) 100%);
  color: var(--white);
  padding: 3rem 0;
  margin-bottom: 2rem;
}
.search-hero h1 { color: var(--white); margin-bottom: 1rem; }
.search-hero-count { color: rgba(255,255,255,0.9); font-size: 1.1rem; margin-bottom: 0; }

/* ── SEARCH NO RESULTS ── */
.search-browse-categories { margin-top: 2rem; }
.category-browse-grid {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.category-browse-item {
  padding: 0.5rem 1rem;
  background-color: var(--light);
  color: var(--dark);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.category-browse-item:hover { background-color: var(--orange); color: var(--white); }

/* ── ARCHIVE HERO ── */
.archive-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--blue) 100%);
  color: var(--white);
  padding: 3rem 0;
  margin-bottom: 2rem;
}
.archive-hero h1 { color: var(--white); margin-bottom: 0.5rem; }
.archive-hero-desc { color: rgba(255,255,255,0.9); font-size: 1.1rem; }
.archive-hero .breadcrumb a { color: rgba(255,255,255,0.7); }
.archive-hero .breadcrumb { color: rgba(255,255,255,0.5); }

/* ── FILTER BAR ── */
.filter-count { color: var(--gray); font-size: 0.9rem; }

/* ── 404 PAGE ── */
.error-404-inner { max-width: 600px; margin: 0 auto; }
.error-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0; }
.error-categories { margin-top: 3rem; }
.error-categories h2 { margin-bottom: 1.5rem; }
.error-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.error-category-card {
  padding: 1rem;
  background-color: #f8f8f8;
  color: var(--dark);
  text-decoration: none;
  border-radius: 4px;
  display: block;
  transition: all 0.3s ease;
}
.error-category-card:hover { background-color: var(--orange); color: var(--white); }
.error-category-card strong { display: block; margin-bottom: 0.25rem; }
.error-category-card span { color: var(--gray); font-size: 0.9rem; }
.error-category-card:hover span { color: rgba(255,255,255,0.8); }
.error-recent-posts { margin-top: 3rem; text-align: left; }
.error-recent-posts h2 { text-align: center; margin-bottom: 1.5rem; }
.error-recent-grid { display: grid; gap: 1rem; }
.error-recent-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1rem;
  padding: 1rem;
  background-color: #f8f8f8;
  border-radius: 4px;
  align-items: start;
}
.error-recent-thumb { border-radius: 4px; overflow: hidden; height: 100px; }
.error-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.error-recent-content h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.error-recent-content h3 a { color: var(--dark); text-decoration: none; }
.error-recent-content h3 a:hover { color: var(--orange); }
.error-recent-content p { margin: 0 0 0.5rem; color: var(--gray); font-size: 0.9rem; }

@media (max-width: 768px) {
  .error-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .error-recent-item { grid-template-columns: 80px 1fr; }
}
@media (max-width: 480px) {
  .error-categories-grid { grid-template-columns: 1fr; }
  .error-recent-item { grid-template-columns: 1fr; }
  .error-recent-thumb { height: 150px; }
}

/* ── ANNOUNCEMENT BAR INNER ── */
.announcement-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .announcement-bar-inner { flex-direction: column; gap: 4px; }
}

/* ============================================================
   VYRIAN BLOG — DESIGN UPGRADE v2
   ============================================================ */

/* ── SCROLL REVEAL ANIMATIONS ── */
.v-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.v-reveal.v-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger cards in a grid */
.post-grid .v-reveal:nth-child(2) { transition-delay: 0.1s; }
.post-grid .v-reveal:nth-child(3) { transition-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
  .v-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── READING PROGRESS BAR ── */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), #ff8a5c);
  z-index: 1000;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ── HEADER SHRINK ON SCROLL ── */
.site-header {
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}
.header-shrunk {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
.header-shrunk .header-inner {
  height: 56px !important;
  min-height: 56px !important;
}

/* ── UPGRADED HERO ── */
.hero {
  position: relative;
}
.hero-image-link {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 10px;
}
.hero-image {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-image-link:hover .hero-image {
  transform: scale(1.03);
}
.hero-image img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-image-link:hover img {
  transform: scale(1.05);
}
.hero-content .post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.post-meta-text {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.post-meta-author { font-weight: 700; color: var(--dark); }
.post-meta-details { color: var(--gray); font-size: 12px; }
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--orange);
  text-decoration: none;
  margin-top: 18px;
  transition: gap 0.25s ease;
}
.read-more:hover { gap: 12px; color: var(--orange); }
.read-more-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.read-more:hover .read-more-arrow { transform: translateX(4px); }

/* ── UPGRADED POST CARDS ── */
.post-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--white);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.post-card .card-image {
  overflow: hidden;
  position: relative;
}
.post-card .card-image img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-card:hover .card-image img {
  transform: scale(1.08);
}
.card-image-placeholder {
  width: 40px;
  height: 40px;
  opacity: 0.3;
}
.card-read-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  z-index: 2;
}
.card-meta-author { font-weight: 700; color: var(--dark); font-size: 13px; }
.card-meta-date { font-size: 12px; color: var(--gray); }

/* ── UPGRADED POST LIST ITEMS ── */
.post-list-item {
  transition: background 0.25s ease;
  border-radius: 8px;
  padding: 20px 0;
}
.list-image-link {
  display: block;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
}
.list-image {
  transition: transform 0.4s ease;
  overflow: hidden;
  border-radius: 8px;
}
.list-image img {
  transition: transform 0.4s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-list-item:hover .list-image img {
  transform: scale(1.06);
}

/* ── UPGRADED NEWSLETTER SECTION ── */
.newsletter-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #3a5a8c 0%, var(--blue) 40%, #6b8cc4 100%);
  padding: 80px 24px;
}
.newsletter-bg-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.newsletter-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 24px;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,0.2);
}
.newsletter-section h2 {
  font-size: 36px;
  letter-spacing: -0.5px;
}
.newsletter-section p {
  font-size: 17px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.newsletter-form {
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  border-radius: 8px;
}
.newsletter-form input {
  border-radius: 8px 0 0 8px;
  padding: 16px 20px;
  font-size: 16px;
}
.newsletter-form button {
  border-radius: 0 8px 8px 0;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.newsletter-trust {
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* ── UPGRADED BANNERS ── */
.banner-card {
  border-radius: 12px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.banner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.15);
}
.banner-btn {
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.banner-card:hover .banner-btn {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ── UPGRADED SECTION HEADERS ── */
.section-header {
  position: relative;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 2rem;
}
.section-header h2 {
  position: relative;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.4px;
  padding-left: 16px;
  border-left: 4px solid var(--orange);
  line-height: 1.2;
}
.section-header h2::after {
  display: none;
}
.section-header h2 span {
  color: var(--gray);
  font-weight: 700;
}
.section-header a {
  font-size: 13px;
  font-weight: 800;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1.5px solid var(--orange);
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
.section-header a:hover {
  background: var(--orange);
  color: var(--white);
}

/* ── UPGRADED CATEGORY TABS ── */
.categories-bar {
  scrollbar-width: none;
}
.categories-bar::-webkit-scrollbar { display: none; }
.cat-btn {
  position: relative;
  transition: color 0.25s ease;
}
.cat-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
  transition: width 0.25s ease, left 0.25s ease;
}
.cat-btn:hover::after,
.cat-btn.active::after {
  width: 100%;
  left: 0;
}

/* ── UPGRADED SINGLE POST ── */
.post-hero-image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.post-hero-image img,
.post-hero-image .featured-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
.post-hero-image .post-no-image {
  width: 100%;
  aspect-ratio: 16/9;
}
.post-hero-image {
  margin-bottom: 2rem;
}
.post-hero-title {
  font-size: 2.8rem;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
@media (max-width: 768px) {
  .post-hero-title { font-size: 1.8rem; }
}
.entry-content {
  font-size: 1.1rem;
  line-height: 1.9;
}
.entry-content > p:first-of-type::first-letter {
  font-size: 3.2em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.12em 0 0;
  font-weight: 900;
  color: var(--orange);
}

/* ── UPGRADED POST NAVIGATION ── */
.post-navigation {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  margin: 3rem 0;
  padding: 0;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
  padding: 1.5rem 2rem;
  transition: background 0.25s ease;
}
.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
  background: #f8f8f8;
}
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
  font-size: 1rem;
}

/* ── UPGRADED AUTHOR BIO BOX ── */
.author-bio-box {
  border-radius: 12px;
  border-left: 4px solid var(--orange);
  transition: box-shadow 0.3s ease;
}
.author-bio-box:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* ── UPGRADED SIDEBAR WIDGETS ── */
.sidebar .widget {
  border-radius: 12px;
  transition: box-shadow 0.3s ease;
}
.sidebar .widget:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.quick-links-widget {
  border-radius: 12px !important;
  overflow: hidden;
}
.quick-link-item {
  transition: background 0.2s ease, padding-left 0.2s ease;
}
.quick-link-item:hover {
  padding-left: 24px;
}

/* ── UPGRADED 404 PAGE ── */
.error-code {
  background: linear-gradient(135deg, var(--orange), #ff8a5c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 10rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 1rem;
  animation: v-pulse 3s ease-in-out infinite;
}
@keyframes v-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.error-category-card {
  border-radius: 8px;
  border: 1px solid var(--border-light);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.error-category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* ── UPGRADED ARCHIVE / SEARCH HEROES ── */
.archive-hero,
.search-hero,
.cat-hero {
  position: relative;
  overflow: hidden;
}
.archive-hero::before,
.search-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* ── UPGRADED PART SEARCH ── */
.part-search-section {
  position: relative;
  overflow: hidden;
}
.part-search-box {
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  overflow: hidden;
  align-items: stretch;
}
.part-search-input {
  border-radius: 10px 0 0 10px;
  margin: 0;
  height: auto;
}
.part-search-btn {
  border-radius: 0 10px 10px 0;
  margin: 0;
  height: auto;
  transform: none;
}
.part-search-btn:hover {
  transform: none;
}
.part-pill {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.part-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(254,99,49,0.3);
}

/* ── UPGRADED PAGINATION ── */
.page-numbers {
  border-radius: 8px;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-numbers:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(254,99,49,0.2);
}

/* ── GLOBAL SELECTION COLOR ── */
::selection {
  background: rgba(254,99,49,0.15);
  color: var(--dark);
}

/* ── FOCUS VISIBLE (keyboard only) ── */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}