/* ============================================================
   GoTools - Responsive Design
   Mobile-first responsive breakpoints
   ============================================================ */

/* ===== TABLET (768px - 1200px) ===== */
@media (max-width: 1200px) {
    .sidebar {
        width: var(--sidebar-collapsed-width);
    }

    .sidebar .logo-text-wrap,
    .sidebar .nav-text,
    .sidebar .nav-badge,
    .sidebar .nav-arrow,
    .sidebar .sidebar-search,
    .sidebar .sidebar-footer span,
    .sidebar .admin-link span {
        display: none;
    }

    .sidebar .nav-item,
    .sidebar .nav-group-header {
        justify-content: center;
        padding: 10px;
    }

    .sidebar .nav-submenu {
        max-height: 0 !important;
        overflow: hidden;
    }

    .sidebar .nav-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .sidebar .sidebar-logo {
        justify-content: center;
        padding: 16px 10px;
    }

    .sidebar .logo-link {
        justify-content: center;
    }

    .sidebar .sidebar-footer {
        padding: 12px 10px;
    }

    .sidebar .admin-link {
        justify-content: center;
        padding: 10px;
    }

    .sidebar .sidebar-collapse-btn {
        display: none;
    }

    .main-content {
        margin-left: var(--sidebar-collapsed-width);
    }

    /* Show tooltip on hover */
    .sidebar .nav-item,
    .sidebar .nav-group-header {
        position: relative;
    }

    .sidebar .nav-group-header::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--gray-900);
        color: var(--white);
        padding: 8px 14px;
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all var(--transition-fast);
        z-index: 200;
    }

    .sidebar .nav-group-header:hover::after {
        opacity: 1;
        visibility: visible;
    }

    /* Small arrow indicator on collapsed sidebar for expandable groups */
    .sidebar .nav-group-header::before {
        content: '';
        position: absolute;
        bottom: 4px;
        right: 10px;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid var(--gray-400);
        transition: all var(--transition-fast);
        z-index: 2;
    }

    .sidebar .nav-group.open > .nav-group-header::before {
        border-top-color: var(--primary);
        transform: rotate(180deg);
    }

    .sidebar .nav-group-header:hover::before {
        border-top-color: var(--primary);
    }

    .hero-section h1 { font-size: 2rem; }
    .hero-stats { gap: 24px; }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .categories-grid, .tools-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ===== MOBILE & TABLET (max-width: 991px) ===== */
@media (max-width: 991px) {
    :root {
        --sidebar-width: 280px;
    }

    /* Show mobile header */
    .mobile-header {
        display: flex;
    }

    /* Show mobile bottom nav */
    .mobile-bottom-nav {
        display: flex;
    }

    /* Show mobile search overlay */
    .mobile-search-overlay {
        display: block;
    }

    /* Hide desktop top bar */
    .top-bar {
        display: none;
    }

    /* Sidebar - off-screen, slide in from left */
    .sidebar {
        width: var(--sidebar-width);
        transform: translateX(-100%);
        box-shadow: none;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-2xl);
    }

    /* Restore full sidebar on mobile when open */
    .sidebar.open .logo-text-wrap,
    .sidebar.open .nav-text,
    .sidebar.open .nav-badge,
    .sidebar.open .nav-arrow,
    .sidebar.open .sidebar-search,
    .sidebar.open .sidebar-footer span,
    .sidebar.open .admin-link span,
    .sidebar.open .sidebar-collapse-btn {
        display: flex;
    }

    .sidebar.open .nav-text,
    .sidebar.open .admin-link span {
        display: inline;
    }

    .sidebar.open .nav-item,
    .sidebar.open .nav-group-header {
        justify-content: flex-start;
        padding: 10px 14px;
    }

    .sidebar.open .nav-submenu {
        max-height: none !important;
    }

    .sidebar.open .nav-group.open > .nav-submenu {
        max-height: 1000px !important;
    }

    .sidebar.open .nav-group:not(.open) > .nav-submenu {
        max-height: 0 !important;
    }

    .sidebar.open .sidebar-logo {
        justify-content: flex-start;
        padding: 16px 20px;
    }

    .sidebar.open .logo-link {
        justify-content: flex-start;
    }

    .sidebar.open .sidebar-footer {
        padding: 12px 16px;
    }

    .sidebar.open .admin-link {
        justify-content: flex-start;
        padding: 10px 14px;
    }

    .sidebar.open .sidebar-search {
        display: block;
    }

    /* Hide the small arrow indicator when sidebar is fully open (real arrow is visible) */
    .sidebar.open .nav-group-header::before {
        display: none;
    }

    /* Main content full width on mobile */
    .main-content {
        margin-left: 0;
        padding-top: 56px;
        padding-bottom: 64px;
    }

    .content-area {
        padding: 16px;
    }

    .ad-container {
        padding: 0 16px;
    }

    /* Hero section adjustments */
    .hero-section {
        padding: 28px 20px;
        border-radius: var(--radius-lg);
    }

    .hero-section h1 {
        font-size: 1.5rem;
    }

    .hero-section p {
        font-size: 0.9375rem;
    }

    .hero-search {
        flex-direction: column;
        padding: 4px;
        border-radius: var(--radius-lg);
    }

    .hero-search input {
        width: 100%;
        text-align: center;
    }

    .hero-search-btn {
        width: 100%;
        border-radius: var(--radius-md);
    }

    .hero-stats {
        gap: 16px;
        justify-content: center;
    }

    .hero-stat-number {
        font-size: 1.375rem;
    }

    /* Category grid & Tool grid */
    .categories-grid, .tools-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    .category-card, .tool-card {
        padding: 10px 8px !important;
        gap: 8px !important;
        border-radius: var(--radius-lg) !important;
    }

    .category-icon, .tool-card-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
        border-radius: 11px !important;
        margin: 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    }

    .category-info, .tool-card-info {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .category-info h3, .tool-card h4 {
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1px !important;
    }

    .category-info p, .tool-card p {
        font-size: 0.62rem !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .category-count {
        display: none !important;
    }

    /* Job cards */
    .job-card {
        padding: 16px;
        flex-wrap: wrap;
    }

    .job-card-meta {
        gap: 8px;
    }

    /* Footer */
    .footer {
        padding: 32px 16px 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-bottom {
        padding: 16px 0;
        margin-top: 24px;
    }

    /* Blog grid */
    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Section header */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Contact form grid */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Newsletter */
    .newsletter-section {
        padding: 28px 20px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
    }

    /* Scroll top button */
    .scroll-top-btn {
        bottom: 80px;
        right: 16px;
    }

    /* Toast */
    .toast-container {
        top: 64px;
        right: 12px;
        left: 12px;
    }

    .toast {
        min-width: auto;
        max-width: 100%;
    }

    /* Page headers */
    .page-header h1 {
        font-size: 1.375rem;
    }

    /* Related tools */
    .tool-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
    }

    /* Tables */
    .table-wrap {
        margin: 0 -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
    .hero-section h1 {
        font-size: 1.25rem;
    }

    .hero-section p {
        font-size: 0.8125rem;
    }

    .hero-stats {
        flex-direction: column;
        gap: 12px;
    }

    .tools-grid, .categories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .tool-card, .category-card {
        padding: 8px 6px !important;
        gap: 6px !important;
        border-radius: 12px !important;
    }

    .tool-card-icon, .category-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 1.05rem !important;
        border-radius: 9px !important;
        margin: 0 !important;
    }

    .tool-card h4, .category-info h3 {
        font-size: 0.7rem !important;
    }

    .tool-card p, .category-info p {
        font-size: 0.58rem !important;
    }

    .tool-related-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.0625rem; }

    .section-title {
        font-size: 1.125rem;
    }

    .bottom-nav-item span {
        font-size: 0.5625rem;
    }
}

/* ===== LARGE DESKTOP (min-width: 1400px) ===== */
@media (min-width: 1400px) {
    .content-area {
        padding: 28px 40px;
    }

    .categories-grid, .tools-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ===== VERY LARGE DESKTOP (min-width: 1800px) ===== */
@media (min-width: 1800px) {
    .categories-grid, .tools-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .sidebar,
    .mobile-header,
    .mobile-bottom-nav,
    .sidebar-overlay,
    .scroll-top-btn,
    .toast-container,
    .ad-container,
    .top-bar,
    .mobile-search-overlay {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .content-area {
        padding: 0 !important;
    }

    body {
        background: white;
        color: black;
    }

    .tool-ui {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ===== HOVER MEDIA QUERY (for touch devices) ===== */
@media (hover: none) {
    .tool-card:hover {
        transform: none;
        box-shadow: var(--shadow-xs);
    }

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

    .tool-btn-primary:hover {
        transform: none;
    }

    .nav-item:hover,
    .nav-group-header:hover {
        background: transparent;
    }
}

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

    .preloader-icon {
        animation: none;
    }

    .preloader-bar-fill {
        animation: none;
        width: 60%;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 991px) and (orientation: landscape) {
    .mobile-bottom-nav {
        height: 52px;
    }

    .bottom-nav-item svg {
        width: 16px;
        height: 16px;
    }

    .hero-section {
        padding: 20px;
    }

    .hero-section h1 {
        font-size: 1.25rem;
    }
}