/* ============================================
   BEREA - Mobile Styles (max-width: 768px)
   Loaded conditionally via media query
   ============================================ */

/* ============================================
   Navigation - Mobile
   ============================================ */

/* Show hamburger toggle */
.btn-icon.nav-toggle {
    display: flex;
    min-width: 44px;
    min-height: 44px;
}

/* Hide desktop nav links */
.nav-links.desktop-only {
    display: none;
}

.nav-inner {
    padding: 8px 12px;
}

.nav-brand {
    font-size: 1.1rem;
}

.brand-icon {
    font-size: 1.4rem;
}

/* ============================================
   Mobile Menu Overlay
   ============================================ */

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl);
    z-index: 9999;
}

.mobile-menu.open {
    display: flex;
}

.mobile-menu-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 12px;
    min-width: 48px;
    min-height: 48px;
}

.mobile-menu-link {
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    padding: var(--space-md) var(--space-2xl);
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.mobile-menu-link:hover,
.mobile-menu-link:active {
    background: var(--bg-secondary);
}

/* ============================================
   Hide Elements on Mobile
   ============================================ */

/* Hide fullscreen button - not useful on phones */
#fullscreenBtn {
    display: none;
}

/* Hide browse headings */
.browse-heading,
.browse-subheading {
    display: none;
}

/* ============================================
   Main Content Layout
   ============================================ */

.main {
    padding-top: 48px;
}

/* ============================================
   Read Page - Mobile
   ============================================ */

/* Controls scroll, nav stays sticky */
.read-header {
    position: static;
    padding: 8px 12px;
    padding-bottom: 0;
}

/* Add top spacing before controls */
.read-controls {
    flex-direction: column;
    gap: 8px;
    margin-top: var(--space-md);
    margin-bottom: 8px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.read-controls .control-select {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.875rem;
}

.reference-input-group {
    width: 100%;
    gap: var(--space-xs);
}

.reference-input-group .control-input {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.875rem;
}

.reference-input-group .btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.875rem;
}

/* Nav row stays sticky on mobile */
.read-nav {
    position: sticky;
    top: 48px;
    background: var(--bg-secondary);
    padding: 6px 0;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
    border-bottom: 1px solid var(--border-color);
    z-index: 40;
    gap: 4px;
    justify-content: space-between;
}

.read-nav .current-ref {
    font-size: 0.85rem;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}

/* Hide placeholder text on mobile */
.read-nav .current-ref.placeholder {
    display: none;
}

/* Icon-only nav buttons on mobile */
.read-nav .btn-ghost {
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
}

.read-nav .btn-label {
    display: none;
}

/* ============================================
   Scripture Content - Mobile
   ============================================ */

/* Scripture font respects user setting */
.scripture-content {
    font-size: var(--font-size-scripture);
}

/* Force full content width on mobile */
.scripture-container {
    max-width: 100%;
}

.scripture-container,
.search-results,
.dict-results {
    padding: var(--space-lg) 12px 12px;
}

/* Smaller cross-refs panel */
.cross-refs-panel {
    max-height: 35vh;
}

/* ============================================
   Browse Section - Mobile
   ============================================ */

.scripture-books {
    grid-template-columns: 1fr;
}

/* Larger touch targets for chapter buttons (min 44px) */
.chapter-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
}

/* Alphabet bar - grid layout for mobile */
.alphabet-bar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-sm);
    padding: var(--space-sm);
}

.alpha-btn {
    width: 100%;
    height: 2.75rem;
}

/* Larger touch targets for Strong's items */
.strongs-item {
    padding: var(--space-md);
    min-height: 2.75rem;
}

/* ============================================
   Hero Section - Mobile
   ============================================ */

.hero {
    padding: var(--space-xl);
}

.hero-title {
    flex-direction: column;
    gap: var(--space-sm);
}

.hero-actions {
    flex-direction: column;
}

.hero-actions .btn {
    width: 100%;
}

/* ============================================
   Stats - Mobile
   ============================================ */

.stats-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* ============================================
   Search - Mobile
   ============================================ */

.search-controls,
.dict-controls {
    flex-direction: column;
}

.search-input-group,
.dict-input-group {
    min-width: 100%;
}

/* Search type tabs - scrollable */
.search-type-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   Settings Panel - Mobile
   ============================================ */

.settings-panel {
    width: 100%;
}

/* ============================================
   Fullscreen Adjustments - Mobile
   ============================================ */

body.fullscreen .scripture-container {
    padding: var(--space-md);
}

/* ============================================
   Very Small Screens (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
    .brand-text {
        display: none;
    }

    /* Even smaller font on very small screens */
    .scripture-content {
        font-size: clamp(14px, 4vw, 20px);
    }

    /* Alphabet bar - 6 columns */
    .alphabet-bar {
        grid-template-columns: repeat(6, 1fr);
    }

    .stat-value {
        font-size: 2rem;
    }

    .feature-card {
        padding: var(--space-lg);
    }

    /* Compact search tabs */
    .search-tab span {
        display: none;
    }

    .search-tab {
        padding: var(--space-sm);
    }
}