/* patch-mobile-hamburger.css */
/* Mobile-first: cards visible; details available via hamburger menu */
/* Applies only on small screens to avoid disrupting desktop layout */
@media (max-width: 680px){
  .layout, .landing, .content, .container, .viewport, .row, .wrap {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Cards area on top */
  .cards, .card-stack, .vote-area, .swiper-container, [data-role="cards"] {
    order: 0 !important;
    max-height: 68vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 10px !important;
  }
  /* Details/menu becomes off-canvas sheet; starts hidden */
  .details, .meta, .info, .sidebar, .aside, [data-role="details"] {
    display: none;
  }
  /* Bottom sheet open state toggled by JS */
  .details.is-open, .meta.is-open, .info.is-open, .sidebar.is-open, .aside.is-open, [data-role="details"].is-open {
    display: block !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    max-height: 60vh;
    overflow: auto;
    background: #fff;
    box-shadow: 0 -16px 32px rgba(0,0,0,.15);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 12px;
    z-index: 1000;
  }
  /* Provide spacing so FAB doesn't overlap content */
  body { padding-bottom: 64px; }
  /* Hamburger floating button */
  #mobile-hamburger-toggle {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 0;
    background: #1A4E8A;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    z-index: 1100;
  }
  #mobile-hamburger-toggle .bars {
    display: inline-block;
    width: 24px; height: 2px; background:#fff; position: relative;
  }
  #mobile-hamburger-toggle .bars::before, #mobile-hamburger-toggle .bars::after {
    content:""; position:absolute; left:0; width:24px; height:2px; background:#fff;
  }
  #mobile-hamburger-toggle .bars::before { top:-7px; }
  #mobile-hamburger-toggle .bars::after  { top: 7px; }
}