/* API Documentation Styles */
.api-documentation {
    padding: 4rem 0;
    background: var(--gray-100);
}

.api-hero {
    background: var(--gradient-primary);
    padding: 6rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 4rem;
}

.api-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.api-hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.api-hero .api-subtitle {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin: 0 auto;
}

.api-section {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
    overflow: hidden;
}

.api-section h2 {
    font-size: 1.75rem;
    color: white;
    padding: 1.5rem 2rem;
    margin: 0;
    background: var(--gray-800);
    border-bottom: 1px solid var(--gray-700);
}

.endpoint-card {
    padding: 2rem;
    border-bottom: 1px solid var(--gray-200);
    background: white;
}

.endpoint-card:last-child {
    border-bottom: none;
}

.endpoint-header {
    margin-bottom: 2rem;
}

.endpoint-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.endpoint-title h3 {
    font-size: 1.5rem;
    color: var(--gray-800);
    margin: 0;
}

.http-method {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.http-method.get {
    background: #1E40AF;
    color: white;
}

.http-method.post {
    background: #065F46;
    color: white;
}

.endpoint-url {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--gray-800);
    color: white;
    border-radius: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}

/* Code blocks */
.code-block {
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #0D1117; /* GitHub Dark theme background */
    border: 1px solid #30363D;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background: #161B22; /* Slightly lighter than main background */
    border-bottom: 1px solid #30363D;
}

.code-block-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #E6EDF3; /* GitHub Dark theme text */
    font-size: 0.875rem;
    font-weight: 500;
}

.code-block-title i {
    color: #58A6FF; /* GitHub blue */
}

.code-block-actions button {
    background: transparent;
    border: none;
    color: #8B949E;
    padding: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.code-block-actions button:hover {
    color: #E6EDF3;
    transform: scale(1.1);
}

.code-block pre {
    margin: 0;
    padding: 1.25rem;
    background: #0D1117;
}

.code-block code {
    color: #E6EDF3;
    font-size: 0.875rem;
    line-height: 1.7;
    font-family: 'JetBrains Mono', monospace;
}

/* JSON Syntax Highlighting - GitHub theme */
.code-block code .json-string {
    color: #A5D6FF; /* Light blue for strings */
}

.code-block code .json-key {
    color: #FF7B72; /* Coral red for keys */
}

.code-block code .json-punctuation {
    color: #79C0FF; /* Blue for braces and colons */
}

.code-block code .json-number {
    color: #79C0FF; /* Blue for numbers */
}

.code-block code .json-boolean {
    color: #FF7B72; /* Red for booleans */
}

.code-block code .json-null {
    color: #FF7B72; /* Red for null */
}

/* Add subtle hover effect */
.code-block:hover {
    border-color: #3B434D;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Parameters table */
.params-section {
    margin: 2rem 0;
}

.params-section h4 {
    font-size: 1rem;
    color: var(--gray-800);
    margin-bottom: 1rem;
    font-weight: 600;
}

.params-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    overflow: hidden;
    font-size: 0.875rem;
    background: white;
}

.params-table th {
    text-align: left;
    padding: 0.875rem 1.25rem;
    background: var(--gray-800);
    font-weight: 500;
    color: white;
    border-bottom: 1px solid var(--gray-700);
}

.params-table td {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-700);
    background: white;
}

.params-table tr:last-child td {
    border-bottom: none;
}

.params-table tr:hover td {
    background: var(--gray-50);
}

.param-name {
    color: var(--primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 500;
}

.param-type {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--gray-800);
    border-radius: 0.25rem;
    color: white;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.param-required {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.param-required.yes {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.param-required.no {
    background: rgba(107, 114, 128, 0.1);
    color: #6B7280;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

/* Status Codes */
.status-code {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-code.success {
    background: #065F46;
    color: white;
}

.status-code.error {
    background: #991B1B;
    color: white;
}

/* API Note */
.api-note {
    background: #FEF3C7;
    border-left: 4px solid #F59E0B;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 0 0.375rem 0.375rem 0;
}

.api-note p {
    margin: 0;
    color: #92400E;
    font-size: 0.9rem;
}

.api-note strong {
    color: #78350F;
}

@media (max-width: 768px) {
    .api-hero {
        padding: 4rem 0;
    }

    .api-hero h1 {
        font-size: 2.5rem;
    }

    .endpoint-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .params-table {
        display: block;
        overflow-x: auto;
    }
}