/* ============================================================
   Mobile navigation bar + scrim, table scroll wrapper, helpers.
   Loaded after style.css and landing.css so it can override
   without modifying them.
   ============================================================ */

.app-mobile-bar { display: none; }
.app-scrim { display: none; }

/* Mobile-only: top bar with hamburger toggle for the sidebar.
   The .app-sidebar is positioned off-screen below 960px in landing.css. */
@media (max-width: 960px) {
  /* Reserve room for the fixed bar + the iOS notch */
  body.has-sidebar {
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
    width: 100%;
    overflow-x: hidden;
  }

  body.has-sidebar .main-content,
  body.has-sidebar .app-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    overflow-x: clip;
  }

  .app-mobile-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white, #fff);
    border-bottom: 1px solid var(--border, #e5e5e5);
    box-shadow: 0 1px 0 rgba(6, 27, 14, 0.02), 0 6px 18px rgba(6, 27, 14, 0.04);
    z-index: 1100;
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
  }

  .app-mobile-bar-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 10px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dark, #1a1a1a);
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .app-mobile-bar-toggle:hover { background: var(--jl-surface-container-low, #f3f3f3); }
  .app-mobile-bar-toggle:focus-visible {
    outline: 2px solid var(--green, #2D5A27);
    outline-offset: 2px;
  }
  .app-mobile-bar-toggle:active {
    background: var(--jl-surface-container-low, #f3f3f3);
    border-color: var(--green, #2D5A27);
  }

  .app-mobile-bar-toggle svg { display: block; }
  /* Animate hamburger ↔ X based on aria-expanded */
  .app-mobile-bar-toggle[aria-expanded="true"] svg line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
    transform-origin: center;
    transition: transform 0.18s ease;
  }
  .app-mobile-bar-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; transition: opacity 0.12s ease; }
  .app-mobile-bar-toggle[aria-expanded="true"] svg line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    transform-origin: center;
    transition: transform 0.18s ease;
  }
  .app-mobile-bar-toggle svg line {
    transition: transform 0.18s ease, opacity 0.12s ease;
    transform-origin: center;
  }

  .app-mobile-bar-brand {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--green, #2D5A27);
    letter-spacing: -0.02em;
    text-decoration: none;
    line-height: 1;
  }

  .app-mobile-bar-spacer { flex: 1; }

  /* Sidebar drawer: lift above the page, give it a soft shadow,
     respect iOS safe-area on the left edge when open. */
  .app-sidebar {
    z-index: 1300;
    box-shadow: 12px 0 40px rgba(6, 27, 14, 0.18);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* Hide the in-drawer logo block on mobile — the top bar already shows the brand */
  .app-sidebar .app-sidebar-logo { display: none; }
  /* Tighten the drawer nav rhythm on mobile */
  .app-sidebar .app-sidebar-nav { padding: 18px 0 24px; gap: 18px; }
  .app-sidebar .app-sidebar-section-label { padding: 0 16px; }

  /* Scrim covers content while drawer is open */
  .app-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 12, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 1200;
  }
  body.app-nav-open .app-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* Lock body scroll while drawer is open, without losing scrollbar width
     (mobile Safari has no visible scrollbar so this is fine) */
  body.app-nav-open { overflow: hidden; }

  /* Sticky page bars (.page-header) stack under the fixed mobile bar */
  .page-header {
    top: calc(56px + env(safe-area-inset-top, 0px));
  }

  .leaflet-container,
  .leaflet-pane,
  .leaflet-top,
  .leaflet-bottom {
    z-index: 0;
  }

  .ap-farm-card-map,
  .farm-card-map,
  #farm-map,
  #draw-map {
    isolation: isolate;
  }
}

@media (max-width: 900px) {
  .guide-hero,
  .contact-hero,
  .contact-layout,
  .guide-section--split,
  .about-hero,
  .about-split,
  .about-feature-grid,
  .about-team-section,
  .listing-hero,
  .farm-detail-layout,
  .mb-body,
  .mb-metrics {
    grid-template-columns: 1fr;
  }

  .guide-section-heading--sticky,
  .about-team-intro {
    position: static;
  }

  .guide-page,
  .contact-page,
  .about-page,
  .listing-page,
  .mb-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .about-page {
    padding: 32px clamp(22px, 6vw, 34px) 64px;
  }

  .guide-hero,
  .contact-hero,
  .contact-layout,
  .guide-section--split,
  .about-hero,
  .about-split,
  .about-feature-grid,
  .about-team-section,
  .listing-hero,
  .listing-form,
  .mb-shell,
  .mb-body,
  .mb-sidebar {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .guide-hero-copy,
  .contact-hero > div,
  .guide-hero-panel,
  .contact-response-card,
  .contact-card,
  .contact-help-card,
  .about-hero-copy,
  .about-hero-card,
  .about-section,
  .about-cta,
  .listing-hero-copy,
  .listing-publisher-card,
  .listing-section,
  .mb-card {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .guide-hero h1,
  .contact-hero h1,
  .about-hero-copy h2,
  .listing-hero h1,
  .mb-identity-name {
    overflow-wrap: anywhere;
  }

  .contact-submit,
  .guide-section-heading--sticky .btn,
  .about-hero-actions .btn-primary,
  .about-hero-actions .btn-outline,
  .about-cta-actions .btn-primary,
  .about-cta-actions .btn-outline {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .about-page {
    padding: 28px 20px 56px;
  }

  .about-hero-copy,
  .about-hero-card,
  .about-principles,
  .about-cta {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Reduced motion: kill drawer/scrim animations */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .app-scrim,
  .app-mobile-bar-toggle svg line {
    transition: none !important;
  }
}

/* ============================================================
   Table horizontal scroll wrapper (admin tables)
   ============================================================ */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius, 0.5rem);
}
.table-scroll table {
  min-width: 640px;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.table-scroll th,
.table-scroll td {
  white-space: nowrap;
}
.table-scroll td.cell-wrap,
.table-scroll th.cell-wrap {
  white-space: normal;
}

/* Admin row action buttons – give them real touch targets */
.admin-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-actions .btn-secondary,
.admin-actions .btn-danger {
  font-size: 0.85rem;
  padding: 0.45rem 0.85rem;
  min-height: 36px;
  border-radius: var(--radius, 0.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.admin-actions .btn-danger {
  border: 1px solid var(--jl-error, #b3261e);
  background: var(--bg-card, #fff);
  color: var(--jl-error, #b3261e);
}
@media (max-width: 480px) {
  .admin-actions .btn-secondary,
  .admin-actions .btn-danger {
    min-height: 40px;
    padding: 0.55rem 0.95rem;
  }
}

/* ============================================================
   Form input fixes — prevent iOS tap-to-zoom on inputs whose
   base font-size is below 16px. Codex round 1/2 added rules for
   .lp-input/.lp-textarea/.lp-select which are not used in any
   view; the actual classes are .lp-form-input / .lp-form-textarea
   (landing contact form, base 0.92rem) so we patch them here.
   ============================================================ */
@media (max-width: 768px) {
  .lp-form-input,
  .lp-form-textarea {
    font-size: 16px;
    min-height: 44px;
  }
  .lp-form-textarea {
    min-height: 120px;
  }
}

/* Visually-hidden helper for accessible labels */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}