/* ============================================
   EDITORIAL READING EXPERIENCE
   Pacific Northwest Magazine Style
   Bold, Beautiful, Memorable
   Static file - bypasses Tailwind processing
   ============================================ */

/* Override ALL prose tables with premium magazine styling */
article .prose table,
section .prose table,
.prose-lg table,
div[class*="prose"] table {
  width: 100% !important;
  margin: 2.5rem 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 3px solid #0891b2 !important;
  box-shadow:
    0 0 0 1px rgba(8, 145, 178, 0.1),
    0 12px 40px -12px rgba(8, 145, 178, 0.25),
    0 8px 20px -8px rgba(0, 0, 0, 0.1) !important;
  font-size: 0.95rem !important;
  background: white !important;
}

.dark article .prose table,
.dark section .prose table,
.dark .prose-lg table,
.dark div[class*="prose"] table {
  border-color: #0d9488 !important;
  background: #1f1f23 !important;
  box-shadow:
    0 0 0 1px rgba(13, 148, 136, 0.2),
    0 12px 40px -12px rgba(13, 148, 136, 0.3),
    0 8px 20px -8px rgba(0, 0, 0, 0.4) !important;
}

/* Table header - bold gradient */
article .prose thead,
section .prose thead,
.prose-lg thead,
div[class*="prose"] thead {
  background: linear-gradient(135deg, #0891b2 0%, #0d9488 50%, #059669 100%) !important;
}

article .prose th,
section .prose th,
.prose-lg th,
div[class*="prose"] th {
  padding: 1rem 1.25rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  color: white !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: none !important;
  background: transparent !important;
}

article .prose th:not(:last-child),
section .prose th:not(:last-child),
.prose-lg th:not(:last-child),
div[class*="prose"] th:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Table body cells */
article .prose td,
section .prose td,
.prose-lg td,
div[class*="prose"] td {
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid #e4e4e7 !important;
  border-right: 1px solid #e4e4e7 !important;
  color: #3f3f46 !important;
  line-height: 1.6 !important;
}

.dark article .prose td,
.dark section .prose td,
.dark .prose-lg td,
.dark div[class*="prose"] td {
  border-color: #3f3f46 !important;
  color: #d4d4d8 !important;
}

article .prose td:last-child,
section .prose td:last-child,
.prose-lg td:last-child,
div[class*="prose"] td:last-child {
  border-right: none !important;
}

/* Zebra striping */
article .prose tbody tr:nth-child(even),
section .prose tbody tr:nth-child(even),
.prose-lg tbody tr:nth-child(even),
div[class*="prose"] tbody tr:nth-child(even) {
  background: #f8fafc !important;
}

.dark article .prose tbody tr:nth-child(even),
.dark section .prose tbody tr:nth-child(even),
.dark .prose-lg tbody tr:nth-child(even),
.dark div[class*="prose"] tbody tr:nth-child(even) {
  background: #27272a !important;
}

/* Hover effect */
article .prose tbody tr:hover,
section .prose tbody tr:hover,
.prose-lg tbody tr:hover,
div[class*="prose"] tbody tr:hover {
  background: rgba(8, 145, 178, 0.05) !important;
}

.dark article .prose tbody tr:hover,
.dark section .prose tbody tr:hover,
.dark .prose-lg tbody tr:hover,
.dark div[class*="prose"] tbody tr:hover {
  background: rgba(13, 148, 136, 0.1) !important;
}

/* First column emphasis */
article .prose td:first-child,
section .prose td:first-child,
.prose-lg td:first-child,
div[class*="prose"] td:first-child {
  font-weight: 600 !important;
  color: #18181b !important;
}

.dark article .prose td:first-child,
.dark section .prose td:first-child,
.dark .prose-lg td:first-child,
.dark div[class*="prose"] td:first-child {
  color: #fafafa !important;
}

/* ============================================
   BULLET LISTS - Bold, Visible Bullets
   ============================================ */

article .prose ul,
section .prose ul,
.prose-lg ul,
div[class*="prose"] ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 2rem 0 !important;
}

article .prose ul li,
section .prose ul li,
.prose-lg ul li,
div[class*="prose"] ul li {
  position: relative !important;
  padding-left: 2rem !important;
  margin-bottom: 1rem !important;
  line-height: 1.8 !important;
  color: #3f3f46 !important;
}

.dark article .prose ul li,
.dark section .prose ul li,
.dark .prose-lg ul li,
.dark div[class*="prose"] ul li {
  color: #d4d4d8 !important;
}

article .prose ul li::before,
section .prose ul li::before,
.prose-lg ul li::before,
div[class*="prose"] ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.5em !important;
  width: 12px !important;
  height: 12px !important;
  background: linear-gradient(135deg, #0891b2, #059669) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(8, 145, 178, 0.4) !important;
}

/* Nested lists - smaller bullets */
article .prose ul ul li::before,
section .prose ul ul li::before,
.prose-lg ul ul li::before,
div[class*="prose"] ul ul li::before {
  width: 8px !important;
  height: 8px !important;
  background: #0891b2 !important;
  box-shadow: none !important;
}

/* ============================================
   NUMBERED LISTS - Prominent Numbers
   ============================================ */

article .prose ol,
section .prose ol,
.prose-lg ol,
div[class*="prose"] ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 2rem 0 !important;
  counter-reset: editorial-counter !important;
}

article .prose ol li,
section .prose ol li,
.prose-lg ol li,
div[class*="prose"] ol li {
  position: relative !important;
  padding-left: 3.5rem !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.8 !important;
  counter-increment: editorial-counter !important;
  color: #3f3f46 !important;
}

.dark article .prose ol li,
.dark section .prose ol li,
.dark .prose-lg ol li,
.dark div[class*="prose"] ol li {
  color: #d4d4d8 !important;
}

article .prose ol li::before,
section .prose ol li::before,
.prose-lg ol li::before,
div[class*="prose"] ol li::before {
  content: counter(editorial-counter) !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  background: linear-gradient(135deg, #0891b2, #059669) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 8px rgba(8, 145, 178, 0.35) !important;
}

/* ============================================
   BLOCKQUOTES - Editorial Pull Quotes
   ============================================ */

article .prose blockquote,
section .prose blockquote,
.prose-lg blockquote,
div[class*="prose"] blockquote {
  position: relative !important;
  margin: 3rem 0 !important;
  padding: 2rem 2.5rem 2rem 3rem !important;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.05), rgba(5, 150, 105, 0.05)) !important;
  border-left: 5px solid !important;
  border-image: linear-gradient(180deg, #0891b2, #059669) 1 !important;
  border-radius: 0 16px 16px 0 !important;
  font-size: 1.15rem !important;
  font-style: italic !important;
  color: #27272a !important;
}

.dark article .prose blockquote,
.dark section .prose blockquote,
.dark .prose-lg blockquote,
.dark div[class*="prose"] blockquote {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.1), rgba(5, 150, 105, 0.1)) !important;
  color: #e4e4e7 !important;
}

article .prose blockquote::before,
section .prose blockquote::before,
.prose-lg blockquote::before,
div[class*="prose"] blockquote::before {
  content: '"' !important;
  position: absolute !important;
  top: -0.5rem !important;
  left: 1rem !important;
  font-size: 4rem !important;
  font-family: Georgia, serif !important;
  color: #0891b2 !important;
  opacity: 0.3 !important;
  line-height: 1 !important;
}

/* ============================================
   HEADINGS - Editorial Style
   ============================================ */

article .prose h2,
section .prose h2,
.prose-lg h2,
div[class*="prose"] h2 {
  margin-top: 3rem !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #18181b !important;
  border-bottom: 3px solid transparent !important;
  background: linear-gradient(90deg, #0891b2 0%, #059669 100%) !important;
  background-clip: padding-box !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  position: relative !important;
}

article .prose h2::after,
section .prose h2::after,
.prose-lg h2::after,
div[class*="prose"] h2::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 60px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #0891b2, #059669) !important;
  border-radius: 2px !important;
}

.dark article .prose h2,
.dark section .prose h2,
.dark .prose-lg h2,
.dark div[class*="prose"] h2 {
  color: #fafafa !important;
}

article .prose h3,
section .prose h3,
.prose-lg h3,
div[class*="prose"] h3 {
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #27272a !important;
}

.dark article .prose h3,
.dark section .prose h3,
.dark .prose-lg h3,
.dark div[class*="prose"] h3 {
  color: #e4e4e7 !important;
}

/* ============================================
   HORIZONTAL RULES - Elegant Dividers
   ============================================ */

article .prose hr,
section .prose hr,
.prose-lg hr,
div[class*="prose"] hr {
  margin: 4rem 0 !important;
  border: none !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent 0%, #0891b2 20%, #059669 50%, #0891b2 80%, transparent 100%) !important;
  border-radius: 2px !important;
}

/* ============================================
   STRONG/EMPHASIS - Refined Typography
   ============================================ */

article .prose strong,
section .prose strong,
.prose-lg strong,
div[class*="prose"] strong {
  font-weight: 700 !important;
  color: #18181b !important;
}

.dark article .prose strong,
.dark section .prose strong,
.dark .prose-lg strong,
.dark div[class*="prose"] strong {
  color: #fafafa !important;
}

article .prose em,
section .prose em,
.prose-lg em,
div[class*="prose"] em {
  font-style: italic !important;
  color: #0e7490 !important;
}

.dark article .prose em,
.dark section .prose em,
.dark .prose-lg em,
.dark div[class*="prose"] em {
  color: #67e8f9 !important;
}

/* ============================================
   ELASTIC & BOUNCY ANIMATIONS
   Spring physics for delightful interactions
   ============================================ */

/* Spring Timing Functions */
:root {
  /* Gentle spring - slight overshoot */
  --spring-gentle: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Medium spring - noticeable bounce */
  --spring-medium: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Snappy spring - quick with snap-back */
  --spring-snappy: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Elastic - multiple oscillations */
  --spring-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

  /* Soft landing - gentle deceleration */
  --spring-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   LINK HOVER EFFECTS - Elastic underline
   ============================================ */

/* Prose links get elastic underline animation */
article .prose a,
section .prose a,
.prose-lg a,
div[class*="prose"] a {
  position: relative !important;
  text-decoration: none !important;
  transition: color 0.3s var(--spring-gentle) !important;
}

article .prose a::after,
section .prose a::after,
.prose-lg a::after,
div[class*="prose"] a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #0891b2, #059669) !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.4s var(--spring-elastic) !important;
}

article .prose a:hover::after,
section .prose a:hover::after,
.prose-lg a:hover::after,
div[class*="prose"] a:hover::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

/* ============================================
   BUTTON BOUNCE EFFECTS
   ============================================ */

/* All buttons get spring hover */
button,
[role="button"],
a[class*="btn"],
a[class*="button"],
.btn,
.button {
  transition:
    transform 0.3s var(--spring-medium),
    box-shadow 0.3s var(--spring-gentle),
    background-color 0.2s ease !important;
}

button:hover,
[role="button"]:hover,
a[class*="btn"]:hover,
a[class*="button"]:hover,
.btn:hover,
.button:hover {
  transform: translateY(-2px) scale(1.02) !important;
}

button:active,
[role="button"]:active,
a[class*="btn"]:active,
a[class*="button"]:active,
.btn:active,
.button:active {
  transform: translateY(1px) scale(0.98) !important;
  transition-duration: 0.1s !important;
}

/* ============================================
   CARD HOVER EFFECTS - Enhanced bouncy
   ============================================ */

/* Cards get lift + subtle rotation */
article[data-resource-card],
[class*="card"],
.card {
  transition:
    transform 0.4s var(--spring-medium),
    box-shadow 0.4s var(--spring-gentle) !important;
}

article[data-resource-card]:hover,
[class*="card"]:hover,
.card:hover {
  transform: translateY(-8px) rotate(0.5deg) !important;
  box-shadow:
    0 20px 40px -15px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(8, 145, 178, 0.1) !important;
}

.dark article[data-resource-card]:hover,
.dark [class*="card"]:hover,
.dark .card:hover {
  box-shadow:
    0 20px 40px -15px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(13, 148, 136, 0.2) !important;
}

/* ============================================
   NAVIGATION LINK BOUNCES
   ============================================ */

nav a,
header a,
footer a {
  transition:
    color 0.2s ease,
    transform 0.3s var(--spring-snappy) !important;
  display: inline-block !important;
}

nav a:hover,
header a:hover {
  transform: translateY(-1px) !important;
}

footer a:hover {
  transform: translateX(3px) !important;
}

/* ============================================
   ICON BOUNCE ON HOVER
   ============================================ */

svg,
[class*="icon"],
.icon {
  transition: transform 0.3s var(--spring-elastic) !important;
}

a:hover svg,
button:hover svg,
a:hover [class*="icon"],
button:hover [class*="icon"] {
  transform: scale(1.15) rotate(5deg) !important;
}

/* ============================================
   BADGE/TAG PILL ANIMATIONS
   ============================================ */

[class*="badge"],
[class*="tag"],
[class*="pill"],
span[class*="rounded-full"] {
  transition:
    transform 0.25s var(--spring-snappy),
    background-color 0.2s ease,
    box-shadow 0.25s ease !important;
}

[class*="badge"]:hover,
[class*="tag"]:hover,
[class*="pill"]:hover {
  transform: scale(1.08) !important;
}

/* ============================================
   TABLE ROW HOVER - Subtle bounce
   ============================================ */

article .prose tbody tr,
section .prose tbody tr,
.prose-lg tbody tr,
div[class*="prose"] tbody tr {
  transition:
    background-color 0.2s ease,
    transform 0.3s var(--spring-gentle) !important;
}

article .prose tbody tr:hover,
section .prose tbody tr:hover,
.prose-lg tbody tr:hover,
div[class*="prose"] tbody tr:hover {
  transform: scale(1.005) !important;
}

/* ============================================
   LIST ITEM STAGGER ANIMATION
   ============================================ */

article .prose li,
section .prose li,
.prose-lg li,
div[class*="prose"] li {
  transition:
    transform 0.3s var(--spring-medium),
    opacity 0.3s ease !important;
}

article .prose li:hover,
section .prose li:hover,
.prose-lg li:hover,
div[class*="prose"] li:hover {
  transform: translateX(4px) !important;
}

/* Bullet/number bounce on list hover */
article .prose li:hover::before,
section .prose li:hover::before,
.prose-lg li:hover::before,
div[class*="prose"] li:hover::before {
  transform: scale(1.2) !important;
  transition: transform 0.3s var(--spring-elastic) !important;
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS
   Uses Intersection Observer classes
   ============================================ */

/* Fade up with bounce */
.animate-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.8s var(--spring-medium) !important;
}

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

/* Scale in with bounce */
.animate-scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.5s ease,
    transform 0.6s var(--spring-elastic) !important;
}

.animate-scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Slide in from left with spring */
.animate-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.5s ease,
    transform 0.7s var(--spring-medium) !important;
}

.animate-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide in from right with spring */
.animate-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.5s ease,
    transform 0.7s var(--spring-medium) !important;
}

.animate-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================
   STAGGER DELAY UTILITIES
   For sequential element animations
   ============================================ */

.stagger-1 { transition-delay: 0.05s !important; }
.stagger-2 { transition-delay: 0.1s !important; }
.stagger-3 { transition-delay: 0.15s !important; }
.stagger-4 { transition-delay: 0.2s !important; }
.stagger-5 { transition-delay: 0.25s !important; }
.stagger-6 { transition-delay: 0.3s !important; }
.stagger-7 { transition-delay: 0.35s !important; }
.stagger-8 { transition-delay: 0.4s !important; }

/* ============================================
   MICRO-INTERACTIONS - Jelly & Wiggle
   ============================================ */

/* Jelly effect on click */
@keyframes jelly-click {
  0% { transform: scale(1); }
  25% { transform: scale(0.95, 1.05); }
  50% { transform: scale(1.05, 0.95); }
  75% { transform: scale(0.98, 1.02); }
  100% { transform: scale(1); }
}

.jelly-click:active {
  animation: jelly-click 0.5s ease !important;
}

/* Wiggle on attention */
@keyframes wiggle-attention {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-3deg); }
  40% { transform: rotate(3deg); }
  60% { transform: rotate(-2deg); }
  80% { transform: rotate(2deg); }
}

.wiggle:hover {
  animation: wiggle-attention 0.6s ease-in-out !important;
}

/* Pulse glow effect */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(8, 145, 178, 0.2);
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite !important;
}

/* ============================================
   FOCUS STATES - Accessible spring effects
   ============================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #0891b2 !important;
  outline-offset: 3px !important;
  transition: outline-offset 0.2s var(--spring-snappy) !important;
}

a:focus-visible:not(:active),
button:focus-visible:not(:active) {
  transform: scale(1.02) !important;
}

/* ============================================
   REDUCED MOTION - Respect user preferences
   ============================================ */

@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;
  }

  .animate-fade-up,
  .animate-scale-in,
  .animate-slide-left,
  .animate-slide-right {
    opacity: 1 !important;
    transform: none !important;
  }
}