/* Custom styling overrides for a distinct visual identity */
/* Clean, minimal white design with slate blue accent */

/* ============================================
   ACCENT COLOR: Slate Blue theme
   ============================================ */
/* Teal color overrides - consolidated selectors */
.text-teal-700,
.text-teal-600,
.text-teal-500 {
  color: #475569 !important;
}

.dark\:text-teal-400 {
  color: #94a3b8 !important;
}

.bg-teal-700,
.bg-teal-600,
.bg-teal-500 {
  background-color: #475569 !important;
}

.dark\:bg-teal-400 {
  background-color: #94a3b8 !important;
}

.ring-teal-700,
.ring-teal-600,
.ring-teal-500 {
  --tw-ring-color: #475569 !important;
}

.dark\:ring-teal-400 {
  --tw-ring-color: #94a3b8 !important;
}

.hover\:text-teal-700:hover,
.hover\:text-teal-600:hover,
.hover\:text-teal-500:hover {
  color: #1e293b !important;
}

.dark\:hover\:text-teal-400:hover {
  color: #cbd5e1 !important;
}

.hover\:bg-teal-700:hover,
.hover\:bg-teal-600:hover,
.hover\:bg-teal-500:hover {
  background-color: #334155 !important;
}

.dark\:hover\:bg-teal-400:hover {
  background-color: #cbd5e1 !important;
}

.from-teal-700\/0,
.to-teal-700\/0 {
  --tw-gradient-from: transparent;
  --tw-gradient-to: transparent;
}

.via-teal-700\/40,
.dark\:via-teal-400\/40 {
  --tw-gradient-stops: transparent, rgba(71, 85, 105, 0.4), transparent;
}

/* Gradient underline for active nav */
.bg-linear-to-r {
  background: linear-gradient(to right, transparent, rgba(71, 85, 105, 0.5), transparent) !important;
}

/* ============================================
   BACKGROUND: Clean White
   ============================================ */
html.light body {
  background: #ffffff !important;
}

html.dark body {
  background: #0f172a !important;
}

/* Main content background - solid white */
html.light .bg-white {
  background: #ffffff !important;
}

html.dark .dark\:bg-zinc-900 {
  background: #0f172a !important;
}

/* Background strip - make white */
.bg-zinc-50 {
  background: #ffffff !important;
}

/* Body background - pure white */
body.bg-zinc-50,
body.bg-white {
  background: #ffffff !important;
}

html.dark .dark\:bg-black {
  background: #0f172a !important;
}

/* Remove side background - clean white boxed layout */
body > div.relative {
  background: transparent !important;
}

/* ============================================
   CARDS & SHADOWS - Softer, more subtle
   ============================================ */
.shadow-lg {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.shadow-md {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Ring styling - subtle gray */
.ring-1 {
  --tw-ring-color: rgba(0, 0, 0, 0.05) !important;
}

html.dark .dark\:ring-white\/10 {
  --tw-ring-color: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   ROUNDED CORNERS - Sharper, more modern
   ============================================ */
.rounded-full {
  border-radius: 9999px;
}

.rounded-2xl {
  border-radius: 0.75rem !important;
}

.rounded-xl {
  border-radius: 0.5rem !important;
}

.sm\:rounded-2xl {
  border-radius: 0.75rem !important;
}

/* ============================================
   NAVIGATION & HEADER - Simplified
   ============================================ */
nav ul {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html.dark nav ul {
  background: transparent !important;
  border: none !important;
}

/* ============================================
   BUTTONS - Clean, flat style
   ============================================ */
.bg-zinc-800 {
  background: #1e293b !important;
  border: none !important;
  border-radius: 0.5rem !important;
}

.bg-zinc-800:hover {
  background: #334155 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 150ms ease;
}

html.dark .dark\:bg-zinc-700 {
  background: #334155 !important;
}

html.dark .dark\:bg-zinc-700:hover {
  background: #475569 !important;
}

/* Secondary buttons */
.group .bg-zinc-50,
.bg-zinc-50 {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

.bg-zinc-50:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* ============================================
   IMAGE GALLERY - No rotation, clean grid
   ============================================ */
.rotate-4,
.rotate-5,
.rotate-2,
.-rotate-3,
.-rotate-5 {
  transform: rotate(0deg) !important;
}

/* Image hover effect - subtle scale */
.aspect-9\/10 {
  border-radius: 0.5rem !important;
  transition: transform 200ms ease, box-shadow 200ms ease !important;
}

.aspect-9\/10:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  z-index: 10;
}

/* ============================================
   PROSE & TYPOGRAPHY
   ============================================ */
.prose a {
  color: #475569 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: all 150ms ease;
}

.prose a:hover {
  color: #1e293b !important;
}

html.dark .prose a {
  color: #94a3b8 !important;
}

html.dark .prose a:hover {
  color: #cbd5e1 !important;
}

/* Headings - clean, no gradient */
h1.text-4xl,
h1.sm\:text-5xl {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html.dark h1.text-4xl,
html.dark h1.sm\:text-5xl {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

/* ============================================
   WORK SECTION CARDS
   ============================================ */
.group:hover .bg-zinc-50 {
  background: #f1f5f9 !important;
}

html.dark .group:hover .dark\:bg-zinc-800\/50 {
  background: rgba(30, 41, 59, 0.5) !important;
}

/* ============================================
   NEWSLETTER & FORM INPUTS
   ============================================ */
input[type="email"]:focus {
  border-color: #475569 !important;
  --tw-ring-color: rgba(71, 85, 105, 0.2) !important;
  box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.1) !important;
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */
.border-teal-800 {
  border-color: #475569 !important;
}

.text-teal-800 {
  color: #475569 !important;
}

.stroke-teal-800 {
  stroke: #475569 !important;
}

/* ============================================
   FOOTER
   ============================================ */
.border-zinc-100 {
  border-color: #e2e8f0 !important;
}

html.dark .dark\:border-zinc-700\/40 {
  border-color: rgba(51, 65, 85, 0.4) !important;
}

/* ============================================
   CONTENT CONTAINER - Add subtle border
   ============================================ */
.ring-zinc-100 {
  --tw-ring-color: #e2e8f0 !important;
}

html.dark .dark\:ring-zinc-300\/20 {
  --tw-ring-color: rgba(203, 213, 225, 0.1) !important;
}

/* ============================================
   AVATAR - Clean border
   ============================================ */
.h-10.w-10.rounded-full.bg-white\/90,
.h-16.w-16 {
  border: 1px solid #e2e8f0 !important;
}

html.dark .h-10.w-10.rounded-full.dark\:bg-zinc-800\/90,
html.dark .h-16.w-16 {
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* ============================================
   ARTICLE CARDS - Cleaner look
   ============================================ */
/* Only apply to individual article pages, not grid cards */
.prose article,
main>article {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.prose article:last-child,
main>article:last-child {
  border-bottom: none;
}

/* Grid article cards should not have borders */
[data-articles-list] article,
.article-card {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================
   TRANSITIONS - Smoother
   ============================================ */
a,
button,
input {
  transition: all 150ms ease !important;
}

/* ============================================
   WORK ITEM ICONS - Cleaner circles
   ============================================ */
.group .rounded-full.overflow-hidden {
  border: 1px solid #e2e8f0 !important;
}

html.dark .group .rounded-full.overflow-hidden {
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* ============================================
   HIDE IMAGE GALLERY ON HOME PAGE
   ============================================ */
.mt-16.sm\:mt-20>.flex.-my-4 {
  display: none !important;
}

/* Hero grid alignment */
.grid.grid-cols-1.gap-y-16.lg\:grid-cols-2 {
  align-items: start !important;
}

/* ============================================
   SIMPLIFIED HERO SPACING
   ============================================ */
.mt-9 {
  margin-top: 3rem !important;
}

/* ============================================
   TOP SPACING - Ensure proper spacing at top
   ============================================ */
header {
  padding-top: 2rem !important;
}

main > div.sm\:px-8 {
  padding-top: 3rem !important;
}

/* ============================================
   SOCIAL LINKS - Cleaner hover
   ============================================ */
.hover\:text-teal-500:hover {
  color: #1e293b !important;
}

.dark\:hover\:text-teal-500:hover {
  color: #e2e8f0 !important;
}

.group-hover\:fill-teal-500 {
  fill: #475569 !important;
}

/* ============================================
   ARTICLES PAGE - Remove borders
   ============================================ */
/* Remove left border line and padding */
div[class*="md:border-l"],
div[class*="md:pl-6"] {
  border-left: none !important;
  padding-left: 0 !important;
}

/* Remove borders between articles (keep spacing) */
[data-articles-list] article {
  border-bottom: none !important;
  border-top: none !important;
}

/* ============================================
   SOCIAL ICONS - Ensure visibility
   ============================================ */
/* Parent container */
.flex.justify-end.md\:flex-1.items-center.gap-6 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Social icons container */
.flex.items-center.gap-4.pointer-events-auto {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Social icon links */
.flex.items-center.gap-4.pointer-events-auto a[aria-label] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Social icon SVGs */
.flex.items-center.gap-4.pointer-events-auto svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* ============================================
   NEWSLETTER SECTION - Cleaner
   ============================================ */
.rounded-2xl.border.border-zinc-100 {
  background: #fafafa !important;
  border-color: #e2e8f0 !important;
}

html.dark .rounded-2xl.border.dark\:border-zinc-700\/40 {
  background: rgba(15, 23, 42, 0.5) !important;
  border-color: rgba(51, 65, 85, 0.4) !important;
}

/* ============================================
   WORK EXPERIENCE SECTION - Cleaner
   ============================================ */
.rounded-2xl.border.p-6 {
  background: #fafafa !important;
}

html.dark .rounded-2xl.border.p-6 {
  background: rgba(15, 23, 42, 0.5) !important;
}

/* ============================================
   MOBILE RESPONSIVE - Prevent Horizontal Scrolling
   ============================================ */
/* Prevent horizontal overflow on all pages */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

/* Ensure all containers respect viewport width */
body > div.relative,
body > div.relative > div {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Make decorative blobs responsive - hide on mobile or make smaller */
.decorative-blob {
  display: none !important;
}

@media (min-width: 640px) {
  .decorative-blob {
    display: block !important;
  }

  .blob-blue,
  .blob-green {
    width: min(400px, 50vw) !important;
    height: min(400px, 50vw) !important;
    right: min(-150px, -10vw) !important;
  }

  .blob-cyan,
  .blob-emerald {
    width: min(300px, 40vw) !important;
    height: min(300px, 40vw) !important;
    left: min(-100px, -8vw) !important;
  }
}

/* Ensure all images are responsive */
img,
picture,
video,
iframe {
  max-width: 100% !important;
  height: auto !important;
}

/* Ensure tables don't overflow */
table {
  width: 100% !important;
  table-layout: auto !important;
  overflow-x: auto !important;
  display: block !important;
}

@media (min-width: 640px) {
  table {
    display: table !important;
  }
}

/* Ensure code blocks are scrollable instead of overflowing */
pre,
code {
  max-width: 100% !important;
  overflow-x: auto !important;
  word-wrap: break-word !important;
}

pre {
  display: block !important;
}

/* Ensure flex containers wrap properly on mobile when needed */
@media (max-width: 639px) {
  .flex.flex-row:not(.flex-nowrap) {
    flex-wrap: wrap !important;
  }

  /* Only wrap navigation items if they overflow */
  nav .flex {
    flex-wrap: wrap !important;
  }
}

/* Ensure grid containers don't overflow */
.grid {
  max-width: 100% !important;
}

/* Fix padding that might cause overflow */
.px-4 {
  padding-left: clamp(1rem, 4vw, 1.5rem) !important;
  padding-right: clamp(1rem, 4vw, 1.5rem) !important;
}

@media (min-width: 640px) {

  [class*="sm:px-8"],
  [class*="px-8"] {
    padding-left: clamp(1rem, 4vw, 2rem) !important;
    padding-right: clamp(1rem, 4vw, 2rem) !important;
  }
}

@media (min-width: 1024px) {

  [class*="lg:px-12"],
  [class*="px-12"] {
    padding-left: clamp(1rem, 4vw, 3rem) !important;
    padding-right: clamp(1rem, 4vw, 3rem) !important;
  }
}

/* Ensure containers with max-width respect viewport */
.max-w-7xl,
.max-w-5xl,
.max-w-2xl,
.max-w-xl,
.max-w-lg {
  max-width: min(100%, var(--container-width, 100%)) !important;
  box-sizing: border-box !important;
}

/* Ensure parent containers handle overflow properly */
main,
main > div,
main > div > div {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Fix any elements with fixed widths */
.w-56,
.w-80,
.w-96 {
  max-width: calc(100vw - 2rem) !important;
}

/* Ensure mobile menu doesn't overflow */
#mobile-menu-panel {
  max-width: calc(100vw - 2rem) !important;
  left: 0 !important;
  right: auto !important;
}


/* Fix article cards grid on mobile */
[data-articles-list] {
  grid-template-columns: 1fr !important;
}

@media (min-width: 640px) {
  [data-articles-list] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  [data-articles-list] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Ensure prose content doesn't overflow */
.prose {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.prose img,
.prose video,
.prose iframe {
  max-width: 100% !important;
  height: auto !important;
}

/* Fix any negative margins that could cause overflow on mobile */
@media (max-width: 639px) {

  .-m-1,
  .-m-4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .-my-2,
  .-my-4 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Ensure decorative elements with negative positioning don't overflow */
  .decorative-blob[style*="right"],
  .decorative-blob[style*="left"] {
    display: none !important;
  }
}

/* Ensure tooltip and popover elements don't overflow */
@media (max-width: 639px) {

  [class*="absolute"]:not(.decorative-blob),
  [class*="fixed"] {
    max-width: calc(100vw - 2rem) !important;
  }

  /* Ensure dropdowns and menus stay within viewport */
  #mobile-menu-panel,
  [id*="menu"],
  [id*="dropdown"] {
    max-width: calc(100vw - 2rem) !important;
    left: 1rem !important;
    right: auto !important;
  }
}

@media (max-width: 639px) {
  .prose header,
  .prose .prose-content {
    padding-left: clamp(1rem, 4vw, 1.5rem) !important;
    padding-right: clamp(1rem, 4vw, 1.5rem) !important;
    box-sizing: border-box;
  }

  .prose .prose-content > figure,
  .prose .prose-content > .video-embed {
    margin-left: 0;
    margin-right: 0;
  }
}