/* --- 2026 Mobile Overrides (Screen Width < 768px) --- */

:root {
    --base-size: 16px;
}

/* --- Layout Adjustments --- */
body {
    padding-top: 50px;
}

.hero-section {
    min-height: 300px;
    padding: 40px 0;
}

.sub-header {
    min-height: 180px;
    padding: 30px 0;
}

.logo-main {
    max-width: 85% !important;
    height: 180px !important;
}

.container {
    padding: 0 20px;
}

/* --- Grid & Stack Logic --- */
.performer-grid,
.schedule-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

/* -- Mobile map: full-screen map + bottom sheet -- */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
.map-page-layout {
    display: block !important;
    position: fixed !important;
    top: 60px; left: 0; right: 0; bottom: 0;
    height: calc(100vh - 60px) !important;
    height: calc(100dvh - 60px) !important; /* dvh updates on orientation change */
    overflow: hidden !important;
    max-width: 100vw !important;
}

#map-pane {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    flex: unset !important;
}

#map-container {
    width: 100% !important;
    height: 100% !important;
}

/* -- Bottom sheet -- */
#list-pane {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    width: 100% !important;
    box-sizing: border-box !important;
    height: calc(100vh - 60px) !important;
    height: calc(100dvh - 60px) !important;
    border-left: none !important;
    border-top: none !important;
    background: #fafaf8;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    display: flex !important;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    /* JS sets transform on load via snapTo('peek') */
    transform: translateY(200vh); /* hidden until JS runs */
    z-index: 500;
    overflow: hidden;
    overflow-x: hidden !important;
    will-change: transform;
}

/* These classes are markers only -- JS sets transform via style.transform directly */
#list-pane.sheet-peek  { /* peek:  ~82% vh */ }
#list-pane.sheet-card  { /* card:  ~46% vh */ }
#list-pane.sheet-full  { /* full:  4px      */ }

/* -- Sheet handle -- */
.sheet-handle {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px 8px;
    cursor: grab;
    background: #fafaf8;
    border-radius: 16px 16px 0 0;
    user-select: none;
    touch-action: none;
    border-bottom: 1px solid #eee;
}

.sheet-handle-pill {
    width: 36px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    margin-bottom: 8px;
}

.sheet-handle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.sheet-porch-count {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sheet-browse-btn {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-teal);
    background: none;
    border: 1.5px solid var(--color-teal);
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
}

/* -- Sheet scrollable content (touch behavior; flex+overflow defined in map.html) -- */
.sheet-content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#list-pane .map-filter-bar {
    flex-shrink: 0 !important;
    padding: 10px 12px 8px !important;
    gap: 6px !important;
    border-radius: 0 !important;
}
#list-pane .map-filter-bar-title {
    font-size: 0.85rem !important;
}

.nearby-radius-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Leaflet below sheet */
.leaflet-bottom, .leaflet-control-zoom {
    z-index: 450 !important;
}

/* --- Typography Scaling --- */
h1, .display-font {
    font-size: 2.25rem !important;
    line-height: 1.2;
}

h2 {
    font-size: 1.75rem !important;
    margin: 1.5rem 0 1rem;
}

h3 {
    font-size: 1.3rem !important;
}

.content-area p {
    font-size: 1.1rem !important;
    max-width: 100%;
}

.sidebar-header {
    margin-top: 20px;
}

/* --- MOB1: Mobile hamburger nav --- */
.nav-hamburger {
    display: flex !important;
}

.nav-links {
    display: none !important;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 8px 0 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 999;
    border-top: 2px solid var(--color-teal);
    list-style: none;
    margin: 0;
}

.nav-links.nav-open {
    display: flex !important;
}

.nav-links li {
    width: 100%;
}

.nav-links a {
    display: block !important;
    padding: 13px 24px;
    font-size: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.nav-links li:last-child a {
    border-bottom: none;
}

.nav-links a.nav-outline,
.nav-links a.active-highlight {
    margin: 6px 16px !important;
    width: calc(100% - 32px) !important;
    text-align: center;
    border-radius: 4px;
    display: block !important;
    box-sizing: border-box;
}
.nav-links a.nav-outline {
    border: 2px solid var(--color-teal) !important;
}
.nav-links a.active-highlight {
    border: none !important;
}

/* Card list breathing room on mobile */
#schedule-list {
    padding-top: 8px !important;
}
.location-card:first-child {
    margin-top: 4px;
}
.location-card.active {
    scroll-margin-top: 8px;
}

/* Show sheet handle on mobile */
.sheet-handle { display: flex !important; }

/* -- Prevent iOS auto-zoom on input focus (requires font-size >= 16px) -- */
.map-search-input,
.map-filter-select,
#nearby-input,
#map-search,
input[type="text"],
input[type="search"],
select {
    font-size: 16px !important;
}
/* -- Footer -- */
.site-footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}
.footer-nav-cols {
    grid-template-columns: 1fr 1fr;
}
/* -- Home page -- */
.home-cards { grid-template-columns: 1fr; }
.home-intro h2 { font-size: 2rem; }
.home-intro-body { font-size: 1rem; }