/* _static/custom.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. Theme Variable Overrides (Matches personal site color palette)
   ========================================================================== */

html[data-theme="light"] {
    --pst-color-background: #ffffff;
    --pst-color-surface: #f9fafb;
    --pst-color-text-base: #1f2933;
    --pst-color-text-muted: #4b5563;
    --pst-color-link: #2563eb;
    --pst-color-link-hover: #1d4ed8;
    --pst-color-border: #e5e7eb;
}

html[data-theme="dark"] {
    --pst-color-background: #111827;
    --pst-color-surface: #1f2937;
    --pst-color-text-base: #f9fafb;
    --pst-color-text-muted: #9ca3af;
    --pst-color-link: #60a5fa;
    --pst-color-link-hover: #93c5fd;
    --pst-color-border: #374151;
}

/* ==========================================================================
   2. Typography & Layout Base
   ========================================================================== */

body {
    font-family: "Inter", sans-serif !important;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Inter", sans-serif !important;
    letter-spacing: -0.03em;
}

/* ==========================================================================
   3. Top Header & Navbar
   ========================================================================== */

.bd-header {
    background-color: var(--pst-color-background) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Align header with portfolio's 1000px body + 20px horizontal padding */
header.bd-header .bd-header__inner,
header.bd-header .bd-container,
header.bd-header .header-article-container,
.bd-header .header-main {
    max-width: 1000px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 11px !important;  /* Changed from 20px to match portfolio */
    padding-right: 11px !important; /* Changed from 20px to match portfolio */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.bd-header .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0;
}

.bd-header .navbar-nav .nav-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* .bd-header .navbar-nav .nav-link {
    font-family: "Inter", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--pst-color-text-muted) !important;
    padding: 0 !important;
    line-height: 1.7 !important;
    transition: color 0.15s ease-in-out;
} */

.bd-header .navbar-nav .nav-link {
    font-family: "Inter", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 27.2px !important;
    color: var(--pst-color-text-muted) !important;
    padding: 0 !important;
    height: 36px !important;
    transition: color 0.15s ease-in-out;
    display: block !important;
}

.bd-header .navbar-header-items__center {
    margin-right: 30px !important;
}

.bd-header .navbar-header-items__center > .navbar-item {
    transform: translateY(10px);
}

.bd-header .navbar-nav .nav-link:hover {
    color: var(--pst-color-link) !important;
    text-decoration: none;
}

.bd-header .navbar-nav .nav-item.active .nav-link,
.bd-header .navbar-nav .nav-link[aria-current="page"] {
    color: var(--pst-color-text-base) !important;
    font-weight: 600 !important;
}

/* Remove external-link indicators from top navigation */
.bd-header .navbar-nav .nav-link::after,
.bd-header .navbar-nav .nav-link i,
.bd-header .navbar-nav .nav-link svg,
.bd-header .navbar-nav a.external::after,
.bd-header .navbar-nav a[target="_blank"]::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   Active State Fix for Tutorials Navbar Header
   ========================================================================== */

/* Force the Tutorials navigation link to be active/highlighted on every page */
header.bd-header .navbar-nav a.nav-link[href*="index"],
header.bd-header .navbar-nav a.nav-link[href="./"],
header.bd-header .navbar-nav a.nav-link[href="/"] {
    color: var(--pst-color-text-base) !important;
    font-weight: 600 !important;
}