@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

@font-face {
    font-family: 'Geist';
    src: url('https://assets.vercel.com/raw/upload/v1670542323/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('https://assets.vercel.com/raw/upload/v1670542323/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

body {
    font-family: Geist, "Geist Fallback", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
}

/* Reset Tailwind's base styles first */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

/* Then apply our specific h1 styles with higher specificity */
h1.prose-h1,
h1:not([class]),
.content h1 {
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    color: rgb(23, 23, 23);
    font-family: Geist, "Geist Fallback", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 40px !important;
    font-weight: 600 !important;
    letter-spacing: -0.93px;
    line-height: 56px;
    text-decoration: none;
    text-rendering: optimizelegibility;
    word-break: break-word;
    -webkit-font-smoothing: antialiased;
    font-synthesis-weight: none;
    font-feature-settings: "rlig", "calt" 0;
    margin-right: 10px;
    cursor: pointer;
    display: inline;
}

p, li {
    color: rgb(102, 102, 102);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.nav-link {
    font-size: 14px;
    font-weight: 500;
}

/* Code block styles */
.code-block {
    background: #1E1E1E;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

pre {
    margin: 0;
    padding: 0;
}

code {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    line-height: 1.5;
}

/* Tab styles */
.active-tab {
    color: white;
    border-bottom: 2px solid #3B82F6;
}

/* Footer styles */
footer {
    font-family: 'Inter', sans-serif;
}

footer h3 {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

footer a {
    transition: color 0.15s ease;
}

/* Documentation styles */
.content {
    max-width: 800px;
    margin: 0 auto;
}

.content h2 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 16px;
    color: #111;
}

.content h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 12px;
    color: #111;
}

.content p {
    margin-bottom: 16px;
}

.content pre {
    margin: 16px 0;
    padding: 16px;
    background: #f7f7f7;
    border-radius: 6px;
    overflow-x: auto;
}

.content code {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    padding: 2px 4px;
    background: #f1f1f1;
    border-radius: 4px;
}

.content pre code {
    padding: 0;
    background: transparent;
}

/* API endpoint styles */
.endpoint {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.method {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 16px;
    margin-right: 12px;
}

.method.get { background: #E3F2FD; color: #1565C0; }
.method.post { background: #E8F5E9; color: #2E7D32; }
.method.put { background: #FFF3E0; color: #EF6C00; }
.method.delete { background: #FFEBEE; color: #C62828; }

.endpoint-path {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    color: #333;
}