/*
 * Modern Journal Theme - Mobile Responsive Enhancements
 * Comprehensive mobile-first responsive design
 * Version: 1.0.3.1
 */

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header & Navigation (Mobile) ──────────────────────────────── */
@media (max-width: 1024px) {
    .mjt-header__container {
        padding: 0 1rem;
    }
    
    .mjt-masthead {
        padding: 0.75rem 0;
    }
    
    .mjt-brand {
        min-height: 60px;
    }
}

@media (max-width: 768px) {
    .mjt-header__container {
        flex-direction: column;
        padding: 0 0.75rem;
    }
    
    .mjt-masthead {
        padding: 0.5rem 0;
    }
    
    .mjt-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        min-height: auto;
    }
    
    .mjt-topbar__right {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    
    /* Hamburger menu for mobile */
    .mjt-nav-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        color: var(--mjt-on-header);
    }
    
    .mjt-nav-toggle svg {
        width: 24px;
        height: 24px;
    }
    
    .mjt-primary-nav {
        display: none;
        width: 100%;
        order: 3;
    }
    
    .mjt-primary-nav.is-open {
        display: block;
    }
    
    .mjt-primary-nav ul {
        flex-direction: column;
        gap: 0;
    }
    
    .mjt-primary-nav li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .mjt-primary-nav a {
        display: block;
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 480px) {
    .mjt-header__container {
        padding: 0 0.5rem;
    }
    
    .mjt-topbar__right a {
        height: 1.5rem;
        width: 1.5rem;
        font-size: 0.75rem;
    }
}

/* ── Hero Banner (Mobile) ─────────────────────────────────────── */
@media (max-width: 768px) {
    .mjt-showcase {
        min-height: 300px;
    }
    
    .mjt-showcase__overlay {
        padding: 1.5rem 1rem;
    }
    
    .mjt-showcase__title {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    .mjt-showcase__subtitle {
        font-size: 1rem;
    }
    
    .mjt-showcase__cta {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .mjt-showcase__cta a,
    .mjt-showcase__cta button {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .mjt-showcase {
        min-height: 250px;
    }
    
    .mjt-showcase__title {
        font-size: 1.5rem;
    }
    
    .mjt-showcase__subtitle {
        font-size: 0.9rem;
    }
}

/* ── Sidebar (Mobile) ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pkp_structure_sidebar {
        width: 100%;
        order: 2;
    }
    
    .pkp_structure_content {
        width: 100%;
        order: 1;
    }
    
    .mjt-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .mjt-sidebar {
        grid-template-columns: 1fr;
    }
    
    .mjt-sidebar-section {
        margin-bottom: 1rem;
    }
    
    /* Accordion-style sidebar on mobile */
    .mjt-sidebar-section__title {
        cursor: pointer;
        padding: 0.75rem;
        background: var(--mjt-surface);
        border-radius: var(--mjt-radius-md);
        margin-bottom: 0.5rem;
    }
    
    .mjt-sidebar-section__title::after {
        content: '▼';
        float: right;
        transition: transform 0.2s;
    }
    
    .mjt-sidebar-section.is-collapsed .mjt-sidebar-section__title::after {
        transform: rotate(-90deg);
    }
    
    .mjt-sidebar-section__content {
        display: none;
    }
    
    .mjt-sidebar-section:not(.is-collapsed) .mjt-sidebar-section__content {
        display: block;
    }
}

/* ── Article Cards (Mobile) ───────────────────────────────────── */
@media (max-width: 768px) {
    .mjt-issue-toc {
        padding: 1rem 0.75rem;
    }
    
    .mjt-article-card {
        flex-direction: column;
    }
    
    .mjt-article-card__cover {
        width: 100%;
        max-height: 200px;
    }
    
    .mjt-article-card__content {
        padding: 1rem;
    }
    
    .mjt-article-card__title {
        font-size: 1.1rem;
        line-height: 1.3;
    }
    
    .mjt-article-card__authors {
        font-size: 0.85rem;
    }
    
    .mjt-article-card__actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .mjt-article-card__actions a,
    .mjt-article-card__actions button {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .mjt-issue-toc {
        padding: 0.75rem 0.5rem;
    }
    
    .mjt-article-card__title {
        font-size: 1rem;
    }
    
    .mjt-article-card__meta {
        font-size: 0.8rem;
    }
}

/* ── Article Page (Mobile) ────────────────────────────────────── */
@media (max-width: 768px) {
    .article-page {
        padding: 1rem 0.75rem;
    }
    
    .article-page .article-title {
        font-size: 1.5rem;
        line-height: 1.25;
    }
    
    .article-page .article-authors {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .article-page .article-abstract {
        padding: 1rem;
    }
    
    .article-page .article-abstract h2 {
        font-size: 1.1rem;
    }
    
    .article-page .article-body {
        padding: 1rem;
        font-size: 0.95rem;
    }
    
    .article-page .article-body h2 {
        font-size: 1.2rem;
    }
    
    .article-page .article-body h3 {
        font-size: 1.05rem;
    }
    
    /* Citation tools mobile */
    .article-page .citation-tools {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .article-page .citation-tools button {
        width: 100%;
    }
    
    /* Metrics display */
    .mjt-article-metrics {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .mjt-metric-item {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .article-page {
        padding: 0.75rem 0.5rem;
    }
    
    .article-page .article-title {
        font-size: 1.3rem;
    }
    
    .article-page .article-abstract {
        padding: 0.75rem;
    }
    
    .article-page .article-body {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}

/* ── Donation Page (Mobile) ───────────────────────────────────── */
@media (max-width: 768px) {
    .mjt-donate-page {
        padding: 1rem 0.75rem;
    }
    
    .mjt-donate-page__title {
        font-size: 1.75rem;
    }
    
    .mjt-donate-page__description {
        font-size: 0.95rem;
    }
    
    .mjt-donation-amounts {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .mjt-donation-custom-amount {
        flex-direction: column;
    }
    
    .mjt-donation-custom-amount input {
        width: 100%;
    }
    
    .mjt-gateway-list {
        grid-template-columns: 1fr;
    }
    
    .mjt-gateway-card {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .mjt-donate-page {
        padding: 0.75rem 0.5rem;
    }
    
    .mjt-donate-page__title {
        font-size: 1.5rem;
    }
    
    .mjt-donation-amounts {
        grid-template-columns: 1fr;
    }
    
    .mjt-donation-form__submit {
        width: 100%;
    }
}

/* ── Editorial Team (Mobile) ──────────────────────────────────── */
@media (max-width: 768px) {
    .mjt-masthead-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    .mjt-masthead-card {
        padding: 1rem;
    }
    
    .mjt-masthead-card__avatar {
        width: 80px;
        height: 80px;
    }
    
    .mjt-masthead-card__name {
        font-size: 0.95rem;
    }
    
    .mjt-masthead-card__role {
        font-size: 0.8rem;
    }
    
    .mjt-masthead-card__social {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .mjt-masthead-grid {
        grid-template-columns: 1fr;
    }
    
    .mjt-masthead-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ── Issue Page (Mobile) ──────────────────────────────────────── */
@media (max-width: 768px) {
    .mjt-issue-page .mjt-issue-hero {
        padding: 1.5rem 1rem;
    }
    
    .mjt-issue-page .mjt-issue-hero__title {
        font-size: 1.5rem;
    }
    
    .mjt-issue-page .mjt-issue-hero__description {
        font-size: 0.95rem;
    }
    
    .mjt-issue-page .mjt-issue-cover {
        max-width: 200px;
        margin: 0 auto 1rem;
    }
    
    .mjt-issue-page .mjt-issue-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .mjt-issue-page .mjt-issue-hero {
        padding: 1rem 0.75rem;
    }
    
    .mjt-issue-page .mjt-issue-hero__title {
        font-size: 1.3rem;
    }
}

/* ── Footer (Mobile) ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .mjt-footer {
        padding: 2rem 1rem 1rem;
    }
    
    .mjt-footer__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .mjt-footer__section {
        text-align: center;
    }
    
    .mjt-footer__social {
        justify-content: center;
    }
    
    .mjt-footer__bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

/* ── Forms & Inputs (Mobile) ──────────────────────────────────── */
@media (max-width: 768px) {
    /* Larger touch targets for mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    input[type="tel"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
        min-height: 44px; /* Minimum touch target size */
    }
    
    button,
    [role="button"],
    a.button {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* Form layouts */
    .mjt-form-row {
        flex-direction: column;
    }
    
    .mjt-form-row > * {
        width: 100%;
    }
}

/* ── Tables (Mobile) ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .mjt-table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
    }
    
    /* Card-style tables on mobile */
    .mjt-table--cards {
        display: block;
    }
    
    .mjt-table--cards thead {
        display: none;
    }
    
    .mjt-table--cards tbody,
    .mjt-table--cards tr,
    .mjt-table--cards td {
        display: block;
        width: 100%;
    }
    
    .mjt-table--cards tr {
        margin-bottom: 1rem;
        padding: 1rem;
        background: var(--mjt-surface);
        border-radius: var(--mjt-radius-md);
        box-shadow: var(--mjt-shadow-sm);
    }
    
    .mjt-table--cards td {
        text-align: right;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--mjt-border);
    }
    
    .mjt-table--cards td:last-child {
        border-bottom: none;
    }
    
    .mjt-table--cards td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: var(--mjt-muted);
    }
}

/* ── Modal & Dialogs (Mobile) ─────────────────────────────────── */
@media (max-width: 768px) {
    .mjt-modal {
        padding: 1rem;
    }
    
    .mjt-modal__content {
        max-width: 100%;
        margin: 0;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .mjt-modal__header {
        padding: 1rem;
    }
    
    .mjt-modal__body {
        padding: 1rem;
    }
    
    .mjt-modal__footer {
        flex-direction: column-reverse;
    }
    
    .mjt-modal__footer button {
        width: 100%;
    }
}

/* ── Grid Layouts (Mobile) ────────────────────────────────────── */
@media (max-width: 768px) {
    .mjt-grid {
        grid-template-columns: 1fr;
    }
    
    .mjt-grid--2-cols,
    .mjt-grid--3-cols,
    .mjt-grid--4-cols {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .mjt-grid--2-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .mjt-grid--3-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mjt-grid--4-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Typography (Mobile) ──────────────────────────────────────── */
@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.25;
    }
    
    h3 {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    
    h4 {
        font-size: 1.1rem;
    }
    
    p {
        font-size: 0.95rem;
    }
    
    small {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    h3 {
        font-size: 1.15rem;
    }
    
    p {
        font-size: 0.9rem;
    }
}

/* ── Spacing (Mobile) ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .mjt-container {
        padding: 0 0.75rem;
    }
    
    .mjt-section {
        padding: 1.5rem 0;
    }
    
    .mjt-page {
        padding: 1rem 0;
    }
}

@media (max-width: 480px) {
    .mjt-container {
        padding: 0 0.5rem;
    }
    
    .mjt-section {
        padding: 1rem 0;
    }
}

/* ── Touch Optimizations ──────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    a:hover,
    button:hover {
        opacity: 1;
    }
    
    /* Active state for touch */
    a:active,
    button:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
    
    /* Remove tap highlight on mobile */
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ── Landscape Mode (Mobile) ──────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
    .mjt-showcase {
        min-height: 200px;
    }
    
    .mjt-showcase__overlay {
        padding: 1rem;
    }
    
    .mjt-showcase__title {
        font-size: 1.5rem;
    }
    
    /* Reduce header height in landscape */
    .mjt-masthead {
        padding: 0.35rem 0;
    }
}

/* ── Print Styles (Mobile-Friendly) ───────────────────────────── */
@media print {
    .mjt-header,
    .mjt-footer,
    .mjt-sidebar,
    .mjt-nav-toggle,
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* ── Accessibility: 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;
    }
}

/* ── Accessibility: High Contrast ─────────────────────────────── */
@media (prefers-contrast: high) {
    :root {
        --mjt-border: #000000;
        --mjt-muted: #000000;
    }
    
    a {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }
    
    button,
    [role="button"] {
        border: 2px solid currentColor;
    }
}

/* ── Dark Mode Support ────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --mjt-bg: #0f172a;
        --mjt-surface: #1e293b;
        --mjt-muted: #94a3b8;
        --mjt-border: #334155;
        --mjt-text: #f1f5f9;
    }
}