/* ==========================================================================
   IntelMedica Insight -- Design System v4.1

   Aesthetic:  Professional healthcare AI tech with neural network touches
   Palette:    Cyan hsl(190,80%,50%) + Blue hsl(210,70%,50%)
   Electric:   hsl(190,100%,55%) for hover sparks ONLY
   Dark Mode:  hsl(220,20%,8%) bg, hsl(220,18%,12%) cards
   Light Mode: hsl(210,20%,97%) bg, white cards
   Fonts:      Orbitron (titles), Inter (body), JetBrains Mono (code)
   Effects:    Electric charge hovers (200ms), glassmorphism, neural dots
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. CSS Custom Properties -- Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* ---- Brand Cyans (IntelMedica logo palette) ---- */
  --im-green-bright: hsl(190, 85%, 58%);
  --im-green-mid: hsl(190, 80%, 48%);
  --im-green-dark: hsl(200, 65%, 30%);
  --im-green-pcb: hsl(195, 60%, 38%);

  /* ---- Tech Blues ---- */
  --im-blue-bright: hsl(215, 75%, 60%);
  --im-blue-mid: hsl(220, 75%, 55%);
  --im-blue-dark: hsl(220, 65%, 38%);
  --im-blue-deep: hsl(225, 60%, 28%);

  /* ---- Accent (logo orange -- VERY SPARINGLY) ---- */
  --im-accent-warm: hsl(20, 100%, 60%);

  /* ---- Electric (hover sparks ONLY) ---- */
  --im-electric: hsl(190, 100%, 55%);

  /* ---- Neural overlay ---- */
  --im-neural: hsla(190, 80%, 48%, 0.12);

  /* ---- Gradients ---- */
  --im-gradient-subtle: linear-gradient(135deg, var(--im-green-dark), var(--im-blue-mid));
  --im-gradient-horizontal: linear-gradient(90deg, var(--im-green-pcb), var(--im-green-mid), var(--im-blue-mid), var(--im-blue-dark));
  --im-gradient-text: linear-gradient(90deg, var(--im-green-bright), var(--im-green-mid), var(--im-blue-mid), var(--im-blue-bright));
  --im-gradient-charge: linear-gradient(90deg, var(--im-green-pcb), var(--im-green-bright));

  /* ---- Light Mode (default) ---- */
  --im-bg: hsl(210, 20%, 97%);
  --im-bg-alt: hsl(210, 18%, 94%);
  --im-surface: hsl(0, 0%, 100%);
  --im-surface-hover: hsl(210, 15%, 97%);
  --im-text: hsl(220, 20%, 15%);
  --im-text-secondary: hsl(220, 12%, 40%);
  --im-text-muted: hsl(220, 8%, 55%);
  --im-border: hsl(220, 12%, 85%);
  --im-border-hover: hsl(220, 15%, 75%);
  --im-card-bg: hsl(0, 0%, 100%);
  --im-card-shadow: 0 1px 3px hsla(220, 20%, 15%, 0.06), 0 4px 12px hsla(220, 20%, 15%, 0.03);
  --im-card-shadow-hover: 0 8px 30px hsla(220, 20%, 15%, 0.08), 0 4px 16px hsla(220, 20%, 15%, 0.05);
  --im-header-bg: hsla(210, 20%, 97%, 0.92);
  --im-code-bg: hsl(220, 15%, 95%);
  --im-scrollbar-track: hsl(210, 15%, 93%);
  --im-scrollbar-thumb: hsl(220, 10%, 78%);
  --im-selection-bg: hsla(190, 80%, 48%, 0.18);
  --im-footer-text: hsl(220, 10%, 45%);

  /* ---- Glow (light mode: subtle) ---- */
  --im-glow: 0 0 12px hsla(190, 80%, 48%, 0.1), 0 0 24px hsla(220, 75%, 55%, 0.06);
  --im-glow-strong: 0 0 18px hsla(190, 80%, 48%, 0.2), 0 0 36px hsla(220, 75%, 55%, 0.12);
  --im-glow-electric: 0 0 6px hsla(190, 100%, 55%, 0.25), 0 0 16px hsla(190, 80%, 48%, 0.12);
  --im-glow-border: hsla(190, 65%, 42%, 0.4);

  /* ---- Transitions ---- */
  --im-transition-fast: 0.15s ease;
  --im-transition-base: 0.3s ease;
  --im-transition-slow: 0.5s ease;
  --im-transition-spring: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ---- Typography ---- */
  --im-font-title: 'Orbitron', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --im-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --im-font-code: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;

  /* ---- Category Colors (cyan/blue brand spectrum) ---- */
  --im-cat-ai-research: hsl(190, 80%, 48%);
  --im-cat-clinical-tools: hsl(210, 70%, 50%);
  --im-cat-engineering: hsl(225, 65%, 55%);
  --im-cat-industry-analysis: hsl(200, 60%, 38%);
  --im-cat-tutorials: hsl(20, 100%, 60%);
  --im-cat-healthcare-ai: hsl(185, 75%, 42%);
  --im-cat-ai-engineering: hsl(215, 65%, 55%);
  --im-cat-machine-learning: hsl(195, 75%, 48%);
  --im-cat-devops: hsl(220, 70%, 50%);
  --im-cat-healthcare-ux: hsl(180, 60%, 40%);
  --im-cat-product-engineering: hsl(230, 60%, 55%);
  --im-cat-autonomous-agents: hsl(190, 70%, 45%);
  --im-cat-voice-technology: hsl(205, 65%, 55%);
  --im-cat-prior-authorization: hsl(200, 55%, 32%);
  --im-cat-healthcare-infrastructure: hsl(225, 55%, 38%);
  --im-cat-infrastructure: hsl(225, 55%, 38%);

  /* ---- Brand Bar Aliases (consumed by PHP brand bar inline styles) ---- */
  --im-bg-primary: var(--im-bg);
  --im-bg-secondary: var(--im-surface);
  --im-text-primary: var(--im-text);
  --im-text-tertiary: var(--im-text-muted);
  --im-accent-primary: var(--im-green-mid);
  --im-border-subtle: var(--im-border);
  --im-border-default: var(--im-border-hover);
}


/* ---- Dark Mode ---- */
.dark,
[data-theme="dark"] {
  --im-bg: hsl(220, 20%, 8%);
  --im-bg-alt: hsl(220, 19%, 10%);
  --im-surface: hsl(220, 18%, 12%);
  --im-surface-hover: hsl(220, 17%, 16%);
  --im-text: hsl(0, 0%, 93%);
  --im-text-secondary: hsl(0, 0%, 70%);
  --im-text-muted: hsl(0, 0%, 50%);
  --im-border: hsl(220, 15%, 18%);
  --im-border-hover: hsl(220, 15%, 25%);
  --im-card-bg: hsl(220, 18%, 12%);
  --im-card-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.35), 0 4px 12px hsla(0, 0%, 0%, 0.2);
  --im-card-shadow-hover: 0 8px 30px hsla(0, 0%, 0%, 0.45), 0 4px 16px hsla(0, 0%, 0%, 0.3);
  --im-header-bg: hsla(220, 20%, 8%, 0.92);
  --im-code-bg: hsl(220, 20%, 10%);
  --im-scrollbar-track: hsl(220, 18%, 10%);
  --im-scrollbar-thumb: hsl(220, 15%, 22%);
  --im-selection-bg: hsla(190, 80%, 48%, 0.2);
  --im-footer-text: hsl(0, 0%, 50%);
  --im-glow: 0 0 15px hsla(190, 80%, 48%, 0.12), 0 0 30px hsla(220, 75%, 55%, 0.08);
  --im-glow-strong: 0 0 22px hsla(190, 80%, 48%, 0.25), 0 0 45px hsla(220, 75%, 55%, 0.15);
  --im-glow-electric: 0 0 8px hsla(190, 100%, 55%, 0.35), 0 0 20px hsla(190, 80%, 48%, 0.18);
}


/* --------------------------------------------------------------------------
   1. Dark Mode -- Blocksy Element Overrides
   -------------------------------------------------------------------------- */
.dark body,
[data-theme="dark"] body {
  background-color: var(--im-bg) !important;
  color: var(--im-text) !important;
}

.dark .site-main,
[data-theme="dark"] .site-main {
  color: var(--im-text) !important;
}

.dark #header,
[data-theme="dark"] #header {
  background-color: var(--im-header-bg) !important;
}

.dark .entry-card,
[data-theme="dark"] .entry-card {
  background-color: var(--im-card-bg) !important;
  border-color: var(--im-border) !important;
}

.dark .ct-container,
[data-theme="dark"] .ct-container {
  color: var(--im-text) !important;
}

.dark .entry-title a,
[data-theme="dark"] .entry-title a {
  color: var(--im-text) !important;
}

.dark .entry-excerpt,
.dark .entry-content,
[data-theme="dark"] .entry-excerpt,
[data-theme="dark"] .entry-content {
  color: var(--im-text-secondary) !important;
}

.dark footer,
.dark .ct-footer,
[data-theme="dark"] footer,
[data-theme="dark"] .ct-footer {
  background-color: var(--im-bg) !important;
  color: var(--im-footer-text) !important;
}

.dark .ct-footer a,
[data-theme="dark"] .ct-footer a {
  color: var(--im-text-secondary) !important;
}

.dark pre,
.dark .wp-block-code,
.dark code,
[data-theme="dark"] pre,
[data-theme="dark"] .wp-block-code,
[data-theme="dark"] code {
  background-color: var(--im-code-bg) !important;
}

.dark .entry-meta,
.dark .entry-meta a,
[data-theme="dark"] .entry-meta,
[data-theme="dark"] .entry-meta a {
  color: var(--im-text-muted) !important;
}

.dark .ct-sidebar,
[data-theme="dark"] .ct-sidebar {
  color: var(--im-text-secondary) !important;
}

.dark .ct-sidebar .ct-widget,
[data-theme="dark"] .ct-sidebar .ct-widget {
  background-color: var(--im-surface) !important;
  border-color: var(--im-border) !important;
}

.dark input,
.dark textarea,
.dark select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--im-surface) !important;
  color: var(--im-text) !important;
  border-color: var(--im-border) !important;
}

.dark .page-title,
.dark .archive-title,
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
[data-theme="dark"] .page-title,
[data-theme="dark"] .archive-title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
  color: var(--im-text) !important;
}

.dark blockquote,
.dark .wp-block-quote,
[data-theme="dark"] blockquote,
[data-theme="dark"] .wp-block-quote {
  background-color: var(--im-surface) !important;
  color: var(--im-text-secondary) !important;
}

.dark #ez-toc-container,
[data-theme="dark"] #ez-toc-container {
  background-color: var(--im-surface) !important;
  color: var(--im-text-secondary) !important;
  border-color: var(--im-border) !important;
}

.dark #ez-toc-container a,
[data-theme="dark"] #ez-toc-container a {
  color: var(--im-text-secondary) !important;
}

.dark .ct-breadcrumbs,
.dark .ct-breadcrumbs a,
[data-theme="dark"] .ct-breadcrumbs,
[data-theme="dark"] .ct-breadcrumbs a {
  color: var(--im-text-muted) !important;
}

.dark .ct-pagination a,
.dark .ct-pagination span,
[data-theme="dark"] .ct-pagination a,
[data-theme="dark"] .ct-pagination span {
  color: var(--im-text-secondary) !important;
  border-color: var(--im-border) !important;
}


/* --------------------------------------------------------------------------
   2. Global Typography -- Orbitron + Inter + JetBrains Mono
   -------------------------------------------------------------------------- */

/* Body */
body {
  font-family: var(--im-font-body) !important;
  background-color: var(--im-bg) !important;
  transition: background-color var(--im-transition-slow), color var(--im-transition-slow);
}

/* Site title -- Orbitron with green-blue gradient */
.site-title,
.site-title a,
header .site-branding .site-title a,
[data-id="logo"] .site-title a {
  font-family: var(--im-font-title) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: var(--im-gradient-text);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: im-gradient-shift 8s ease infinite;
}

/* Tagline */
.site-description,
header .site-branding .site-description {
  font-family: var(--im-font-body) !important;
  font-weight: 300 !important;
  color: var(--im-text-secondary) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 0.7em !important;
}

/* Headings -- Orbitron for h1-h3 */
h1, h2, h3,
.entry-title,
.page-title,
.archive-title,
.widget-title,
.ct-module-title {
  font-family: var(--im-font-title) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

/* Smaller headings -- Inter for readability */
h4, h5, h6 {
  font-family: var(--im-font-body) !important;
  font-weight: 600 !important;
}

/* Entry titles -- green glow on hover */
.entry-title a {
  transition: all var(--im-transition-base);
  text-decoration: none;
}

.entry-title a:hover {
  color: var(--im-green-bright) !important;
  text-shadow: 0 0 12px hsla(190, 85%, 58%, 0.25);
}

/* Code blocks -- JetBrains Mono */
pre,
code,
.wp-block-code,
.wp-block-preformatted,
.code-block-pro,
kbd,
samp {
  font-family: var(--im-font-code) !important;
}


/* --------------------------------------------------------------------------
   3. Keyframe Animations
   -------------------------------------------------------------------------- */

/* Gradient position shift */
@keyframes im-gradient-shift {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Electric charge flash -- brief 200ms bright flash that settles */
@keyframes im-electric-flash {
  0% {
    border-color: var(--im-border);
    box-shadow: var(--im-card-shadow);
  }
  20% {
    border-color: var(--im-green-bright);
    box-shadow: var(--im-glow-electric);
  }
  50% {
    border-color: var(--im-green-mid);
    box-shadow: var(--im-glow-strong);
  }
  100% {
    border-color: var(--im-green-pcb);
    box-shadow: var(--im-glow);
  }
}

/* Charge underline left-to-right */
@keyframes im-charge-left-to-right {
  0% { background-size: 0% 2px; filter: brightness(1); }
  10% { filter: brightness(1.3); }
  100% { background-size: 100% 2px; filter: brightness(1); }
}

/* Power-on flash for buttons */
@keyframes im-power-on {
  0% { filter: brightness(1); box-shadow: none; }
  15% { filter: brightness(1.4); box-shadow: 0 0 16px hsla(190, 100%, 55%, 0.3); }
  50% { filter: brightness(1.08); box-shadow: var(--im-glow-strong); }
  100% { filter: brightness(1); box-shadow: var(--im-glow); }
}

/* Electric spark */
@keyframes im-spark {
  0%, 100% { opacity: 0; transform: scale(0); }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 0.5; transform: scale(0.5); }
}

/* Glow pulse -- powered circuit node */
@keyframes im-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 5px hsla(190, 80%, 48%, 0.1), 0 0 10px hsla(210, 70%, 50%, 0.05);
  }
  50% {
    box-shadow: 0 0 10px hsla(190, 80%, 48%, 0.2), 0 0 20px hsla(210, 70%, 50%, 0.1);
  }
}

/* LED indicator pulse for nav */
@keyframes im-led-pulse {
  0%, 100% { text-shadow: 0 0 4px hsla(190, 85%, 58%, 0.3); }
  50% { text-shadow: 0 0 8px hsla(190, 85%, 58%, 0.5), 0 0 16px hsla(190, 85%, 58%, 0.2); }
}

/* Shimmer sweep */
@keyframes im-shimmer-sweep {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Image reveal */
@keyframes im-image-reveal {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

/* Skeleton loading */
@keyframes im-skeleton-pulse {
  0% { opacity: 0.6; }
  50% { opacity: 0.3; }
  100% { opacity: 0.6; }
}

/* Node glow for neural network dots */
@keyframes im-node-glow {
  0%, 100% { opacity: 0.3; box-shadow: 0 0 3px hsla(190, 85%, 58%, 0.2); }
  50% { opacity: 0.7; box-shadow: 0 0 6px hsla(190, 85%, 58%, 0.4); }
}

/* Circuit trace flow for progress bar */
@keyframes im-circuit-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Glassmorphism shimmer -- very subtle */
@keyframes im-glass-shimmer {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}


/* --------------------------------------------------------------------------
   4. Card Grid -- Equal Heights
   -------------------------------------------------------------------------- */

/* Force equal height cards in Blocksy grid */
.entries[data-layout],
.entries {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* Each card fills its grid cell */
.entries > article.entry-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Featured images: consistent 16:9 ratio */
.entry-card .ct-media-container {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.entry-card .ct-media-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Card content area grows to fill remaining space */
.entry-card .ct-card-content,
.entry-card .card-content,
.entry-card > div:last-child:not(.ct-media-container) {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Push meta to bottom of card */
.entry-card .entry-meta:last-child,
.entry-card .card-footer {
  margin-top: auto !important;
}

/* Entry excerpt fills available space */
.entry-card .entry-excerpt {
  flex: 1 !important;
}


/* --------------------------------------------------------------------------
   5. Article Card -- Electric Charge Hover + Glassmorphism
   -------------------------------------------------------------------------- */

.entry-card {
  position: relative;
  transition:
    transform var(--im-transition-spring),
    box-shadow var(--im-transition-base),
    border-color var(--im-transition-base);
  will-change: transform, box-shadow;
  border: 1px solid var(--im-border);
  border-radius: 12px;
  overflow: visible;
  background: var(--im-card-bg);
  box-shadow: var(--im-card-shadow);
}

/* Glassmorphism on dark mode cards */
.dark .entry-card,
[data-theme="dark"] .entry-card {
  background: hsla(220, 18%, 12%, 0.75) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Neural network node dots at corners -- visible on hover */
.entry-card::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--im-green-bright);
  top: -3px;
  left: -3px;
  opacity: 0;
  transition: opacity var(--im-transition-base);
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 4px var(--im-green-bright);
}

.entry-card::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--im-blue-mid);
  bottom: -3px;
  right: -3px;
  opacity: 0;
  transition: opacity var(--im-transition-base);
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 4px var(--im-blue-mid);
}

/* Card hover -- electric charge: brief flash then settle */
.entry-card:hover {
  transform: translateY(-4px);
  border-color: var(--im-green-mid);
  box-shadow: var(--im-card-shadow-hover), var(--im-glow);
  animation: im-electric-flash 0.5s ease forwards;
}

/* Show neural nodes on hover */
.entry-card:hover::before,
.entry-card:hover::after {
  opacity: 1;
  animation: im-node-glow 2s ease-in-out infinite;
}

/* Two more corner nodes via inner element */
.entry-card .ct-media-container::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--im-blue-bright);
  top: -3px;
  right: -3px;
  opacity: 0;
  transition: opacity var(--im-transition-base);
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 4px var(--im-blue-bright);
}

.entry-card .ct-media-container::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--im-green-mid);
  bottom: -3px;
  left: -3px;
  opacity: 0;
  transition: opacity var(--im-transition-base);
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 4px var(--im-green-mid);
}

.entry-card:hover .ct-media-container::before,
.entry-card:hover .ct-media-container::after {
  opacity: 1;
  animation: im-node-glow 2s ease-in-out infinite 0.3s;
}

/* Featured image zoom */
.entry-card .ct-media-container img {
  transition:
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter var(--im-transition-base);
  will-change: transform;
}

.entry-card:hover .ct-media-container img {
  transform: scale(1.04);
  filter: brightness(1.06);
}

/* Card title link -- green on hover */
.entry-card .entry-title a {
  transition: color var(--im-transition-fast), text-shadow var(--im-transition-fast);
  text-decoration: none;
}

.entry-card:hover .entry-title a {
  color: var(--im-green-bright) !important;
  text-shadow: 0 0 8px hsla(190, 85%, 58%, 0.15);
}

/* Card excerpt fade */
.entry-card .entry-excerpt {
  transition: opacity var(--im-transition-base);
}

.entry-card:hover .entry-excerpt {
  opacity: 0.9;
}


/* --------------------------------------------------------------------------
   6. Header -- Logo & Navigation
   -------------------------------------------------------------------------- */

#header {
  position: relative;
}

/* Green-blue circuit trace below header */
#header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--im-gradient-horizontal);
  background-size: 200% auto;
  animation: im-gradient-shift 8s ease infinite;
  opacity: 0.6;
}

/* v4: Logo is now inside .im-brand-bar (rendered by PHP).
   Brand bar logo styling is inline in the PHP template.
   Below are legacy fallback styles for .im-header-logo if
   the brand bar is not present. */
.im-header-logo {
  display: none; /* Hidden by default in v4; brand bar replaces it */
}


/* --------------------------------------------------------------------------
   7. Navigation -- Electric Charge Hovers
   -------------------------------------------------------------------------- */

[data-device="desktop"] .ct-menu-link {
  position: relative;
  text-decoration: none !important;
  padding: 8px 14px !important;
  transition: color var(--im-transition-fast), text-shadow var(--im-transition-fast);
  font-family: var(--im-font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* Animated underline -- charges left to right */
[data-device="desktop"] .ct-menu-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--im-gradient-charge);
  transition: width 0.3s ease;
  border-radius: 1px;
}

/* Hover -- green glow */
[data-device="desktop"] .ct-menu-link:hover {
  color: var(--im-green-bright) !important;
  text-shadow: 0 0 6px hsla(190, 85%, 58%, 0.3);
}

[data-device="desktop"] .ct-menu-link:hover::after,
[data-device="desktop"] .current-menu-item > .ct-menu-link::after,
[data-device="desktop"] .current-menu-item > .ct-sub-menu-parent > .ct-menu-link::after {
  width: 100%;
}

/* Active state -- subtle glow pulse */
[data-device="desktop"] .current-menu-item > .ct-menu-link,
[data-device="desktop"] .current-menu-item > .ct-sub-menu-parent > .ct-menu-link {
  color: var(--im-green-bright) !important;
  animation: im-led-pulse 3s ease-in-out infinite;
}

/* Circuit trace separators between menu items */
[data-device="desktop"] .ct-header-account-trigger,
[data-device="desktop"] .menu-item + .menu-item::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--im-border);
  vertical-align: middle;
  margin-right: 4px;
  opacity: 0.4;
}

/* Dropdown menus */
.menu-item .sub-menu {
  transition:
    opacity var(--im-transition-base),
    transform var(--im-transition-base),
    visibility var(--im-transition-base) !important;
  border: 1px solid var(--im-border) !important;
  background: var(--im-surface) !important;
  box-shadow: var(--im-card-shadow) !important;
}

.dark .menu-item .sub-menu,
[data-theme="dark"] .menu-item .sub-menu {
  background: var(--im-surface) !important;
  border-color: var(--im-border) !important;
}

.sub-menu .menu-item {
  transition: opacity var(--im-transition-fast), transform var(--im-transition-fast);
}

.sub-menu .menu-item a:hover {
  color: var(--im-green-bright) !important;
  background: var(--im-neural) !important;
}

/* Dark mode nav text */
.dark [data-device="desktop"] .ct-menu-link,
[data-theme="dark"] [data-device="desktop"] .ct-menu-link {
  color: var(--im-text-secondary) !important;
}

.dark [data-device="desktop"] .ct-menu-link:hover,
[data-theme="dark"] [data-device="desktop"] .ct-menu-link:hover {
  color: var(--im-green-bright) !important;
}


/* --------------------------------------------------------------------------
   8. Link Animations -- Green Charge Underline
   -------------------------------------------------------------------------- */

.entry-content a:not(.wp-block-button__link):not([class*="ez-toc"]):not([class*="ct-"]) {
  text-decoration: none;
  color: var(--im-green-pcb);
  background-image: var(--im-gradient-charge);
  background-size: 0% 2px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.4s ease, color var(--im-transition-fast), filter var(--im-transition-fast);
  padding-bottom: 1px;
}

.entry-content a:not(.wp-block-button__link):not([class*="ez-toc"]):not([class*="ct-"]):hover {
  background-size: 100% 2px;
  color: var(--im-green-bright) !important;
  filter: brightness(1.1);
}

.dark .entry-content a:not(.wp-block-button__link):not([class*="ez-toc"]):not([class*="ct-"]),
[data-theme="dark"] .entry-content a:not(.wp-block-button__link):not([class*="ez-toc"]):not([class*="ct-"]) {
  color: var(--im-green-bright);
}

/* Read More links */
.entry-card a[class*="read-more"],
.entry-card .entry-excerpt a:last-child,
a.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  transition: color var(--im-transition-fast), gap var(--im-transition-base);
  font-weight: 500;
  color: var(--im-green-pcb);
}

a.more-link::after {
  content: "\2192";
  display: inline-block;
  transition: transform var(--im-transition-base);
}

a.more-link:hover::after {
  transform: translateX(4px);
}

a.more-link:hover {
  color: var(--im-green-bright) !important;
  text-shadow: 0 0 6px hsla(190, 85%, 58%, 0.2);
}

/* Category/tag badges */
.entry-meta .meta-categories a,
.ct-term-highlight,
.tag-link,
.entry-tags a {
  transition:
    background-color var(--im-transition-fast),
    color var(--im-transition-fast),
    border-color var(--im-transition-fast),
    box-shadow var(--im-transition-fast);
}

.entry-meta .meta-categories a:hover {
  color: var(--im-green-bright) !important;
  text-shadow: 0 0 6px hsla(190, 85%, 58%, 0.2);
}


/* --------------------------------------------------------------------------
   9. Button Effects -- Power-On + Shimmer
   -------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.ct-button {
  position: relative;
  overflow: hidden;
  background: var(--im-gradient-subtle) !important;
  background-size: 200% auto !important;
  color: hsl(0, 0%, 98%) !important;
  border: 1px solid var(--im-green-pcb) !important;
  transition:
    background-position var(--im-transition-base),
    transform var(--im-transition-fast),
    box-shadow var(--im-transition-base),
    filter var(--im-transition-fast);
  will-change: transform;
  font-family: var(--im-font-body) !important;
  font-weight: 500 !important;
}

/* Shimmer sweep overlay */
.wp-element-button::before,
.wp-block-button__link::before,
button[type="submit"]::before,
input[type="submit"]::before,
.ct-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, hsla(190, 100%, 55%, 0.1), transparent);
  transition: none;
  pointer-events: none;
}

/* Hover -- power-on flash + glow */
.wp-element-button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.ct-button:hover {
  background-position: right center !important;
  transform: scale(1.02);
  border-color: var(--im-green-bright) !important;
  animation: im-power-on 0.5s ease forwards;
}

.wp-element-button:hover::before,
.wp-block-button__link:hover::before,
button[type="submit"]:hover::before,
input[type="submit"]:hover::before,
.ct-button:hover::before {
  animation: im-shimmer-sweep 0.6s ease forwards;
}

/* Active press */
.wp-element-button:active,
.wp-block-button__link:active,
button[type="submit"]:active,
input[type="submit"]:active,
.ct-button:active {
  transform: scale(0.98);
}


/* --------------------------------------------------------------------------
   10. Image Interactions
   -------------------------------------------------------------------------- */

.ct-featured-image img,
.single-post .ct-media-container img {
  transition:
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter var(--im-transition-base);
}

.ct-featured-image:hover img,
.single-post .ct-media-container:hover img {
  transform: scale(1.02);
  filter: brightness(1.04);
}

/* Avatar glow ring */
.ct-meta-element-author img,
.avatar {
  transition:
    box-shadow var(--im-transition-base),
    transform var(--im-transition-fast);
  border-radius: 50%;
}

.ct-meta-element-author:hover img,
a:hover .avatar {
  box-shadow: 0 0 0 2px var(--im-green-bright), 0 0 12px hsla(190, 85%, 58%, 0.3);
  transform: scale(1.05);
}

/* Lazy image reveal */
.entry-card .ct-media-container img[loading="lazy"],
.entry-content img[loading="lazy"] {
  animation: im-image-reveal 0.6s ease both;
}


/* --------------------------------------------------------------------------
   11. Scroll Animations (CSS base, JS activates via .im-visible)
   -------------------------------------------------------------------------- */

.im-animate {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.im-animate.im-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.im-animate[data-im-delay="1"] { transition-delay: 0.1s; }
.im-animate[data-im-delay="2"] { transition-delay: 0.2s; }
.im-animate[data-im-delay="3"] { transition-delay: 0.3s; }
.im-animate[data-im-delay="4"] { transition-delay: 0.4s; }
.im-animate[data-im-delay="5"] { transition-delay: 0.5s; }

.im-section-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.im-section-reveal.im-visible {
  opacity: 1;
  transform: translateY(0);
}


/* --------------------------------------------------------------------------
   12. Reading Progress Bar -- Green-to-Blue Gradient
   -------------------------------------------------------------------------- */

#im-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--im-gradient-horizontal);
  background-size: 200% auto;
  animation: im-circuit-flow 4s linear infinite;
  z-index: 99999;
  transition: width 0.1s linear;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}

/* Green glow trail at the leading edge */
#im-reading-progress::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 80px;
  height: 9px;
  background: radial-gradient(
    ellipse at right,
    hsla(190, 85%, 58%, 0.35) 0%,
    hsla(210, 70%, 50%, 0.2) 40%,
    transparent 80%
  );
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   13. Category Color Coding
   -------------------------------------------------------------------------- */

/* Category left-border on cards */
.entry-card.category-ai-research { border-left: 3px solid var(--im-cat-ai-research); }
.entry-card.category-clinical-tools { border-left: 3px solid var(--im-cat-clinical-tools); }
.entry-card.category-engineering { border-left: 3px solid var(--im-cat-engineering); }
.entry-card.category-industry-analysis { border-left: 3px solid var(--im-cat-industry-analysis); }
.entry-card.category-tutorials { border-left: 3px solid var(--im-cat-tutorials); }
.entry-card.category-healthcare-ai { border-left: 3px solid var(--im-cat-healthcare-ai); }
.entry-card.category-ai-engineering { border-left: 3px solid var(--im-cat-ai-engineering); }
.entry-card.category-machine-learning { border-left: 3px solid var(--im-cat-machine-learning); }
.entry-card.category-devops { border-left: 3px solid var(--im-cat-devops); }
.entry-card.category-healthcare-ux { border-left: 3px solid var(--im-cat-healthcare-ux); }
.entry-card.category-product-engineering { border-left: 3px solid var(--im-cat-product-engineering); }
.entry-card.category-autonomous-agents { border-left: 3px solid var(--im-cat-autonomous-agents); }
.entry-card.category-voice-technology { border-left: 3px solid var(--im-cat-voice-technology); }
.entry-card.category-prior-authorization { border-left: 3px solid var(--im-cat-prior-authorization); }
.entry-card.category-healthcare-infrastructure { border-left: 3px solid var(--im-cat-healthcare-infrastructure); }
.entry-card.category-infrastructure { border-left: 3px solid var(--im-cat-infrastructure); }

/* Category term badge colors (Blocksy term IDs) */
.ct-term-2 { color: var(--im-cat-ai-research) !important; }
.ct-term-3 { color: var(--im-cat-clinical-tools) !important; }
.ct-term-4 { color: var(--im-cat-engineering) !important; }
.ct-term-5 { color: var(--im-cat-industry-analysis) !important; }
.ct-term-6 { color: var(--im-cat-tutorials) !important; }
.ct-term-58 { color: var(--im-cat-prior-authorization) !important; }
.ct-term-59 { color: var(--im-cat-machine-learning) !important; }
.ct-term-60 { color: var(--im-cat-healthcare-infrastructure) !important; }
.ct-term-61 { color: var(--im-cat-voice-technology) !important; }
.ct-term-62 { color: var(--im-cat-ai-engineering) !important; }
.ct-term-63 { color: var(--im-cat-healthcare-ai) !important; }
.ct-term-64 { color: var(--im-cat-autonomous-agents) !important; }
.ct-term-65 { color: var(--im-cat-product-engineering) !important; }
.ct-term-66 { color: var(--im-cat-healthcare-ux) !important; }
.ct-term-67 { color: var(--im-cat-infrastructure) !important; }
.ct-term-68 { color: var(--im-cat-devops) !important; }


/* --------------------------------------------------------------------------
   14. Footer -- Circuit Pattern Background
   -------------------------------------------------------------------------- */

.ct-footer-socials .ct-social-box a {
  transition:
    transform var(--im-transition-base),
    color var(--im-transition-fast),
    filter var(--im-transition-fast);
}

.ct-footer-socials .ct-social-box a:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px hsla(190, 85%, 58%, 0.4));
}

.ct-footer-socials .ct-social-box a:hover .ct-icon-container svg {
  fill: var(--im-green-bright);
}

/* Footer -- subtle circuit pattern */
.ct-footer {
  position: relative;
}

.ct-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 49px, var(--im-green-pcb) 49px, var(--im-green-pcb) 50px),
    repeating-linear-gradient(90deg, transparent, transparent 49px, var(--im-green-pcb) 49px, var(--im-green-pcb) 50px);
  pointer-events: none;
}

.dark .ct-footer::before,
[data-theme="dark"] .ct-footer::before {
  opacity: 0.04;
}

/* Footer copyright -- gradient text */
.ct-footer-copyright {
  background: linear-gradient(90deg, var(--im-green-dark), var(--im-green-bright), var(--im-blue-mid), var(--im-blue-bright), var(--im-green-dark));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: im-circuit-flow 10s linear infinite;
}


/* --------------------------------------------------------------------------
   15. Code Blocks -- Terminal Style with JetBrains Mono
   -------------------------------------------------------------------------- */

pre,
.wp-block-code,
.wp-block-preformatted,
figure.wp-block-code,
.code-block-pro {
  position: relative;
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--im-green-bright), var(--im-blue-mid)) 1;
  transition: border-color var(--im-transition-base), box-shadow var(--im-transition-base);
  background-color: var(--im-code-bg) !important;
  font-family: var(--im-font-code) !important;
}

pre:hover,
.wp-block-code:hover,
figure.wp-block-code:hover,
.code-block-pro:hover {
  box-shadow: var(--im-glow);
}

/* Dark mode code -- green-on-dark terminal feel */
.dark pre code,
.dark .wp-block-code code,
[data-theme="dark"] pre code,
[data-theme="dark"] .wp-block-code code {
  color: var(--im-green-bright) !important;
}

pre button,
.wp-block-code button,
.code-block-pro button,
.cbp-btn {
  transition:
    background var(--im-transition-fast),
    box-shadow var(--im-transition-fast),
    transform var(--im-transition-fast);
}

pre button:hover,
.wp-block-code button:hover,
.code-block-pro button:hover,
.cbp-btn:hover {
  box-shadow: 0 0 10px hsla(190, 85%, 58%, 0.3);
  transform: scale(1.05);
}

/* Inline code */
.entry-content code:not(pre code) {
  transition: background-color var(--im-transition-fast), color var(--im-transition-fast);
  border-radius: 4px;
  font-family: var(--im-font-code) !important;
}

.entry-content code:not(pre code):hover {
  background-color: hsla(190, 80%, 48%, 0.1);
  color: var(--im-green-bright);
}


/* --------------------------------------------------------------------------
   16. Header Search
   -------------------------------------------------------------------------- */

.ct-header-search:hover {
  filter: drop-shadow(0 0 6px hsla(190, 85%, 58%, 0.3));
  transition: filter var(--im-transition-fast);
}


/* --------------------------------------------------------------------------
   17. Scrollbar -- Green/Blue Tech
   -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--im-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--im-scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--im-gradient-subtle);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--im-scrollbar-thumb) var(--im-scrollbar-track);
}


/* --------------------------------------------------------------------------
   18. Table of Contents -- Circuit Accent
   -------------------------------------------------------------------------- */

#ez-toc-container {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--im-green-bright), var(--im-blue-mid)) 1;
  transition: box-shadow var(--im-transition-base);
}

#ez-toc-container:hover {
  box-shadow: var(--im-glow);
}

#ez-toc-container a {
  transition: color var(--im-transition-fast), padding-left var(--im-transition-fast);
}

#ez-toc-container a:hover {
  color: var(--im-green-bright) !important;
  padding-left: 4px;
}


/* --------------------------------------------------------------------------
   19. Selection Color
   -------------------------------------------------------------------------- */

::selection {
  background: var(--im-selection-bg);
  color: inherit;
}

::-moz-selection {
  background: var(--im-selection-bg);
  color: inherit;
}


/* --------------------------------------------------------------------------
   20. Blockquote -- Green Gradient Border
   -------------------------------------------------------------------------- */

blockquote,
.wp-block-quote {
  border-left: 4px solid transparent !important;
  border-image: linear-gradient(180deg, var(--im-green-bright), var(--im-blue-mid)) 1 !important;
  position: relative;
  transition: box-shadow var(--im-transition-base);
}

blockquote:hover,
.wp-block-quote:hover {
  box-shadow: -4px 0 16px hsla(190, 85%, 58%, 0.1);
}


/* --------------------------------------------------------------------------
   21. Focus Styles (Accessibility)
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--im-green-bright);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px hsla(190, 85%, 58%, 0.15);
}


/* --------------------------------------------------------------------------
   22. Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .im-animate {
    opacity: 1 !important;
    transform: none !important;
  }

  .entry-card:hover {
    transform: none;
  }

  .entry-card .ct-media-container img {
    transition: none;
  }

  .ct-footer-copyright {
    animation: none;
    background: none;
    -webkit-text-fill-color: inherit;
  }

  #im-reading-progress {
    transition: none;
    animation: none;
  }

  #im-reading-progress::after {
    display: none;
  }

  .site-title a,
  .entry-title a:hover {
    animation: none;
  }

  .entry-card::before,
  .entry-card::after,
  .entry-card .ct-media-container::before,
  .entry-card .ct-media-container::after {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   23. Mobile Optimizations
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
  .entry-card:hover {
    transform: none;
    box-shadow: var(--im-card-shadow);
    animation: none;
  }

  .entry-card::before,
  .entry-card::after,
  .entry-card .ct-media-container::before,
  .entry-card .ct-media-container::after {
    display: none;
  }

  .entry-card:hover .ct-media-container img {
    transform: none;
    filter: none;
  }

  .ct-footer-socials .ct-social-box a:hover {
    transform: none;
  }

  [data-device="desktop"] .ct-menu-link::after {
    display: none;
  }

  .entry-content a:not(.wp-block-button__link):not([class*="ez-toc"]):not([class*="ct-"]) {
    background-image: none;
    text-decoration: underline;
    text-decoration-color: var(--im-green-pcb);
    text-underline-offset: 2px;
  }

  /* Disable glassmorphism on mobile for performance */
  .dark .entry-card,
  [data-theme="dark"] .entry-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--im-card-bg) !important;
  }
}

@media (max-width: 767px) {
  /* Single column on mobile */
  .entries[data-layout],
  .entries {
    grid-template-columns: 1fr !important;
  }

  #im-reading-progress {
    height: 2px;
  }

  #im-reading-progress::after {
    width: 50px;
    height: 5px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .entries[data-layout],
  .entries {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* --------------------------------------------------------------------------
   24. Pagination -- Green Accent
   -------------------------------------------------------------------------- */

.ct-pagination a,
.wp-block-query-pagination a,
nav.navigation a {
  transition:
    background-color var(--im-transition-fast),
    color var(--im-transition-fast),
    border-color var(--im-transition-fast),
    transform var(--im-transition-fast);
}

.ct-pagination a:hover,
.wp-block-query-pagination a:hover,
nav.navigation a:hover {
  border-color: var(--im-green-bright) !important;
  color: var(--im-green-bright) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 8px hsla(190, 85%, 58%, 0.15);
}


/* --------------------------------------------------------------------------
   25. Hero / Section Dividers
   -------------------------------------------------------------------------- */

.hero-section {
  position: relative;
}

.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 2px;
  background: var(--im-gradient-horizontal);
  border-radius: 1px;
}


/* --------------------------------------------------------------------------
   26. Entry Meta -- Green Highlights
   -------------------------------------------------------------------------- */

.entry-meta a {
  transition: color var(--im-transition-fast);
}

.entry-meta a:hover {
  color: var(--im-green-bright) !important;
}

.meta-date time {
  transition: color var(--im-transition-fast);
}

.entry-card:hover .meta-date time {
  color: var(--im-blue-mid);
}


/* --------------------------------------------------------------------------
   27. Skeleton Loading
   -------------------------------------------------------------------------- */

.ct-media-container:empty,
.ct-media-container img[src=""] {
  background: linear-gradient(90deg, var(--im-surface), var(--im-surface-hover), var(--im-surface));
  background-size: 200% 100%;
  animation: im-skeleton-pulse 2s ease-in-out infinite;
}


/* --------------------------------------------------------------------------
   28. Mouse-Tracking Card Glow (pairs with JS)
   -------------------------------------------------------------------------- */

.entry-card {
  --mouse-x: 50%;
  --mouse-y: 50%;
}

@media (hover: hover) and (pointer: fine) {
  .entry-card .im-card-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      350px circle at var(--mouse-x) var(--mouse-y),
      hsla(190, 80%, 48%, 0.05) 0%,
      hsla(210, 70%, 50%, 0.03) 30%,
      transparent 60%
    );
    opacity: 0;
    transition: opacity var(--im-transition-base);
    pointer-events: none;
    z-index: 0;
  }

  .entry-card:hover .im-card-glow {
    opacity: 1;
  }

  .entry-card > *:not(.im-card-glow) {
    position: relative;
    z-index: 1;
  }
}


/* --------------------------------------------------------------------------
   29. Dark/Light Mode Toggle Button
   Note: Primary toggle styling is inline in the PHP brand bar.
         These rules provide fallback and dark-mode icon switching.
   -------------------------------------------------------------------------- */

/* Show sun in dark mode, moon in light mode */
.im-icon-sun {
  display: none;
}

.im-icon-moon {
  display: block;
}

.dark .im-icon-sun,
[data-theme="dark"] .im-icon-sun {
  display: block;
}

.dark .im-icon-moon,
[data-theme="dark"] .im-icon-moon {
  display: none;
}


/* --------------------------------------------------------------------------
   30. Neural Network Connecting Lines Between Cards
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (hover: hover) {
  .entries {
    position: relative;
  }

  /* Vertical traces between rows -- faint circuit lines */
  .entries::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 20px,
      hsla(190, 80%, 48%, 0.05) 20px,
      hsla(190, 80%, 48%, 0.05) 22px
    );
    pointer-events: none;
    z-index: 0;
  }
}