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

/* ============================================
   ACCENT COLOR: Slate Blue theme
   ============================================ */
.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 {
  transform: rotate(0deg) !important;
}

.rotate-5 {
  transform: rotate(0deg) !important;
}

.rotate-2 {
  transform: rotate(0deg) !important;
}

.-rotate-3 {
  transform: rotate(0deg) !important;
}

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

/* Newsletter is removed via JavaScript (remove-newsletter.js) */

/* 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;
}