/*
  global-mobile.css — StreetsEverywhere
  Site-wide mobile responsiveness fixes + yellow brand color tokens.
  Loaded in all pages. Complements per-page inline styles.
  Owner: no specific module — this is shared infrastructure.
  Does NOT own: page-specific layout, colors, or component-level behavior.
*/

/* ================================================================
   YELLOW BRAND TOKENS
   ================================================================ */
:root {
  --yellow: #FFD500;
  --yellow-light: #FFF4CC;
  --yellow-dark: #E6B800;
}

/* ================================================================
   GLOBAL RESETS FOR MOBILE
   ================================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Prevent horizontal overflow globally */
body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Tap targets: make sure all interactive elements are large enough */
button, a, input[type="submit"], input[type="button"], select {
  min-height: 36px;
}

/* Inputs: prevent iOS zoom on focus (requires font-size >= 16px) */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Images: always fluid */
img {
  max-width: 100%;
  height: auto;
}

/* ================================================================
   NAVIGATION — COMMON PATTERNS
   ================================================================ */
@media (max-width: 600px) {
  /* Shared nav pattern: nav-inner / nav-bar */
  .nav-inner,
  .nav-bar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hide secondary nav links that don't fit on small screens */
  .nav-links,
  .landing-nav-btns {
    display: none !important;
  }

  /* But make sure the auth-state nav portion still shows */
  .nav-auth-links,
  #navAuth {
    display: flex !important;
  }

  /* Nav logo stays readable */
  .nav-logo-text,
  .landing-nav-logo {
    font-size: 1rem !important;
  }

  /* Bus logo images in nav */
  .landing-nav-logo img,
  .nav-logo img,
  .nav-logo svg {
    width: 40px !important;
    height: auto !important;
  }
}

/* ================================================================
   HERO SECTIONS
   ================================================================ */
@media (max-width: 600px) {
  .page-hero,
  .cat-hero,
  .section-hero {
    padding: 40px 20px 32px !important;
  }

  .page-hero h1,
  .cat-hero h1 {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
    line-height: 1.25 !important;
  }

  .page-hero p,
  .cat-hero p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 375px) {
  .page-hero,
  .cat-hero {
    padding: 32px 16px 28px !important;
  }
}

/* ================================================================
   AUTH PAGES (login / register)
   ================================================================ */
@media (max-width: 480px) {
  .auth-card {
    padding: 28px 20px !important;
    margin: 12px !important;
  }

  .auth-card h1 {
    font-size: 1.5rem !important;
  }

  .auth-subtitle {
    font-size: 0.88rem !important;
  }
}

@media (max-width: 375px) {
  .auth-card {
    padding: 24px 16px !important;
    margin: 8px !important;
  }

  .auth-card h1 {
    font-size: 1.35rem !important;
  }
}

/* ================================================================
   FORMS
   ================================================================ */
@media (max-width: 600px) {
  /* Two-column form rows collapse to single column */
  .form-row-2,
  .form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Form cards */
  .card {
    padding: 24px 18px !important;
    border-radius: 14px !important;
  }

  /* Reduce page header spacing */
  .page-header,
  .page-top {
    margin-bottom: 20px !important;
  }

  .page-header h1,
  .page-top h1 {
    font-size: 1.5rem !important;
  }

  .page-wrapper {
    padding: 20px 16px 60px !important;
  }
}

@media (max-width: 375px) {
  .card {
    padding: 20px 14px !important;
  }

  .page-wrapper {
    padding: 16px 12px 60px !important;
  }

  .submit-btn,
  .btn-primary,
  .btn-post,
  .shops-btn-primary {
    padding: 12px 20px !important;
    font-size: 0.92rem !important;
  }
}

/* ================================================================
   PAYMENT PAGES
   ================================================================ */
@media (max-width: 600px) {
  /* Payment success/cancel cards */
  .card {
    padding: 36px 24px !important;
  }

  /* Buttons stack vertically */
  #actionButtons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #actionButtons .btn-primary,
  #actionButtons .btn-secondary,
  .btn-primary,
  .btn-secondary {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-right: 0 !important;
  }
}

/* ================================================================
   LISTING CARDS — GRIDS
   ================================================================ */
@media (max-width: 600px) {
  /* Classifieds / category listing grids */
  .listings-grid,
  .listing-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 12px !important;
  }

  /* Listing card images */
  .listing-img,
  .listing-card img {
    height: 130px !important;
    object-fit: cover !important;
  }
}

@media (max-width: 375px) {
  .listings-grid,
  .listing-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ================================================================
   MY LISTINGS PAGE
   ================================================================ */
@media (max-width: 500px) {
  /* Stats bar: stack from 2-col to 1-col */
  .stats-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Listing cards: wrap content */
  .listing-card {
    flex-wrap: wrap !important;
  }

  /* Action buttons stretch full width */
  .listing-actions {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .action-btn {
    flex: 1 !important;
    text-align: center !important;
    min-height: 36px !important;
  }
}

@media (max-width: 375px) {
  .stats-bar {
    grid-template-columns: 1fr !important;
  }

  .stat-card {
    padding: 14px 16px !important;
  }
}

/* ================================================================
   BROWSE / STATE / CITY PAGES
   ================================================================ */
@media (max-width: 600px) {
  /* State/city grid cards */
  .states-grid,
  .cities-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 8px !important;
  }

  /* Search bar layout */
  .city-search-wrap {
    max-width: 100% !important;
    padding: 4px 4px 4px 12px !important;
  }

  .city-search-btn {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
  }

  /* Breadcrumbs */
  .breadcrumb {
    padding: 8px 16px !important;
    font-size: 0.78rem !important;
  }
}

@media (max-width: 375px) {
  .states-grid,
  .cities-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 6px !important;
  }

  .state-card,
  .city-card {
    padding: 10px 10px !important;
  }
}

/* ================================================================
   CLASSIFIEDS PAGE
   ================================================================ */
@media (max-width: 480px) {
  /* Category filter scroll strip */
  .category-scroll,
  .bookshelf-grid {
    gap: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Spotlight section */
  .spotlight-inner {
    padding: 20px 16px !important;
  }

  /* Filter chips */
  .filter-chip,
  .cat-chip {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }
}

/* ================================================================
   HOMEPAGE SPECIFIC
   ================================================================ */
@media (max-width: 640px) {
  /* Category grid */
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Community section grid */
  .comm-grid,
  .comm-section-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Compare grid (pricing section) */
  .compare-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Manifesto padding */
  .manifesto {
    padding: 60px 24px !important;
  }

  /* Pricing section */
  .pricing-compare {
    padding: 60px 24px !important;
  }

  /* Categories section */
  .categories {
    padding: 60px 24px !important;
  }

  /* Sponsor banner compact */
  .sponsor-banner-inner {
    padding: 0 16px !important;
    min-height: 90px !important;
  }

  .sponsor-bus-wrap {
    width: 100px !important;
    height: 90px !important;
  }

  .sponsor-bus-img {
    width: 100px !important;
  }

  .sponsor-message {
    font-size: clamp(1rem, 3.5vw, 1.5rem) !important;
    min-height: auto !important;
  }

  .sponsor-cta {
    padding: 5px 12px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 375px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .manifesto {
    padding: 48px 16px !important;
  }

  .pricing-compare {
    padding: 48px 16px !important;
  }

  .categories {
    padding: 48px 16px !important;
  }

  .compare-card {
    padding: 24px 20px !important;
  }

  .manifesto h2,
  .pricing-compare h2,
  .categories h2 {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
  }
}

/* ================================================================
   BUS BANNER — MOBILE HEIGHT REDUCTION
   ================================================================ */
@media (max-width: 480px) {
  .bus-banner {
    height: 32px !important;
  }

  .bus-text {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }

  .bus-mascot-banner {
    width: 26px !important;
    height: 20px !important;
  }
}

/* ================================================================
   ADMIN / METRICS PAGES
   ================================================================ */
@media (max-width: 600px) {
  /* Admin header */
  header.admin-header,
  .page-top-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 14px 16px !important;
  }

  /* Admin table overflow */
  .table-wrap,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table {
    min-width: 500px !important;
  }

  /* Bar chart rows */
  .bar-label {
    width: 110px !important;
    font-size: 0.75rem !important;
  }
}

@media (max-width: 375px) {
  .bar-label {
    width: 90px !important;
    font-size: 0.7rem !important;
  }

  .bar-count {
    width: 36px !important;
    font-size: 0.68rem !important;
  }
}

/* ================================================================
   TOASTS — PREVENT OVERFLOW ON NARROW SCREENS
   ================================================================ */
@media (max-width: 480px) {
  .toast {
    left: 16px !important;
    right: 16px !important;
    transform: translateY(80px) !important;
    width: auto !important;
  }

  .toast.show {
    transform: translateY(0) !important;
  }
}

/* ================================================================
   FOOTER
   ================================================================ */
@media (max-width: 480px) {
  footer,
  .site-footer {
    padding: 24px 16px !important;
  }

  .footer-links {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ================================================================
   DATING, PARANORMAL, ARTISTS CORNER, SHOPS, FLOWER TRADER
   COMMUNITY PAGES — SHARED PATTERNS
   ================================================================ */
@media (max-width: 600px) {
  /* Coming soon cards */
  .coming-soon-card {
    padding: 36px 24px !important;
    border-radius: 16px !important;
  }

  .coming-soon-card h2 {
    font-size: 1.2rem !important;
  }

  .coming-soon-card p {
    font-size: 0.88rem !important;
  }

  /* Community section cards */
  .comm-section-card {
    border-radius: 14px !important;
  }

  /* Post button */
  .btn-post {
    padding: 10px 22px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 375px) {
  .coming-soon-card {
    padding: 28px 18px !important;
  }
}

/* ================================================================
   PREVENT WIDE ELEMENTS FROM OVERFLOWING
   ================================================================ */
@media (max-width: 480px) {
  /* Any element wider than viewport gets contained */
  .sponsor-banner-inner,
  .nav-inner,
  .nav-bar,
  .manifesto-inner,
  .pricing-compare-inner,
  .categories-inner,
  .page-center,
  .search-results {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ================================================================
   COFFEE CLUB PAGE
   ================================================================ */
@media (max-width: 600px) {
  .coffee-hero {
    padding: 48px 20px 40px !important;
  }

  .coffee-hero h1 {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }

  .coffee-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ================================================================
   STOCK MARKET PAGE
   ================================================================ */
@media (max-width: 600px) {
  .stock-ticker {
    font-size: 0.85rem !important;
    padding: 8px 0 !important;
  }

  .portfolio-grid,
  .stock-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ================================================================
   PARANORMAL PAGE
   ================================================================ */
@media (max-width: 600px) {
  .paranormal-hero {
    padding: 48px 20px 40px !important;
  }

  .paranormal-grid,
  .sightings-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}