/* ==========================================================================
   Justine 2026 — Responsive Overrides
   Breakpoints align with Themify settings:
   - Mobile: < 680px (setting-customizer_responsive_design_mobile)
   - Tablet: 680px – 1024px
   - Desktop: > 1024px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet adjustments (680px – 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        --space-page: clamp(1rem, 4vw, 2rem);
        --space-section: clamp(1.5rem, 5vw, 3rem);
    }

    /* Header collapses to hamburger */
    #main-nav-wrap,
    #main-nav {
        display: none;
    }

    .menu-toggle,
    .mobile-menu-toggle,
    #menu-icon {
        display: inline-flex;
    }

    #header .pagewidth,
    #header .page-width,
    .header-inner {
        justify-content: space-between;
    }

    #site-logo img,
    .site-logo img {
        max-height: 40px;
    }

    /* Publication grid: 2 columns */
    .publication-grid,
    .posts-grid,
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    /* Marginalia no longer floats */
    .marginalia {
        float: none;
        width: auto;
        margin: var(--space-lg) 0;
    }

    /* Footer columns: 2 then stack */
    .footer-widgets {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Mobile adjustments (< 680px)
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
    :root {
        --space-page: 1rem;
        --space-section: 2rem;
        --space-content: 1rem;
    }

    body,
    #body {
        font-size: 1rem;
        line-height: 1.65;
    }

    h1,
    .h1 {
        font-size: 2rem;
    }

    h2,
    .h2 {
        font-size: 1.5rem;
    }

    h3,
    .h3 {
        font-size: 1.25rem;
    }

    /* Header simplified */
    #header {
        padding: var(--space-sm) 0;
    }

    #header .pagewidth,
    #header .page-width,
    .header-inner {
        padding: 0 var(--space-content);
        gap: var(--space-sm);
    }

    #site-logo img,
    .site-logo img {
        max-height: 36px;
    }

    .header-right,
    .header-extras {
        gap: var(--space-sm);
    }

    .header-social {
        display: none;
    }

    /* Show menu item spans on mobile (preserve old theme quirk) */
    #mobile-menu .menu-item span,
    .mobile-menu-panel .menu-item span {
        visibility: visible;
        display: inline;
    }

    /* Archive / single spacing */
    .archive-header,
    .page-header,
    .category-header,
    .single .post,
    .single-post .post,
    article.type-post,
    article.type-page {
        padding-top: var(--space-xl);
    }

    .archive-title,
    .page-title,
    .category-title,
    .single .entry-title,
    .single-post .entry-title,
    article .entry-title {
        font-size: 1.75rem;
    }

    /* Single column grids */
    .publication-grid,
    .posts-grid,
    .archive-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .publication-list li,
    .posts-list li {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .publication-list .list-number,
    .posts-list .list-number {
        text-align: left;
    }

    /* Filter pills wrap */
    .filter-nav,
    .taxonomy-filter,
    .section-filter {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-sm);
        -webkit-overflow-scrolling: touch;
    }

    .filter-nav a,
    .taxonomy-filter a,
    .section-filter a {
        white-space: nowrap;
    }

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

    .footer-nav ul {
        flex-direction: column;
        gap: var(--space-sm);
    }

    /* Download actions stack */
    .download-actions,
    .download-buttons {
        flex-direction: column;
    }

    .download-actions a,
    .download-buttons a {
        justify-content: center;
    }

    /* Post nav stack */
    .post-nav,
    .post-navigation,
    .nav-post {
        flex-direction: column;
    }

    .post-nav .next,
    .post-navigation .next,
    .nav-post .next {
        text-align: left;
        align-items: flex-start;
    }

    /* Related posts single column */
    .related-posts .publication-grid,
    .related-articles .publication-grid {
        grid-template-columns: 1fr;
    }

    /* Toolbar stacks */
    .archive-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .archive-toolbar .search-form {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   Small mobile / narrow screens (< 400px)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
    h1,
    .h1 {
        font-size: 1.75rem;
    }

    h2,
    .h2 {
        font-size: 1.375rem;
    }

    .single .entry-title,
    .single-post .entry-title,
    article .entry-title {
        font-size: 1.5rem;
    }

    .card-title,
    .post-card h2,
    .post-card .entry-title,
    .archive-card h2,
    .archive-card .entry-title {
        font-size: 1.125rem;
    }
}