/* ============================================================
   FUTURETECHCAREERS — PREMIUM ARTICLE REDESIGN
   Production-Ready CSS for WordPress Theme & Custom Styles
   Version: 4.0 | Inspired by HubSpot, Backlinko, Medium, Ahrefs
   ============================================================ */

/* === CSS CUSTOM PROPERTIES (DESIGN TOKENS) === */
:root {
  /* — Colors — */
  --art-bg: #ffffff;
  --art-heading: #111827;
  --art-text: #374151;
  --art-text-light: #6b7280;
  --art-border: #e5e7eb;
  --art-border-light: #f3f4f6;
  --art-primary: #2563eb;
  --art-primary-hover: #1d4ed8;
  --art-primary-light: rgba(37, 99, 235, 0.06);
  --art-success: #16a34a;
  --art-success-light: rgba(22, 163, 74, 0.06);
  --art-warning: #f59e0b;
  --art-warning-light: rgba(245, 158, 11, 0.06);
  --art-danger: #dc2626;
  --art-danger-light: rgba(220, 38, 38, 0.06);
  --art-surface: #f9fafb;
  --art-surface-elevated: #ffffff;

  /* — Typography — */
  --art-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --art-font-serif: 'Georgia', 'Times New Roman', serif;
  --art-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* — Spacing — */
  --art-section-gap: 80px;
  --art-heading-top: 54px;
  --art-heading-bottom: 20px;
  --art-paragraph-bottom: 24px;
  --art-container-padding: 40px;
  --art-content-max-width: 880px;

  /* — Effects — */
  --art-radius-sm: 8px;
  --art-radius-md: 12px;
  --art-radius-lg: 16px;
  --art-radius-xl: 20px;
  --art-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02);
  --art-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --art-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  --art-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --art-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* — Progress Bar — */
  --art-progress-height: 3px;

  /* — Sidebar Widths — */
  --art-sidebar-width: 300px;
}

/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
  :root {
    --art-bg: #0f172a;
    --art-heading: #f8fafc;
    --art-text: #cbd5e1;
    --art-text-light: #94a3b8;
    --art-border: #1e293b;
    --art-border-light: #0f172a;
    --art-surface: #1e293b;
    --art-surface-elevated: #1e293b;
    --art-primary-light: rgba(37, 99, 235, 0.15);
    --art-success-light: rgba(22, 163, 74, 0.15);
    --art-warning-light: rgba(245, 158, 11, 0.15);
    --art-danger-light: rgba(220, 38, 38, 0.15);
    --art-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --art-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --art-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --art-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }
}

/* ============================================================
   1. READING PROGRESS BAR
   ============================================================ */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: var(--art-progress-height);
  background: linear-gradient(90deg, var(--art-primary), #7c3aed, var(--art-primary));
  background-size: 200% 100%;
  animation: progressGradient 2s linear infinite;
  z-index: 99999;
  transition: width 0.15s linear;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
}

@keyframes progressGradient {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

/* ============================================================
   2. SINGLE POST RESPONSIVE LAYOUT SYSTEM
   ============================================================ */

/* Base single container page */
.single .container-page {
  display: flex !important;
  flex-direction: column !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 24px 20px !important;
  gap: 32px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Content Area Main */
.single .content-wrapper {
  width: 100% !important;
  max-width: var(--art-content-max-width) !important;
  min-height: auto !important;
  box-sizing: border-box !important;
  padding: var(--art-container-padding) !important;
  background: var(--art-bg) !important;
  border: 1px solid var(--art-border) !important;
  border-radius: var(--art-radius-lg) !important;
  box-shadow: var(--art-shadow-sm) !important;
  margin: 0 auto !important;
}

/* Sidebar Containers Base */
.single .ad-space {
  width: 100% !important;
  background: transparent !important;
  min-height: auto !important;
  box-sizing: border-box !important;
}

/* --- Responsive Desktop Grid (min-width: 1200px) --- */
@media (min-width: 1200px) {
  .single .container-page {
    display: grid !important;
    grid-template-columns: var(--art-sidebar-width) minmax(0, 1fr) var(--art-sidebar-width) !important;
    padding: 40px 24px !important;
    gap: 32px !important;
    align-items: start !important;
  }

  .single .content-wrapper {
    margin: 0 !important;
    max-width: 100% !important;
  }

  .single .ad-space-left {
    position: sticky !important;
    top: 24px !important;
    max-height: calc(100vh - 48px);
    overflow-y: auto !important;
    scrollbar-width: none;
    /* Hide scrollbar for clean look */
  }

  .single .ad-space-left::-webkit-scrollbar {
    display: none;
  }

  .single .ad-space-right {
    position: sticky !important;
    top: 24px !important;
    max-height: calc(100vh - 48px);
    overflow-y: auto !important;
    scrollbar-width: none;
  }

  .single .ad-space-right::-webkit-scrollbar {
    display: none;
  }
}

/* --- Responsive Medium/Tablet Grid (992px to 1199px) --- */
@media (min-width: 992px) and (max-width: 1199px) {
  .single .container-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--art-sidebar-width) !important;
    padding: 32px 20px !important;
    gap: 28px !important;
    align-items: start !important;
  }

  .single .ad-space-left {
    grid-column: 1 / -1 !important;
    /* Left sidebar items stack below content or bottom */
    order: 2 !important;
  }

  .single .content-wrapper {
    grid-column: 1 !important;
    order: 1 !important;
    max-width: 100% !important;
  }

  .single .ad-space-right {
    grid-column: 2 !important;
    order: 3 !important;
    position: sticky !important;
    top: 24px !important;
  }
}

/* --- Mobile / Small Tablet Stack (under 992px) --- */
@media (max-width: 991px) {
  .single .container-page {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px 12px !important;
    gap: 32px !important;
  }

  .single .content-wrapper {
    padding: 24px 16px !important;
    border-radius: var(--art-radius-md) !important;
    width: 100% !important;
    order: 1 !important; /* Display article first at the top */
  }

  .single .ad-space-left {
    display: block !important; /* Show Recent Articles on mobile */
    width: 100% !important;
    order: 2 !important; /* Stacked directly below the article content */
  }

  .single .ad-space-right {
    display: block !important;
    width: 100% !important;
    order: 3 !important; /* Stacked below the Recent Articles section */
  }
}

/* ============================================================
   3. TYPOGRAPHY — TYPOGRAPHY SYSTEM
   ============================================================ */

/* Article H1 */
.single .entry-header h1,
.single .content-wrapper h1 {
  font-family: var(--art-font-sans) !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--art-heading) !important;
  letter-spacing: -0.025em !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  text-decoration: none !important;
}

/* Article H2 */
.single .entry-content h2 {
  font-family: var(--art-font-sans) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--art-heading) !important;
  letter-spacing: -0.02em !important;
  margin-top: var(--art-heading-top) !important;
  margin-bottom: var(--art-heading-bottom) !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--art-border) !important;
  border-left: 4px solid var(--art-primary) !important;
  padding-left: 16px !important;
  scroll-margin-top: 100px;
}

/* First h2 shouldn't have top border */
.single .entry-content h2:first-of-type {
  border-top: none !important;
  padding-top: 0 !important;
}

/* Article H3 */
.single .entry-content h3 {
  font-family: var(--art-font-sans) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--art-heading) !important;
  letter-spacing: -0.01em !important;
  margin-top: 40px !important;
  margin-bottom: 18px !important;
  text-decoration: none !important;
  border-left: none !important;
  padding-left: 0 !important;
  scroll-margin-top: 100px;
}

/* Article H4 */
.single .entry-content h4 {
  font-family: var(--art-font-sans) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--art-heading) !important;
  margin-top: 32px !important;
  margin-bottom: 14px !important;
  letter-spacing: 0 !important;
}

/* Article Body Text */
.single .entry-content p {
  font-family: var(--art-font-sans) !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: var(--art-text) !important;
  margin-bottom: var(--art-paragraph-bottom) !important;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
}

/* Inline Links */
.single .entry-content a:not(.apply-now-button):not(.wp-block-button__link):not(.btn-primary):not(.btn-secondary):not(.share-button) {
  color: var(--art-primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color var(--art-transition) !important;
  background-image: linear-gradient(var(--art-primary-light), var(--art-primary-light));
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: 0 95%;
}

.single .entry-content a:not(.apply-now-button):not(.wp-block-button__link):not(.btn-primary):not(.btn-secondary):not(.share-button):hover {
  color: var(--art-primary-hover) !important;
  background-size: 100% 100%;
}

/* Lists */
.single .entry-content ul,
.single .entry-content ol {
  margin: 0 0 var(--art-paragraph-bottom) 0 !important;
  padding-left: 24px !important;
}

.single .entry-content li {
  font-family: var(--art-font-sans) !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: var(--art-text) !important;
  margin-bottom: 10px !important;
}

.single .entry-content ul li {
  list-style-type: disc !important;
}

.single .entry-content ul li::marker {
  color: var(--art-primary);
}

.single .entry-content ol li::marker {
  color: var(--art-primary);
  font-weight: 700;
}

/* Strong & Bold */
.single .entry-content strong,
.single .entry-content b {
  font-weight: 700 !important;
  color: var(--art-heading) !important;
}

/* ============================================================
   4. PREMIUM TABLE OF CONTENTS (RANK MATH & GENERIC)
   ============================================================ */

/* — Base Card Styling (when in content) — */
.wp-block-rank-math-toc-block,
.toc-container,
.ftc-premium-toc {
  margin: 36px 0 !important;
  padding: 24px !important;
  background: var(--art-surface-elevated) !important;
  border: 1px solid var(--art-border) !important;
  border-radius: var(--art-radius-lg) !important;
  box-shadow: var(--art-shadow-sm) !important;
  box-sizing: border-box !important;
  transition: box-shadow var(--art-transition), border-color var(--art-transition);
}

.wp-block-rank-math-toc-block:hover,
.toc-container:hover,
.ftc-premium-toc:hover {
  box-shadow: var(--art-shadow-md) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

/* — TOC Header Title — */
.wp-block-rank-math-toc-block h2,
.toc-container h2,
.ftc-premium-toc h2 {
  font-family: var(--art-font-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--art-heading) !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 0 16px 0 !important;
  border-bottom: 1px solid var(--art-border) !important;
  border-left: none !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  border-radius: 0 !important;
}

/* — TOC List Base — */
.wp-block-rank-math-toc-block nav,
.wp-block-rank-math-toc-block ul,
.wp-block-rank-math-toc-block ol,
.toc-container nav,
.toc-container ul,
.toc-container ol,
.ftc-premium-toc nav,
.ftc-premium-toc ul,
.ftc-premium-toc ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 16px !important;
}

/* — Grid Layout for TOC inside reading area — */
.content-wrapper .wp-block-rank-math-toc-block nav>ul,
.content-wrapper .toc-container nav>ul,
.content-wrapper .ftc-premium-toc nav>ul,
.content-wrapper .wp-block-rank-math-toc-block>ul,
.content-wrapper .toc-container>ul,
.content-wrapper .ftc-premium-toc>ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 10px 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* — TOC Links — */
.wp-block-rank-math-toc-block li,
.toc-container li,
.ftc-premium-toc li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: relative;
}

.wp-block-rank-math-toc-block li a,
.toc-container li a,
.ftc-premium-toc li a {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: var(--art-text) !important;
  font-family: var(--art-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 6px 8px !important;
  border-radius: var(--art-radius-sm) !important;
  background: transparent !important;
  transition: all var(--art-transition) !important;
  box-sizing: border-box !important;
  width: 100%;
}

.wp-block-rank-math-toc-block li a:hover,
.toc-container li a:hover,
.ftc-premium-toc li a:hover {
  color: var(--art-primary) !important;
  background: var(--art-primary-light) !important;
}

/* — Nested sub-item styling — */
.wp-block-rank-math-toc-block li ul,
.toc-container li ul,
.ftc-premium-toc li ul,
.wp-block-rank-math-toc-block li ol,
.toc-container li ol,
.ftc-premium-toc li ol {
  grid-column: 1 / -1 !important;
  /* Spans full columns if nested in grid */
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  padding-left: 16px !important;
  display: block !important;
}

.wp-block-rank-math-toc-block li ul li a,
.toc-container li ul li a,
.ftc-premium-toc li ul li a {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--art-text-light) !important;
}

/* — Active TOC link state — */
.wp-block-rank-math-toc-block li.toc-active>a,
.toc-container li.toc-active>a,
.ftc-premium-toc li.toc-active>a {
  color: var(--art-primary) !important;
  font-weight: 700 !important;
  background: var(--art-primary-light) !important;
}

/* — Sticky Sidebar state for TOC (when moved to sidebar via JS) — */
.toc-sticky-sidebar {
  position: sticky !important;
  top: 0px !important;
  max-height: calc(100vh - 48px);
  overflow-y: auto !important;
  scrollbar-width: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 32px 0 !important;
  transition: none !important;
}

.toc-sticky-sidebar h2 {
  font-size: 15px !important;
  padding-bottom: 12px !important;
}

.toc-sticky-sidebar nav>ul,
.toc-sticky-sidebar>ul {
  display: block !important;
  /* Linear stack in sidebar */
}

.toc-sticky-sidebar li a {
  padding: 5px 6px !important;
  font-size: 13.5px !important;
}

/* Toggle Arrow animation */
.toc-collapsed nav,
.toc-collapsed ul,
.toc-collapsed ol {
  display: none !important;
}

.toc-collapsed .toc-toggle-icon {
  transform: rotate(-90deg) !important;
}

/* ============================================================
   5. PREMIUM SIDEBAR WIDGETS
   ============================================================ */

/* — Sidebar Widget container overrides — */
.single .similar-articles {
  background: var(--art-surface-elevated) !important;
  border: 1px solid var(--art-border) !important;
  border-radius: var(--art-radius-lg) !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  margin: 0 0 24px 0 !important;
  box-shadow: var(--art-shadow-sm) !important;
  transition: box-shadow var(--art-transition), border-color var(--art-transition);
}

.single .similar-articles:hover {
  box-shadow: var(--art-shadow-md) !important;
}

/* Sidebar Widget Headings */
.single .similar-articles h2 {
  font-family: var(--art-font-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--art-heading) !important;
  background: transparent !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--art-border) !important;
  border-radius: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* --- Left Sidebar: Recent Articles list --- */
.single .ad-space-left .similar-articles .post {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--art-border-light) !important;
  border-radius: 0 !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
  transition: transform var(--art-transition) !important;
  box-sizing: border-box !important;
}

.single .ad-space-left .similar-articles .post:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.single .ad-space-left .similar-articles .post:hover {
  transform: translateX(4px) !important;
}

.single .ad-space-left .similar-articles .post img {
  width: 52px !important;
  height: 52px !important;
  object-fit: cover !important;
  border-radius: var(--art-radius-sm) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.single .ad-space-left .similar-articles .post h3 {
  font-family: var(--art-font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  border-left: none !important;
  padding-left: 0 !important;
}

.single .ad-space-left .similar-articles .post h3 a {
  color: var(--art-text) !important;
  text-decoration: none !important;
  transition: color var(--art-transition) !important;
  background-image: none !important;
}

.single .ad-space-left .similar-articles .post:hover h3 a {
  color: var(--art-primary) !important;
}

/* --- Right Sidebar: Explore More Categories --- */
.single .category-parent {
  font-family: var(--art-font-sans) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  color: var(--art-heading) !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

.single .category-parent a {
  color: var(--art-heading) !important;
  text-decoration: none !important;
  transition: color var(--art-transition) !important;
}

.single .category-parent a:hover {
  color: var(--art-primary) !important;
}

.single .category-children {
  padding-left: 14px !important;
  margin-top: 6px !important;
  margin-bottom: 16px !important;
  list-style: none !important;
}

.single .category-children li {
  font-family: var(--art-font-sans) !important;
  font-size: 13.5px !important;
  margin-bottom: 8px !important;
  position: relative !important;
  padding-left: 14px !important;
  list-style-type: none !important;
  color: var(--art-text) !important;
}

.single .category-children li::before {
  content: '•' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--art-primary) !important;
  font-weight: bold !important;
  font-size: 12px;
}

.single .category-children li a {
  color: var(--art-text) !important;
  text-decoration: none !important;
  transition: color var(--art-transition) !important;
}

.single .category-children li a:hover {
  color: var(--art-primary) !important;
}

/* ============================================================
   6. FEATURE IMAGE & CAPTIONS
   ============================================================ */
.single .feature-image-container {
  margin: 0 0 28px 0 !important;
  border-radius: var(--art-radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--art-shadow-md);
}

.single .feature-image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--art-radius-lg) !important;
  margin: 0 !important;
  transition: transform 0.5s ease;
}

.single .feature-image-container:hover .feature-image {
  transform: scale(1.015);
}

.single .wp-caption,
.single .feature-image-container .wp-caption {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  background: var(--art-surface) !important;
  font-family: var(--art-font-sans) !important;
  font-size: 13.5px !important;
  color: var(--art-text-light) !important;
  text-align: center !important;
  line-height: 1.5;
  border-bottom-left-radius: var(--art-radius-lg);
  border-bottom-right-radius: var(--art-radius-lg);
}

/* In-content images */
.single .entry-content img,
.single .entry-content [class^="wp-image-"] {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  border-radius: var(--art-radius-md) !important;
  margin: 32px 0 !important;
  display: block !important;
  box-shadow: var(--art-shadow-sm);
}

/* ============================================================
   7. POST META / AUTHOR INFO BAR
   ============================================================ */
.single .entry-footer-post {
  display: block !important;
  padding: 16px 20px !important;
  margin-bottom: 32px !important;
  background: var(--art-surface) !important;
  border: 1px solid var(--art-border) !important;
  border-radius: var(--art-radius-md) !important;
  box-shadow: none !important;
  text-align: left !important;
}

.single .post-meta {
  display: block !important;
  line-height: 1.8 !important;
  font-family: var(--art-font-sans) !important;
  font-size: 13.5px !important;
  color: var(--art-text-light) !important;
}

.single .post-meta div,
.single .post-meta span,
.single .post-meta a {
  font-family: var(--art-font-sans) !important;
  font-size: 13.5px !important;
  color: var(--art-text-light) !important;
}

.single .post-meta .postdate,
.single .post-meta .author-info {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single .post-meta a {
  display: inline !important;
  color: var(--art-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background-image: none !important;
  transition: color var(--art-transition) !important;
  border-bottom: 1px dashed rgba(37, 99, 235, 0.25) !important;
}

.single .post-meta a:hover {
  color: var(--art-primary-hover) !important;
  border-bottom-style: solid !important;
}

.single .author-box {
  display: none !important;
  /* Hide popup default state */
}

/* ============================================================
   8. AUTHOR INFORMATION CARD
   ============================================================ */
.author-card-premium {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  margin: var(--art-section-gap) 0 40px;
  background: var(--art-surface);
  border: 1px solid var(--art-border);
  border-radius: var(--art-radius-lg);
  box-shadow: var(--art-shadow-sm);
  transition: box-shadow var(--art-transition), transform var(--art-transition);
}

.author-card-premium:hover {
  box-shadow: var(--art-shadow-md);
  transform: translateY(-2px);
}

.author-card-premium .author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--art-primary-light);
  flex-shrink: 0;
}

.author-card-premium .author-details h4 {
  font-family: var(--art-font-sans) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--art-heading) !important;
  margin: 0 0 4px !important;
}

.author-card-premium .author-details .author-role {
  font-size: 12px;
  color: var(--art-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.author-card-premium .author-details p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: var(--art-text-light) !important;
  margin: 0 !important;
}

/* ============================================================
   9. BLOCKQUOTE / QUOTE BLOCKS
   ============================================================ */
.single .entry-content blockquote {
  margin: 36px 0 !important;
  padding: 24px 28px 24px 24px !important;
  background: var(--art-primary-light) !important;
  border-left: 4px solid var(--art-primary) !important;
  border-radius: 0 var(--art-radius-md) var(--art-radius-md) 0 !important;
  font-family: var(--art-font-sans) !important;
  font-size: 18px !important;
  font-style: italic !important;
  line-height: 1.8 !important;
  color: var(--art-text) !important;
  position: relative;
}

.single .entry-content blockquote::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 16px;
  font-size: 60px;
  font-family: Georgia, serif;
  color: var(--art-primary);
  opacity: 0.15;
  line-height: 1;
}

.single .entry-content blockquote p {
  margin-bottom: 0 !important;
}

/* ============================================================
   10. TABLES — MODERN REDESIGN
   ============================================================ */
.single .entry-content table,
.single .custom-table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 32px 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--art-surface-elevated) !important;
  border: 1px solid var(--art-border) !important;
  border-radius: var(--art-radius-md) !important;
  overflow: hidden;
  box-shadow: var(--art-shadow-sm) !important;
  font-family: var(--art-font-sans) !important;
}

.single .entry-content table th,
.single .custom-table th {
  background: var(--art-heading) !important;
  color: #ffffff !important;
  font-family: var(--art-font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  padding: 14px 18px !important;
  text-align: left !important;
  border: none !important;
  border-bottom: 2px solid var(--art-primary) !important;
}

.single .entry-content table td,
.single .custom-table td {
  font-family: var(--art-font-sans) !important;
  font-size: 14.5px !important;
  color: var(--art-text) !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--art-border) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  transition: background var(--art-transition);
}

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

.single .entry-content table tr:nth-child(even) td {
  background: var(--art-surface) !important;
}

.single .entry-content table tr:hover td {
  background: var(--art-primary-light) !important;
}

/* ============================================================
   11. BUTTONS — MODERN STYLING
   ============================================================ */

/* Primary Button Base (Force White Text & No Underline Gradient) */
.single .entry-content a.apply-now-button,
.single .entry-content a.wp-block-button__link,
.single .share-button,
.single .entry-content a.btn-primary,
.single .entry-content .apply-now-button,
.single .entry-content .wp-block-button__link,
.single .entry-content .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 14px 28px !important;
  font-family: var(--art-font-sans) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  /* Strong, bold typography */
  color: #ffffff !important;
  background: var(--art-primary) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all var(--art-transition) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
  text-transform: none !important;
  letter-spacing: 0;
  line-height: 1.5 !important;
  background-image: none !important;
  /* Block any link underline leakage */
}

/* Force pure-white for ALL nested inline marks/tags inside primary buttons */
.single .entry-content a.apply-now-button *,
.single .entry-content a.wp-block-button__link *,
.single .share-button *,
.single .entry-content a.btn-primary *,
.single .entry-content .apply-now-button *,
.single .entry-content .wp-block-button__link *,
.single .entry-content .btn-primary * {
  color: #ffffff !important;
  background-color: transparent !important;
  background: transparent !important;
  font-family: var(--art-font-sans) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Hover States */
.single .entry-content a.apply-now-button:hover,
.single .entry-content a.wp-block-button__link:hover,
.single .share-button:hover,
.single .entry-content a.btn-primary:hover,
.single .entry-content .apply-now-button:hover,
.single .entry-content .wp-block-button__link:hover,
.single .entry-content .btn-primary:hover {
  background: var(--art-primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
}

.single .entry-content a.apply-now-button:hover *,
.single .entry-content a.wp-block-button__link:hover *,
.single .share-button:hover *,
.single .entry-content a.btn-primary:hover *,
.single .entry-content .apply-now-button:hover *,
.single .entry-content .wp-block-button__link:hover *,
.single .entry-content .btn-primary:hover * {
  color: #ffffff !important;
}

/* Share Button */
.single .share-button-wrapper {
  text-align: center !important;
  padding: 40px 20px !important;
  background: var(--art-surface) !important;
  border-top: 1px solid var(--art-border);
}

.single .share-button {
  padding: 16px 36px !important;
  border-radius: 50px !important;
  font-size: 15px !important;
  letter-spacing: 0.3px;
}

/* ============================================================
   12. FAQ ACCORDION
   ============================================================ */
.faq-accordion {
  margin: 40px 0;
  border: 1px solid var(--art-border);
  border-radius: var(--art-radius-lg);
  overflow: hidden;
  box-shadow: var(--art-shadow-sm);
}

.faq-item {
  border-bottom: 1px solid var(--art-border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  background: var(--art-surface-elevated);
  border: none;
  cursor: pointer;
  font-family: var(--art-font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--art-heading);
  text-align: left;
  transition: background var(--art-transition);
}

.faq-question:hover {
  background: var(--art-surface);
}

.faq-question::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--art-primary);
  transition: transform var(--art-transition);
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-item.active .faq-question::after {
  content: '−';
  transform: rotate(180deg);
}

.faq-item.active .faq-question {
  background: var(--art-primary-light);
  color: var(--art-primary);
}

.faq-answer {
  display: none;
  padding: 0 24px 20px;
  font-family: var(--art-font-sans);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--art-text);
  animation: faqSlideDown 0.3s ease;
}

.faq-item.active .faq-answer {
  display: block;
}

@keyframes faqSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   13. CALLOUT & NOTE BOXES
   ============================================================ */
.callout-info,
.single .entry-content .wp-block-group.is-style-info,
.note-box {
  padding: 20px 24px;
  margin: 28px 0;
  background: var(--art-primary-light);
  border-left: 4px solid var(--art-primary);
  border-radius: 0 var(--art-radius-md) var(--art-radius-md) 0;
  font-family: var(--art-font-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--art-text);
}

.callout-success {
  background: var(--art-success-light);
  border-left-color: var(--art-success);
}

.callout-warning {
  background: var(--art-warning-light);
  border-left-color: var(--art-warning);
}

.callout-danger {
  background: var(--art-danger-light);
  border-left-color: var(--art-danger);
}

/* ============================================================
   14. CODE BLOCKS
   ============================================================ */
.single .entry-content code {
  font-family: var(--art-font-mono) !important;
  font-size: 0.9em !important;
  background: var(--art-surface) !important;
  color: var(--art-danger) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--art-border);
}

.single .code-container {
  margin: 28px 0 !important;
  background: #1e1e2e !important;
  border-radius: var(--art-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--art-shadow-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.single .code-block {
  background: #1e1e2e !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 20px !important;
  max-height: 500px !important;
}

.single .code-block pre {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.single .code-block pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #e2e8f0 !important;
  font-size: 14px !important;
}

/* ============================================================
   15. RELATED ARTICLES / FOOTER GRID
   ============================================================ */
.single .footer-articles {
  background: var(--art-surface) !important;
  border-top: 1px solid var(--art-border) !important;
  padding: 48px 20px !important;
}

.single .footer-articles h2 {
  font-family: var(--art-font-sans) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--art-heading) !important;
  text-align: center !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 32px !important;
  border-radius: 0 !important;
}

.single .article-card {
  background: var(--art-surface-elevated) !important;
  border: 1px solid var(--art-border) !important;
  border-radius: var(--art-radius-md) !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: all var(--art-transition) !important;
  box-shadow: var(--art-shadow-sm);
  display: flex;
  flex-direction: column;
}

.single .article-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--art-shadow-lg) !important;
  border-color: var(--art-primary) !important;
}

.single .article-card img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.single .article-card h5 {
  font-family: var(--art-font-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--art-heading) !important;
  margin: 0 !important;
  padding: 14px 16px 0 !important;
}

.single .article-card h5 a {
  color: var(--art-heading) !important;
  text-decoration: none !important;
  background-image: none !important;
}

.single .article-card h5 a:hover {
  color: var(--art-primary) !important;
}

.single .article-card p {
  font-family: var(--art-font-sans) !important;
  font-size: 13px !important;
  color: var(--art-text-light) !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  flex-grow: 1;
}

.single .article-card .read-more {
  display: inline-block !important;
  margin: 0 16px 16px !important;
  padding: 8px 18px !important;
  background: var(--art-primary) !important;
  color: #ffffff !important;
  font-family: var(--art-font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all var(--art-transition) !important;
  text-align: center;
  background-image: none !important;
}

.single .article-card .read-more:hover {
  background: var(--art-primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* ============================================================
   16. PRINT STYLES
   ============================================================ */
@media print {

  .reading-progress-bar,
  .wp-block-rank-math-toc-block,
  .toc-container,
  .ftc-premium-toc,
  .share-button-wrapper,
  .footer-articles,
  .ad-space,
  .icon-gallery {
    display: none !important;
  }

  .single .content-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
}