/* ============================================================
   Solprime Studio — shared responsive layer
   Loaded AFTER each page's inline <style> so it can override.
   Currently scoped to the mobile-nav fix for pages that ship
   without their own hamburger (about + services/*). The hamburger
   markup is built at runtime by /js/mobile-nav.js.
   ============================================================ */

/* universal safety: nothing overflows the viewport horizontally */
img, svg, video, canvas, table { max-width: 100%; height: auto; }

/* hamburger is desktop-hidden by default */
.m-nav-toggle { display: none; }
.m-nav-panel { display: none; }

@media (max-width: 860px) {
  /* hide the desktop nav, reveal the hamburger */
  nav .nav-links,
  nav .nav-cta { display: none !important; }

  .m-nav-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px; height: 44px; margin-left: auto;
    padding: 0; border: 0; background: none; cursor: pointer; position: relative; z-index: 101;
  }
  .m-nav-toggle span {
    display: block; width: 24px; height: 2px; border-radius: 2px;
    background: var(--ink, #09090B); transition: transform .25s ease, opacity .2s ease;
  }
  .m-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .m-nav-toggle.open span:nth-child(2) { opacity: 0; }
  .m-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .m-nav-panel {
    display: block; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 95;
    background: var(--bg, #FAFAFA);
    border-top: 1px solid var(--border, #E4E4E7);
    padding: 18px 26px 40px;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .m-nav-panel.open { transform: translateX(0); }

  .m-nav-inner { display: flex; flex-direction: column; gap: 0; }
  .m-nav-inner a {
    font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--ink, #09090B); text-decoration: none;
    padding: 16px 2px; border-bottom: 1px solid var(--border, #E4E4E7);
  }
  .m-nav-inner a:active { opacity: .6; }
  .m-nav-inner a.m-nav-cta {
    margin-top: 22px; border: 0; border-radius: 12px; text-align: center;
    color: #fff; font-size: 16px; padding: 16px;
    background: var(--accent-g, linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%));
  }
}