/*
 * mobile-fixes.css — Weristo.com/hu Mobile UX Patches
 * Applies to: page.html
 * All rules wrapped in @media (max-width: 768px) unless global.
 * Reference: SUMMARY.md audit 2026-06-07
 */

/* ================================================================
   FIX 1 — HAMBURGER MENU (P1) — INTENTIONALLY OMITTED FROM DEPLOY
   The audit's hamburger pattern sets `header nav { display:none }` on
   mobile and only reveals it via `header nav.open`, which requires a
   `#navToggle` button + JS that are NOT present on the live landing page.
   Shipping the hide-rule alone would make the entire nav (logo links +
   login buttons) disappear on mobile with no way to reopen it — a
   regression. This block is therefore removed. To enable the drawer
   later, add the `#navToggle`/`#navClose` markup + toggle JS from
   SUMMARY.md first, then restore the original FIX 1 rules.
   ================================================================ */


/* ================================================================
   FIX 2 — INPUT FONT-SIZE ≥ 16px TO PREVENT iOS AUTO-ZOOM (P1)
   ================================================================ */

@media (max-width: 768px) {
  /* Registration form inputs */
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important;
  }

  /* Language native select in header */
  #langSelect {
    font-size: 16px !important;
  }

  /* Waitlist form inline inputs (override inline font-size:15px) */
  #waitlistForm input[type="text"],
  #waitlistForm input[type="email"] {
    font-size: 16px !important;
  }
}


/* ================================================================
   FIX 3 — TAP TARGETS ≥ 44px (P2)
   ================================================================ */

/* Pilot bar close button */
#pilotBar button {
  min-width: 44px;
  min-height: 44px;
  /* keep right/top positioning; just ensure tap area */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer links — add padding so they hit 44px */
@media (max-width: 768px) {
  .footer-links a {
    padding: 12px 8px;
    font-size: 14px;
  }

  .footer-links {
    gap: 4px;
  }
}

/* Industry buttons — increase tap height */
.ind-btn {
  min-height: 44px;
  padding: 10px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FAQ summary — ensure 44px tap area */
details summary {
  padding: 14px 16px;
  /* The parent `details` already has padding, but summary should own it */
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}

details summary::-webkit-details-marker { display: none; }

details summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

details[open] summary::after {
  transform: rotate(180deg);
}

/* Cookie consent button — increase tap height */
@media (max-width: 768px) {
  #cookie-banner button {
    padding: 12px 22px !important;
    font-size: 15px !important;
    min-height: 44px;
  }

  #cookie-banner {
    padding: 12px 16px !important;
    gap: 12px !important;
  }
}


/* ================================================================
   FIX 4 — STICKY BANNER STACKING (P2)
   Keep referral banner thin; compensate body top padding.
   ================================================================ */

@media (max-width: 768px) {
  /* Limit referral banner to a single line */
  #weri-ref-banner {
    font-size: 0.8em !important;
    padding: 8px 12px !important;
    line-height: 1.3;
  }

  /* Pilot bar: tighter on mobile */
  #pilotBar {
    font-size: 12px;
    padding: 8px 44px 8px 12px;
    line-height: 1.4;
  }
}


/* ================================================================
   FIX 5 — CTA BUTTON LEGIBILITY ON MOBILE (P3)
   ================================================================ */

@media (max-width: 768px) {
  .btn-primary,
  .btn-outline {
    font-size: 15px;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .actions {
    flex-direction: column;
    gap: 10px;
  }
}


/* ================================================================
   FIX 6 — APPSHOW-GRID: FIX ORPHANED 6TH CARD (P4)
   ================================================================ */

.appshow-grid {
  grid-template-columns: repeat(3, 1fr); /* was repeat(5,1fr) */
}

@media (max-width: 900px) {
  .appshow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .appshow-grid {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   FIX 7 — COUNTDOWN CELLS ON NARROW SCREENS (P4)
   Prevent 4 cells + 3 separators from overflowing 320px viewports.
   ================================================================ */

@media (max-width: 400px) {
  #cdGrid,
  #pcdGrid {
    gap: 4px !important;
  }

  .cd-cell {
    min-width: 60px !important;
    padding: 10px 4px 8px !important;
  }

  .cd-num {
    font-size: 24px !important;
  }

  .cd-sep {
    font-size: 24px !important;
  }

  .cd-label {
    font-size: 9px;
    letter-spacing: 1px;
  }
}


/* ================================================================
   FIX 8 — INDUSTRY GRID ON MOBILE (minor usability)
   3-column grid with 13px text in 1fr columns is too tight < 400px.
   ================================================================ */

@media (max-width: 420px) {
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ================================================================
   HOW TO APPLY  (FIX 1 omitted in this deployed copy — see note above)
   ------------------------------------------------------------------
   1. Add <link rel="stylesheet" href="/mobile-fixes.css"> in <head>
      AFTER the existing <style> block.

   2. (NOT DONE in this deploy) For FIX 1 (hamburger), also add to the HTML:

      Inside <header>, after <a class="logo">:
        <button id="navToggle" aria-label="Menü megnyitása">☰</button>

      At the top of <nav>:
        <button id="navClose" aria-label="Menü bezárása">×</button>

      Add this small script before </body>:
        <script>
          document.getElementById('navToggle').addEventListener('click', function() {
            document.querySelector('header nav').classList.toggle('open');
            document.body.style.overflow =
              document.querySelector('header nav').classList.contains('open') ? 'hidden' : '';
          });
          document.getElementById('navClose').addEventListener('click', function() {
            document.querySelector('header nav').classList.remove('open');
            document.body.style.overflow = '';
          });
        </script>
   ================================================================ */