/* ============================================================================
   EyalSec public site -- mobile layer
   ----------------------------------------------------------------------------
   Loaded AFTER each page's own <style> block, which is where `.nav .lk .hide-sm
   {display:none}` is declared. A media query adds no specificity, so this file
   can only win by coming later in the document.

   The defect this replaces: below 640px the nav links were simply set to
   display:none with nothing to reveal them, so Pricing / Docs / Security /
   Contact were unreachable on a phone. They are now the contents of a real
   menu behind the hamburger -- the same destinations, one tap away.
   ========================================================================== */

.site-menu-btn { display: none; }

@media (max-width: 640px) {

  .nav { position: relative; }

  .site-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line, #2a2c27);
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
  }
  .site-menu-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

  /* The link strip becomes the dropdown panel itself, so every destination the
     desktop nav shows is inside it -- including Login / Start free, which were
     never hidden but belong with the rest once the nav collapses. */
  .nav .lk {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
    padding: 6px;
    background: var(--bg, #12130f);
    border: 1px solid var(--line, #2a2c27);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
  }
  body.site-menu-open .nav .lk { display: flex; }

  /* Undo the deletion. These are ordinary rows of the menu now. */
  .nav .lk .hide-sm { display: flex !important; }

  .nav .lk a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    margin: 0;
    font-size: 15px;
  }
  .nav .lk a + a { border-top: 1px solid var(--line, #2a2c27); }
}

@media (max-width: 900px) {

  /* Public form controls: the contact topic select measured 277x43 -- one pixel
     under the floor, which is exactly the kind of miss a human eye passes and
     an audit does not. 16px also keeps iOS from zooming on focus. */
  .site-form select,
  .site-form input,
  .site-form textarea,
  form select,
  form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form input[type="search"],
  form textarea {
    min-height: 44px;
    font-size: 16px;
  }
  form button,
  form input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
  form input[type="checkbox"],
  form input[type="radio"] {
    min-height: 0;
    width: 20px;
    height: 20px;
  }

  /* /docs: .docs-body is capped at 72ch, which at 16.5px is ~963px. The page
     already drops the cap at 820px, but the column it sits in was still laid
     out at 963 and the body stretched to it, so the whole document scrolled
     sideways at 768. Pin the measure to the viewport instead. */
  .docs-layout,
  .docs-body,
  .docs-toc {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .docs-body { width: 100% !important; }
  .docs-body h1,
  .docs-body h2,
  .docs-body h3 { overflow-wrap: anywhere; }
}

@media (max-width: 640px) {

  /* Markdown tables become labelled cards. The class and the data-label values
     are applied by site-mobile.js from each table's own <th> row -- see the
     comment there for why they cannot come from the template. */
  .site-tbl--stack { position: relative; }
  .site-tbl--stack thead {
    display: block;          /* see mobile.css: overflow ignores table-header-group */
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
  }
  .site-tbl--stack,
  .site-tbl--stack tbody { display: block !important; width: 100% !important; }
  .site-tbl--stack tr {
    display: block !important;
    border: 1px solid var(--line, #2a2c27);
    border-radius: 6px;
    margin: 0 0 10px;
    padding: 4px 0;
  }
  .site-tbl--stack td {
    display: block !important;
    position: relative;
    padding: 8px 12px 8px 42% !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: left !important;
  }
  .site-tbl--stack td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    top: 9px;
    width: 34%;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .65;
  }
  .site-tbl--stack td:not([data-label]) { padding-left: 12px !important; }
  .site-tbl--stack td:not([data-label])::before { content: none; }
}