/* =====================================================================
   nav-fix.css · header + menu fix for phones, foldables and iPads
   Load this LAST on every page (after redesign.css).
   - Below 1200px: one clean row → logo · Start a Project · menu button.
     Nothing is absolutely positioned, so nothing can overlap.
   - The menu opens as a compact grid of big tap targets (2 columns on
     phones, 4 on tablets / unfolded foldables) instead of a long column.
   - 1200px and up: the normal full desktop menu.
   ===================================================================== */

@media screen and (max-width: 1199px) {
  .mainHeading {
    padding: 10px max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)) !important;
  }
  .mainHeading .container {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px;
    min-height: 0;
    padding: 10px 12px !important;
    border-radius: 20px !important;
  }

  /* logo + name: takes the free space, shrinks first */
  .mainHeading .mainLogo {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px;
  }
  .mainHeading .mainLogo img {
    height: 56px !important;
    width: auto;
    flex: 0 0 auto;
  }
  .mainHeading .mainLogo .brand-title {
    display: inline !important;
    min-width: 0;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* "Start a Project" sits in the row, never under the menu button */
  .mainHeading .header-actions {
    order: 2;
    flex: 0 0 auto;
    margin: 0 !important;
    position: static !important;
  }
  .mainHeading .header-actions .header-cta {
    display: inline-flex !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  .mainHeading .header-cta__long { display: inline !important; }
  .mainHeading .header-cta__short { display: none !important; }

  /* menu button: in the row, not floating on top of things */
  .mainHeading .nav-toggle {
    order: 3;
    position: static !important;
    display: inline-flex !important;
    flex: 0 0 44px;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  /* the menu itself */
  .mainHeading .site-nav.primary-nav {
    order: 4;
    flex-basis: 100%;
    display: none !important;
  }
  body.nav-open .mainHeading .site-nav.primary-nav {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100%;
    max-width: none !important;
    margin: 2px 0 0 !important;
    padding: 10px !important;
    border-radius: 16px;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  body.nav-open .mainHeading .site-nav.primary-nav ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.nav-open .mainHeading .site-nav.primary-nav li { min-width: 0; }
  .mainHeading .site-nav.primary-nav ul li a {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 52px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-align: left;
    white-space: normal !important;
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(124, 58, 237, 0.14) !important;
    border-radius: 14px !important;
  }
  .mainHeading .site-nav.primary-nav ul li a::before { flex: 0 0 20px; }
  .mainHeading .site-nav.primary-nav ul li a.is-active,
  .mainHeading .site-nav.primary-nav ul li.active a {
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.18), rgba(168, 85, 247, 0.10)) !important;
    border-color: rgba(124, 58, 237, 0.32) !important;
    color: var(--fast-ink) !important;
  }
}

/* tablets, iPads and unfolded foldables: 4 columns */
@media screen and (min-width: 600px) and (max-width: 1199px) {
  body.nav-open .mainHeading .site-nav.primary-nav ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* phones: hide the name, short button text */
@media screen and (max-width: 480px) {
  .mainHeading .mainLogo .brand-title { display: none !important; }
  .mainHeading .header-cta__long { display: none !important; }
  .mainHeading .header-cta__short { display: inline !important; }
  .mainHeading .header-actions .header-cta { padding: 10px 14px !important; }
}

/* very narrow (folded phones' outer screen) */
@media screen and (max-width: 360px) {
  .mainHeading .container { gap: 8px; padding: 8px 10px !important; }
  .mainHeading .mainLogo img { height: 48px !important; }
  .mainHeading .header-actions .header-cta { padding: 8px 12px !important; font-size: 13px !important; }
}