/* ===================================
   Responsive Styles
   =================================== */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    :root {
        --width-sidebar: 240px;
        --max-width-content: 768px;
    }

    .content h1 {
        font-size: var(--font-size-2xl);
    }

    .content h2 {
        font-size: var(--font-size-xl);
    }

    .content h3 {
        font-size: var(--font-size-lg);
    }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    :root {
        --width-sidebar: 100%;
        --spacing-lg: 1rem;
        --spacing-2xl: 1.5rem;
    }

    .header-container {
        padding: 0 var(--spacing-md);
    }

    .logo {
        font-size: var(--font-size-lg);
    }

    .container {
        flex-direction: column;
    }

    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        max-height: 0;
        overflow: hidden;
        top: 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border-primary);
        padding: 0;
        transition: max-height var(--transition-base);
    }

    .sidebar.open {
        max-height: 400px;
        overflow-y: auto;
        padding: var(--spacing-md);
    }

    /* Mobile menu toggle */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: var(--spacing-sm);
        background: none;
        border: none;
        cursor: pointer;
    }

    .menu-toggle span {
        width: 24px;
        height: 2px;
        background-color: var(--color-text-primary);
        transition: all var(--transition-base);
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .main-content {
        margin-left: 0;
    }

    .content-wrapper {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .content h1 {
        font-size: var(--font-size-xl);
    }

    .content h2 {
        font-size: var(--font-size-lg);
    }

    .content h3 {
        font-size: var(--font-size-base);
    }

    .footer {
        margin-left: 0;
        padding: var(--spacing-md);
        font-size: var(--font-size-xs);
    }
}

/* Small Mobile (≤ 480px) */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .header-container {
        padding: 0 var(--spacing-sm);
    }

    .lang-text {
        display: none;
    }

    .content-wrapper {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .content img {
        border-radius: var(--radius-sm);
    }

    .content pre {
        padding: var(--spacing-sm);
        margin: var(--spacing-md) 0;
        border-radius: var(--radius-sm);
    }

    .alert {
        padding: var(--spacing-sm);
    }

    .card {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
    }
}

/* Print Styles */
@media print {
    .header,
    .sidebar,
    .footer,
    .language-selector {
        display: none;
    }

    .main-content {
        margin-left: 0;
    }

    .content-wrapper {
        max-width: 100%;
        padding: 0;
    }

    .content {
        color: #000;
    }

    .content a {
        color: #000;
        text-decoration: underline;
    }

    .content img {
        max-width: 100%;
        page-break-inside: avoid;
    }

    .content pre {
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }

    /* Show URLs after links */
    .content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        word-break: break-all;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-border-primary: #000;
        --color-border-secondary: #000;
    }

    .nav-link.active {
        border: 2px solid var(--color-primary);
    }
}

/* Landscape orientation for mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .sidebar {
        max-height: 200px;
    }

    .content-wrapper {
        padding: var(--spacing-md);
    }
}