/* Elegant Minimalist palette and utility classes (CSS equivalents to Tailwind config) */
:root {
  --bg-light: #F7F7F7;
  --bg-subtle: #FFFFFF;
  --text-dark: #2C3E50;
  --brand-accent: #16A085;
  --sticky-header-offset: 96px;
  
}

/* Color utilities (map common Tailwind-like class names) */
.bg-light, .bg-bg-light { background-color: var(--bg-light) !important; }
.bg-subtle, .bg-bg-subtle { background-color: var(--bg-subtle) !important; }
.text-dark, .text-text-dark { color: var(--text-dark) !important; }
.text-brand-accent { color: var(--brand-accent) !important; }
.bg-brand-accent { background-color: var(--brand-accent) !important; }
.border-brand-accent { border-color: var(--brand-accent) !important; }

/* Font utilities */
.font-serif { font-family: 'Playfair Display', serif !important; }
.font-sans { font-family: 'Inter', sans-serif !important; }

/* Apply the light mode base styles */
        body {
            background-color: var(--bg-light);
            color: var(--text-dark);
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
            padding-bottom: 0; /* No extra space by default */
        }

        /* On mobile, add bottom space for the fixed footer nav */
        @media (max-width: 767.98px) {
            body {
                padding-bottom: 3rem; /* Tighter space while keeping fixed footer visible */
            }
        }
        /* Custom styles for section spacing (more subtle padding) */
        .section-padding {
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
        /* Style for the subtle shadow effect on cards in light mode */
        .elegant-shadow {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
        }
        /* Styling for the elegant accent line/divider */
        .accent-divider { border-bottom: 2px solid var(--brand-accent); }
        /* Timeline line fix for this design */
        #process .relative > .absolute {
            height: calc(100% - 3rem); /* Adjust height to stop before the next circle */
            top: 3rem;
        }
        
        /* Dropdown specific styles to ensure it sits above content */
        .dropdown-menu {
            z-index: 100;
        }
        
        /* Mobile Footer specific styling */
        .mobile-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 0;
            flex: 1 1 0%; /* Ensures equal width distribution */
            text-decoration: none;
            transition: color 0.2s;
        }
        .mobile-nav-item:hover, .mobile-nav-item.active { color: var(--brand-accent); }

        /* Styles for the Side Menu Animation */
        #mobile-sidebar {
            /* Start position: off screen to the left */
            transform: translateX(-100%); 
            transition: transform 0.3s ease-out;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 80%; /* Takes up 80% of the screen width */
            max-width: 300px;
            z-index: 60; /* Higher than the regular header */
            box-shadow: 4px 0 10px rgba(0,0,0,0.1);
        }
        #mobile-sidebar.is-open {
            /* End position: fully visible */
            transform: translateX(0);
        }
        #mobile-sidebar-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 59;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-out, visibility 0.3s;
        }
        #mobile-sidebar-backdrop.is-open {
            opacity: 1;
            visibility: visible;
        }

/* Page content typography */
.page-content {
  line-height: 1.7;
}
.page-content p { margin: 1rem 0; }
.page-content h2 { font-size: 1.75rem; margin: 1.25rem 0 0.5rem; color: var(--text-dark); }
.page-content h3 { font-size: 1.375rem; margin: 1rem 0 0.5rem; color: var(--text-dark); }
.page-content h4 { font-size: 1.125rem; margin: 0.75rem 0 0.5rem; color: var(--text-dark); }
.page-content a { color: var(--brand-accent); text-decoration: none; }
.page-content a:hover { text-decoration: underline; }
.page-content ul, .page-content ol { margin: 1rem 0 1rem 1.25rem; }
.page-content li { margin: 0.25rem 0; }
.page-content blockquote {
  border-left: 3px solid var(--brand-accent);
  padding-left: 1rem;
  margin: 1rem 0;
  color: rgba(44,62,80,0.85);
}
.page-content img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.page-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.page-content table th, .page-content table td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; }
.page-content code { background: #f3f4f6; padding: 0.15rem 0.35rem; border-radius: 0.25rem; }

/* Prose (Tailwind-like) typography for post content wrappers */
.prose { line-height: 1.75; color: var(--text-dark); }
.prose p { margin: 1rem 0; }
.prose h1 { font-size: 2rem; line-height: 1.25; margin: 1.5rem 0 0.75rem; font-weight: 700; color: var(--text-dark); scroll-margin-top: var(--sticky-header-offset); }
.prose h2 { font-size: 1.75rem; line-height: 1.3; margin: 1.25rem 0 0.5rem; font-weight: 700; color: var(--text-dark); scroll-margin-top: var(--sticky-header-offset); }
.prose h3 { font-size: 1.375rem; line-height: 1.35; margin: 1rem 0 0.5rem; font-weight: 600; color: var(--text-dark); scroll-margin-top: var(--sticky-header-offset); }
.prose h4 { font-size: 1.125rem; line-height: 1.4; margin: 0.75rem 0 0.5rem; font-weight: 600; color: var(--text-dark); scroll-margin-top: var(--sticky-header-offset); }
.prose a { color: var(--brand-accent); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose ul, .prose ol { margin: 1rem 0 1rem 1.25rem; }
.prose li { margin: 0.25rem 0; }
.prose blockquote { border-left: 3px solid var(--brand-accent); padding-left: 1rem; margin: 1rem 0; color: rgba(44,62,80,0.85); }
.prose img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose table th, .prose table td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; }
.prose code { background: #f3f4f6; padding: 0.15rem 0.35rem; border-radius: 0.25rem; }

/* Ensure anchored targets account for sticky header (robust fallback) */
.prose :target::before,
.page-content :target::before {
  content: '';
  display: block;
  height: var(--sticky-header-offset);
  margin-top: calc(-1 * var(--sticky-header-offset));
}

/* ------------------------ */
/* Table of Contents (TOC)  */
/* ------------------------ */
.toc-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border: 1px solid #E5E7EB; /* gray-200 */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  padding: 16px;
}
.toc-card.sticky {
  position: sticky;
  top: calc(var(--sticky-header-offset) + 12px);
  z-index: 40; /* keep above content but under header */
}
.toc-card summary {
  list-style: none; /* hide default marker */
}
.toc-card[open] summary i[data-lucide="chevron-down"] { transform: rotate(180deg); transition: transform .18s ease; }
.toc-card summary i[data-lucide="chevron-down"] { transition: transform .18s ease; }
.toc-list { margin: 0; padding: 0; list-style: none; }
.toc-list li { position: relative; padding-left: 18px; margin: 6px 0; }
.toc-list li::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 999px; background: rgba(22,160,133,0.35);
}
.toc-link { color: rgba(44,62,80,0.85); text-decoration: none; }
.toc-link:hover { color: var(--brand-accent); text-decoration: underline; }

/* Navigation dropdowns */
/* Desktop: show submenus on hover/focus */
header nav ul.menu > li { position: relative; }
header nav ul.menu li > ul.sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 12rem;
  display: none;
  background: #1F2937; /* gray-800 */
  border: none;
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  padding: 0.5rem 0;
  z-index: 60;
}
header nav ul.menu li:hover > ul.sub-menu,
header nav ul.menu li:focus-within > ul.sub-menu { display: block; }
header nav ul.menu li > ul.sub-menu > li > a {
  display: block;
  padding: 0.5rem 1rem;
  color: #F9FAFB; /* gray-50 */
  text-decoration: none;
}
header nav ul.menu li > ul.sub-menu > li > a:hover {
  background: rgba(255,255,255,0.08);
  color: #FFFFFF;
}

/* Desktop: animate chevron icon on hover/focus for submenu parents */
header nav ul.menu > li.menu-item-has-children > a i[data-lucide="chevron-down"] {
  transition: transform 0.2s ease;
}
header nav ul.menu > li.menu-item-has-children:hover > a i[data-lucide="chevron-down"],
header nav ul.menu > li.menu-item-has-children:focus-within > a i[data-lucide="chevron-down"] {
  transform: rotate(180deg);
}

/* Desktop: keep label and chevron on the same line */
header nav ul.menu > li > a { display: inline-flex; align-items: center; }
header nav ul.menu > li.menu-item-has-children > a i[data-lucide="chevron-down"] {
  width: 16px; height: 16px; margin-left: 0.35rem; vertical-align: middle;
}

/* Desktop: professional hover effect (accent underline + color) */
header nav ul.menu > li > a {
  position: relative;
  text-decoration: none;
  transition: color 0.2s ease;
}
header nav ul.menu > li:hover > a,
header nav ul.menu > li:focus-within > a {
  color: var(--brand-accent);
}

/* Mobile sidebar: nested submenus collapsed by default, expandable via JS */
#mobile-sidebar ul.menu li { border-top: none; }
/* Remove separator lines around an opened submenu on mobile */
#mobile-sidebar ul.menu li.open { border-top: none; }
#mobile-sidebar ul.menu li.open + li { border-top: none; }
#mobile-sidebar ul.menu li > a {
  display: block;
  padding: 0.75rem 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
#mobile-sidebar ul.menu li.menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; }
#mobile-sidebar .submenu-toggle { margin-left: auto; }
#mobile-sidebar ul.menu li > a:hover,
#mobile-sidebar ul.menu li > a:focus {
  color: var(--brand-accent);
  background: rgba(22,160,133,0.08);
}
#mobile-sidebar ul.menu li.menu-item-has-children > a i[data-lucide="chevron-down"] { transition: transform 0.2s ease; }
#mobile-sidebar ul.menu li.menu-item-has-children.open > a i[data-lucide="chevron-down"] { transform: rotate(180deg); }
#mobile-sidebar ul.menu li > ul.sub-menu { display: none; padding: 0.25rem 0 0.5rem 0; background: #F9FAFB; }
#mobile-sidebar ul.menu li.open > ul.sub-menu { display: block; }
#mobile-sidebar ul.menu li > ul.sub-menu { display: none; padding: 0.25rem 0 0.5rem 0; background: #1F2937; border-top: none; }
#mobile-sidebar ul.menu li.open > ul.sub-menu { display: block; }
#mobile-sidebar ul.menu li > ul.sub-menu a { display: block; padding: 0.5rem 1.5rem; font-size: 0.95rem; color: #F9FAFB; text-decoration: none; }
#mobile-sidebar ul.menu li > ul.sub-menu a:hover { background: rgba(255,255,255,0.08); color: #FFFFFF; }