/*
 * HTML Book Module - Responsive Design
 * Media queries for Desktop/Tablet/Mobile breakpoints
 */

/* ======================================
   DESKTOP: 1200px and above (Default)
   ====================================== */
/* All default styles in modern-layout.css apply here */

/* ======================================
   TABLET: 768px - 1199px
   ====================================== */
@media (max-width: 1199px) {
    :root {
        --sidebar-width: 250px;
        --spacing-unit: 15px;
    }

    /* 2-column layout: Sidebar + Content (hide TOC) */
    .html-book-container {
        grid-template-columns: var(--sidebar-width) 1fr;
        grid-template-areas: "sidebar content";
        gap: 15px;
    }

    .toc-sidebar {
        display: none;
    }

    .header-title {
        font-size: 20px;
    }

    .category-header {
        font-size: 24px;
    }

    .tag-name {
        font-size: 18px;
    }
}

/* ======================================
   MOBILE: 767px and below
   ====================================== */
@media (max-width: 767px) {
    :root {
        --sidebar-width: 280px;
        --header-height: 60px;
        --spacing-unit: 10px;
    }

    /* Single column layout */
    .html-book-container {
        grid-template-columns: 1fr;
        grid-template-areas: "content";
        padding: 10px;
    }

    /* Header adjustments */
    .html-book-header {
        height: var(--header-height);
        padding: 0 10px;
    }

    .header-title {
        font-size: 18px;
    }

    .header-controls {
        gap: 10px;
    }

    /* Home button mobile adjustments */
    .home-btn {
        width: 36px;
        height: 36px;
        margin-right: 8px;
    }

    .home-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Sidebar as slide-in menu */
    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: var(--sidebar-width);
        height: 100vh;
        max-height: 100vh;
        z-index: 1000;
        transition: left var(--transition-speed);
        border-radius: 0;
        padding-top: var(--header-height);
    }

    .sidebar.open {
        left: 0;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
    }

    /* Show hamburger button */
    .hamburger-btn {
        display: flex;
    }

    /* Content area adjustments */
    .content-area {
        padding: 10px;
    }

    .category-header {
        font-size: 22px;
    }

    .category-description {
        font-size: 13px;
    }

    .tag-card {
        padding: 15px;
    }

    .tag-name {
        font-size: 16px;
    }

    .tag-description {
        font-size: 13px;
    }

    /* Code blocks - horizontal scroll */
    pre {
        font-size: 12px;
        padding: 10px;
    }

    /* Buttons - full width on mobile */
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Search input */
    .search-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* ======================================
   SMALL MOBILE: 480px and below
   ====================================== */
@media (max-width: 480px) {
    :root {
        --sidebar-width: 260px;
        --spacing-unit: 8px;
    }

    .html-book-header {
        padding: 0 8px;
    }

    .header-title {
        font-size: 16px;
    }

    .category-header {
        font-size: 20px;
    }

    .tag-name {
        font-size: 15px;
    }

    .tag-description {
        font-size: 12px;
    }

    pre {
        font-size: 11px;
        padding: 8px;
    }

    .category-toggle {
        padding: 10px 12px;
        font-size: 14px;
    }

    .tag-link {
        padding: 6px 12px 6px 30px;
        font-size: 13px;
    }
}

/* ======================================
   LANDSCAPE MODE
   ====================================== */
@media (max-width: 767px) and (orientation: landscape) {
    .sidebar {
        width: 240px;
        left: -240px;
    }

    .sidebar.open {
        left: 0;
    }

    .category-toggle {
        padding: 8px 10px;
    }

    .tag-list {
        max-height: 300px;
        overflow-y: auto;
    }
}

/* ======================================
   HIGH DPI / RETINA SCREENS
   ====================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp borders on high DPI */
    .card,
    .tag-card,
    .sidebar,
    .toc-sidebar {
        border-width: 0.5px;
    }
}

/* ======================================
   TOUCH DEVICE OPTIMIZATIONS
   ====================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets for touch */
    .btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    .category-toggle {
        min-height: 44px;
    }

    .tag-link {
        min-height: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Remove hover effects on touch devices */
    .tag-link:hover {
        padding-left: 35px;
    }

    .category-toggle:hover {
        transform: none;
    }

    .card:hover {
        transform: none;
    }
}

/* ======================================
   REDUCED MOTION
   ====================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ======================================
   DARK MODE PREFERENCE (System)
   ====================================== */
/* Note: This will be overridden by manual theme toggle */
@media (prefers-color-scheme: dark) {
    /* Theme styles loaded from theme-dark.css */
}

/* ======================================
   PRINT OPTIMIZATIONS
   ====================================== */
@media print {
    @page {
        margin: 2cm;
    }

    .html-book-container {
        display: block;
    }

    .sidebar,
    .toc-sidebar,
    .html-book-header,
    .hamburger-btn,
    .sidebar-overlay,
    .btn {
        display: none !important;
    }

    .content-area {
        padding: 0;
    }

    .tag-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    pre {
        page-break-inside: avoid;
        border: 1px solid #ccc;
    }

    a {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}