/* Mobile-only styles for myhotail.
   Two rules, both load-bearing:
   1. Every declaration lives inside a max-width media query. Nothing here can
      apply at desktop width, so desktop rendering is untouched by construction.
   2. Selectors are prefixed with `html` so they outrank the inline <style>
      blocks that appear later in the document (some as late as line 2679).
      No !important, except where an inline style attribute must be beaten -
      only #lang-btn and #lang-dd, which carry style="" written into the markup. */


/* The site nav is fixed at z-index 1000, so a drawer below that renders
   underneath it - the close button ends up hidden behind the nav pill.
   Backdrop 1200 / drawer 1210 clears it.

   ══ Nav drawer (<= 860px) ══════════════════════════════════════════════
   The desktop nav needs 685px of content; below ~860px it is cramped, and by
   390px four items including the primary CTA are pushed off-screen. */
@media (max-width: 860px) {
  /* .nav-login is a sibling of .nav-links, not a child, so hiding the list
     alone leaves "Log in" occupying ~60px in the bar. All three live in the
     drawer instead. !important is required for #lang-btn / #lang-dd, which
     carry inline style="display:..." that no selector can outrank. */
  html .nav-links,
  html .nav-login,
  html #lang-btn,
  html #lang-dd { display: none !important; }

  html .nav-pill { padding-right: 6px; padding-left: 14px; gap: 4px; }
  html .nav-cta { padding: 9px 13px; font-size: .8rem; white-space: nowrap; }

  html .mnav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-height: 44px; padding: 0; margin-left: 2px;
    background: none; border: 0; border-radius: 12px;
    color: #09090F; cursor: pointer;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  }
  html .mnav-toggle:active { transform: scale(.92); }
  html .mnav-toggle:focus-visible { outline: 2px solid #005F6F; outline-offset: 2px; }

  html .mnav-backdrop {
    position: fixed; inset: 0; z-index:  1200;
    background: rgba(8,8,12,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  html body.mnav-open .mnav-backdrop { opacity: 1; pointer-events: auto; }

  html .mnav-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index:  1210;
    width: min(84vw, 340px);
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: -18px 0 50px rgba(8,8,12,.16), -2px 0 8px rgba(8,8,12,.06);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
  }
  html body.mnav-open .mnav-drawer { transform: translateX(0); }
  html body.mnav-open { overflow: hidden; }

  html .mnav-close {
    align-self: flex-end;
    width: 44px; height: 44px; min-height: 44px;
    background: none; border: 0; border-radius: 12px;
    color: #09090F; cursor: pointer;
  }
  html .mnav-close:focus-visible { outline: 2px solid #005F6F; outline-offset: 2px; }

  html .mnav-drawer a {
    display: flex; align-items: center; min-height: 48px;
    padding: 4px 8px; border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
    color: #09090F; text-decoration: none;
  }
  html .mnav-drawer a:hover { background: rgba(0,95,111,.06); }
  html .mnav-drawer a:focus-visible { outline: 2px solid #005F6F; outline-offset: -2px; }

  html .mnav-sep { height: 1px; background: #ececec; margin: 10px 2px; }

  html .mnav-langs { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 4px; }
  html .mnav-drawer .mnav-langs a {
    min-height: 44px; min-width: 46px; justify-content: center;
    padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 10px;
    font-size: .82rem; font-weight: 700; color: rgba(8,8,12,.6);
  }
  html .mnav-drawer .mnav-langs a[aria-current="true"] {
    background: rgba(0,95,111,.08); border-color: rgba(0,95,111,.25); color: #005F6F;
  }

  html .mnav-drawer .mnav-cta {
    margin-top: 12px; min-height: 52px; justify-content: center;
    border-radius: 100px; color: #fff;
    background: linear-gradient(135deg,#003D4A 0%,#005F6F 100%);
    box-shadow: 0 4px 18px rgba(0,95,111,.28);
  }
  html .mnav-drawer .mnav-cta:hover { background: linear-gradient(135deg,#003D4A 0%,#005F6F 100%); }
}

/* Below 480px the full label plus the hamburger overflow a 390px viewport by
   ~70px even after shrinking. Swap the label via CSS using the [lang] attribute
   the page already carries - restructuring the markup to hold two labels moved
   the arrow out of the CTA flex row on desktop, a regression this file must not
   cause. CSS-only keeps the markup byte-identical to what desktop ships. */
@media (max-width: 480px) {
  html .nav-pill { padding-left: 12px; padding-right: 4px; gap: 2px; }
  html .mnav-toggle { width: 40px; min-width: 40px; margin-left: 0; flex: 0 0 auto; }
  html .nav-cta svg { display: none; }
  html .nav-cta { font-size: 0; padding: 9px 14px; }
  html .nav-cta::before {
    content: 'Free scan';
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .8rem; font-weight: 700; letter-spacing: -.01em;
  }
  html[lang='de'] .nav-cta::before { content: 'Gratis-Scan'; }
  html[lang='es'] .nav-cta::before { content: 'Escaneo gratis'; }
  html[lang='fr'] .nav-cta::before { content: 'Scan gratuit'; }
  html[lang='it'] .nav-cta::before { content: 'Scan gratuito'; }
}

/* Drawer chrome must never show on desktop. */
@media (min-width: 861px) {
  html .mnav-toggle,
  html .mnav-drawer,
  html .mnav-backdrop { display: none; }
}



/* ══ Layout (<= 768px) ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hero search: 3 columns at 390px squeezes each field to ~100px and
     truncates the placeholder mid-word. Stack to full-width rows. */
  html .hero-search-row {
    flex-direction: column; align-items: stretch;
    gap: 8px; padding: 10px; border-radius: 20px;
  }
  html .hero-field {
    width: 100%; padding: 10px 14px; border-radius: 14px;
    background: rgba(0,0,0,.02);
  }
  html .hero-field + .hero-field { border-left: 0; }
  /* 16px prevents iOS Safari zooming the page on focus. */
  html .hero-search-row input { width: 100%; font-size: 16px; }
  html .hero-search-btn {
    width: 100%; justify-content: center; min-height: 52px; font-size: .95rem;
  }

  /* Tap targets. 44px is the Apple HIG minimum.
     min-height has no effect on a non-replaced inline box, and <a> is inline by
     default - so link targets need a block-ish display to grow at all. Applied
     to standalone links (nav, footer, lists), NOT to links inside running text,
     which would break mid-sentence line wrapping. */
  html button, html input, html select, html textarea { min-height: 44px; }

  html footer a,
  html nav a,
  html .mnav-drawer a {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* Inline pills and badges whose design breaks at 44px. */
  html .trust-badge,
  html .hero-scans .lbl,
  html .tp-tier,
  html .vs-label,
  html footer .no-brand-color { min-height: 0; }

  html input, html textarea, html select { font-size: 16px; }

  /* Body copy floor of 14px. Uppercase micro-labels are deliberately excluded:
     they depend on small size plus wide letter-spacing and break if bumped. */
  html .tp-desc,
  html .tp-feat,
  html .faq-a-inner,
  html .faq-a-inner p,
  html .cmp-text,
  html .vs-desc { font-size: max(14px, 1em); }

  /* Comparison table keeps horizontal scroll, but the feature column pins so
     the row label stays visible while swiping across tiers. Without this you
     swipe to Pro and see a checkmark with no idea what it refers to. */
  html .cmp-table-wrap { position: relative; -webkit-overflow-scrolling: touch; }
  html .cmp-table-wrap::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.9));
    pointer-events: none;
  }
  html .cmp-table th:first-child,
  html .cmp-table td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: #fff; box-shadow: 1px 0 0 #f0f0f0;
  }
  html .cmp-table thead th:first-child { z-index: 3; }

  /* Add-ons table has the same problem now that the Price column is shown: at
     390px the first price sits ~360px in, past the 344px the wrapper can show,
     so every price is off-screen with nothing indicating the table scrolls. */
  html .ao-table-wrap { position: relative; -webkit-overflow-scrolling: touch; }
  html .ao-table-wrap::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.9));
    pointer-events: none;
  }
  html .ao-table th:first-child,
  html .ao-table td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: #fff; box-shadow: 1px 0 0 #f0f0f0;
  }
  html .ao-table thead th:first-child { z-index: 3; }

  /* The final CTA row is flex with nowrap, so at 390px the second button ran
     past the viewport and was clipped by body - 48px in English, 122px in
     German. Allowing the row to wrap puts it on its own line instead. */
  html .final-cta-btns { flex-wrap: wrap; justify-content: center; }

  /* iOS Safari zooms the whole page when a focused field is under 16px. The
     hero search inputs were already set to 16px; the contact, audit and
     onboarding fields were missed and still sat at 14.7-15.2px.
     Matching on input[type=...] missed fields with no type attribute, which
     default to text and zoom just the same - hence the :not() list, which
     excludes only the controls that never receive typed input.
     !important is needed because the page-level rules are class-based
     (.field textarea and similar), which outrank any element selector here. */
  html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]),
  html select,
  html textarea { font-size: 16px !important; }

  /* "or schedule a 20-min call" was a 23px tap target. min-height does nothing
     on an inline box, so it needs a block-ish display to grow at all. */
  html .schedule-cta {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html .mnav-drawer,
  html .mnav-backdrop,
  html .mnav-toggle { transition: none; }
}