/*$Id$*/
:root {
    /* Colors */
    --color-primary: #1a73e8;
    --color-text-primary: #ffffff;
    --color-text-secondary: #ffffff;
    --color-text-muted: #333;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #ffffff12;
    --color-bg-hover: #ffffff12;
    --color-bg-active: #e8f0fe;
    --color-bg-code: #f6f8fa;
    --color-bg-note: #fff3cd;
    --color-bg-tip: #d1ecf1;
    --color-bg-warning: #f8d7da;
    --color-border-primary: #e1e4e842;
    --color-border-note: #ffc107;
    --color-border-tip: #17a2b8;
    --color-border-warning: #dc3545;
    --color-transparent: transparent;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;
    --spacing-4xl: 4rem;

    /* Margins */
    --margin-none: 0;
    --margin-xs: 0.5rem;
    --margin-sm: 0.75rem;
    --margin-md: 1rem;
    --margin-lg: 1.5rem;
    --margin-xl: 2rem;
    --margin-2xl: 2.5rem;
    --margin-3xl: 3rem;
    --margin-4xl: 4rem;

    /* Padding */
    --padding-none: 0;
    --padding-xs: 0.5rem;
    --padding-sm: 0.75rem;
    --padding-md: 1rem;
    --padding-lg: 1.25rem;
    --padding-xl: 2rem;
    --padding-2xl: 3rem;
    --padding-3xl: 4rem;
    --padding-img: 0.5rem;

    /* Widths */
    --width-sidebar: 250px;
    --width-content-max: 900px;
    --width-full: 100%;
    --width-img: 70%;

    /* Heights */
    --height-viewport: 100vh;
    --height-auto: auto;

    /* Borders */
    --border-width-thin: 1px;
    --border-width-medium: 3px;
    --border-width-thick: 4px;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;

    /* Font Family */
    --font-family-base: var(--zf-regular);
    --font-size-sm: 0.8rem;

    /* Heights */
    --height-viewport: 100vh;
    --height-auto: auto;
}

* {
    margin: var(--margin-none);
    padding: var(--padding-none);
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.hd-section img {
    max-width: 70%;
    height: auto;
    padding: 2rem;
    border-radius: 6px;
    margin: 1rem 0;
    background-color: #ffffff12;
    cursor: pointer;
}

.navbar-custom {
    padding: 0 2rem !important;
}

.hd-section a {
    color: #5094ef;
}

.hd-section a:hover {
    color: #74a6e8;
}

.hd-container {
    display: flex;
    height: calc(100vh - var(--h-navbar));
    overflow: hidden;
    border-top: 0.8px solid #ffffff36;
}

.hd-sidebar {
    width: var(--width-sidebar);
    background: var(--color-bg-secondary);
    position: sticky;
    top: 0;
    height: calc(100vh - var(--h-navbar));
    overflow-y: auto;
    padding: 1rem var(--padding-none);
    flex-shrink: 0;
    border-right: 0.8px solid #ffffff36;
}

.hd-sidebar h2 {
    padding: var(--padding-none) var(--padding-lg);
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
    font-size: 1rem;
}

.hd-nav-item {
    padding: var(--padding-sm) var(--padding-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: var(--border-width-medium) solid var(--color-transparent);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.hd-nav-item:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.hd-nav-item.hd-active {
    background: #ffffff12;
    border-left-color: #ffffffb0;
}

.hd-content {
    flex: 1;
    /* padding: var(--padding-2xl) var(--padding-3xl);
            max-width: var(--width-content-max); */
    height: calc(100vh - var(--h-navbar));
    overflow-y: auto;
}

.hd-content-spacing {
    padding: var(--padding-2xl) var(--padding-3xl);
}

.hd-section {
    margin-bottom: var(--margin-4xl);
    scroll-margin-top: var(--margin-xl);
}

.hd-section h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--margin-md);
    color: var(--color-text-primary);
}

.hd-section h2 {
    font-size: var(--font-size-xl);
    margin-top: var(--margin-2xl);
    margin-bottom: var(--margin-md);
    color: var(--color-text-primary);
    padding-bottom: var(--padding-xs);
    border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.hd-section h3 {
    font-size: var(--font-size-lg);
    margin-top: var(--margin-lg);
    margin-bottom: var(--margin-sm);
    color: var(--color-text-primary);
}

.hd-section p {
    margin-bottom: var(--margin-md);
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.hd-section ul,
.hd-section ol {
    margin-left: var(--margin-lg);
    margin-bottom: var(--margin-md);
    font-size: 1rem;
    margin-top: 1rem;
}

.hd-section li {
    margin-bottom: var(--margin-xs);
    color: var(--color-text-secondary);
}

.hd-code-block {
    background: var(--color-bg-code);
    border: var(--border-width-thin) solid var(--color-border-primary);
    border-radius: var(--border-radius-md);
    padding: var(--padding-md);
    margin: var(--margin-md) var(--margin-none);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    overflow-x: auto;
}

.hd-note {
    background: var(--color-bg-note);
    border-left: var(--border-width-thick) solid var(--color-border-note);
    padding: var(--padding-md);
    margin: var(--margin-md) var(--margin-none);
    border-radius: var(--border-radius-sm);
}

.hd-tip {
    background: #ffffff1a;
    border-left: var(--border-width-thick) solid #ffffffbf;
    padding: var(--padding-md);
    margin: var(--margin-md) var(--margin-none);
    border-radius: var(--border-radius-sm);
    color: #fff;
    font-size: 1rem;
}

.hd-tip li,
.hd-tip strong {
    color: var(--color-bg-primary);
}

.hd-warning {
    background: var(--color-bg-warning);
    border-left: var(--border-width-thick) solid var(--color-border-warning);
    padding: var(--padding-md);
    margin: var(--margin-md) var(--margin-none);
    border-radius: var(--border-radius-sm);
}

.hd-section h4 {
    font-size: 1.2rem;
    margin-top: var(--margin-lg);
    margin-bottom: var(--margin-sm);
    color: var(--color-text-primary);
}

strong {
    color: var(--color-text-primary);
}

.modal_close {
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 10%;
    top: 4%;
}

.fa,
.fas {
    font-size: 1.25rem;
    color: #fff;
}

.preview-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1031;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-color: rgb(0 0 0 / 70%);
}

.modal img {
    height: 70vh;
    object-fit: contain;
    border: 1px solid rgb(229, 231, 235);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hd-image-container {
    margin: var(--margin-xl) var(--margin-none);
    text-align: left;
}

.hd-image {
    max-width: var(--width-full);
    height: auto;
    border: var(--border-width-thin) solid var(--color-border-primary);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hd-image:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hd-image-caption {
    margin-top: var(--margin-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.hd-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--width-full);
    height: var(--height-viewport);
    background: rgba(0, 0, 0, 0.7);
    z-index: 1031;
    justify-content: center;
    align-items: center;
}

.hd-modal.hd-active {
    display: flex;
}

.hd-modal-content {
    position: relative;
    max-width: 70%;
    max-height: 70%;
    animation: modalZoom 0.3s ease;
}

@keyframes modalZoom {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.hd-modal-image {
    max-width: var(--width-full);
    max-height: 70vh;
    border-radius: var(--border-radius-md);
}

.hd-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: var(--color-bg-primary);
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
    background: none;
    border: none;
    padding: var(--padding-none);
    line-height: 1;
}

.hd-modal-close:hover {
    color: var(--color-primary);
}

.wa-footer-container {
    padding: 1rem 2rem !important;
}

@media (max-width: 768px) {
    .hd-container {
        flex-direction: column;
        height: var(--height-auto);
    }

    .hd-sidebar {
        width: var(--width-full);
        position: relative;
        height: var(--height-auto);
    }

    .hd-content {
        height: var(--height-auto);
    }

    .hd-content-spacing {
        padding: 1rem;
    }

    .hd-section img {
        padding: 0.5rem;
        max-width: 100%;
        height: 100%;
        border: none;
    }

    .modal img {
        width: 100%;
        border: none;
    }

    .hd-nav-item.hd-active {
        background: none;
        border-left-color: var(--color-transparent);
    }
}