/* ==========================================================================
   calltrading.net — responsive fix layer
   Created 2026-11-13.  Loaded last in includes/header.php so it wins over
   assets/css/style.css.  Backup: /root/brands-responsive-20261113-*/RESTORE.sh
   ========================================================================== */

/* never let media/embeds push the layout wider than the viewport */
img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; }

/* --------------------------------------------------------------------------
   1. Tablet / small laptop (801-1100px):
      the desktop menu used to wrap into two rows inside a fixed 76px header
      and stuck to the very top edge.  Use the existing hamburger instead.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav { height: 64px !important; padding: 0 !important; align-items: center !important; position: relative; }
  .menu-toggle { display: flex !important; }

  .menu {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    width: 100%;
    margin: 0;
    padding: 12px;
    background: rgba(4, 11, 20, .99);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
    z-index: 100;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-height: calc(100vh - 66px);
    max-height: calc(100dvh - 66px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu.open { display: flex !important; }
  .menu > * { flex-shrink: 0; }
  .menu a { display: block; width: 100%; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: 15px; }
  .menu a.btn { display: flex; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #02101b !important; }
}

/* --------------------------------------------------------------------------
   2. Phones (<=480px): tighter gutters, readable headings, 44px tap targets
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .wrap { width: 94%; }
  h1 { font-size: 30px !important; line-height: 1.12; }
  h2 { font-size: 25px; }
  h3 { font-size: 20px; }
  .hero { padding: 28px 0 !important; }
  .section { padding: 30px 0 !important; }
  .card, .hero-card, .panel { padding: 18px; border-radius: 16px; }
  .btn { min-height: 44px; padding: 12px 18px; }
  .badge { font-size: 12px; }
  .footer { padding: 26px 0 !important; }
  .footer-grid { gap: 14px; }
  .footer-links { gap: 10px 14px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 32px; }
  .form-card { margin: 18px auto; padding: 16px; }
  .tabs a { padding: 10px 12px; font-size: 13px; }
}