/* Theme images for logo */
[data-theme="overworld"] .logo-icon {
    background-image: url('/assets/img/icons/grassblock.webp');
    background-size: cover;
    background-position: center;
}

[data-theme="nether"] .logo-icon {
    background-image: url('/assets/img/icons/Lava.webp');
    background-size: cover;
    background-position: center;
}

[data-theme="end"] .logo-icon {
    background-image: url('/assets/img/icons/crystal.gif');
    background-size: cover;
    background-position: center;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* In der mobilen Ansicht die Desktop-Buttons ausblenden */
@media (max-width: 768px) {
    .sound-toggle,
    .lang-switcher {
        display: none;
    }
}

/* Dropdowns im mobilen Menü nicht nötig, da alle Links einzeln stehen */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding-left: var(--spacing-lg);
        background-color: transparent;
    }
    .dropdown-btn {
        display: none;
    }
}

.hero-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.hero-title {
    font-size: var(--text-5xl);
    margin-bottom: var(--spacing-md);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-description {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

/* =====================================================================
   API DOCUMENTATION - developer panel design
   Follows the generator pages (advancement generator): dark panels with a
   soft 1px border, 18px corners and a deep shadow; centred panel titles with
   an icon; bordered "stage" areas inside a panel. Unlike the generator, which
   hard-codes its greens, everything here is built on the theme tokens, so
   Overworld / Nether / End recolour the whole page. Titles, badges,
   descriptions and buttons stay centred; code, JSON and parameter tables are
   left-aligned because that is where alignment helps reading.
   ===================================================================== */
.main {
    --api-panel: color-mix(in srgb, var(--bg-card) 90%, transparent);
    --api-stage: color-mix(in srgb, var(--bg-primary) 55%, var(--bg-card));
    --api-code-bg: color-mix(in srgb, var(--bg-primary) 80%, #000);
    --api-line: color-mix(in srgb, var(--border-color) 85%, transparent);
    --api-accent-soft: color-mix(in srgb, var(--primary) 14%, transparent);
    --api-accent-line: color-mix(in srgb, var(--primary) 45%, var(--border-color));
    --api-radius: 18px;
    --api-radius-inner: 14px;
    --api-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

/* ===== BASE URL CARD (Hero) =====
   The hero's stage, like the generator's preview area: a bordered panel with a
   soft theme glow at the top, holding the one thing every request starts with. */
.base-url-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 26px 24px 22px;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--api-accent-soft), transparent 62%),
        var(--api-panel);
    border: 1px solid var(--api-accent-line);
    border-radius: var(--api-radius);
    box-shadow: var(--api-shadow);
    text-align: center;
}

.base-url-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.base-url-label i {
    color: var(--primary);
}

/* Facts as status badges */
.base-url-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    list-style: none;
}

.base-url-facts li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--api-stage);
    border: 1px solid var(--api-line);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.base-url-facts i {
    flex-shrink: 0;
    color: var(--primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .hero .container {
        gap: var(--spacing-xl);
    }
    .hero-title {
        font-size: var(--text-4xl);
    }
}

@media (max-width: 768px) {
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-badge {
        justify-content: center;
    }
    .hero-buttons {
        justify-content: center;
    }
    .base-url-card {
        max-width: 100%;
    }
    .base-url-facts li {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero {
        padding: 120px 0 60px;
    }
    .hero-title {
        font-size: var(--text-3xl);
    }
    .hero-description {
        font-size: var(--text-base);
    }
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===== CODE BLOCKS & COPY BUTTON =====
   Prefixed with .main: site-modern-v1.css has a shared .copy-btn and loads last,
   so equally specific rules here would lose to it.
   The code line scrolls inside the block (never the page), and the copy button
   sits outside that scroll area so it stays in place while scrolling. */
.main .code-block {
    position: relative;
    max-width: 100%;
    min-width: 0;
    margin: 14px 0;
    padding: 12px 56px 12px 16px;
    background: var(--api-code-bg);
    border: 1px solid var(--api-line);
    border-radius: 12px;
    text-align: center;
}

.main .code-block code {
    display: block;
    overflow-x: auto;
    padding: 2px 0 4px;
    background: none;
    border-radius: 0;
    color: var(--primary-light);
    font-size: 0.86rem;
    line-height: 1.6;
    white-space: pre;
    text-align: center;
}

/* The two "complete example" URLs are several hundred characters - wrap them. */
.main .code-block.code-block-wrap code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.main .code-block.code-block-multiline pre {
    margin: 0;
    overflow-x: auto;
    text-align: center;
}

.main .code-block.code-block-multiline pre code {
    overflow: visible;
}

.main .code-block-inline {
    margin: 0;
    padding: 10px 52px 10px 14px;
    text-align: center;
}

.main .code-block-inline code {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

.main .code-block .copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    transform: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--api-stage);
    border: 1px solid var(--api-line);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.main .code-block-inline .copy-btn {
    top: 50%;
    transform: translateY(-50%);
}

.main .code-block .copy-btn:hover,
.main .code-block .copy-btn:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.main .code-block .copy-btn.copied {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

/* Inline code inside prose, tables and callouts */
.docs-block code,
.base-url-facts code {
    padding: 2px 6px;
    background: var(--api-accent-soft);
    border-radius: 5px;
    color: var(--primary-light);
    font-size: 0.88em;
    overflow-wrap: anywhere;
}

/* ===== DOCS SECTION LAYOUT ===== */
.docs-section {
    padding: var(--spacing-2xl) 0;
    background-color: var(--bg-secondary);
}

.docs-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* Sidebar - a panel like the generator's settings column */
.docs-sidebar {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 16px;
    background: var(--api-panel);
    border: 1px solid var(--api-line);
    border-radius: var(--api-radius);
    box-shadow: var(--api-shadow);
}

.docs-sidebar-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs);
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
}

.docs-sidebar-chevron {
    margin-left: auto;
    font-size: var(--text-sm);
    transition: transform var(--transition-fast);
}

.docs-sidebar.collapsed .docs-sidebar-chevron {
    transform: rotate(-90deg);
}

.docs-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.docs-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.docs-nav-title {
    padding: 4px 8px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.docs-nav-link {
    display: block;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.docs-nav-link:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.docs-nav-link.active {
    color: var(--primary-light);
    background: var(--api-accent-soft);
    border-color: var(--api-accent-line);
    font-weight: 600;
}

/* ===== CONTENT PANELS ===== */
.docs-content {
    min-width: 0;
}

.docs-block {
    position: relative;
    margin-bottom: 22px;
    padding: 28px 26px 26px;
    background: var(--api-panel);
    border: 1px solid var(--api-line);
    border-radius: var(--api-radius);
    box-shadow: var(--api-shadow);
    scroll-margin-top: 90px;
}

/* A short accent segment centred on the top edge - symmetric, not a glow. */
.docs-block::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 30%;
    right: 30%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.docs-block-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--api-line);
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    text-align: center;
}

.docs-block-title i {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: var(--api-accent-soft);
    border: 1px solid var(--api-accent-line);
    border-radius: 13px;
    color: var(--primary);
    font-size: 1.1rem;
}

.docs-block-desc {
    max-width: 720px;
    margin: 0 auto 8px;
    color: var(--text-secondary);
    line-height: 1.7;
    text-align: center;
}

/* Sub-sections read like the "--- Parameter ---" dividers of a tool panel. */
.docs-sub-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 12px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.docs-sub-title::before,
.docs-sub-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--api-line);
}

.docs-sub-title code {
    text-transform: none;
    letter-spacing: 0;
}

/* ===== ENDPOINT CARDS - the stage inside a panel ===== */
.endpoint-card {
    margin-bottom: 16px;
    padding: 20px;
    background: var(--api-stage);
    border: 1px solid var(--api-line);
    border-radius: var(--api-radius-inner);
    text-align: center;
    transition: border-color 0.15s ease;
}

.endpoint-card:hover {
    border-color: var(--api-accent-line);
}

.endpoint-card:last-child {
    margin-bottom: 0;
}

.endpoint-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Method badge. The API only uses GET, so there is one quiet style rather
   than a colour per method. */
.endpoint-method {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 10px;
    background: var(--api-accent-soft);
    border: 1px solid var(--api-accent-line);
    border-radius: 8px;
    color: var(--primary-light);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.main .endpoint-card .endpoint-path {
    display: inline-block;
    max-width: 100%;
    padding: 6px 12px;
    background: var(--api-code-bg);
    border: 1px solid var(--api-line);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    /* Breaks at the <wbr> after each "/" in the markup; break-word is only the
       fallback for a single segment that is longer than the card. */
    overflow-wrap: break-word;
    text-align: center;
}

.endpoint-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    text-align: center;
}

/* ===== BASICS BREAKDOWN - tiles like the generator's frame buttons ===== */
.basics-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin: 16px 0 22px;
}

.breakdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: var(--api-stage);
    border: 1px solid var(--api-line);
    border-radius: 12px;
    text-align: center;
}

.main .breakdown-item code {
    max-width: 100%;
    min-width: 0;
}

.breakdown-item span {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ===== CHIPS (categories) ===== */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.chip {
    padding: 4px 10px;
    background: var(--api-code-bg);
    border: 1px solid var(--api-line);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

/* ===== CALLOUTS - short notes, centred ===== */
.docs-callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 14px 18px;
    background: var(--api-stage);
    border: 1px solid var(--api-line);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
    text-align: center;
}

.docs-callout i {
    flex-shrink: 0;
    font-size: 1.05rem;
}

.docs-callout code {
    font-size: 0.85em;
}

.docs-callout-tip {
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border-color));
}
.docs-callout-tip i { color: var(--primary); }

.docs-callout-info {
    background: color-mix(in srgb, var(--info, #3b82f6) 8%, var(--bg-card));
    border-color: color-mix(in srgb, var(--info, #3b82f6) 40%, var(--border-color));
}
.docs-callout-info i { color: var(--info, #3b82f6); }

.docs-callout-good {
    background: color-mix(in srgb, var(--success) 8%, var(--bg-card));
    border-color: color-mix(in srgb, var(--success) 40%, var(--border-color));
}
.docs-callout-good i { color: var(--success); }

.docs-callout-bad {
    background: color-mix(in srgb, var(--accent, #ff6b6b) 8%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent, #ff6b6b) 40%, var(--border-color));
}
.docs-callout-bad i { color: var(--accent, #ff6b6b); }

/* ===== PARAMETER TABLES - left-aligned, scroll inside their frame ===== */
.param-table-wrap {
    max-width: 100%;
    margin: 14px 0;
    overflow-x: auto;
    background: var(--api-stage);
    border: 1px solid var(--api-line);
    border-radius: 12px;
}

.param-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.main .param-table th {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.main .param-table td {
    padding: 10px 14px;
    border-top: 1px solid var(--api-line);
    color: var(--text-secondary);
    text-align: left;
    vertical-align: top;
}

.main .param-table td:first-child {
    color: var(--text-primary);
    white-space: nowrap;
}

.param-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

/* ===== TEST LINKS - tiles ===== */
.testlink-group {
    margin-bottom: var(--spacing-lg);
}

.testlink-group:last-child {
    margin-bottom: 0;
}

.testlink-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.testlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 9px 14px;
    background: var(--api-stage);
    border: 1px solid var(--api-line);
    border-radius: 12px;
    color: var(--primary-light);
    font-size: var(--text-sm);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.testlink::before {
    content: '\f35d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75em;
    color: var(--text-muted);
}

.testlink:hover,
.testlink:focus-visible {
    background: var(--api-accent-soft);
    border-color: var(--api-accent-line);
    transform: translateY(-1px);
}

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.mobile-nav-link {
    display: block;
    padding: var(--spacing-sm);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xs);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: var(--primary);
    background-color: rgba(0, 168, 107, 0.1);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .hero .container {
        gap: var(--spacing-xl);
    }

    .hero-title {
        font-size: var(--text-4xl);
    }

    .docs-layout {
        grid-template-columns: 220px 1fr;
    }
}

@media (max-width: 900px) {
    .docs-layout {
        grid-template-columns: 1fr;
    }

    .docs-sidebar {
        position: static;
        max-height: none;
    }

    .docs-sidebar-toggle {
        display: flex;
    }

    .docs-nav {
        display: none;
    }

    .docs-sidebar:not(.collapsed) .docs-nav {
        display: flex;
        margin-top: var(--spacing-md);
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 768px) {
    /* Header */
    .header-content {
        height: 60px;
    }

    .navigation {
        display: none;
    }

    .theme-switcher {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    /* Hero */
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    /* Docs */
    .docs-block {
        padding: var(--spacing-lg);
    }

    .endpoint-header {
        flex-direction: column;
        align-items: center;
    }

    .docs-block {
        padding: 22px 18px;
    }

    .breakdown-item code {
        min-width: 0;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* Footer */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .footer-meta {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    /* Hero */
    .hero {
        padding: 120px 0 60px;
    }

    .hero-title {
        font-size: var(--text-3xl);
    }

    .hero-description {
        font-size: var(--text-base);
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        justify-content: center;
    }

    /* Docs */
    .docs-block-title {
        font-size: var(--text-xl);
    }

    .param-table th,
    .param-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .footer-col {
        text-align: center;
        align-items: center;
    }

    .social-links {
        justify-content: center;
    }

    .footer-links {
        text-align: center;
    }
}

@media (max-width: 400px) {
    .container {
        padding: 0 var(--spacing-sm);
    }

    .hero-title {
        font-size: var(--text-2xl);
    }

    .docs-block {
        padding: var(--spacing-md);
    }

}

/* Focus rings come from site-modern-v1.css (:focus-visible). The :focus rule
   that used to be here also ringed every mouse click. */